-
Notifications
You must be signed in to change notification settings - Fork 887
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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. | ||
</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"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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"><a target="_blank" href="$1"></ph>Learn more<ph name="END_LINK"></a></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"><a target="_blank" href="$1"></ph>Terms of service<ph name="END_LINK_1"></a></ph> and <ph name="BEGIN_LINK_2"><a target="_blank" href="$2"></ph>Privacy agreement<ph name="END_LINK_2"></a></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> | ||
|
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; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
||
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; | ||
} |
There was a problem hiding this comment.
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).