diff --git a/components/brave_account/resources/BUILD.gn b/components/brave_account/resources/BUILD.gn index 067b1f0eaa7..f6fdf0f743a 100644 --- a/components/brave_account/resources/BUILD.gn +++ b/components/brave_account/resources/BUILD.gn @@ -47,12 +47,10 @@ build_webui("build") { css_files = [ "brave_account_common.css", "brave_account_dialog.css", - "brave_account_email_input.css", "brave_account_entry_dialog.css", "brave_account_forgot_password_dialog.css", "brave_account_otp_input.css", "brave_account_password_icons.css", - "brave_account_password_input.css", "brave_account_password_strength_meter.css", "brave_account_sign_in_dialog.css", ] diff --git a/components/brave_account/resources/brave_account_common.css b/components/brave_account/resources/brave_account_common.css index a12573a5405..9ba7be6d787 100644 --- a/components/brave_account/resources/brave_account_common.css +++ b/components/brave_account/resources/brave_account_common.css @@ -7,6 +7,21 @@ * #type=style-lit * #css_wrapper_metadata_end */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.label-container { + display: flex; + justify-content: space-between; + width: 100%; +} + .label { color: var(--leo-color-text-primary); font: var(--leo-font-small-semibold); @@ -43,9 +58,22 @@ leo-input:focus:has(.error) { } .dropdown-content { + --leo-icon-size: var(--leo-icon-xs); align-self: end; + animation: fadeIn 300ms ease-in-out; + display: flex; + font: var(--leo-font-small-regular); + gap: var(--leo-spacing-s); min-height: 0; + leo-icon { + /* Slight vertical tweak to align icon with first text line. + align-items: center on .dropdown-content works for single-line text, + but misaligns when wrapping. Offset is based on the difference between + the line-height and icon size. */ + margin-top: calc((1lh - var(--leo-icon-size)) / 2); + } + leo-icon[name='check-circle-filled'] { --leo-icon-color: var(--leo-color-systemfeedback-success-icon); diff --git a/components/brave_account/resources/brave_account_create_dialog.html.ts b/components/brave_account/resources/brave_account_create_dialog.html.ts index 331a281189c..bd3ac5c554a 100644 --- a/components/brave_account/resources/brave_account_create_dialog.html.ts +++ b/components/brave_account/resources/brave_account_create_dialog.html.ts @@ -42,6 +42,7 @@ export function getHtml(this: BraveAccountCreateDialogElement) { placeholder="$i18n{BRAVE_ACCOUNT_PASSWORD_INPUT_PLACEHOLDER}" @password-input=${(e: CustomEvent) => { this.password = e.detail.password + this.isPasswordValid = e.detail.isValid }} > @@ -59,6 +60,7 @@ export function getHtml(this: BraveAccountCreateDialogElement) { -
+
$i18n{BRAVE_ACCOUNT_EMAIL_INPUT_ERROR_MESSAGE}
diff --git a/components/brave_account/resources/brave_account_email_input.ts b/components/brave_account/resources/brave_account_email_input.ts index 381d8877350..94aa47f60c4 100644 --- a/components/brave_account/resources/brave_account_email_input.ts +++ b/components/brave_account/resources/brave_account_email_input.ts @@ -5,7 +5,7 @@ import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js' -import { getCss } from './brave_account_email_input.css.js' +import { getCss } from './brave_account_common.css.js' import { getHtml } from './brave_account_email_input.html.js' // Maximum email address length according to this RFC3696 errata: diff --git a/components/brave_account/resources/brave_account_password_input.css b/components/brave_account/resources/brave_account_password_input.css deleted file mode 100644 index cbdb4247a1e..00000000000 --- a/components/brave_account/resources/brave_account_password_input.css +++ /dev/null @@ -1,25 +0,0 @@ -/* Copyright (c) 2026 The Brave Authors. All rights reserved. - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at https://mozilla.org/MPL/2.0/. */ - -/* #css_wrapper_metadata_start - * #type=style-lit - * #scheme=relative - * #import=./brave_account_common.css.js - * #include=brave-account-common - * #css_wrapper_metadata_end */ - -.label-container { - display: flex; - justify-content: space-between; - width: 100%; -} - -#password-confirmation-dropdown { - --leo-icon-size: var(--leo-icon-xs); - align-items: center; - display: flex; - font: var(--leo-font-small-regular); - gap: var(--leo-spacing-s); -} diff --git a/components/brave_account/resources/brave_account_password_input.html.ts b/components/brave_account/resources/brave_account_password_input.html.ts index 3fc5451468a..984efd1ee8a 100644 --- a/components/brave_account/resources/brave_account_password_input.html.ts +++ b/components/brave_account/resources/brave_account_password_input.html.ts @@ -3,12 +3,13 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { html, nothing } from '//resources/lit/v3_0/lit.rollup.js' +import { html } from '//resources/lit/v3_0/lit.rollup.js' import './brave_account_password_icons.js' import './brave_account_password_strength_meter.js' import { BraveAccountPasswordInputElement, + freezeWhen, MAX_PASSWORD_LENGTH, } from './brave_account_password_input.js' @@ -17,7 +18,7 @@ export function getHtml(this: BraveAccountPasswordInputElement) { -
- ${(() => { - switch (this.config.mode) { - case 'confirmation': - return html` -
- + + ${freezeWhen( + this.password.length === 0, + this.config.mode === 'confirmation' + ? this.password === this.confirmPassword + ? html` +
+
- ${this.icon === 'check-circle-filled' - ? html`$i18n{BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_SUCCESS_MESSAGE}` - : html`$i18n{BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_ERROR_MESSAGE}`} + $i18n{BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_SUCCESS_MESSAGE}
` - case 'strength': - return html` - ` - default: - return nothing - } - })()} -
+ : html` +
+ +
+ $i18n{BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_ERROR_MESSAGE} +
+
+ ` + : this.config.mode === 'strength' && this.isValid + ? html`
+ + +
` + : html` +
+ +
+ $i18n{BRAVE_ACCOUNT_PASSWORD_INPUT_WHITESPACE_ERROR_MESSAGE} +
+
+ `, + )}
` diff --git a/components/brave_account/resources/brave_account_password_input.ts b/components/brave_account/resources/brave_account_password_input.ts index 5dcf5976864..dcfeeec210d 100644 --- a/components/brave_account/resources/brave_account_password_input.ts +++ b/components/brave_account/resources/brave_account_password_input.ts @@ -3,9 +3,14 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js' +import { + AsyncDirective, + CrLitElement, + directive, + nothing, +} from '//resources/lit/v3_0/lit.rollup.js' -import { getCss } from './brave_account_password_input.css.js' +import { getCss } from './brave_account_common.css.js' import { getHtml } from './brave_account_password_input.html.js' import type { PasswordStrengthChangedEventDetail } from './brave_account_password_strength_meter.js' import type { ToggleVisibilityEventDetail } from './brave_account_password_icons.js' @@ -16,7 +21,21 @@ import type { ToggleVisibilityEventDetail } from './brave_account_password_icons // length in code units, not bytes. export const MAX_PASSWORD_LENGTH = 8192 -export type PasswordInputEventDetail = { password: string } +// Custom directive that freezes the previously rendered value when `freeze` +// is true. Similar to Lit's `noChange` (not exported by Chromium's Lit wrapper +// from //third_party/lit/v3_0/lit.ts), but instead of preventing the update, +// it reuses the last rendered value. +class FreezeWhenDirective extends AsyncDirective { + private previousValue: unknown = nothing + + render(freeze: boolean, value: unknown): unknown { + return freeze ? this.previousValue : (this.previousValue = value) + } +} + +export const freezeWhen = directive(FreezeWhenDirective) + +export type PasswordInputEventDetail = { password: string; isValid: boolean } export type PasswordInputConfig = | { mode: 'confirmation'; confirmPassword: string } @@ -60,6 +79,7 @@ export class BraveAccountPasswordInputElement extends CrLitElement { this.password = detail.value this.fire('password-input', { password: this.password, + isValid: this.isValid, } satisfies PasswordInputEventDetail) } @@ -86,28 +106,24 @@ export class BraveAccountPasswordInputElement extends CrLitElement { protected get shouldStyleAsError() { return ( - this.config.mode === 'confirmation' - && this.password.length !== 0 - && this.password !== this.confirmPassword + this.password.length !== 0 + && (this.config.mode === 'confirmation' + ? this.password !== this.confirmPassword + : this.password !== this.password.trim()) ) } protected get shouldShowDropdown() { - return this.config.mode !== 'regular' && this.password.length !== 0 + return ( + this.password.length !== 0 + && (this.config.mode !== 'regular' || !this.isValid) + ) } - protected getIconName() { - if (this.password.length !== 0) { - this.icon = - this.password === this.confirmPassword - ? 'check-circle-filled' - : 'warning-triangle-filled' - } - - return this.icon + protected get isValid() { + return this.password.length !== 0 && this.password === this.password.trim() } - protected icon = 'warning-triangle-filled' protected accessor config: PasswordInputConfig = { mode: 'regular' } protected accessor isCapsLockOn = false protected accessor isInputFocused = false diff --git a/components/brave_account/resources/brave_account_sign_in_dialog.html.ts b/components/brave_account/resources/brave_account_sign_in_dialog.html.ts index deaab70fd79..87747bac6ee 100644 --- a/components/brave_account/resources/brave_account_sign_in_dialog.html.ts +++ b/components/brave_account/resources/brave_account_sign_in_dialog.html.ts @@ -33,6 +33,7 @@ export function getHtml(this: BraveAccountSignInDialogElement) { placeholder="$i18n{BRAVE_ACCOUNT_PASSWORD_INPUT_PLACEHOLDER}" @password-input=${(e: CustomEvent) => { this.password = e.detail.password + this.isPasswordValid = e.detail.isValid }} >
Caps Lock is on + + Spaces not allowed at the beginning or end of the password. + Done