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

Adding PR changes, running yarn ready

Browse Source
pull/1846/head
Warrick Corfe-Tan 4 years ago
parent 0cbcc00180
commit dbc19adeb8
3 changed files with 38 additions and 96 deletions
Show Stats Download Patch File Download Diff File

5
_locales/en/messages.json
Unescape Escape View File

@ -430,7 +430,6 @@
"deviceOnly": "Device Only", "deviceOnly": "Device Only",
"entireAccount": "Entire Account", "entireAccount": "Entire Account",
"recoveryPhraseSecureTitle": "You're almost finished!", "recoveryPhraseSecureTitle": "You're almost finished!",
"recoveryPhraseRevealMessage": "Secure your account by saving your recovery phrase. Reveal your recovery phrase then store it safely to secure it", "recoveryPhraseRevealMessage": "Secure your account by saving your recovery phrase. Reveal your recovery phrase then store it safely to secure it.",
"recoveryPhraseRevealButtonText": "Reveal Recovery Phrase", "recoveryPhraseRevealButtonText": "Reveal Recovery Phrase"
"recoveryPhraseCompleteTitle": "Account secured!"
} }

10
ts/components/dialog/SessionSeedModal.tsx
Unescape Escape View File

@ -9,6 +9,7 @@ import { mn_decode } from '../../session/crypto/mnemonic';
import { SessionWrapperModal } from '../session/SessionWrapperModal'; import { SessionWrapperModal } from '../session/SessionWrapperModal';
import { SpacerLG, SpacerSM, SpacerXS } from '../basic/Text'; import { SpacerLG, SpacerSM, SpacerXS } from '../basic/Text';
import { recoveryPhraseModal } from '../../state/ducks/modalDialog'; import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
import { useDispatch } from 'react-redux';
interface PasswordProps { interface PasswordProps {
setPasswordValid: (val: boolean) => any; setPasswordValid: (val: boolean) => any;
@ -19,8 +20,9 @@ const Password = (props: PasswordProps) => {
const { setPasswordValid, passwordHash } = props; const { setPasswordValid, passwordHash } = props;
const i18n = window.i18n; const i18n = window.i18n;
const [error, setError] = useState(''); const [error, setError] = useState('');
const dispatch = useDispatch();
const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null)); const onClose = () => dispatch(recoveryPhraseModal(null));
const confirmPassword = () => { const confirmPassword = () => {
const passwordValue = jQuery('#seed-input-password').val(); const passwordValue = jQuery('#seed-input-password').val();
@ -87,6 +89,7 @@ const Seed = (props: SeedProps) => {
const i18n = window.i18n; const i18n = window.i18n;
const bgColor = '#FFFFFF'; const bgColor = '#FFFFFF';
const fgColor = '#1B1B1B'; const fgColor = '#1B1B1B';
const dispatch = useDispatch();
const hexEncodedSeed = mn_decode(recoveryPhrase, 'english'); const hexEncodedSeed = mn_decode(recoveryPhrase, 'english');
@ -96,7 +99,7 @@ const Seed = (props: SeedProps) => {
if (onClickCopy) { if (onClickCopy) {
onClickCopy(); onClickCopy();
} }
window.inboxStore?.dispatch(recoveryPhraseModal(null)); dispatch(recoveryPhraseModal(null));
}; };
return ( return (
@ -136,6 +139,7 @@ const SessionSeedModalInner = (props: ModalInnerProps) => {
const [hasPassword, setHasPassword] = useState<null | boolean>(null); const [hasPassword, setHasPassword] = useState<null | boolean>(null);
const [passwordValid, setPasswordValid] = useState(false); const [passwordValid, setPasswordValid] = useState(false);
const [passwordHash, setPasswordHash] = useState(''); const [passwordHash, setPasswordHash] = useState('');
const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
setTimeout(() => ($('#seed-input-password') as any).focus(), 100); setTimeout(() => ($('#seed-input-password') as any).focus(), 100);
@ -145,7 +149,7 @@ const SessionSeedModalInner = (props: ModalInnerProps) => {
const i18n = window.i18n; const i18n = window.i18n;
const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null)); const onClose = () => dispatch(recoveryPhraseModal(null));
const checkHasPassword = async () => { const checkHasPassword = async () => {
if (!loadingPassword) { if (!loadingPassword) {

119
ts/components/session/LeftPaneSectionHeader.tsx
Unescape Escape View File

@ -1,10 +1,8 @@
import React, { useState } from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { SessionIcon, SessionIconSize, SessionIconType } from './icon'; import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
import styled, { DefaultTheme, useTheme } from 'styled-components'; import styled, { useTheme } from 'styled-components';
import { SessionButton, SessionButtonType } from './SessionButton'; import { SessionButton, SessionButtonType } from './SessionButton';
import { Constants } from '../../session';
import { UserUtils } from '../../session/utils';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { disableRecoveryPhrasePrompt } from '../../state/ducks/userConfig'; import { disableRecoveryPhrasePrompt } from '../../state/ducks/userConfig';
import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig'; import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig';
@ -51,11 +49,11 @@ export const LeftPaneSectionHeader = (props: Props) => {
const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt); const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);
return ( return (
<Flex flexDirection={'column'}> <Flex flexDirection="column">
<div className="module-left-pane__header"> <div className="module-left-pane__header">
{label && <Tab label={label} type={0} isSelected={true} key={label} />} {label && <Tab label={label} type={0} isSelected={true} key={label} />}
{buttonIcon && ( {buttonIcon && (
<SessionButton onClick={buttonClicked} key="compose" theme={theme}> <SessionButton onClick={buttonClicked} key="compose">
<SessionIcon <SessionIcon
iconType={buttonIcon} iconType={buttonIcon}
iconSize={SessionIconSize.Small} iconSize={SessionIconSize.Small}
@ -71,31 +69,13 @@ export const LeftPaneSectionHeader = (props: Props) => {
}; };
export const LeftPaneBanner = () => { export const LeftPaneBanner = () => {
const [completion, setCompletion] = useState(90);
const [bodyText, setBodyText] = useState(window.i18n('recoveryPhraseRevealMessage'));
const [recoveryPhraseHidden, setRecoveryPhraseHidden] = useState(true);
const [isCompleted, setIsCompleted] = useState(false);
const [bannerTitle, setBannerTitle] = useState(window.i18n('recoveryPhraseSecureTitle'));
const recoveryPhrase = UserUtils.getCurrentRecoveryPhrase();
const secondsBeforeRemoval = 2 * 1000;
const completionText = `${completion}%`;
const dispatch = useDispatch(); const dispatch = useDispatch();
const showRecoveryPhraseModal = () => { const showRecoveryPhraseModal = () => {
dispatch( dispatch(
recoveryPhraseModal({ recoveryPhraseModal({
onClickOk: () => { onClickOk: () => {
setCompletion(100); dispatch(disableRecoveryPhrasePrompt());
setBannerTitle(window.i18n('recoveryPhraseCompleteTitle'));
setBodyText('');
setRecoveryPhraseHidden(true);
setIsCompleted(true);
// remove banner after a small delay
setTimeout(() => {
dispatch(disableRecoveryPhrasePrompt());
}, secondsBeforeRemoval);
}, },
}) })
); );
@ -104,19 +84,12 @@ export const LeftPaneBanner = () => {
const BannerInner = () => { const BannerInner = () => {
return ( return (
<StyledBannerInner> <StyledBannerInner>
<p>{bodyText}</p> <p>{window.i18n('recoveryPhraseRevealMessage')}</p>
{!recoveryPhraseHidden && ( <SessionButton
<StyledRecoveryPhrase theme={theme} className="left-pane-banner___phrase"> buttonType={SessionButtonType.Default}
{recoveryPhrase} text={window.i18n('recoveryPhraseRevealButtonText')}
</StyledRecoveryPhrase> onClick={showRecoveryPhraseModal}
)} />
{!isCompleted && (
<SessionButton
buttonType={SessionButtonType.Default}
text={window.i18n('recoveryPhraseRevealButtonText')}
onClick={showRecoveryPhraseModal}
/>
)}
</StyledBannerInner> </StyledBannerInner>
); );
}; };
@ -124,17 +97,17 @@ export const LeftPaneBanner = () => {
const theme = useTheme(); const theme = useTheme();
return ( return (
<StyledLeftPaneBanner border={useTheme().colors.sessionBorder} isCompleted={isCompleted}> <StyledLeftPaneBanner>
<StyledProgressBarContainer> <StyledProgressBarContainer>
<StyledProgressBarInner color={Constants.UI.COLORS.GREEN} width={`${completion}%`} /> <StyledProgressBarInner />
</StyledProgressBarContainer> </StyledProgressBarContainer>
<StyledBannerTitle theme={theme}> <StyledBannerTitle>
{bannerTitle} <span>{completionText}</span> {window.i18n('recoveryPhraseSecureTitle')} <span>90%</span>
</StyledBannerTitle> </StyledBannerTitle>
<Flex <Flex
flexDirection={'column'} flexDirection="column"
justifyContent={'space-between'} justifyContent="space-between"
padding={`${Constants.UI.SPACING.marginSm}`} padding={`${theme.common.margins.sm}`}
> >
<BannerInner /> <BannerInner />
</Flex> </Flex>
@ -142,61 +115,37 @@ export const LeftPaneBanner = () => {
); );
}; };
interface StyledProgressBarContainerProps {
theme: DefaultTheme;
}
const StyledProgressBarContainer = styled.div` const StyledProgressBarContainer = styled.div`
width: 100%; width: 100%;
height: 5px; height: 5px;
flex-direction: row; flex-direction: row;
background: ${(p: StyledProgressBarContainerProps) => p.theme.colors.sessionBorderColor}; background: ${p => p.theme.colors.sessionBorderColor};
`; `;
interface StyledProgressBarProps {
width: string;
color?: string;
}
const StyledProgressBarInner = styled.div` const StyledProgressBarInner = styled.div`
background: ${(p: StyledProgressBarProps) => p.color}; background: ${p => p.theme.colors.accent};
width: ${(p: StyledProgressBarProps) => p.width}; width: 90%;
transition: width 0.5s ease-in; transition: width 0.5s ease-in;
height: 100%; height: 100%;
`; `;
interface StyledBannerTitle {
theme: DefaultTheme;
}
export const StyledBannerTitle = styled.div` export const StyledBannerTitle = styled.div`
line-height: 1.3; line-height: 1.3;
font-size: ${(p: StyledBannerTitle) => p.theme.common.fonts.md}; font-size: ${p => p.theme.common.fonts.md};
font-weight: bold; font-weight: bold;
margin: ${Constants.UI.SPACING.marginSm} ${Constants.UI.SPACING.marginSm} 0 margin: ${p => p.theme.common.margins.sm} ${p => p.theme.common.margins.sm} 0
${Constants.UI.SPACING.marginSm}; ${p => p.theme.common.margins.sm};
span { span {
color: ${(p: StyledBannerTitle) => p.theme.colors.textAccent}; color: ${p => p.theme.colors.textAccent};
} }
`; `;
interface StyledLeftPaneBannerProps {
isCompleted?: boolean;
border: string;
theme: DefaultTheme;
}
export const StyledLeftPaneBanner = styled.div` export const StyledLeftPaneBanner = styled.div`
background: ${(p: StyledLeftPaneBannerProps) => p.theme.colors.recoveryPhraseBannerBackground}; background: ${p => p.theme.colors.recoveryPhraseBannerBackground};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-bottom: ${(p: StyledLeftPaneBannerProps) => p.border}; border-bottom: ${p => p.theme.colors.sessionBorder};
opacity: 1;
transition: opacity 2s;
${(p: StyledLeftPaneBannerProps) =>
p.isCompleted === true
? `
opacity: 0;
`
: null}
`; `;
const StyledBannerInner = styled.div` const StyledBannerInner = styled.div`
@ -205,20 +154,10 @@ const StyledBannerInner = styled.div`
} }
.left-pane-banner___phrase { .left-pane-banner___phrase {
margin-top: ${Constants.UI.SPACING.marginMd}; margin-top: ${props => props.theme.common.margins.md};
} }
.session-button { .session-button {
margin-top: ${Constants.UI.SPACING.marginSm}; margin-top: ${props => props.theme.common.margins.sm};
} }
`; `;
interface StyledRecoveryPhraseProps {
theme: DefaultTheme;
}
const StyledRecoveryPhrase = styled.p`
margin: ${Constants.UI.SPACING.marginXs};
border-radius: 5px;
padding: 5px;
border: ${(props: StyledRecoveryPhraseProps) => props.theme.colors.sessionBorderHighContrast};
`;

Write Preview
Loading…
Cancel
Save