Skip to content

Commit

Permalink
Brave Account brave://settings UI.
Browse files Browse the repository at this point in the history
  • Loading branch information
szilardszaloki committed Dec 11, 2024
1 parent dda7577 commit 51d11ab
Show file tree
Hide file tree
Showing 34 changed files with 1,564 additions and 12 deletions.
130 changes: 130 additions & 0 deletions app/brave_settings_strings.grdp
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,136 @@
<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">
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_ACCOUNT_NAME_INPUT_LABEL" translateable="false" desc="Label for the 'Account name' input field">
Account name
</message>
<message name="IDS_SETTINGS_BRAVE_ACCOUNT_ACCOUNT_NAME_INPUT_PLACEHOLDER" translateable="false" desc="Placeholder for the 'Account name' input field">
Enter a name for your account
</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 {
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) {
// input is falsy
return false
}

if (!/^[\x00-\x7F]+$/.test(input)) {
// input contains non-ASCII
return false
}

const index = input.lastIndexOf('@')
if (index === -1) {
// there's no @ sign in input
return false
}

if (input.substring(0, index) === "" || input.substring(index + 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;
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

0 comments on commit 51d11ab

Please sign in to comment.