-
Notifications
You must be signed in to change notification settings - Fork 37
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implement settings profile pages #4704
Merged
louischan-oursky
merged 114 commits into
authgear:main
from
cychiuae:authui-v2-settings-profile
Sep 6, 2024
Merged
Changes from 112 commits
Commits
Show all changes
114 commits
Select commit
Hold shift + click to select a range
3450199
Scaffold profile edit handler
cychiuae 77be9d5
Handle save attributes
cychiuae b52f60f
Align auth ui v2 handlers' name
cychiuae 31a6633
Scaffold v2 settings profile page
cychiuae c3b315d
Render settings profile navbar
cychiuae a37b26b
Implement user profile pic component
cychiuae 1218d86
Render user profile pic
cychiuae 880340a
Show user's name
cychiuae 9a14bd4
Show user's gender
cychiuae e4e79c5
Show user's birthdate
cychiuae 146ccfa
Show user's timezone
cychiuae ca89ee7
Show user's language
cychiuae d98624c
Show user's address
cychiuae 8f6703b
Navigate to edit page
cychiuae 8b05cea
Use settings item to render profile item
cychiuae 29f1f6f
Generate material icons
cychiuae bc2ac5f
Use printf
cychiuae a7a2520
Provide zh-HK and zh-TW translations
cychiuae c30cb5f
Fix send more content than declared in content length
cychiuae 6f56c83
Generate material icons
cychiuae 1caf68d
Route to settings profile gender edit
yyorkchan 2befbc9
Introduce radio component
yyorkchan 779892e
Introduce gender select page
yyorkchan db25b9a
Make gender page mobile responsive
yyorkchan a625468
Seperate radio custom input as param
yyorkchan e3c410e
Remove duplicate translation & Use new translation for save btn
yyorkchan eb1a85d
Sort translation
cychiuae d9133be
Fix indentation
cychiuae 5e7438c
Rename radio.css -> settings-radio.css
cychiuae 7664902
Use turbo to submit form
cychiuae 2314275
Use a better abstraction to render extra content
cychiuae a053790
Fix wire generation after rebase onto authgear/main
cychiuae 4860282
Scaffold edit name page
cychiuae 31b70e1
Configure edit name page navbar
cychiuae 4881d46
Add settings text input
cychiuae fcc37fd
Implement edit name form
cychiuae 1d651ec
Fix missing back button in edit name page
cychiuae bd7d194
Provide translation
cychiuae ae1592b
Amend translation key in edit gender page
cychiuae 9c4aa68
Create localeInput handler TS
Kuixz 327d9ce
Create edit locale HTML
Kuixz bd0369d
Rename typo variable
Kuixz a14e160
Add css to locale input
Kuixz 196b28b
Register locale editor in central edit router
Kuixz 6385f1e
Fix localization
Kuixz 70cccd4
Add media query for responsive gap
Kuixz 688bcc3
Switch errant templates to translates
Kuixz 43e3a3f
Fix indentation / extraneous HTML
Kuixz 851d878
Fix typo leads to compilation error
cychiuae f7dd6ad
Clean up template indentation
cychiuae 2838396
Refactor locale input
cychiuae bd3aae3
Remove settings profile editor styles
cychiuae 2dbab81
Provide zhhk zhtw translation
cychiuae 76eb206
Scaffold edit timezone page
cychiuae f1e93d6
Render edit timezone page navbar
cychiuae 71041d6
Make timezone json marshal-able
cychiuae e182e6a
Fix phone input lose focus when closing country picker
cychiuae 5b4da99
Implement time zone input
cychiuae 21ed154
Implement edit zoneinfo form
cychiuae 846dfc2
Show current user timezone
cychiuae b443a61
Fix missing back title in back button
cychiuae 324cdab
Hide back title in mobile layout
cychiuae 030b3ca
Fix navbar styles in mobile view
cychiuae 9682238
Re-layout settings profile pages
cychiuae d23fb2a
Generate translation for zhhk and zhtw
cychiuae 06785f5
Create date input HTML
Kuixz 9a0b2cb
Add CSS to date input
Kuixz b429f1a
Localize label of date input
Kuixz 255eb3e
Register birthdate editor under central router.go
Kuixz 942dc26
Add media query for responsive gap
Kuixz b443c2f
Add newline and remove extraneous attributes from date input
Kuixz c96e220
Reuse existing styles
Kuixz a9692c8
Remove extraneous in edit birthdate
Kuixz 6e8bbb6
Update edit birthdate page
cychiuae cf5cf26
Add translation for zhhk and zhtw
cychiuae 9940a0b
Rename settings_gender_edit -> settings_profile_edit_gender
cychiuae f4cd853
Add permission check to edit profile attribute
cychiuae 8f96088
Refactor Dialog for reusability
yyorkchan 705d669
Route to settings profile picture edit
yyorkchan 0cc9d28
Introduce profile picture html and style
yyorkchan de97e2c
Import image picker into authflowv2
yyorkchan 37458cb
Introduce Completed profile picture page
yyorkchan 22d0af6
Make dialog classname customizable
yyorkchan 27c29e6
Sort settings profile edit template order by template name
yyorkchan 75fcde0
Update navbar
yyorkchan 8bb6140
move dialog btn class as dialog-close-btn template base class
yyorkchan c022f67
Scaffold edit address page
cychiuae 197b0ce
Scaffold country input component
cychiuae e1eaf10
Fix previous select input styles
cychiuae 4a029d3
Implement country input
cychiuae 3cec4ab
Replace all select inputs with a generic select input
cychiuae 1fc3517
Implement address form
cychiuae 9ad37e2
Modify v2.page.settings.default.button-label-and-more taking item input
yyorkchan 004685f
Generate translations
cychiuae 4b61461
Run translation linter
cychiuae 8f52182
Fix accidentally removed set aria-expanded
cychiuae 07ecadf
Remove timezone json serialization
cychiuae f176e0d
Update translation keys format
cychiuae 5a9609f
Fix gender input styles
cychiuae 2116404
Fix select box selected item text color in dark mode
cychiuae 558d1c7
Fix date input calendar icon color in dark mode
cychiuae e12ef3d
Adopt vite for build
cychiuae 26675e3
Fix targetting wrong layer
cychiuae ad41abd
Create specific tailwind token for profile pic edit button
cychiuae 645959e
Use specific translation keys for `Not provided`
cychiuae ede59fd
Fix edit button position in rtl
cychiuae 854d688
Fix arrow icon in rtl
cychiuae 4e10cc9
Change edit gender screen title translation key
cychiuae 30f1b89
Fix cannot show custom gender
cychiuae 4fd9fc4
Fix cannot render date calendar icon in light mode
cychiuae 971466c
Fix settings item alignment in rtl
cychiuae c77b787
Fix showing wrong gender when switch from a specific gender to custom…
cychiuae 8d609fc
Use unset instead of empty value
cychiuae 84790d3
Run translation linter
cychiuae File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
@layer components { | ||
:root { | ||
--date-input--calendar-icon-filter:; | ||
} | ||
:root.dark { | ||
--date-input--calendar-icon-filter: invert(100%); | ||
} | ||
.date-input { | ||
&::-webkit-calendar-picker-indicator { | ||
filter: var(--date-input--calendar-icon-filter); | ||
height: 1.5rem; | ||
width: 1.5rem; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,6 +9,13 @@ | |
--navbar__title-line-height: var(--typography-title-large__line-height); | ||
--navbar__title-text-color: var(--color-neutral-700); | ||
|
||
--navbar__title--mobile-font-family: var(--navbar__title-font-family); | ||
--navbar__title--mobile-font-size: 1.125rem; | ||
--navbar__title--mobile-font-weight: var(--navbar__title-font-weight); | ||
--navbar__title--mobile-letter-spacing: var(--navbar__title-letter-spacing); | ||
--navbar__title--mobile-line-height: var(--navbar__title-line-height); | ||
--navbar__title--mobile-text-color: var(--navbar__title-text-color); | ||
|
||
--navbar__item-font-family: var(--typography-label-large__font-family); | ||
--navbar__item-font-size: var(--typography-label-large__font-size); | ||
--navbar__item-font-weight: var(--typography-label-large__font-weight); | ||
|
@@ -33,12 +40,21 @@ | |
} | ||
|
||
.navbar__title { | ||
color: var(--navbar__title-text-color); | ||
font-family: var(--navbar__title-font-family); | ||
font-size: var(--navbar__title-font-size); | ||
font-weight: var(--navbar__title-font-weight); | ||
letter-spacing: var(--navbar__title-letter-spacing); | ||
line-height: var(--navbar__title-line-height); | ||
color: var(--navbar__title--mobile-text-color); | ||
font-family: var(--navbar__title--mobile-font-family); | ||
font-size: var(--navbar__title--mobile-font-size); | ||
font-weight: var(--navbar__title--mobile-font-weight); | ||
letter-spacing: var(--navbar__title--mobile-letter-spacing); | ||
line-height: var(--navbar__title--mobile-line-height); | ||
|
||
@media (min-width: theme("screens.tablet")) { | ||
color: var(--navbar__title-text-color); | ||
font-family: var(--navbar__title-font-family); | ||
font-size: var(--navbar__title-font-size); | ||
font-weight: var(--navbar__title-font-weight); | ||
letter-spacing: var(--navbar__title-letter-spacing); | ||
line-height: var(--navbar__title-line-height); | ||
} | ||
|
||
@apply absolute inset-0; | ||
@apply flex justify-center items-center; | ||
|
@@ -53,9 +69,12 @@ | |
font-weight: var(--navbar__item-font-weight); | ||
letter-spacing: var(--navbar__item-letter-spacing); | ||
line-height: var(--navbar__item-line-height); | ||
} | ||
|
||
.navbar__item_icon { | ||
font-size: var(--navbar__item-icon-font-size); | ||
&::before { | ||
/* arrow_back_ios (<) in ltr and arrow_forward_ios (>) in rtl */ | ||
@apply ltr:content-['arrow\_back\_ios'] rtl:content-['arrow\_forward\_ios']; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
@apply material-icons; | ||
font-size: var(--navbar__item-icon-font-size); | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
@layer components { | ||
:root { | ||
--select-input__font-size: var(--typography-body-large__font-size); | ||
|
||
--select-input__placeholder_color: var(--color-neutral-200); | ||
--select-input__trigger-ring-color: var(--color-neutral-100); | ||
--select-input__trigger-ring-color--focus: var( | ||
--color-primary-theme-primary | ||
); | ||
--select-input__trigger-ring-color--error: var(--color-error); | ||
--select-input__trigger-ring-width: var(--border-width-regular); | ||
--select-input__trigger-ring-width--focus: var( | ||
--border-width-regular--active | ||
); | ||
--select-input__trigger-border-radius: calc( | ||
var(--select-input__font-size) * 14 / 16 | ||
) | ||
/* 14 / 16 ratio to font size */; | ||
--select-input__trigger-padding: 1em; | ||
} | ||
|
||
:root.dark { | ||
--select-input__text-color: var(--color-neutral-100); | ||
--select-input__trigger-ring-color: var(--color-neutral-500); | ||
} | ||
|
||
.select-input__trigger { | ||
@apply flex justify-between items-center; | ||
color: var(--select-input__text-color); | ||
padding: var(--select-input__trigger-padding); | ||
border-radius: var(--select-input__trigger-border-radius); | ||
@apply ring-inset | ||
ring-[length:var(--select-input\_\_trigger-ring-width)] | ||
ring-[color:var(--select-input\_\_trigger-ring-color)]; | ||
|
||
&:focus { | ||
@apply ring-inset | ||
ring-[length:var(--select-input\_\_trigger-ring-width--focus)] | ||
ring-[color:var(--select-input\_\_trigger-ring-color--focus)]; | ||
} | ||
|
||
&::after { | ||
@apply material-icons; | ||
content: "arrow_forward_ios"; | ||
font-size: 1.125rem; | ||
@apply rotate-90; | ||
} | ||
|
||
&.custom-select__trigger-no-value { | ||
color: var(--select-input__placeholder_color); | ||
} | ||
|
||
&.select__trigger--expanded { | ||
&::after { | ||
@apply -rotate-90; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
@layer components { | ||
:root { | ||
--settings-content__width: 21.5625rem; | ||
} | ||
|
||
.settings-content { | ||
@media (min-width: theme("screens.tablet")) { | ||
margin: 0 auto; | ||
width: var(--settings-content__width); | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
: initial
or: unset
? Empty seems weird.