diff --git a/app/brave_settings_strings.grdp b/app/brave_settings_strings.grdp index 747f2b7b5441..6e8bb26a6cd7 100644 --- a/app/brave_settings_strings.grdp +++ b/app/brave_settings_strings.grdp @@ -25,6 +25,136 @@ Get started + + + + + Sign in or create a Brave account + + + A Brave account will allow you to easily sync your settings, passwords, bookmarks, etc. across all your devices and access our full range of premium products. + + + Get started + + + Manage account + + + + + Get started with your Brave account + + + A Brave account will allow you to easily sync your settings, passwords, bookmarks, etc. across all your devices and access our full range of premium products. + + + Create a Brave account + + + Already have an account? Sign in + + + For advanced users, we also support self-custody of your Brave account keys for an extra layer of privacy. <a target="_blank" href="$1">Learn more</a> + + + Use self-custody + + + + + Create your account + + + A Brave account will allow you to easily sync your settings, passwords, bookmarks, etc. across all your devices and access our full range of premium products. + + + You can't use @bravealias.com addresses for creating Brave accounts. Please try again with a different domain. + + + Account name + + + Enter a name for your account + + + Create a password + + + Weak + + + Medium + + + Strong + + + Confirm password + + + Confirm your password + + + Passwords don't match + + + Passwords match + + + I have read and accept the <a target="_blank" href="$1">Terms of service</a> and <a target="_blank" href="$2">Privacy agreement</a>. + + + Create account + + + + + Sign in to your account + + + A Brave account will allow you to easily sync your settings, passwords, bookmarks, etc. across all your devices and access our full range of premium products. + + + Password + + + Forgot your password? + + + Sign in + + + + + Forgot your password? + + + Confirm your Brave account email and we'll email you a link to reset your password. The link will only be valid for 30 minutes. + + + [Explain that if they reset their password without having an active login, all the user data will be deleted] + + + Cancel + + + Reset your password + + + + + Email address + + + Enter your email address + + + Enter your password + + + + Profile name and icon diff --git a/browser/resources/settings/BUILD.gn b/browser/resources/settings/BUILD.gn index 67bbc5e76d88..3313b2991ab7 100644 --- a/browser/resources/settings/BUILD.gn +++ b/browser/resources/settings/BUILD.gn @@ -51,6 +51,8 @@ generate_grd("build_grd") { "brave_sync_page/start_icon.svg", "images/cookies_banner.svg", "images/cookies_banner_dark.svg", + "images/full_brave_brand.svg", + "images/full_brave_brand_dark.svg", "images/permissions_banner.svg", "images/permissions_banner_dark.svg", "images/safe_browsing_banner.svg", @@ -79,5 +81,6 @@ preprocess_if_expr("preprocess") { out_folder = "$root_gen_dir/chrome/browser/resources/settings/$preprocess_folder" - in_files = brave_settings_local_ts_files + brave_settings_local_html_files + in_files = brave_settings_local_ts_files + brave_settings_local_html_files + + brave_settings_local_css_files } diff --git a/browser/resources/settings/getting_started_page/brave_account_browser_proxy.ts b/browser/resources/settings/getting_started_page/brave_account_browser_proxy.ts new file mode 100644 index 000000000000..03cb7bf45500 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_browser_proxy.ts @@ -0,0 +1,22 @@ +/* Copyright (c) 2024 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/. */ + +import { sendWithPromise } from '//resources/js/cr.js' + +export interface BraveAccountBrowserProxy { + getPasswordStrength(password: string): Promise +} + +export class BraveAccountBrowserProxyImpl implements BraveAccountBrowserProxy { + getPasswordStrength (password: string) { + return sendWithPromise('getPasswordStrength', password) + } + + static getInstance() { + return instance || (instance = new BraveAccountBrowserProxyImpl()) + } +} + +let instance: BraveAccountBrowserProxy | null = null diff --git a/browser/resources/settings/getting_started_page/brave_account_common.css b/browser/resources/settings/getting_started_page/brave_account_common.css new file mode 100644 index 000000000000..7157a459953e --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_common.css @@ -0,0 +1,26 @@ +/* Copyright (c) 2024 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 + * #css_wrapper_metadata_end */ + +.label { + color: var(--leo-color-text-primary); + font: var(--leo-font-small-semibold); + margin: 0px 0px 0px var(--leo-spacing-s); +} + +.label.error { + color: var(--leo-color-systemfeedback-error-text); +} + +leo-input { + --leo-control-border-color: var(--leo-color-divider-strong); +} + +leo-input:not(:focus):has(> .error) { + --leo-control-border-color: var(--leo-color-systemfeedback-error-icon); +} diff --git a/browser/resources/settings/getting_started_page/brave_account_common.ts b/browser/resources/settings/getting_started_page/brave_account_common.ts new file mode 100644 index 000000000000..b7ef3dff7171 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_common.ts @@ -0,0 +1,40 @@ +/* Copyright (c) 2024 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/. */ + +export function onEyeIconClicked(event: Event) { + event.preventDefault() + let type = 'password' + const target = event.target as Element + target.setAttribute('name', + target.getAttribute('name') === 'eye-off' + ? (type = 'text', 'eye-on') + : 'eye-off') + target.parentElement!.setAttribute('type', type) +} + +export function isEmailValid(input: string) { + if (!input) { + // input is falsy + return false + } + + if (!/^[\x20-\x7F]+$/.test(input)) { + // input contains characters outside printable ASCII + return false + } + + const index = input.lastIndexOf('@') + if (index === -1) { + // there's no @ sign in input + return false + } + + if (index === 0 || index === input.length - 1) { + // there are no characters either before or after the last @ sign + return false + } + + return true +} diff --git a/browser/resources/settings/getting_started_page/brave_account_create_dialog.css b/browser/resources/settings/getting_started_page/brave_account_create_dialog.css new file mode 100644 index 000000000000..2d6cb8175b2a --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_create_dialog.css @@ -0,0 +1,68 @@ +/* Copyright (c) 2024 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 */ + +.dropdown { + height: var(--height); + margin: calc(-1 * var(--height)) var(--leo-spacing-s) 0px var(--leo-spacing-s); + position: relative; + transition: all 750ms; + z-index: -1; +} + +.dropdown.visible { + margin-top: var(--leo-spacing-s); +} + +#brave-alias-dropdown { + --height: 36px; + --leo-icon-size: var(--leo-icon-xs); + display: flex; + font: var(--leo-font-small-regular); + gap: var(--leo-spacing-s); +} + +#password-dropdown { + --height: 18px; + display: flex; +} + +#password-confirmation-dropdown { + --height: 18px; + --leo-icon-size: var(--leo-icon-xs); + align-items: center; + display: flex; + font: var(--leo-font-small-regular); + gap: var(--leo-spacing-s); +} + +leo-icon[name=check-circle-filled] { + --leo-icon-color: var(--leo-color-text-interactive); +} + +leo-icon[name=check-circle-filled] + div { + color: var(--leo-color-text-interactive); +} + +leo-icon[name=warning-triangle-filled] { + --leo-icon-color: var(--leo-color-systemfeedback-error-icon); +} + +leo-icon[name=warning-triangle-filled] + div { + color: var(--leo-color-systemfeedback-error-text); +} + +leo-checkbox a { + color: var(--leo-color-text-interactive); + font: var(--leo-font-default-link); + text-decoration-skip-ink: none; + text-underline-offset: 2.8px; +} diff --git a/browser/resources/settings/getting_started_page/brave_account_create_dialog.html.ts b/browser/resources/settings/getting_started_page/brave_account_create_dialog.html.ts new file mode 100644 index 000000000000..a643afb5155f --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_create_dialog.html.ts @@ -0,0 +1,98 @@ +/* Copyright (c) 2024 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/. */ + +import { html } from '//resources/lit/v3_0/lit.rollup.js' + +import { onEyeIconClicked } from './brave_account_common.js' +import { SettingsBraveAccountCreateDialogElement } from './brave_account_create_dialog.js' + +export function getHtml(this: SettingsBraveAccountCreateDialogElement) { + return html` + +
+ +
+ $i18n{braveAccountEmailInputLabel} +
+
+ +
$i18n{braveAccountEmailInputErrorMessage}
+
+ + +
$i18n{braveAccountAccountNameInputLabel}
+ + +
$i18n{braveAccountCreatePasswordInputLabel}
+ + +
+ + +
+ + +
+ $i18n{braveAccountConfirmPasswordInputLabel} +
+ + +
+ +
+ ${this.icon === 'check-circle-filled' + ? html`$i18n{braveAccountConfirmPasswordInputSuccessMessage}` + : html`$i18n{braveAccountConfirmPasswordInputErrorMessage}` + } +
+
+ + +
$i18nRaw{braveAccountConsentCheckboxLabel}
+ +
+
+ this.fire('create-account-button-clicked')}> + $i18n{braveAccountCreateAccountButtonLabel} + +
+ + ` +} diff --git a/browser/resources/settings/getting_started_page/brave_account_create_dialog.ts b/browser/resources/settings/getting_started_page/brave_account_create_dialog.ts new file mode 100644 index 000000000000..31d209759f57 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_create_dialog.ts @@ -0,0 +1,198 @@ +/* Copyright (c) 2024 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/. */ + +import { CrLitElement, css, html } from '//resources/lit/v3_0/lit.rollup.js' +import { I18nMixinLit } from '//resources/cr_elements/i18n_mixin_lit.js' + +import { + BraveAccountBrowserProxy, + BraveAccountBrowserProxyImpl +} from './brave_account_browser_proxy.js' +import { getCss } from './brave_account_create_dialog.css.js' +import { getHtml } from './brave_account_create_dialog.html.js' +import { isEmailValid } from './brave_account_common.js' + +class PasswordStrengthMeter extends I18nMixinLit(CrLitElement) { + static get is() { + return 'password-strength-meter' + } + + static override get styles() { + return css` + :host { + align-items: center; + display: flex; + justify-content: space-between; + width: 100%; + } + + :host([category=Weak]) { + --primary-color: var(--leo-color-systemfeedback-error-icon); + --secondary-color: var(--leo-color-systemfeedback-error-background); + } + + :host([category=Medium]) { + --primary-color: var(--leo-color-systemfeedback-warning-icon); + --secondary-color: var(--leo-color-systemfeedback-warning-background); + } + + :host([category=Strong]) { + --primary-color: var(--leo-color-systemfeedback-success-icon); + --secondary-color: var(--leo-color-systemfeedback-success-background); + } + + .bar { + background-color: var(--secondary-color); + border-radius: var(--leo-radius-m); + height: 4px; + transition: 750ms; + width: 376px; + } + + .strength { + background-color: var(--primary-color); + border-radius: var(--leo-radius-m); + height: 100%; + transition: 750ms; + width: calc(1% * var(--strength)); + } + + .text { + color: var(--primary-color); + font: var(--leo-font-small-regular); + transition: 750ms; + } + ` + } + + override render() { + return html` +
+
+
+
+ ${this.i18n(`braveAccountPasswordStrengthMeter${this.category}`)} +
+ ` + } + + static override get properties() { + return { + category: { type: String, reflect: true }, + strength: { type: Number }, + } + } + + override updated(changedProperties: Map) { + if (changedProperties.has('strength')) { + this.category = this.strength < 60 + ? 'Weak' + : this.strength < 100 + ? 'Medium' + : 'Strong' + } + } + + protected category: 'Weak' | 'Medium' | 'Strong' = 'Weak' + protected strength: number = 0 +} + +declare global { + interface HTMLElementTagNameMap { + 'password-strength-meter': PasswordStrengthMeter + } +} + +customElements.define( + PasswordStrengthMeter.is, PasswordStrengthMeter) + +export class SettingsBraveAccountCreateDialogElement extends CrLitElement { + static get is() { + return 'settings-brave-account-create-dialog' + } + + static override get styles() { + return getCss() + } + + override render() { + return getHtml.bind(this)() + } + + static override get properties() { + return { + email: { type: String }, + isAccountNameValid: { type: Boolean }, + isCheckboxChecked: { type: Boolean }, + isEmailBraveAlias: { type: Boolean }, + isEmailValid: { type: Boolean }, + password: { type: String }, + passwordConfirmation: { type: String }, + passwordStrength: { type: Number }, + } + } + + protected onEmailInput(detail: { value: string }) { + this.email = detail.value.trim() + this.isEmailValid = isEmailValid(this.email) + this.isEmailBraveAlias = (/@bravealias\.com$/i).test(this.email) + } + + protected onAccountNameInput(detail: { value: string }) { + this.isAccountNameValid = detail.value.length !== 0 + } + + protected onPasswordInput(detail: { value: string }) { + this.password = detail.value + this.browserProxy.getPasswordStrength(this.password).then( + (passwordStrength: number) => this.passwordStrength = passwordStrength + ) + } + + protected onConfirmPasswordInput(detail: { value: string }) { + this.passwordConfirmation = detail.value + } + + protected onCheckboxChanged(detail: { checked: boolean }) { + this.isCheckboxChecked = detail.checked + } + + // TODO(sszaloki): we should consider exporting `noChange` + // from third_party/lit/v3_0/lit.ts instead, so that such + // a workaround is not needed. + protected getIconName() { + if (this.passwordConfirmation.length !== 0) { + this.icon = this.passwordConfirmation === this.password + ? 'check-circle-filled' + : 'warning-triangle-filled' + } + + return this.icon + } + + private browserProxy: BraveAccountBrowserProxy = + BraveAccountBrowserProxyImpl.getInstance() + protected email: string = '' + protected icon: string = 'warning-triangle-filled' + protected isAccountNameValid: boolean = false + protected isCheckboxChecked: boolean = false + protected isEmailBraveAlias: boolean = false + protected isEmailValid: boolean = false + protected password: string = '' + protected passwordConfirmation: string = '' + protected passwordStrength: number = 0 +} + +declare global { + interface HTMLElementTagNameMap { + 'settings-brave-account-create-dialog': + SettingsBraveAccountCreateDialogElement + } +} + +customElements.define( + SettingsBraveAccountCreateDialogElement.is, + SettingsBraveAccountCreateDialogElement +) diff --git a/browser/resources/settings/getting_started_page/brave_account_dialog.css b/browser/resources/settings/getting_started_page/brave_account_dialog.css new file mode 100644 index 000000000000..dbcb9ce36e50 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_dialog.css @@ -0,0 +1,95 @@ +/* Copyright (c) 2024 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 + * #css_wrapper_metadata_end */ + +:host { + --cr-dialog-body-border-bottom: 0px; + --cr-dialog-body-border-top: 0px; + --cr-dialog-border-radius: var(--leo-radius-xl); + --cr-dialog-top-container-min-height: 0px; + --cr-dialog-width: 500px; +} + +[slot=header] { + align-items: center; + display: flex; + flex-direction: column; + padding: 0px 0px var(--leo-spacing-4xl); +} + +.buttons { + display: flex; + justify-content: flex-end; + min-height: var(--leo-spacing-4xl); + width: 100%; +} + +:host([show-back-button]) .buttons { + justify-content: space-between; +} + +leo-button { + --leo-button-padding: 0px; + flex: none; + margin: var(--leo-spacing-l) var(--leo-spacing-l) 0px var(--leo-spacing-l); +} + +leo-icon { + --leo-icon-size: var(--leo-icon-m); +} + +.logo { + background-image: url('../images/full_brave_brand.svg'); + background-size: cover; + height: var(--leo-spacing-4xl); + width: calc(var(--leo-spacing-4xl) * 129/40); +} + +@media (prefers-color-scheme: dark) { + .logo { + background-image: url('../images/full_brave_brand_dark.svg'); + } +} + +[slot=body] { + padding: 0px var(--leo-spacing-2xl) var(--leo-spacing-2xl) var(--leo-spacing-2xl); +} + +.title-and-description { + color: var(--leo-color-text-secondary); + display: flex; + flex-direction: column; + gap: var(--leo-spacing-m); + margin: 0px 0px var(--leo-spacing-3xl); +} + +.title { + font: var(--leo-font-heading-h4); +} + +.description { + font: var(--leo-font-default-regular); +} + +:host ::slotted([slot=inputs]) { + display: flex; + flex-direction: column; + gap: var(--leo-spacing-2xl); + margin: 0px 0px var(--leo-spacing-2xl); +} + +:host ::slotted([slot=buttons]) { + display: flex; + flex-direction: column; + gap: var(--leo-spacing-m); +} + +:host([horizontal-buttons]) ::slotted([slot=buttons]) { + flex-direction: row; + justify-content: flex-end; +} diff --git a/browser/resources/settings/getting_started_page/brave_account_dialog.html.ts b/browser/resources/settings/getting_started_page/brave_account_dialog.html.ts new file mode 100644 index 000000000000..e41355e92014 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_dialog.html.ts @@ -0,0 +1,44 @@ +/* Copyright (c) 2024 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/. */ + +import { html, nothing } from '//resources/lit/v3_0/lit.rollup.js' + +import { SettingsBraveAccountDialogElement } from './brave_account_dialog.js' + +export function getHtml(this: SettingsBraveAccountDialogElement) { + return html` + +
+
+ ${this.showBackButton + ? html` this.fire('back-button-clicked')}> + + ` + : nothing} + this.$.dialog.cancel()}> + + +
+ +
+
+
+
${this.dialogTitle}
+
${this.dialogDescription}
+ ${this.alertMessage.length !== 0 + ? html`${this.alertMessage}` + : nothing} +
+ + +
+ + + ` +} diff --git a/browser/resources/settings/getting_started_page/brave_account_dialog.ts b/browser/resources/settings/getting_started_page/brave_account_dialog.ts new file mode 100644 index 000000000000..efe9d7d244a2 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_dialog.ts @@ -0,0 +1,55 @@ +/* Copyright (c) 2024 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/. */ + +import { CrDialogElement } from '//resources/cr_elements/cr_dialog/cr_dialog.js' +import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js' + +import { getCss } from './brave_account_dialog.css.js' +import { getHtml } from './brave_account_dialog.html.js' + +export interface SettingsBraveAccountDialogElement { + $: { + dialog: CrDialogElement, + } +} + +export class SettingsBraveAccountDialogElement extends CrLitElement { + static get is() { + return 'settings-brave-account-dialog' + } + + static override get styles() { + return getCss() + } + + override render() { + return getHtml.bind(this)() + } + + static override get properties() { + return { + alertMessage: { type: String }, + dialogDescription: { type: String }, + dialogTitle: { type: String }, + horizontalButtons: { type: Boolean }, + showBackButton: { type: Boolean }, + } + } + + protected alertMessage: string = '' + protected dialogDescription: string + protected dialogTitle: string + protected horizontalButtons: boolean + protected showBackButton: boolean +} + +declare global { + interface HTMLElementTagNameMap { + 'settings-brave-account-dialog': SettingsBraveAccountDialogElement + } +} + +customElements.define( + SettingsBraveAccountDialogElement.is, SettingsBraveAccountDialogElement) diff --git a/browser/resources/settings/getting_started_page/brave_account_entry_dialog.css b/browser/resources/settings/getting_started_page/brave_account_entry_dialog.css new file mode 100644 index 000000000000..760c52e7bbe4 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_entry_dialog.css @@ -0,0 +1,30 @@ +/* Copyright (c) 2024 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 + * #css_wrapper_metadata_end */ + +[slot=footer] { + align-items: center; + display: flex; + gap: var(--leo-spacing-xl); + padding: var(--leo-spacing-2xl); +} + +.footer-text { + color: var(--leo-color-text-tertiary); + font: var(--leo-font-small-regular); +} + +.footer-text a { + color: var(--leo-color-text-secondary); + font: var(--leo-font-small-link); + text-underline-offset: 2.5px; +} + +leo-button { + flex: none; +} diff --git a/browser/resources/settings/getting_started_page/brave_account_entry_dialog.html.ts b/browser/resources/settings/getting_started_page/brave_account_entry_dialog.html.ts new file mode 100644 index 000000000000..2d72e8e42527 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_entry_dialog.html.ts @@ -0,0 +1,37 @@ +/* Copyright (c) 2024 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/. */ + +import { html } from '//resources/lit/v3_0/lit.rollup.js' + +import './brave_account_dialog.js' +import { SettingsBraveAccountEntryDialogElement } from './brave_account_entry_dialog.js' + +export function getHtml(this: SettingsBraveAccountEntryDialogElement) { + return html` + +
+ this.fire('create-button-clicked')}> + $i18n{braveAccountCreateBraveAccountButtonLabel} + + this.fire('sign-in-button-clicked')}> + $i18n{braveAccountAlreadyHaveAccountSignInButtonLabel} + +
+
+
+ $i18nRaw{braveAccountSelfCustodyDescription} +
+ this.fire('self-custody-button-clicked')}> + $i18n{braveAccountSelfCustodyButtonLabel} + +
+ + ` +} diff --git a/browser/resources/settings/getting_started_page/brave_account_entry_dialog.ts b/browser/resources/settings/getting_started_page/brave_account_entry_dialog.ts new file mode 100644 index 000000000000..9de8bc1d95ae --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_entry_dialog.ts @@ -0,0 +1,35 @@ +/* Copyright (c) 2024 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/. */ + +import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js' + +import { getCss } from './brave_account_entry_dialog.css.js' +import { getHtml } from './brave_account_entry_dialog.html.js' + +export class SettingsBraveAccountEntryDialogElement extends CrLitElement { + static get is() { + return 'settings-brave-account-entry-dialog' + } + + static override get styles() { + return getCss() + } + + override render() { + return getHtml.bind(this)() + } +} + +declare global { + interface HTMLElementTagNameMap { + 'settings-brave-account-entry-dialog': + SettingsBraveAccountEntryDialogElement + } +} + +customElements.define( + SettingsBraveAccountEntryDialogElement.is, + SettingsBraveAccountEntryDialogElement +) diff --git a/browser/resources/settings/getting_started_page/brave_account_forgot_password_dialog.css b/browser/resources/settings/getting_started_page/brave_account_forgot_password_dialog.css new file mode 100644 index 000000000000..2a133210d894 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_forgot_password_dialog.css @@ -0,0 +1,15 @@ +/* Copyright (c) 2024 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 */ + +leo-button { + flex: none; +} diff --git a/browser/resources/settings/getting_started_page/brave_account_forgot_password_dialog.html.ts b/browser/resources/settings/getting_started_page/brave_account_forgot_password_dialog.html.ts new file mode 100644 index 000000000000..84d623f9a180 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_forgot_password_dialog.html.ts @@ -0,0 +1,40 @@ +/* Copyright (c) 2024 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/. */ + +import { html } from '//resources/lit/v3_0/lit.rollup.js' + +import './brave_account_dialog.js' +import { SettingsBraveAccountForgotPasswordDialogElement } from './brave_account_forgot_password_dialog.js' + +export function getHtml(this: SettingsBraveAccountForgotPasswordDialogElement) { + return html` + +
+ +
+ $i18n{braveAccountEmailInputLabel} +
+ +
+
+ this.fire('cancel-button-clicked')}> + $i18n{braveAccountCancelButtonLabel} + + + $i18n{braveAccountResetPasswordButtonLabel} + +
+ + ` +} diff --git a/browser/resources/settings/getting_started_page/brave_account_forgot_password_dialog.ts b/browser/resources/settings/getting_started_page/brave_account_forgot_password_dialog.ts new file mode 100644 index 000000000000..5e2e5189fa9e --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_forgot_password_dialog.ts @@ -0,0 +1,52 @@ +/* Copyright (c) 2024 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/. */ + +import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js' + +import { getCss } from './brave_account_forgot_password_dialog.css.js' +import { getHtml } from './brave_account_forgot_password_dialog.html.js' +import { isEmailValid } from './brave_account_common.js' + +export class SettingsBraveAccountForgotPasswordDialogElement + extends CrLitElement { + static get is() { + return 'settings-brave-account-forgot-password-dialog' + } + + static override get styles() { + return getCss() + } + + override render() { + return getHtml.bind(this)() + } + + static override get properties() { + return { + email: { type: String }, + isEmailValid: { type: Boolean }, + } + } + + protected onEmailInput(detail: { value: string }) { + this.email = detail.value + this.isEmailValid = isEmailValid(this.email) + } + + protected email: string = '' + protected isEmailValid: boolean = false +} + +declare global { + interface HTMLElementTagNameMap { + 'settings-brave-account-forgot-password-dialog': + SettingsBraveAccountForgotPasswordDialogElement + } +} + +customElements.define( + SettingsBraveAccountForgotPasswordDialogElement.is, + SettingsBraveAccountForgotPasswordDialogElement +) diff --git a/browser/resources/settings/getting_started_page/brave_account_row.css b/browser/resources/settings/getting_started_page/brave_account_row.css new file mode 100644 index 000000000000..c1d22a9ca662 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_row.css @@ -0,0 +1,57 @@ +/* Copyright (c) 2024 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 + * #css_wrapper_metadata_end */ + +.row { + align-items: center; + display: flex; + gap: var(--leo-spacing-xl); + min-height: 82px; + padding: 0 var(--leo-spacing-2xl); +} + +.circle { + align-items: center; + background-color: var(--leo-color-container-background); + border: 1px solid var(--leo-color-divider-subtle); + border-radius: 50%; + display: flex; + flex: none; + height: 38px; + justify-content: center; + width: 38px; +} + +.title-and-description { + display: flex; + flex: auto; + flex-direction: column; + padding: var(--leo-spacing-l) 0px; +} + +.title { + color: var(--leo-color-text-primary); + font: var(--leo-font-default-semibold); +} + +:host([signed-in]) .title { + font: var(--leo-font-large-semibold); +} + +.description { + color: var(--leo-color-text-secondary); + font: var(--leo-font-small-regular); +} + +:host([signed-in]) .description { + font: var(--leo-font-default-regular); +} + +leo-button { + flex: none; +} diff --git a/browser/resources/settings/getting_started_page/brave_account_row.html.ts b/browser/resources/settings/getting_started_page/brave_account_row.html.ts new file mode 100644 index 000000000000..2f1d083bbe9a --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_row.html.ts @@ -0,0 +1,85 @@ +/* Copyright (c) 2024 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/. */ + +import { html, nothing } from '//resources/lit/v3_0/lit.rollup.js' + +import './brave_account_create_dialog.js' +import './brave_account_entry_dialog.js' +import './brave_account_forgot_password_dialog.js' +import './brave_account_sign_in_dialog.js' +import { Dialog, SettingsBraveAccountRow } from './brave_account_row.js' + +export function getHtml(this: SettingsBraveAccountRow) { + return html` +
+
+ + +
+
+
+ ${this.signedIn + ? 'John Doe' + : '$i18n{braveAccountRowTitle}'} +
+
+ ${this.signedIn + ? 'johndoe@gmail.com' + : '$i18n{braveAccountRowDescription}'} +
+
+ this.signedIn = false + : () => this.dialog = Dialog.ENTRY}> + ${this.signedIn + ? '$i18n{braveAccountManageAccountButtonLabel}' + : '$i18n{braveAccountGetStartedButtonLabel}' + } + +
+ ${(() => { + switch(this.dialog) { + case Dialog.NONE: + return nothing + case Dialog.ENTRY: + return html` + this.dialog = Dialog.NONE} + @create-button-clicked=${() => this.dialog = Dialog.CREATE} + @self-custody-button-clicked=${() => this.dialog = Dialog.NONE} + @sign-in-button-clicked=${() => this.dialog = Dialog.SIGN_IN}> + + ` + case Dialog.CREATE: + return html` + this.dialog = Dialog.NONE} + @create-account-button-clicked=${() => this.dialog = Dialog.NONE}> + + ` + case Dialog.SIGN_IN: + return html` + this.dialog = Dialog.NONE} + @forgot-password-button-clicked=${() => this.dialog = Dialog.FORGOT_PASSWORD} + @sign-in-button-clicked=${() => {this.dialog = Dialog.NONE; this.signedIn = true}}> + + ` + case Dialog.FORGOT_PASSWORD: + return html` + this.dialog = Dialog.NONE}> + + ` + } + })()} + ` +} diff --git a/browser/resources/settings/getting_started_page/brave_account_row.ts b/browser/resources/settings/getting_started_page/brave_account_row.ts new file mode 100644 index 000000000000..0989e15e1429 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_row.ts @@ -0,0 +1,63 @@ +/* Copyright (c) 2024 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/. */ + +import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js' + +import { getCss } from './brave_account_row.css.js' +import { getHtml } from './brave_account_row.html.js' + +export enum Dialog { + NONE, + CREATE, + ENTRY, + FORGOT_PASSWORD, + SIGN_IN +} + +export class SettingsBraveAccountRow extends CrLitElement { + static get is() { + return 'settings-brave-account-row' + } + + static override get styles() { + return getCss() + } + + override render() { + return getHtml.bind(this)() + } + + static override get properties() { + return { + dialog: { type: Dialog }, + signedIn: { type: Boolean, reflect: true }, + } + } + + protected onBackButtonClicked() { + switch (this.dialog) { + case Dialog.CREATE: + this.dialog = Dialog.ENTRY + break + case Dialog.FORGOT_PASSWORD: + this.dialog = Dialog.SIGN_IN + break + case Dialog.SIGN_IN: + this.dialog = Dialog.ENTRY + break + } + } + + protected dialog: Dialog = Dialog.NONE + protected signedIn: boolean = false +} + +declare global { + interface HTMLElementTagNameMap { + 'settings-brave-account-row': SettingsBraveAccountRow + } +} + +customElements.define(SettingsBraveAccountRow.is, SettingsBraveAccountRow) diff --git a/browser/resources/settings/getting_started_page/brave_account_sign_in_dialog.css b/browser/resources/settings/getting_started_page/brave_account_sign_in_dialog.css new file mode 100644 index 000000000000..c4755129d932 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_sign_in_dialog.css @@ -0,0 +1,27 @@ +/* Copyright (c) 2024 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 */ + +.password { + display: flex; + justify-content: space-between; + width: 100%; +} + +.forgot-password { + color: var(--leo-color-text-secondary); + cursor: pointer; + font: var(--leo-font-small-link); + margin: 0px var(--leo-spacing-s) 0px 0px; + text-decoration-line: underline; + text-decoration-skip-ink: none; + text-underline-offset: 2.4px; +} diff --git a/browser/resources/settings/getting_started_page/brave_account_sign_in_dialog.html.ts b/browser/resources/settings/getting_started_page/brave_account_sign_in_dialog.html.ts new file mode 100644 index 000000000000..b9931cfa38f5 --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_sign_in_dialog.html.ts @@ -0,0 +1,51 @@ +/* Copyright (c) 2024 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/. */ + +import { html } from '//resources/lit/v3_0/lit.rollup.js' + +import './brave_account_dialog.js' +import { onEyeIconClicked } from './brave_account_common.js' +import { SettingsBraveAccountSignInDialogElement } from './brave_account_sign_in_dialog.js' + +export function getHtml(this: SettingsBraveAccountSignInDialogElement) { + return html` + +
+ +
+ $i18n{braveAccountEmailInputLabel} +
+ + +
+
$i18n{braveAccountPasswordInputLabel}
+
this.fire('forgot-password-button-clicked')}> + $i18n{braveAccountForgotPasswordButtonLabel} +
+
+ + + +
+
+ this.fire('sign-in-button-clicked')}> + $i18n{braveAccountSignInButtonLabel} + +
+ + ` +} diff --git a/browser/resources/settings/getting_started_page/brave_account_sign_in_dialog.ts b/browser/resources/settings/getting_started_page/brave_account_sign_in_dialog.ts new file mode 100644 index 000000000000..1b0bd535f12c --- /dev/null +++ b/browser/resources/settings/getting_started_page/brave_account_sign_in_dialog.ts @@ -0,0 +1,57 @@ +/* Copyright (c) 2024 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/. */ + +import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js' + +import { getCss } from './brave_account_sign_in_dialog.css.js' +import { getHtml } from './brave_account_sign_in_dialog.html.js' +import { isEmailValid } from './brave_account_common.js' + +export class SettingsBraveAccountSignInDialogElement extends CrLitElement { + static get is() { + return 'settings-brave-account-sign-in-dialog' + } + + static override get styles() { + return getCss() + } + + override render() { + return getHtml.bind(this)() + } + + static override get properties() { + return { + email: { type: String }, + isEmailValid: { type: Boolean }, + isPasswordValid: { type: Boolean }, + } + } + + protected onEmailInput(detail: { value: string }) { + this.email = detail.value + this.isEmailValid = isEmailValid(this.email) + } + + protected onPasswordInput(detail: { value: string }) { + this.isPasswordValid = detail.value.length !== 0 + } + + protected email: string = '' + protected isEmailValid: boolean = false + protected isPasswordValid: boolean = false +} + +declare global { + interface HTMLElementTagNameMap { + 'settings-brave-account-sign-in-dialog': + SettingsBraveAccountSignInDialogElement + } +} + +customElements.define( + SettingsBraveAccountSignInDialogElement.is, + SettingsBraveAccountSignInDialogElement +) diff --git a/browser/resources/settings/images/full_brave_brand.svg b/browser/resources/settings/images/full_brave_brand.svg new file mode 100644 index 000000000000..c57c291d3114 --- /dev/null +++ b/browser/resources/settings/images/full_brave_brand.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/browser/resources/settings/images/full_brave_brand_dark.svg b/browser/resources/settings/images/full_brave_brand_dark.svg new file mode 100644 index 000000000000..309df5e39db5 --- /dev/null +++ b/browser/resources/settings/images/full_brave_brand_dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/browser/resources/settings/sources.gni b/browser/resources/settings/sources.gni index dca10cdf5a88..e452ae2096c3 100644 --- a/browser/resources/settings/sources.gni +++ b/browser/resources/settings/sources.gni @@ -118,9 +118,33 @@ brave_settings_non_web_component_files = [ "brave_web3_domains_page/brave_web3_domains_browser_proxy.ts", "default_brave_shields_page/brave_adblock_browser_proxy.ts", "default_brave_shields_page/default_brave_shields_browser_proxy.ts", + "getting_started_page/brave_account_browser_proxy.ts", + "getting_started_page/brave_account_common.ts", + "getting_started_page/brave_account_create_dialog.html.ts", + "getting_started_page/brave_account_create_dialog.ts", + "getting_started_page/brave_account_dialog.html.ts", + "getting_started_page/brave_account_dialog.ts", + "getting_started_page/brave_account_entry_dialog.html.ts", + "getting_started_page/brave_account_entry_dialog.ts", + "getting_started_page/brave_account_forgot_password_dialog.html.ts", + "getting_started_page/brave_account_forgot_password_dialog.ts", + "getting_started_page/brave_account_row.html.ts", + "getting_started_page/brave_account_row.ts", + "getting_started_page/brave_account_sign_in_dialog.html.ts", + "getting_started_page/brave_account_sign_in_dialog.ts", "shortcuts_page/shortcuts_page.ts", ] +brave_settings_local_css_files = [ + "getting_started_page/brave_account_common.css", + "getting_started_page/brave_account_create_dialog.css", + "getting_started_page/brave_account_dialog.css", + "getting_started_page/brave_account_entry_dialog.css", + "getting_started_page/brave_account_forgot_password_dialog.css", + "getting_started_page/brave_account_row.css", + "getting_started_page/brave_account_sign_in_dialog.css", +] + if (enable_brave_vpn_wireguard) { brave_settings_web_component_files += [ "brave_system_page/brave_vpn_page.ts" ] diff --git a/browser/ui/BUILD.gn b/browser/ui/BUILD.gn index a0a6dbbbf851..1212cb615578 100644 --- a/browser/ui/BUILD.gn +++ b/browser/ui/BUILD.gn @@ -283,6 +283,8 @@ source_set("ui") { "webui/private_new_tab_page/brave_private_new_tab_page_handler.h", "webui/private_new_tab_page/brave_private_new_tab_ui.cc", "webui/private_new_tab_page/brave_private_new_tab_ui.h", + "webui/settings/brave_account_handler.cc", + "webui/settings/brave_account_handler.h", "webui/settings/brave_adblock_handler.cc", "webui/settings/brave_adblock_handler.h", "webui/settings/brave_appearance_handler.cc", @@ -361,6 +363,7 @@ source_set("ui") { "//components/google/core/common", "//components/keyed_service/content", "//components/keyed_service/core", + "//components/password_manager/core/browser/ui", "//components/pref_registry", "//components/prefs", "//components/sessions", diff --git a/browser/ui/webui/brave_settings_ui.cc b/browser/ui/webui/brave_settings_ui.cc index 46e260683808..8eecea345747 100644 --- a/browser/ui/webui/brave_settings_ui.cc +++ b/browser/ui/webui/brave_settings_ui.cc @@ -25,6 +25,7 @@ #include "brave/browser/ui/commands/accelerator_service_factory.h" #include "brave/browser/ui/tabs/features.h" #include "brave/browser/ui/webui/navigation_bar_data_provider.h" +#include "brave/browser/ui/webui/settings/brave_account_handler.h" #include "brave/browser/ui/webui/settings/brave_adblock_handler.h" #include "brave/browser/ui/webui/settings/brave_appearance_handler.h" #include "brave/browser/ui/webui/settings/brave_default_extensions_handler.h" @@ -100,6 +101,7 @@ BraveSettingsUI::BraveSettingsUI(content::WebUI* web_ui) : SettingsUI(web_ui) { web_ui->AddMessageHandler(std::make_unique()); web_ui->AddMessageHandler(std::make_unique()); web_ui->AddMessageHandler(std::make_unique()); + web_ui->AddMessageHandler(std::make_unique()); #if BUILDFLAG(ENABLE_TOR) web_ui->AddMessageHandler(std::make_unique()); #endif diff --git a/browser/ui/webui/settings/brave_account_handler.cc b/browser/ui/webui/settings/brave_account_handler.cc new file mode 100644 index 000000000000..127e621f30b0 --- /dev/null +++ b/browser/ui/webui/settings/brave_account_handler.cc @@ -0,0 +1,33 @@ +/* Copyright (c) 2024 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/. */ + +#include "brave/browser/ui/webui/settings/brave_account_handler.h" + +#include + +#include "base/check_op.h" +#include "base/functional/bind.h" +#include "components/password_manager/core/browser/ui/weak_check_utility.h" + +BraveAccountHandler::BraveAccountHandler() = default; + +BraveAccountHandler::~BraveAccountHandler() = default; + +void BraveAccountHandler::RegisterMessages() { + web_ui()->RegisterMessageCallback( + "getPasswordStrength", + base::BindRepeating(&BraveAccountHandler::GetPasswordStrength, + base::Unretained(this))); +} + +void BraveAccountHandler::GetPasswordStrength(const base::Value::List& args) { + CHECK_EQ(args.size(), 2U); + auto* password = args[1].GetIfString(); + CHECK(password); + + AllowJavascript(); + ResolveJavascriptCallback( + args[0], base::Value(password_manager::GetPasswordStrength(*password))); +} diff --git a/browser/ui/webui/settings/brave_account_handler.h b/browser/ui/webui/settings/brave_account_handler.h new file mode 100644 index 000000000000..7a349995c15e --- /dev/null +++ b/browser/ui/webui/settings/brave_account_handler.h @@ -0,0 +1,29 @@ +/* Copyright (c) 2024 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/. */ + +#ifndef BRAVE_BROWSER_UI_WEBUI_SETTINGS_BRAVE_ACCOUNT_HANDLER_H_ +#define BRAVE_BROWSER_UI_WEBUI_SETTINGS_BRAVE_ACCOUNT_HANDLER_H_ + +#include "base/values.h" +#include "chrome/browser/ui/webui/settings/settings_page_ui_handler.h" + +class BraveAccountHandler : public settings::SettingsPageUIHandler { + public: + BraveAccountHandler(); + ~BraveAccountHandler() override; + BraveAccountHandler(const BraveAccountHandler&) = delete; + BraveAccountHandler& operator=(const BraveAccountHandler&) = delete; + + private: + // WebUIMessageHandler overrides: + void RegisterMessages() override; + // SettingsPageUIHandler overrides: + void OnJavascriptAllowed() override {} + void OnJavascriptDisallowed() override {} + + void GetPasswordStrength(const base::Value::List& args); +}; + +#endif // BRAVE_BROWSER_UI_WEBUI_SETTINGS_BRAVE_ACCOUNT_HANDLER_H_ diff --git a/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc b/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc index e9befdfa8f94..0fc539f83fe9 100644 --- a/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc +++ b/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc @@ -48,6 +48,13 @@ namespace settings { namespace { +constexpr char16_t kBraveAccountSelfCustodyLearnMoreURL[] = + u"https://search.brave.com"; +constexpr char16_t kBraveAccountTermsOfServiceURL[] = + u"https://brave.com/terms-of-use/"; +constexpr char16_t kBraveAccountPrivacyAgreementURL[] = + u"https://brave.com/privacy/browser/"; + constexpr char16_t kWebRTCLearnMoreURL[] = u"https://support.brave.com/hc/en-us/articles/" u"360017989132-How-do-I-change-my-Privacy-Settings-#webrtc"; @@ -125,6 +132,91 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source, {"siteSettingsLocalhostAccessAllowExceptions", IDS_SETTINGS_SITE_SETTINGS_LOCALHOST_ACCESS_ALLOW_EXCEPTIONS}, {"braveGetStartedTitle", IDS_SETTINGS_BRAVE_GET_STARTED_TITLE}, + + // + // Row: + {"braveAccountRowTitle", IDS_SETTINGS_BRAVE_ACCOUNT_ROW_TITLE}, + {"braveAccountRowDescription", + IDS_SETTINGS_BRAVE_ACCOUNT_ROW_DESCRIPTION}, + {"braveAccountGetStartedButtonLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_GET_STARTED_BUTTON_LABEL}, + {"braveAccountManageAccountButtonLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_MANAGE_ACCOUNT_BUTTON_LABEL}, + + // 'Entry' dialog: + {"braveAccountEntryDialogTitle", + IDS_SETTINGS_BRAVE_ACCOUNT_ENTRY_DIALOG_TITLE}, + {"braveAccountEntryDialogDescription", + IDS_SETTINGS_BRAVE_ACCOUNT_ENTRY_DIALOG_DESCRIPTION}, + {"braveAccountCreateBraveAccountButtonLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_ENTRY_DIALOG_CREATE_BRAVE_ACCOUNT_BUTTON_LABEL}, + {"braveAccountAlreadyHaveAccountSignInButtonLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_ALREADY_HAVE_ACCOUNT_SIGN_IN_BUTTON_LABEL}, + {"braveAccountSelfCustodyButtonLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_SELF_CUSTODY_BUTTON_LABEL}, + + // 'Create' dialog: + {"braveAccountCreateDialogTitle", + IDS_SETTINGS_BRAVE_ACCOUNT_CREATE_DIALOG_TITLE}, + {"braveAccountCreateDialogDescription", + IDS_SETTINGS_BRAVE_ACCOUNT_CREATE_DIALOG_DESCRIPTION}, + {"braveAccountEmailInputErrorMessage", + IDS_SETTINGS_BRAVE_ACCOUNT_EMAIL_INPUT_ERROR_MESSAGE}, + {"braveAccountAccountNameInputLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_ACCOUNT_NAME_INPUT_LABEL}, + {"braveAccountAccountNameInputPlaceholder", + IDS_SETTINGS_BRAVE_ACCOUNT_ACCOUNT_NAME_INPUT_PLACEHOLDER}, + {"braveAccountCreatePasswordInputLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_CREATE_PASSWORD_INPUT_LABEL}, + {"braveAccountPasswordStrengthMeterWeak", + IDS_SETTINGS_BRAVE_ACCOUNT_PASSWORD_STRENGTH_METER_WEAK}, + {"braveAccountPasswordStrengthMeterMedium", + IDS_SETTINGS_BRAVE_ACCOUNT_PASSWORD_STRENGTH_METER_MEDIUM}, + {"braveAccountPasswordStrengthMeterStrong", + IDS_SETTINGS_BRAVE_ACCOUNT_PASSWORD_STRENGTH_METER_STRONG}, + {"braveAccountConfirmPasswordInputLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_LABEL}, + {"braveAccountConfirmPasswordInputPlaceholder", + IDS_SETTINGS_BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_PLACEHOLDER}, + {"braveAccountConfirmPasswordInputErrorMessage", + IDS_SETTINGS_BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_ERROR_MESSAGE}, + {"braveAccountConfirmPasswordInputSuccessMessage", + IDS_SETTINGS_BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_SUCCESS_MESSAGE}, + {"braveAccountCreateAccountButtonLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_CREATE_ACCOUNT_BUTTON_LABEL}, + + // 'Sign In' dialog: + {"braveAccountSignInDialogTitle", + IDS_SETTINGS_BRAVE_ACCOUNT_SIGN_IN_DIALOG_TITLE}, + {"braveAccountSignInDialogDescription", + IDS_SETTINGS_BRAVE_ACCOUNT_SIGN_IN_DIALOG_DESCRIPTION}, + {"braveAccountPasswordInputLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_PASSWORD_INPUT_LABEL}, + {"braveAccountForgotPasswordButtonLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_FORGOT_PASSWORD_BUTTON_LABEL}, + {"braveAccountSignInButtonLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_SIGN_IN_BUTTON_LABEL}, + + // 'Forgot Password' dialog: + {"braveAccountForgotPasswordDialogTitle", + IDS_SETTINGS_BRAVE_ACCOUNT_FORGOT_PASSWORD_DIALOG_TITLE}, + {"braveAccountForgotPasswordDialogDescription", + IDS_SETTINGS_BRAVE_ACCOUNT_FORGOT_PASSWORD_DIALOG_DESCRIPTION}, + {"braveAccountAlertMessage", IDS_SETTINGS_BRAVE_ACCOUNT_ALERT_MESSAGE}, + {"braveAccountCancelButtonLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_CANCEL_BUTTON_LABEL}, + {"braveAccountResetPasswordButtonLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_RESET_PASSWORD_BUTTON_LABEL}, + + // Common: + {"braveAccountEmailInputLabel", + IDS_SETTINGS_BRAVE_ACCOUNT_EMAIL_INPUT_LABEL}, + {"braveAccountEmailInputPlaceholder", + IDS_SETTINGS_BRAVE_ACCOUNT_EMAIL_INPUT_PLACEHOLDER}, + {"braveAccountPasswordInputPlaceholder", + IDS_SETTINGS_BRAVE_ACCOUNT_PASSWORD_INPUT_PLACEHOLDER}, + // + {"siteSettingsShields", IDS_SETTINGS_SITE_SETTINGS_SHIELDS}, {"siteSettingsShieldsStatus", IDS_SETTINGS_SITE_SETTINGS_SHIELDS_STATUS}, {"siteSettingsShieldsUp", IDS_SETTINGS_SITE_SETTINGS_SHIELDS_UP}, @@ -780,6 +872,18 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source, IDS_BRAVE_SHIELDS_SAVE_CONTACT_INFO_LABEL_SUBLABEL}}; html_source->AddLocalizedStrings(localized_strings); + // + html_source->AddString( + "braveAccountSelfCustodyDescription", + l10n_util::GetStringFUTF16( + IDS_SETTINGS_BRAVE_ACCOUNT_SELF_CUSTODY_DESCRIPTION, + kBraveAccountSelfCustodyLearnMoreURL)); + html_source->AddString( + "braveAccountConsentCheckboxLabel", + l10n_util::GetStringFUTF16( + IDS_SETTINGS_BRAVE_ACCOUNT_CONSENT_CHECKBOX_LABEL, + kBraveAccountTermsOfServiceURL, kBraveAccountPrivacyAgreementURL)); + // html_source->AddString("braveShieldsExampleTemplate", "example.com"); html_source->AddString("webRTCLearnMoreURL", kWebRTCLearnMoreURL); html_source->AddString("googleLoginLearnMoreURL", kGoogleLoginLearnMoreURL); diff --git a/patches/chrome-browser-resources-settings-BUILD.gn.patch b/patches/chrome-browser-resources-settings-BUILD.gn.patch index 5075b9b61e15..3f59672c1ca2 100644 --- a/patches/chrome-browser-resources-settings-BUILD.gn.patch +++ b/patches/chrome-browser-resources-settings-BUILD.gn.patch @@ -1,10 +1,10 @@ diff --git a/chrome/browser/resources/settings/BUILD.gn b/chrome/browser/resources/settings/BUILD.gn -index 15fe00363df93896ee6a64ec238744491e8efe91..811cb5622c96e491320fa1f6b9fa0866ad347e4a 100644 +index 15fe00363df93896ee6a64ec238744491e8efe91..fc3e84dc90686c9007f9a7836b69d0f03747b67f 100644 --- a/chrome/browser/resources/settings/BUILD.gn +++ b/chrome/browser/resources/settings/BUILD.gn @@ -446,4 +446,5 @@ build_webui("build") { "$root_gen_dir/chrome/browser/resources/settings_shared/tsc", root_build_dir) ] } -+ import("//brave/browser/resources/settings/sources.gni") web_component_files += brave_settings_web_component_files non_web_component_files += brave_settings_non_web_component_files exclude_html_css_preprocess_files = brave_settings_local_html_files exclude_ts_preprocess_files = brave_settings_local_ts_files preprocess_deps = brave_settings_preprocess_deps ts_extra_deps = brave_settings_ts_extra_deps ts_definitions += brave_settings_ts_definitions if (optimize_webui) { extra_grdp_deps = [ "//brave/browser/resources/settings:resources" ] extra_grdp_files = [] } mojo_files = brave_settings_mojo_files mojo_files_deps = brave_settings_mojo_files_deps ts_deps += brave_settings_ts_deps ++ import("//brave/browser/resources/settings/sources.gni") web_component_files += brave_settings_web_component_files non_web_component_files += brave_settings_non_web_component_files css_files += brave_settings_local_css_files exclude_html_css_preprocess_files = brave_settings_local_html_files + brave_settings_local_css_files exclude_ts_preprocess_files = brave_settings_local_ts_files preprocess_deps = brave_settings_preprocess_deps ts_extra_deps = brave_settings_ts_extra_deps ts_definitions += brave_settings_ts_definitions if (optimize_webui) { extra_grdp_deps = [ "//brave/browser/resources/settings:resources" ] extra_grdp_files = [] } mojo_files = brave_settings_mojo_files mojo_files_deps = brave_settings_mojo_files_deps ts_deps += brave_settings_ts_deps } diff --git a/patches/ui-webui-resources-tools-build_webui.gni.patch b/patches/ui-webui-resources-tools-build_webui.gni.patch index b8def813100a..205c0f0b405b 100644 --- a/patches/ui-webui-resources-tools-build_webui.gni.patch +++ b/patches/ui-webui-resources-tools-build_webui.gni.patch @@ -1,5 +1,5 @@ diff --git a/ui/webui/resources/tools/build_webui.gni b/ui/webui/resources/tools/build_webui.gni -index 98fd56c9308df54eb0f3fa52997a80fd72efa503..5049e89e98f1296199ccffed1f14063f8102515a 100644 +index 98fd56c9308df54eb0f3fa52997a80fd72efa503..c850c31ee115c007f1209abe694f7b62fe006a20 100644 --- a/ui/webui/resources/tools/build_webui.gni +++ b/ui/webui/resources/tools/build_webui.gni @@ -209,6 +209,7 @@ template("build_webui") { @@ -18,11 +18,3 @@ index 98fd56c9308df54eb0f3fa52997a80fd72efa503..5049e89e98f1296199ccffed1f14063f } } -@@ -285,6 +287,7 @@ template("build_webui") { - } - } - } -+ if (defined(invoker.preprocess_deps)) { public_deps = invoker.preprocess_deps } - } - } - diff --git a/ui/webui/resources/leo/web_components.ts b/ui/webui/resources/leo/web_components.ts index c4f85126335f..bf3ee7334066 100644 --- a/ui/webui/resources/leo/web_components.ts +++ b/ui/webui/resources/leo/web_components.ts @@ -5,9 +5,12 @@ // Import web components here. They will be available on the page // as . +import '@brave/leo/web-components/alert' import '@brave/leo/web-components/button' import '@brave/leo/web-components/dropdown' import '@brave/leo/web-components/checkbox' +import '@brave/leo/web-components/icon' +import '@brave/leo/web-components/input' import '@brave/leo/web-components/label' import '@brave/leo/web-components/progressRing' import '@brave/leo/web-components/toggle'