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

feat: display name screen shows correctly now

Browse Source 
hide back button while loading
pull/3056/head
William Grant 1 year ago
parent 6f84d5bede
commit 7d1907527c
1 changed files with 50 additions and 54 deletions
Show Stats Download Patch File Download Diff File

104
ts/components/registration/stages/RestoreAccount.tsx
Unescape Escape View File

@ -20,6 +20,8 @@ import { OnboardContainer, OnboardDescription, OnboardHeading } from '../compone
import { BackButtonWithininContainer } from '../components/BackButton'; import { BackButtonWithininContainer } from '../components/BackButton';
import { sanitizeDisplayNameOrToast } from '../utils'; import { sanitizeDisplayNameOrToast } from '../utils';
let interval: NodeJS.Timeout;
export const RestoreAccount = () => { export const RestoreAccount = () => {
const step = useOnboardAccountRestorationStep(); const step = useOnboardAccountRestorationStep();
@ -33,18 +35,7 @@ export const RestoreAccount = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
// Seed is mandatory no matter which mode const recoverAndFetchDisplayName = async () => {
const seedOK = !!recoveryPhrase && !recoveryPhraseError;
const displayNameOK = !!displayName && !displayNameError;
const activateContinueButton =
seedOK &&
!(
step ===
(AccountRestoration.Loading || AccountRestoration.Finishing || AccountRestoration.Finished)
);
const recoverWithoutDisplayName = async () => {
setProgress(0); setProgress(0);
dispatch(setAccountRestorationStep(AccountRestoration.Loading)); dispatch(setAccountRestorationStep(AccountRestoration.Loading));
try { try {
@ -57,8 +48,7 @@ export const RestoreAccount = () => {
} catch (e) { } catch (e) {
if (e instanceof NotFoundError) { if (e instanceof NotFoundError) {
window.log.debug( window.log.debug(
`WIP: [continueYourSession] AccountRestoration.DisplayName failed to fetch display name so we need to enter it manually error ${e.message || `WIP: [continueYourSession] AccountRestoration.DisplayName failed to fetch display name so we need to enter it manually. Error: ${e}`
e}`
); );
dispatch(setAccountRestorationStep(AccountRestoration.DisplayName)); dispatch(setAccountRestorationStep(AccountRestoration.DisplayName));
} else { } else {
@ -67,12 +57,12 @@ export const RestoreAccount = () => {
} }
}; };
const recoverWithDisplayName = async () => { const recoverAndEnterDisplayName = async () => {
if (!displayNameOK) { if (!(!!displayName && !displayNameError)) {
return; return;
} }
void signInWithNewDisplayName({ await signInWithNewDisplayName({
displayName, displayName,
userRecoveryPhrase: recoveryPhrase, userRecoveryPhrase: recoveryPhrase,
}); });
@ -81,8 +71,6 @@ export const RestoreAccount = () => {
}; };
useEffect(() => { useEffect(() => {
let interval: NodeJS.Timeout;
if (step === AccountRestoration.Loading) { if (step === AccountRestoration.Loading) {
interval = setInterval(() => { interval = setInterval(() => {
if (progress < 100) { if (progress < 100) {
@ -96,7 +84,7 @@ export const RestoreAccount = () => {
clearInterval(interval); clearInterval(interval);
// if we didn't get the display name in time, we need to enter it manually // if we didn't get the display name in time, we need to enter it manually
window.log.debug( window.log.debug(
`WIP: [continueYourSession] AccountRestoration.Loading We didn't get the display name in time, we need to enter it manually` `WIP: [continueYourSession] AccountRestoration.Loading We didn't get the display name in time, so we need to enter it manually`
); );
dispatch(setAccountRestorationStep(AccountRestoration.DisplayName)); dispatch(setAccountRestorationStep(AccountRestoration.DisplayName));
} }
@ -128,7 +116,7 @@ export const RestoreAccount = () => {
); );
dispatch(setAccountRestorationStep(AccountRestoration.Complete)); dispatch(setAccountRestorationStep(AccountRestoration.Complete));
} else { } else {
dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword)); dispatch(setAccountRestorationStep(AccountRestoration.DisplayName));
window.log.debug( window.log.debug(
`WIP: [continueYourSession] AccountRestoration.DisplayName failed to fetch display name so we need to enter it manually` `WIP: [continueYourSession] AccountRestoration.DisplayName failed to fetch display name so we need to enter it manually`
); );
@ -137,6 +125,7 @@ export const RestoreAccount = () => {
} }
if (step === AccountRestoration.Complete) { if (step === AccountRestoration.Complete) {
clearInterval(interval);
if (!isEmpty(displayName)) { if (!isEmpty(displayName)) {
window.log.debug( window.log.debug(
`WIP: [continueYourSession] AccountRestoration.Complete opening inbox for ${displayName}` `WIP: [continueYourSession] AccountRestoration.Complete opening inbox for ${displayName}`
@ -156,6 +145,7 @@ export const RestoreAccount = () => {
container={true} container={true}
width="100%" width="100%"
flexDirection="column" flexDirection="column"
justifyContent="flex-start"
alignItems="flex-start" alignItems="flex-start"
margin={'0 0 0 8px'} margin={'0 0 0 8px'}
> >
@ -182,7 +172,7 @@ export const RestoreAccount = () => {
setRecoveryPhrase(seed); setRecoveryPhrase(seed);
setRecoveryPhraseError(!seed ? window.i18n('recoveryPhraseEmpty') : undefined); setRecoveryPhraseError(!seed ? window.i18n('recoveryPhraseEmpty') : undefined);
}} }}
onEnterPressed={recoverWithoutDisplayName} onEnterPressed={recoverAndFetchDisplayName}
error={recoveryPhraseError} error={recoveryPhraseError}
enableShowHide={true} enableShowHide={true}
inputDataTestId="recovery-phrase-input" inputDataTestId="recovery-phrase-input"
@ -190,51 +180,57 @@ export const RestoreAccount = () => {
<SpacerLG /> <SpacerLG />
<SessionButton <SessionButton
buttonColor={SessionButtonColor.White} buttonColor={SessionButtonColor.White}
onClick={recoverWithoutDisplayName} onClick={recoverAndFetchDisplayName}
text={window.i18n('continue')} text={window.i18n('continue')}
disabled={!activateContinueButton} disabled={!(!!recoveryPhrase && !recoveryPhraseError)}
dataTestId="continue-session-button" dataTestId="continue-session-button"
/> />
</> </>
) : ( ) : (
<> <Flex container={true} width="100%" flexDirection="column" alignItems="flex-start">
{/* TODO this doesn't load for some reason */} <OnboardHeading>{window.i18n('displayNamePick')}</OnboardHeading>
<Flex container={true} width="100%" flexDirection="column" alignItems="flex-start"> <SpacerSM />
<OnboardHeading>{window.i18n('displayNamePick')}</OnboardHeading> <OnboardDescription>{window.i18n('displayNameDescription')}</OnboardDescription>
<SpacerSM /> <SpacerLG />
<OnboardDescription>{window.i18n('displayNameDescription')}</OnboardDescription> <SessionInput
<SpacerLG /> autoFocus={true}
<SessionInput type="text"
autoFocus={true} placeholder={window.i18n('enterDisplayName')}
type="text" value={displayName}
placeholder={window.i18n('enterDisplayName')} onValueChanged={(name: string) => {
value={displayName} sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError);
onValueChanged={(name: string) => { }}
sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError); onEnterPressed={recoverAndEnterDisplayName}
}} error={displayNameError}
onEnterPressed={recoverWithDisplayName} inputDataTestId="display-name-input"
error={displayNameError} />
inputDataTestId="display-name-input" <SpacerLG />
/> <SessionButton
<SpacerLG /> buttonColor={SessionButtonColor.White}
<SessionButton onClick={recoverAndEnterDisplayName}
buttonColor={SessionButtonColor.White} text={window.i18n('continue')}
onClick={recoverWithDisplayName} disabled={
text={window.i18n('continue')} !(
/> !!recoveryPhrase &&
</Flex> !recoveryPhraseError &&
</> !!displayName &&
!displayNameError
)
}
dataTestId="continue-session-button"
/>
</Flex>
)} )}
</Flex> </Flex>
</BackButtonWithininContainer> </BackButtonWithininContainer>
) : ( ) : (
<Flex <Flex
container={true} container={true}
width="100%"
flexDirection="column" flexDirection="column"
justifyContent="center" justifyContent="flex-start"
alignItems="center" alignItems="center"
// TODO update dataTestId margin={'0 0 0 8px'}
dataTestId="three-dot-loading-animation"
> >
<SessionProgressBar <SessionProgressBar
progress={progress} progress={progress}

Write Preview
Loading…
Cancel
Save