From 3dc11b923d3419f096947f8bfd239b0171c7504f Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 30 Jul 2021 15:45:12 +1000 Subject: [PATCH] do not display optional password on registration page --- .../session/registration/RegistrationTabs.tsx | 82 ++----------------- .../registration/RegistrationUserDetails.tsx | 52 ------------ .../session/registration/SignInTab.tsx | 36 +------- .../session/registration/SignUpTab.tsx | 33 +------- 4 files changed, 9 insertions(+), 194 deletions(-) diff --git a/ts/components/session/registration/RegistrationTabs.tsx b/ts/components/session/registration/RegistrationTabs.tsx index 9c94ec543..c48c023a5 100644 --- a/ts/components/session/registration/RegistrationTabs.tsx +++ b/ts/components/session/registration/RegistrationTabs.tsx @@ -6,7 +6,6 @@ import { createOrUpdateItem, removeAll } from '../../../data/data'; import { SignUpTab } from './SignUpTab'; import { SignInTab } from './SignInTab'; import { TabLabel, TabType } from './TabLabel'; -import { PasswordUtil } from '../../../util'; import { trigger } from '../../../shims/events'; import { generateMnemonic, @@ -28,38 +27,6 @@ interface State { hexGeneratedPubKey: string; } -export function validatePassword(password: string, verifyPassword: string) { - const trimmedPassword = password.trim(); - const trimmedVerifyPassword = verifyPassword.trim(); - // If user hasn't set a value then skip - if (!trimmedPassword && !trimmedVerifyPassword) { - return { - passwordErrorString: '', - passwordFieldsMatch: true, - }; - } - - const error = PasswordUtil.validatePassword(trimmedPassword); - if (error) { - return { - passwordErrorString: error, - passwordFieldsMatch: true, - }; - } - - if (trimmedPassword !== trimmedVerifyPassword) { - return { - passwordErrorString: '', - passwordFieldsMatch: false, - }; - } - - return { - passwordErrorString: '', - passwordFieldsMatch: true, - }; -} - export async function resetRegistration() { await removeAll(); await window.storage.reset(); @@ -68,22 +35,6 @@ export async function resetRegistration() { await getConversationController().load(); } -const passwordsAreValid = (password: string, verifyPassword: string) => { - const passwordErrors = validatePassword(password, verifyPassword); - if (passwordErrors.passwordErrorString) { - window?.log?.warn('invalid password for registration'); - ToastUtils.pushToastError('invalidPassword', window.i18n('invalidPassword')); - return false; - } - if (!!password && !passwordErrors.passwordFieldsMatch) { - window?.log?.warn('passwords does not match for registration'); - ToastUtils.pushToastError('invalidPassword', window.i18n('passwordsDoNotMatch')); - return false; - } - - return true; -}; - /** * Returns undefined if an error happened, or the trim userName. * @@ -103,10 +54,8 @@ const displayNameIsValid = (displayName: string): undefined | string => { export async function signUp(signUpDetails: { displayName: string; generatedRecoveryPhrase: string; - password: string; - verifyPassword: string; }) { - const { displayName, password, verifyPassword, generatedRecoveryPhrase } = signUpDetails; + const { displayName, generatedRecoveryPhrase } = signUpDetails; window?.log?.info('SIGNING UP'); const trimName = displayNameIsValid(displayName); @@ -115,14 +64,8 @@ export async function signUp(signUpDetails: { return; } - // This will show a toast with the error - if (!passwordsAreValid(password, verifyPassword)) { - return; - } - try { await resetRegistration(); - await window.setPassword(password); await registerSingleDevice(generatedRecoveryPhrase, 'english', trimName); await createOrUpdateItem({ id: 'hasSyncedInitialConfigurationItem', @@ -145,24 +88,17 @@ export async function signUp(signUpDetails: { export async function signInWithRecovery(signInDetails: { displayName: string; userRecoveryPhrase: string; - password: string; - verifyPassword: string; }) { - const { displayName, password, verifyPassword, userRecoveryPhrase } = signInDetails; + const { displayName, userRecoveryPhrase } = signInDetails; window?.log?.info('RESTORING FROM SEED'); const trimName = displayNameIsValid(displayName); // shows toast to user about the error if (!trimName) { return; } - // This will show a toast with the error - if (!passwordsAreValid(password, verifyPassword)) { - return; - } try { await resetRegistration(); - await window.setPassword(password); await registerSingleDevice(userRecoveryPhrase, 'english', trimName); trigger('openInbox'); @@ -177,20 +113,12 @@ export async function signInWithRecovery(signInDetails: { * This is will try to sign in with the user recovery phrase. * If no ConfigurationMessage is received in 60seconds, the loading will be canceled. */ -export async function signInWithLinking(signInDetails: { - userRecoveryPhrase: string; - password: string; - verifyPassword: string; -}) { - const { password, verifyPassword, userRecoveryPhrase } = signInDetails; +export async function signInWithLinking(signInDetails: { userRecoveryPhrase: string }) { + const { userRecoveryPhrase } = signInDetails; window?.log?.info('LINKING DEVICE'); - // This will show a toast with the error - if (!passwordsAreValid(password, verifyPassword)) { - return; - } + try { await resetRegistration(); - await window.setPassword(password); await signInByLinkingDevice(userRecoveryPhrase, 'english'); let displayNameFromNetwork = ''; await getSwarmPollingInstance().start(); diff --git a/ts/components/session/registration/RegistrationUserDetails.tsx b/ts/components/session/registration/RegistrationUserDetails.tsx index b7237ca4a..4a7935e14 100644 --- a/ts/components/session/registration/RegistrationUserDetails.tsx +++ b/ts/components/session/registration/RegistrationUserDetails.tsx @@ -46,45 +46,6 @@ const RecoveryPhraseInput = (props: { ); }; -const PasswordAndVerifyPasswordFields = (props: { - password: string; - passwordFieldsMatch: boolean; - passwordErrorString: string; - onPasswordChanged: (val: string) => any; - onPasswordVerifyChanged: (val: string) => any; - handlePressEnter: () => any; -}) => { - const { password, passwordFieldsMatch, passwordErrorString } = props; - const passwordsDoNotMatch = - !passwordFieldsMatch && password ? window.i18n('passwordsDoNotMatch') : undefined; - - return ( - <> - - - {!!password && ( - - )} - - ); -}; - export interface Props { // tslint:disable: react-unused-props-and-state showDisplayNameField: boolean; @@ -92,14 +53,9 @@ export interface Props { stealAutoFocus?: boolean; recoveryPhrase?: string; displayName: string; - password: string; - passwordErrorString: string; - passwordFieldsMatch: boolean; handlePressEnter: () => any; onSeedChanged?: (val: string) => any; onDisplayNameChanged: (val: string) => any; - onPasswordChanged: (val: string) => any; - onPasswordVerifyChanged: (val: string) => any; } export const RegistrationUserDetails = (props: Props) => { @@ -124,14 +80,6 @@ export const RegistrationUserDetails = (props: Props) => { onDisplayNameChanged={props.onDisplayNameChanged} /> )} - ); diff --git a/ts/components/session/registration/SignInTab.tsx b/ts/components/session/registration/SignInTab.tsx index 40571a2bc..40f05251d 100644 --- a/ts/components/session/registration/SignInTab.tsx +++ b/ts/components/session/registration/SignInTab.tsx @@ -3,7 +3,7 @@ import { Flex } from '../../basic/Flex'; import { SpacerLG } from '../../basic/Text'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton'; import { SessionSpinner } from '../SessionSpinner'; -import { signInWithLinking, signInWithRecovery, validatePassword } from './RegistrationTabs'; +import { signInWithLinking, signInWithRecovery } from './RegistrationTabs'; import { RegistrationUserDetails } from './RegistrationUserDetails'; import { TermsAndConditions } from './TermsAndConditions'; @@ -93,10 +93,6 @@ export const SignInTab = () => { const [recoveryPhraseError, setRecoveryPhraseError] = useState(undefined as string | undefined); const [displayName, setDisplayName] = useState(''); const [displayNameError, setDisplayNameError] = useState(''); - const [password, setPassword] = useState(''); - const [passwordVerify, setPasswordVerify] = useState(''); - const [passwordErrorString, setPasswordErrorString] = useState(''); - const [passwordFieldsMatch, setPasswordFieldsMatch] = useState(false); const [loading, setIsLoading] = useState(false); const isRecovery = signInMode === SignInMode.UsingRecoveryPhrase; @@ -110,28 +106,22 @@ export const SignInTab = () => { // Display name is required only on isRecoveryMode const displayNameOK = (isRecovery && !displayNameError && !!displayName) || isLinking; - // Password is valid if empty, or if no error and fields are matching - const passwordsOK = !password || (!passwordErrorString && passwordFieldsMatch); // Seed is mandatory no matter which mode const seedOK = recoveryPhrase && !recoveryPhraseError; - const activateContinueButton = seedOK && displayNameOK && passwordsOK && !loading; + const activateContinueButton = seedOK && displayNameOK && !loading; const continueYourSession = async () => { if (isRecovery) { await signInWithRecovery({ displayName, userRecoveryPhrase: recoveryPhrase, - password, - verifyPassword: passwordVerify, }); } else if (isLinking) { setIsLoading(true); await signInWithLinking({ userRecoveryPhrase: recoveryPhrase, - password, - verifyPassword: passwordVerify, }); setIsLoading(false); } @@ -151,32 +141,10 @@ export const SignInTab = () => { setDisplayName(sanitizedName); setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined); }} - onPasswordChanged={(val: string) => { - setPassword(val); - // if user just removed the password, empty the verify too - if (!val) { - setPasswordVerify(''); - setPasswordErrorString(''); - setPasswordFieldsMatch(true); - return; - } - const errors = validatePassword(val, passwordVerify); - setPasswordErrorString(errors.passwordErrorString); - setPasswordFieldsMatch(errors.passwordFieldsMatch); - }} - onPasswordVerifyChanged={(val: string) => { - setPasswordVerify(val); - const errors = validatePassword(password, val); - setPasswordErrorString(errors.passwordErrorString); - setPasswordFieldsMatch(errors.passwordFieldsMatch); - }} onSeedChanged={(seed: string) => { setRecoveryPhrase(seed); setRecoveryPhraseError(!seed ? window.i18n('recoveryPhraseEmpty') : undefined); }} - password={password} - passwordErrorString={passwordErrorString} - passwordFieldsMatch={passwordFieldsMatch} recoveryPhrase={recoveryPhrase} stealAutoFocus={true} /> diff --git a/ts/components/session/registration/SignUpTab.tsx b/ts/components/session/registration/SignUpTab.tsx index 494205c6a..df4d1d0a0 100644 --- a/ts/components/session/registration/SignUpTab.tsx +++ b/ts/components/session/registration/SignUpTab.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton'; import { SessionIdEditable } from '../SessionIdEditable'; -import { signUp, validatePassword } from './RegistrationTabs'; +import { signUp } from './RegistrationTabs'; import { RegistrationUserDetails } from './RegistrationUserDetails'; import { TermsAndConditions } from './TermsAndConditions'; @@ -67,11 +67,7 @@ export const SignUpTab = (props: Props) => { const [signUpMode, setSignUpMode] = useState(SignUpMode.Default); const [displayName, setDisplayName] = useState(''); - const [password, setPassword] = useState(''); - const [passwordVerify, setPasswordVerify] = useState(''); - const [passwordErrorString, setPasswordErrorString] = useState(''); const [displayNameError, setDisplayNameError] = useState(''); - const [passwordFieldsMatch, setPasswordFieldsMatch] = useState(false); useEffect(() => { if (signUpMode === SignUpMode.SessionIDShown) { @@ -103,16 +99,12 @@ export const SignUpTab = (props: Props) => { // Display name is required const displayNameOK = !displayNameError && !!displayName; - // Password is valid if empty, or if no error and fields are matching - const passwordsOK = !password || (!passwordErrorString && passwordFieldsMatch); - const enableCompleteSignUp = displayNameOK && passwordsOK; + const enableCompleteSignUp = displayNameOK; const signUpWithDetails = async () => { await signUp({ displayName, generatedRecoveryPhrase: props.generatedRecoveryPhrase, - password, - verifyPassword: passwordVerify, }); }; @@ -133,27 +125,6 @@ export const SignUpTab = (props: Props) => { setDisplayName(sanitizedName); setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined); }} - onPasswordChanged={(val: string) => { - setPassword(val); - if (!val) { - setPasswordVerify(''); - setPasswordErrorString(''); - setPasswordFieldsMatch(true); - return; - } - const errors = validatePassword(val, passwordVerify); - setPasswordErrorString(errors.passwordErrorString); - setPasswordFieldsMatch(errors.passwordFieldsMatch); - }} - onPasswordVerifyChanged={(val: string) => { - setPasswordVerify(val); - const errors = validatePassword(password, val); - setPasswordErrorString(errors.passwordErrorString); - setPasswordFieldsMatch(errors.passwordFieldsMatch); - }} - password={password} - passwordErrorString={passwordErrorString} - passwordFieldsMatch={passwordFieldsMatch} stealAutoFocus={true} />