Skip to content
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

Implements UIs for the "create account" and "sign in" flows in brave://settings #26741

Merged
merged 2 commits into from
Dec 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 124 additions & 0 deletions app/brave_settings_strings.grdp
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,130 @@
<message name="IDS_SETTINGS_BRAVE_GET_STARTED_TITLE" desc="The title for the Get Started section in settings">
Get started
</message>

<!-- <Brave Account> -->
<!-- Row: -->
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_ROW_TITLE" translateable="false" desc="Title of the Brave Account row in the Get Started section">
Sign in or create a Brave account
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_ROW_DESCRIPTION" translateable="false" desc="Description of the Brave Account row in the Get Started section">
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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need to update that since we are shipping accounts without support for Sync (for the time being).

</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_GET_STARTED_BUTTON_LABEL" translateable="false" desc="Label for the button that takes the user to the 'Entry' dialog">
Get started
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_MANAGE_ACCOUNT_BUTTON_LABEL" translateable="false" desc="Label for the button that takes the user to their Brave Account settings">
Manage account
</message>

<!-- 'Entry' dialog: -->
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_ENTRY_DIALOG_TITLE" translateable="false" desc="Title for the dialog where the user can choose to create a Brave Account, or sign in">
Get started with your Brave account
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_ENTRY_DIALOG_DESCRIPTION" translateable="false" desc="Description for the dialog where the user can choose to create a Brave Account, or sign in">
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.
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_ENTRY_DIALOG_CREATE_BRAVE_ACCOUNT_BUTTON_LABEL" translateable="false" desc="Label for the button that takes the user to the 'Create' dialog">
Create a Brave account
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_ALREADY_HAVE_ACCOUNT_SIGN_IN_BUTTON_LABEL" translateable="false" desc="Label for the button that takes the user to the 'Sign In' dialog">
Already have an account? Sign in
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_SELF_CUSTODY_DESCRIPTION" translateable="false" desc="Description of the self-custody option which we provide for advanced users">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The self-custody option should not be there until we are ready to integrate with Sync.

For advanced users, we also support self-custody of your Brave account keys for an extra layer of privacy. <ph name="BEGIN_LINK">&lt;a target="_blank" href="$1"&gt;</ph>Learn more<ph name="END_LINK">&lt;/a&gt;</ph>
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_SELF_CUSTODY_BUTTON_LABEL" translateable="false" desc="Label for the button that takes the user to the self-custody settings">
Use self-custody
</message>

<!-- 'Create' dialog: -->
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_CREATE_DIALOG_TITLE" translateable="false" desc="Title for the dialog where the user can create their Brave Account">
Create your account
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_CREATE_DIALOG_DESCRIPTION" translateable="false" desc="Description for the dialog where the user can create their 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.
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_EMAIL_INPUT_ERROR_MESSAGE" translateable="false" desc="Error message for when the user tries to use a @bravealias.com email address when creating their Brave Account">
You can't use @bravealias.com addresses for creating Brave accounts. Please try again with a different domain.
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_CREATE_PASSWORD_INPUT_LABEL" translateable="false" desc="Label for the 'Create a password' input field">
Create a password
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_PASSWORD_STRENGTH_METER_WEAK" translateable="false" desc="The password strength meter's 'weak' state">
Weak
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_PASSWORD_STRENGTH_METER_MEDIUM" translateable="false" desc="The password strength meter's 'medium' state">
Medium
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_PASSWORD_STRENGTH_METER_STRONG" translateable="false" desc="The password strength meter's 'strong' state">
Strong
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_LABEL" translateable="false" desc="Label for the 'Confirm password' input field">
Confirm password
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_PLACEHOLDER" translateable="false" desc="Placeholder for the 'Confirm password' input field">
Confirm your password
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_ERROR_MESSAGE" translateable="false" desc="Message for a failed password confirmation">
Passwords don't match
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_CONFIRM_PASSWORD_INPUT_SUCCESS_MESSAGE" translateable="false" desc="Message for a successful password confirmation">
Passwords match
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_CONSENT_CHECKBOX_LABEL" translateable="false" desc="Label for the checkbox where the user consents to the Terms of service and Privacy agreement">
I have read and accept the <ph name="BEGIN_LINK_1">&lt;a target="_blank" href="$1"&gt;</ph>Terms of service<ph name="END_LINK_1">&lt;/a&gt;</ph> and <ph name="BEGIN_LINK_2">&lt;a target="_blank" href="$2"&gt;</ph>Privacy agreement<ph name="END_LINK_2">&lt;/a&gt;</ph>.
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_CREATE_ACCOUNT_BUTTON_LABEL" translateable="false" desc="Label for the button that submits the 'Create' dialog">
Create account
</message>

