oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

do not display optional password on registration page

This commit is contained in:
Audric Ackermann 2021-07-30 15:45:12 +10:00
parent 649a581dd2
commit 3dc11b923d
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
4 changed files with 9 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
ts/components/session/registration/RegistrationTabs.tsx
View File

@ -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();

52
ts/components/session/registration/RegistrationUserDetails.tsx
View File

@ -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 (
<>
<SessionInput
label={window.i18n('password')}
error={passwordErrorString}
type="password"
placeholder={window.i18n('enterOptionalPassword')}
onValueChanged={props.onPasswordChanged}
onEnterPressed={props.handlePressEnter}
theme={lightTheme}
/>
{!!password && (
<SessionInput
label={window.i18n('confirmPassword')}
error={passwordsDoNotMatch}
type="password"
placeholder={window.i18n('confirmPassword')}
onValueChanged={props.onPasswordVerifyChanged}
onEnterPressed={props.handlePressEnter}
theme={lightTheme}
/>
)}
</>
);
};
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}
/>
)}
<PasswordAndVerifyPasswordFields
handlePressEnter={props.handlePressEnter}
onPasswordChanged={props.onPasswordChanged}
onPasswordVerifyChanged={props.onPasswordVerifyChanged}
passwordErrorString={props.passwordErrorString}
password={props.password}
passwordFieldsMatch={props.passwordFieldsMatch}
/>
</div>
</div>
);

36
ts/components/session/registration/SignInTab.tsx
View File

@ -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}
/>

33
ts/components/session/registration/SignUpTab.tsx
View File

@ -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}
/>
<SessionButton