mirror of
https://github.com/logseq/logseq.git
synced 2026-05-01 09:26:28 +00:00
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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user