<!-- 'Sign In' dialog: -->
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_SIGN_IN_DIALOG_TITLE" translateable="false" desc="Title for the dialog where the user can sign in to their Brave Account">
Sign in to your account
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_SIGN_IN_DIALOG_DESCRIPTION" translateable="false" desc="Description for the dialog where the user can sign in to their 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.
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_PASSWORD_INPUT_LABEL" translateable="false" desc="Label for the 'Password' input field">
Password
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_FORGOT_PASSWORD_BUTTON_LABEL" translateable="false" desc="Label for the button that takes the user to the 'Forgot Password' dialog">
Forgot your password?
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_SIGN_IN_BUTTON_LABEL" translateable="false" desc="Label for the button that submits the 'Sign In' dialog">
Sign in
</message>

<!-- 'Forgot Password' dialog: -->
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_FORGOT_PASSWORD_DIALOG_TITLE" translateable="false" desc="Title for the dialog where the user can reset their Brave Account password">
Forgot your password?
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_FORGOT_PASSWORD_DIALOG_DESCRIPTION" translateable="false" desc="Description for the dialog where the user can reset their Brave Account 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.
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_ALERT_MESSAGE" translateable="false" desc="Alert message explaining that if the user resets their password without having an active login, all their data will be deleted">
[Explain that if they reset their password without having an active login, all the user data will be deleted]
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_CANCEL_BUTTON_LABEL" translateable="false" desc="Label for the button that takes the user back to the 'Sign In' dialog">
Cancel
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_RESET_PASSWORD_BUTTON_LABEL" translateable="false" desc="Label for the button that submits the 'Forgot Password' dialog">
Reset your password
</message>

<!-- Common: -->
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_EMAIL_INPUT_LABEL" translateable="false" desc="Label for the 'Email address' input field">
Email address
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_EMAIL_INPUT_PLACEHOLDER" translateable="false" desc="Placeholder for the 'Email address' input field">
Enter your email address
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_PASSWORD_INPUT_PLACEHOLDER" translateable="false" desc="Placeholder for the 'Create a password'/'Password' input fields">
Enter your password
</message>
<!-- </Brave Account> -->

<!-- Settings / Get started / Profile name and icon -->
<message name="IDS_SETTINGS_BRAVE_EDIT_PROFILE" desc="Title to edit the profile user name and picture">
Profile name and icon
</message>
Expand Down
5 changes: 4 additions & 1 deletion browser/resources/settings/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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
}
Original file line number Diff line number Diff line change
@@ -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 {
szilardszaloki marked this conversation as resolved.
Show resolved Hide resolved
getPasswordStrength(password: string): Promise<number>
}

export class BraveAccountBrowserProxyImpl implements BraveAccountBrowserProxy {
getPasswordStrength (password: string) {
return sendWithPromise('getPasswordStrength', password)
}

static getInstance() {
return instance || (instance = new BraveAccountBrowserProxyImpl())
}
}

let instance: BraveAccountBrowserProxy | null = null
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
@@ -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) {
szilardszaloki marked this conversation as resolved.
Show resolved Hide resolved
// 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
}
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

750ms is pretty long for an animation. Normally we use 120ms or 200ms. cc @aguscruiz

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll leave it up to @aguscruiz, but I just checked and even 200ms is way too fast for these dropdowns in my opinion. 🙂

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;
}
Loading
Loading