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",
"entireAccount": "Entire Account",
"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",
"recoveryPhraseRevealButtonText": "Reveal Recovery Phrase",
"recoveryPhraseCompleteTitle": "Account secured!"
"recoveryPhraseRevealMessage": "Secure your account by saving your recovery phrase. Reveal your recovery phrase then store it safely to secure it.",
"recoveryPhraseRevealButtonText": "Reveal Recovery Phrase"
}

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 { SpacerLG, SpacerSM, SpacerXS } from '../basic/Text';
import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
import { useDispatch } from 'react-redux';
interface PasswordProps {
setPasswordValid: (val: boolean) => any;
@ -19,8 +20,9 @@ const Password = (props: PasswordProps) => {
const { setPasswordValid, passwordHash } = props;
const i18n = window.i18n;
const [error, setError] = useState('');
const dispatch = useDispatch();
const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null));
const onClose = () => dispatch(recoveryPhraseModal(null));
const confirmPassword = () => {
const passwordValue = jQuery('#seed-input-password').val();
@ -87,6 +89,7 @@ const Seed = (props: SeedProps) => {
const i18n = window.i18n;
const bgColor = '#FFFFFF';
const fgColor = '#1B1B1B';
const dispatch = useDispatch();
const hexEncodedSeed = mn_decode(recoveryPhrase, 'english');
@ -96,7 +99,7 @@ const Seed = (props: SeedProps) => {
if (onClickCopy) {
onClickCopy();
}
window.inboxStore?.dispatch(recoveryPhraseModal(null));
dispatch(recoveryPhraseModal(null));
};
return (
@ -136,6 +139,7 @@ const SessionSeedModalInner = (props: ModalInnerProps) => {
const [hasPassword, setHasPassword] = useState<null | boolean>(null);
const [passwordValid, setPasswordValid] = useState(false);
const [passwordHash, setPasswordHash] = useState('');
const dispatch = useDispatch();
useEffect(() => {
setTimeout(() => ($('#seed-input-password') as any).focus(), 100);
@ -145,7 +149,7 @@ const SessionSeedModalInner = (props: ModalInnerProps) => {
const i18n = window.i18n;
const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null));
const onClose = () => dispatch(recoveryPhraseModal(null));
const checkHasPassword = async () => {
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 { SessionIcon, SessionIconSize, SessionIconType } from './icon';
import styled, { DefaultTheme, useTheme } from 'styled-components';
import styled, { useTheme } from 'styled-components';
import { SessionButton, SessionButtonType } from './SessionButton';
import { Constants } from '../../session';
import { UserUtils } from '../../session/utils';
import { useDispatch, useSelector } from 'react-redux';
import { disableRecoveryPhrasePrompt } from '../../state/ducks/userConfig';
import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig';
@ -51,11 +49,11 @@ export const LeftPaneSectionHeader = (props: Props) => {
const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);
return (
<Flex flexDirection={'column'}>
<Flex flexDirection="column">
<div className="module-left-pane__header">
{label && <Tab label={label} type={0} isSelected={true} key={label} />}
{buttonIcon && (
<SessionButton onClick={buttonClicked} key="compose" theme={theme}>
<SessionButton onClick={buttonClicked} key="compose">
<SessionIcon
iconType={buttonIcon}
iconSize={SessionIconSize.Small}
@ -71,31 +69,13 @@ export const LeftPaneSectionHeader = (props: Props) => {
};
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 showRecoveryPhraseModal = () => {
dispatch(
recoveryPhraseModal({
onClickOk: () => {
setCompletion(100);
setBannerTitle(window.i18n('recoveryPhraseCompleteTitle'));
setBodyText('');
setRecoveryPhraseHidden(true);
setIsCompleted(true);
// remove banner after a small delay
setTimeout(() => {
dispatch(disableRecoveryPhrasePrompt());
}, secondsBeforeRemoval);
dispatch(disableRecoveryPhrasePrompt());
},
})
);
@ -104,19 +84,12 @@ export const LeftPaneBanner = () => {
const BannerInner = () => {
return (
<StyledBannerInner>
<p>{bodyText}</p>
{!recoveryPhraseHidden && (
<StyledRecoveryPhrase theme={theme} className="left-pane-banner___phrase">
{recoveryPhrase}
</StyledRecoveryPhrase>
)}
{!isCompleted && (
<SessionButton
buttonType={SessionButtonType.Default}
text={window.i18n('recoveryPhraseRevealButtonText')}
onClick={showRecoveryPhraseModal}
/>
)}
<p>{window.i18n('recoveryPhraseRevealMessage')}</p>
<SessionButton
buttonType={SessionButtonType.Default}
text={window.i18n('recoveryPhraseRevealButtonText')}
onClick={showRecoveryPhraseModal}
/>
</StyledBannerInner>
);
};
@ -124,17 +97,17 @@ export const LeftPaneBanner = () => {
const theme = useTheme();
return (
<StyledLeftPaneBanner border={useTheme().colors.sessionBorder} isCompleted={isCompleted}>
<StyledLeftPaneBanner>
<StyledProgressBarContainer>
<StyledProgressBarInner color={Constants.UI.COLORS.GREEN} width={`${completion}%`} />
<StyledProgressBarInner />
</StyledProgressBarContainer>
<StyledBannerTitle theme={theme}>
{bannerTitle} <span>{completionText}</span>
<StyledBannerTitle>
{window.i18n('recoveryPhraseSecureTitle')} <span>90%</span>
</StyledBannerTitle>
<Flex
flexDirection={'column'}
justifyContent={'space-between'}
padding={`${Constants.UI.SPACING.marginSm}`}
flexDirection="column"
justifyContent="space-between"
padding={`${theme.common.margins.sm}`}
>
<BannerInner />
</Flex>
@ -142,61 +115,37 @@ export const LeftPaneBanner = () => {
);
};
interface StyledProgressBarContainerProps {
theme: DefaultTheme;
}
const StyledProgressBarContainer = styled.div`
width: 100%;
height: 5px;
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`
background: ${(p: StyledProgressBarProps) => p.color};
width: ${(p: StyledProgressBarProps) => p.width};
background: ${p => p.theme.colors.accent};
width: 90%;
transition: width 0.5s ease-in;
height: 100%;
`;
interface StyledBannerTitle {
theme: DefaultTheme;
}
export const StyledBannerTitle = styled.div`
line-height: 1.3;
font-size: ${(p: StyledBannerTitle) => p.theme.common.fonts.md};
font-size: ${p => p.theme.common.fonts.md};
font-weight: bold;
margin: ${Constants.UI.SPACING.marginSm} ${Constants.UI.SPACING.marginSm} 0
${Constants.UI.SPACING.marginSm};
margin: ${p => p.theme.common.margins.sm} ${p => p.theme.common.margins.sm} 0
${p => p.theme.common.margins.sm};
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`
background: ${(p: StyledLeftPaneBannerProps) => p.theme.colors.recoveryPhraseBannerBackground};
background: ${p => p.theme.colors.recoveryPhraseBannerBackground};
display: flex;
flex-direction: column;
border-bottom: ${(p: StyledLeftPaneBannerProps) => p.border};
opacity: 1;
transition: opacity 2s;
${(p: StyledLeftPaneBannerProps) =>
p.isCompleted === true
? `
opacity: 0;
`
: null}
border-bottom: ${p => p.theme.colors.sessionBorder};
`;
const StyledBannerInner = styled.div`
@ -205,20 +154,10 @@ const StyledBannerInner = styled.div`
}
.left-pane-banner___phrase {
margin-top: ${Constants.UI.SPACING.marginMd};
margin-top: ${props => props.theme.common.margins.md};
}
.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