feat: new authenticate UI (#12172)

* enhance(ui): login form

* enhance(ui): add localization support with translate and locale management

* enhance(ui): WIP implement new authentication forms with context management

* enhance(ui): add password visibility toggle to input row

* enhance(ui): adjust padding for password visibility toggle

* enhance(i18n): implement internationalization support for authentication UI

* enhance(ui): implement sign in and sign up functionality with loading state

* enhance(ui): add session management and error handling in login form

* enhance(ui): add confirm code form and enhance authentication flow

* enhance(ui): improve sign-in flow and confirm code handling

* enhance(ui): add warning variant to alerts and improve error handling

* enhance(ui): implement countdown timer for code resend functionality

* enhance(ui): implement countdown timer for password reset and enhance login flow

* enhance(ui): export authentication and enhance UI components

* enhance(ui): integrate new login component and refresh token handling

* chore: clear amplify related codes

* enhance(i18n): normalize language codes and update locale handling

* enhance(auth): add multilingual support for signup and password reset flows

* enhance(ui): update login styles to inherit text color

* enhance(ui): adjust input color variables for improved accessibility

* enhance(auth): add password policy validation and tips in multiple languages

* enhance(ui): improve localization handling and update alert styles

* enhance(mobile): enhance login modal styling and accessibility

* fix(ui): update password validation regex for special characters

* enhance(ui): add padding to card header in login dialog

---------

Co-authored-by: Tienson Qin <tiensonqin@gmail.com>
This commit is contained in:
Charlie
2025-10-28 16:55:43 +08:00
committed by GitHub
parent 5b35a9ee49
commit a0a19a91fa
27 changed files with 2365 additions and 251 deletions

View File

@@ -1,126 +1,38 @@
.cp__user-login {
[data-amplify-authenticator] [data-amplify-router] {
--amplify-components-authenticator-router-background-color: var(--ls-primary-background-color);
--amplify-components-field-label-color: var(--ls-primary-text-color);
--amplify-components-authenticator-router-border-color: var(--ls-border-color);
--amplify-components-tabs-item-color: var(--ls-primary-text-color);
--amplify-components-tabs-item-active-color: var(--ls-primary-text-color);
--amplify-components-tabs-item-hover-color: var(--ls-primary-text-color);
--amplify-components-tabs-item-active-border-color: var(--ls-tertiary-background-color);
--amplify-components-tabs-border-width: 0;
--amplify-components-authenticator-state-inactive-background-color: var(--ls-tertiary-background-color);
--amplify-components-tabs-item-active-background-color: var(--ls-primary-background-color);
--amplify-components-button-border-color: var(--ls-border-color);
--amplify-components-textfield-border-color: var(--ls-border-color);
--amplify-components-button-primary-background-color: var(--color-indigo-600);
--amplify-components-text-color: var(--ls-primary-text-color);
--amplify-components-button-hover-background-color: var(--ls-primary-background-color);
--amplify-components-button-border-width: 0;
--amplify-internal-button-loading-background-color: var(--ls-header-button-background);
--amplify-components-authenticator-router-border-width: 1px;
--amplify-components-button-color: var(--ls-primary-text-color);
--amplify-components-divider-label-background-color: var(--ls-primary-background-color);
--amplify-components-divider-label-color: var(--ls-primary-text-color);
--amplify-components-heading-color: var(--ls-primary-text-color);
--amplify-components-button-link-hover-background-color: transparent;
--amplify-components-button-link-active-background-color: transparent;
--amplify-components-textfield-color: var(--ls-primary-text-color);
--amplify-components-checkbox-icon-background-color: var(--color-indigo-600);
span.opacity-50, a.opacity-60 {
@apply opacity-80;
}
[data-amplify-authenticator] [data-amplify-router] {
@apply overflow-hidden rounded-[6px] shadow-2xl;
p {
@apply text-[inherit];
}
[data-amplify-authenticator] [data-amplify-container] {
place-self: unset;
}
.ui__alert {
@apply bg-red-300 dark:border-red-800 dark:bg-red-800/90 dark:text-red-200;
[data-amplify-authenticator] [data-amplify-form] {
@apply px-4 py-2;
svg {
@apply dark:text-red-200;
}
@screen sm {
@apply px-6 py-4;
&-description {
@apply -mb-3;
}
}
}
@media (min-width: 30rem) {
[data-amplify-authenticator] [data-amplify-container] {
width: 100%;
}
}
.ui__dialog-content[label=user-login] {
@apply flex items-center top-0 p-0 border-none w-auto;
@apply flex items-center top-0 px-6 pt-0 w-auto;
.ui__card-header {
@apply pb-7;
}
.ui__dialog-main-content {
@apply p-0 min-w-fit relative max-w-[600px] sm:max-w-[90vw] sm:w-[500px];
@apply p-0 w-[70vw] relative max-w-[500px] sm:w-[440px];
}
.ui__modal-close-wrap {
@apply z-10 top-[4px];
}
}
.cp__user {
&-login {
::placeholder {
color: var(--ls-primary-text-color);
opacity: .3;
}
[data-indicator-position=top] > .amplify-tabs-item {
margin-top: 0;
}
.amplify-tabs-item {
transition: none;
&:focus {
color: var(--ls-primary-text-color);
}
&:hover {
opacity: .9;
}
}
.amplify-field-group {
@apply relative;
.amplify-button {
color: var(--ls-primary-text-color);
&:active, &:hover, &:focus {
background-color: transparent;
}
}
}
.amplify-field-group__outer-end {
@apply absolute right-0 top-0 bottom-0;
}
.amplify-input {
border-radius: 4px !important;
}
.amplify-checkboxfield {
@apply text-sm;
.amplify-field__error-message {
color: var(--ls-primary-text-color);
opacity: .4;
}
}
.amplify-text--error {
color: var(--ls-error-text-color);
}
}
}
.federated-sign-in-container {
display: none;
}