diff --git a/frontend/src/basic/RobotPage/Onboarding.tsx b/frontend/src/basic/RobotPage/Onboarding.tsx index 70be483d..60e8d8d0 100644 --- a/frontend/src/basic/RobotPage/Onboarding.tsx +++ b/frontend/src/basic/RobotPage/Onboarding.tsx @@ -70,20 +70,15 @@ const Onboarding = ({ {t('1. Generate a token')} - - - + + @@ -154,28 +149,23 @@ const Onboarding = ({ )} - - + + {t('2. Meet your robot identity')} - - - + + @@ -248,27 +238,23 @@ const Onboarding = ({ - - + + {t('3. Browse or create an order')} - - + + @@ -316,8 +302,8 @@ const Onboarding = ({ - - + + + ); }; diff --git a/frontend/src/basic/RobotPage/TokenInput.tsx b/frontend/src/basic/RobotPage/TokenInput.tsx index a383a83d..847e6325 100644 --- a/frontend/src/basic/RobotPage/TokenInput.tsx +++ b/frontend/src/basic/RobotPage/TokenInput.tsx @@ -48,7 +48,7 @@ const TokenInput = ({ }: TokenInputProps): JSX.Element => { const { t } = useTranslation(); const theme = useTheme(); - + const [showCopied, setShowCopied] = useState(false); const createJsonFile = () => { return { token: robot.token, @@ -80,23 +80,24 @@ const TokenInput = ({ }} InputProps={{ startAdornment: showDownload ? ( - - - saveAsJson(robot.nickname + '.json', createJsonFile())} - > - - - + + saveAsJson(robot.nickname + '.json', createJsonFile())} + > + + ) : null, endAdornment: showCopy ? ( - + { systemClient.copyToClipboard(inputToken); + setShowCopied(true); + setTimeout(() => setShowCopied(false), 1000); setRobot({ ...robot, copiedToken: true }); }} > diff --git a/frontend/src/basic/RobotPage/Welcome.tsx b/frontend/src/basic/RobotPage/Welcome.tsx index c7dc6f0d..1d9ff1e0 100644 --- a/frontend/src/basic/RobotPage/Welcome.tsx +++ b/frontend/src/basic/RobotPage/Welcome.tsx @@ -3,13 +3,15 @@ import { useTranslation } from 'react-i18next'; import { Box, Button, Grid, Typography, useTheme } from '@mui/material'; import { RoboSatsTextIcon } from '../../components/Icons'; import { FastForward, RocketLaunch, Key } from '@mui/icons-material'; +import { genBase62Token } from '../../utils'; interface WelcomeProps { setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void; + getGenerateRobot: (token: string) => void; width: number; } -const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => { +const Welcome = ({ setView, width, getGenerateRobot }: WelcomeProps): JSX.Element => { const { t } = useTranslation(); const theme = useTheme(); @@ -99,9 +101,16 @@ const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => { - diff --git a/frontend/src/basic/RobotPage/index.tsx b/frontend/src/basic/RobotPage/index.tsx index d7dec2b1..295cbe72 100644 --- a/frontend/src/basic/RobotPage/index.tsx +++ b/frontend/src/basic/RobotPage/index.tsx @@ -36,14 +36,12 @@ const RobotPage = ({ }: RobotPageProps): JSX.Element => { const { t } = useTranslation(); const params = useParams(); - const theme = useTheme(); const refCode = params.refCode; const width = Math.min(windowSize.width * 0.8, 28); const maxHeight = windowSize.height * 0.85 - 3; const [robotFound, setRobotFound] = useState(false); const [badRequest, setBadRequest] = useState(undefined); - const [tokenChanged, setTokenChanged] = useState(false); const [inputToken, setInputToken] = useState(''); const [view, setView] = useState<'welcome' | 'onboarding' | 'recovery' | 'profile'>( robot.token ? 'profile' : 'welcome', @@ -61,6 +59,7 @@ const RobotPage = ({ const getGenerateRobot = (token: string) => { const strength = tokenStrength(token); setRobot({ ...robot, loading: true, avatarLoaded: false }); + setInputToken(token); const requestBody = genKey(token).then(function (key) { return { @@ -129,17 +128,19 @@ const RobotPage = ({ const deleteRobot = () => { apiClient.delete(baseUrl, '/api/user'); + logoutRobot(); + }; + + const logoutRobot = () => { + setRobot({ ...robot, nickname: undefined, token: undefined, avatarLoaded: false }); + setInputToken(''); + setRobotFound(false); systemClient.deleteCookie('sessionid'); systemClient.deleteItem('robot_token'); systemClient.deleteItem('pub_key'); systemClient.deleteItem('enc_priv_key'); }; - const logoutRobot = () => {}; - const handleChangeToken = () => {}; - const handleClickSubmitToken = () => {}; - const handleClickNewRandomToken = () => {}; - return ( {/* TOR LOADING - Your connection is being encrypted and annonimized using the TOR Network. This ensures maximum privacy, however you might feel it is a bit slow or even lose connection from time to time. - + Your connection is being encrypted and annonimized using the TOR Network. This ensures maximum privacy, however you might feel it is a bit slow. You could eventually lose connection from time to time, restart the app. */} - {view === 'welcome' ? : null} + {view === 'welcome' ? ( + + ) : null} {view === 'onboarding' ? ( -// {/* -//
-// -// -// {robot.avatarLoaded && robot.nickname ? ( -//
-// -// -// -// {robot.nickname && systemClient.getCookie('sessionid') ? ( -//
-// -// {robot.nickname} -// -//
-// ) : ( -// '' -// )} -//
-//
-//
-// -// -//
-//
-//
-// ) : ( -// -// )} -//
-// {robotFound ? ( -// -// -// {t('A robot avatar was found, welcome back!')} -//
-//
-//
-// ) : ( -// <> -// )} -// -// -// { -// if (e.key === 'Enter') { -// handleClickSubmitToken(); -// } -// }} -// InputProps={{ -// startAdornment: ( -//
-// -// -// -// -// saveAsJson(robot.nickname + '.json', createJsonFile())} -// > -// -// -// -// -// -// -// -// -// systemClient.copyToClipboard(systemClient.getItem('robot_token')) & -// setRobot({ ...robot, copiedToken: true }) -// } -// > -// -// -// -// -// -//
-// ), -// endAdornment: ( -// -// -// -// -// -// ), -// }} -// /> -//
-//
-// -// {tokenChanged ? ( -// -// ) : ( -// -//
-// -//
-//
-// )} -//
- -// {/* -// -//
-// -//
-// -// -// -// -// {t('Simple and Private LN P2P Exchange')} -// -// -// -// -// -// -//
-// */} -// -// ); -// }; - -// export default RobotPage; */} - -// class UserGenPage extends Component { - -// handleClickNewRandomToken = () => { -// const inputToken = genBase62Token(36); -// this.setState({ -// inputToken, -// tokenHasChanged: true, -// }); -// setRobot({ ...robot, copiedToken: true }); -// }; - -// handleChangeToken = (e) => { -// this.setState({ -// inputToken: e.target.value.split(' ').join(''), -// tokenHasChanged: true, -// }); -// }; - -// handleClickSubmitToken = () => { -// this.delGeneratedUser(); -// this.getGeneratedUser(inputToken); -// this.setState({ tokenHasChanged: false }); -// setRobot({ -// ...robot, -// avatarLoaded: false, -// nickname: null, -// token: null, -// copiedToken: false, -// lastOrderId: null, -// activeOrderId: null, -// }); -// }; - -// render() { -// const { t, i18n } = this.props; -// const fontSize = this.props.theme.typography.fontSize; -// const 1.000004 = fontSize / 14; // to scale sizes, default fontSize is 14 -// return ( -// -// -//
-// -// -// {robot.avatarLoaded && robot.nickname ? ( -//
-// -// -// -// {robot.nickname && systemClient.getCookie('sessionid') ? ( -//
-// -// {robot.nickname} -// -//
-// ) : ( -// '' -// )} -//
-//
-//
-// -// -//
-//
-//
-// ) : ( -// -// )} -//
-// {this.state.found ? ( -// -// -// {this.state.found ? t('A robot avatar was found, welcome back!') : null} -//
-//
-//
-// ) : ( -// '' -// )} -// -// -// { -// if (e.key === 'Enter') { -// this.handleClickSubmitToken(); -// } -// }} -// InputProps={{ -// startAdornment: ( -//
-// -// -// -// -// -// saveAsJson( -// robot.nickname + '.json', -// this.createJsonFile(), -// ) -// } -// > -// -// -// -// -// -// -// -// -// systemClient.copyToClipboard(systemClient.getItem('robot_token')) & -// setRobot({ ...robot, copiedToken: true }) -// } -// > -// -// -// -// -// -//
-// ), -// endAdornment: ( -// -// -// -// -// -// ), -// }} -// /> -//
-//
-// -// {this.state.tokenHasChanged ? ( -// -// ) : ( -// -//
-// -//
-//
-// )} -//
- -// -// -//
-// -//
-// -// -// -// -// {t('Simple and Private LN P2P Exchange')} -// -// -// -// -// -// -//
-// -// -// ); -// } -// } - -// export default withTranslation()(UserGenPage); diff --git a/frontend/src/basic/UserGenPage.js b/frontend/src/basic/UserGenPage.js deleted file mode 100644 index 6a10f91a..00000000 --- a/frontend/src/basic/UserGenPage.js +++ /dev/null @@ -1,395 +0,0 @@ -import React, { Component } from 'react'; -import { withTranslation } from 'react-i18next'; -import { - Button, - Tooltip, - Grid, - Typography, - TextField, - ButtonGroup, - CircularProgress, - IconButton, -} from '@mui/material'; - -import SmartToyIcon from '@mui/icons-material/SmartToy'; -import CasinoIcon from '@mui/icons-material/Casino'; -import ContentCopy from '@mui/icons-material/ContentCopy'; -import BoltIcon from '@mui/icons-material/Bolt'; -import DownloadIcon from '@mui/icons-material/Download'; -import { RoboSatsNoTextIcon } from '../components/Icons'; - -import { sha256 } from 'js-sha256'; -import { genBase62Token, tokenStrength, saveAsJson } from '../utils'; -import { genKey } from '../pgp'; -import { systemClient } from '../services/System'; -import { apiClient } from '../services/api/index'; -import RobotAvatar from '../components/RobotAvatar'; - -class UserGenPage extends Component { - constructor(props) { - super(props); - this.state = { - tokenHasChanged: false, - inputToken: '', - found: false, - }; - - this.refCode = this.props.match.params.refCode; - } - - componentDidMount() { - // Checks in parent HomePage if there is already a nick and token - // Displays the existing one - if (this.props.robot.nickname != null) { - this.setState({ inputToken: this.props.robot.token }); - } else if (this.props.robot.token) { - this.setState({ inputToken: this.props.robot.token }); - this.getGeneratedUser(this.props.robot.token); - } else { - const newToken = genBase62Token(36); - this.setState({ - inputToken: newToken, - }); - this.getGeneratedUser(newToken); - } - } - - getGeneratedUser = (token) => { - const strength = tokenStrength(token); - const refCode = this.refCode; - this.props.setRobot({ ...this.props.robot, loading: true, avatarLoaded: false }); - - const requestBody = genKey(token).then(function (key) { - return { - token_sha256: sha256(token), - public_key: key.publicKeyArmored, - encrypted_private_key: key.encryptedPrivateKeyArmored, - unique_values: strength.uniqueValues, - counts: strength.counts, - length: token.length, - ref_code: refCode, - }; - }); - requestBody.then((body) => - apiClient.post(this.props.baseUrl, '/api/user/', body).then((data) => { - this.setState({ found: data.found, bad_request: data.bad_request }); - this.props.setCurrentOrder( - data.active_order_id - ? data.active_order_id - : data.last_order_id - ? data.last_order_id - : null, - ); - // Add nick and token to App state (token only if not a bad request) - data.bad_request - ? this.props.setRobot({ - ...this.props.robot, - avatarLoaded: true, - loading: false, - nickname: data.nickname ?? this.props.robot.nickname, - activeOrderId: data.active_order_id ?? null, - referralCode: data.referral_code ?? this.props.referralCode, - earnedRewards: data.earned_rewards ?? this.props.earnedRewards, - lastOrderId: data.last_order_id ?? this.props.lastOrderId, - stealthInvoices: data.wants_stealth ?? this.props.stealthInvoices, - tgEnabled: data.tg_enabled, - tgBotName: data.tg_bot_name, - tgToken: data.tg_token, - }) - : this.props.setRobot({ - ...this.props.robot, - nickname: data.nickname, - token, - loading: false, - activeOrderId: data.active_order_id ? data.active_order_id : null, - lastOrderId: data.last_order_id ? data.last_order_id : null, - referralCode: data.referral_code, - earnedRewards: data.earned_rewards ?? 0, - stealthInvoices: data.wants_stealth, - tgEnabled: data.tg_enabled, - tgBotName: data.tg_bot_name, - tgToken: data.tg_token, - bitsEntropy: data.token_bits_entropy, - shannonEntropy: data.token_shannon_entropy, - pubKey: data.public_key, - encPrivKey: data.encrypted_private_key, - copiedToken: data.found ? true : this.props.robot.copiedToken, - }) & - systemClient.setItem('robot_token', token) & - systemClient.setItem('pub_key', data.public_key.split('\n').join('\\')) & - systemClient.setItem('enc_priv_key', data.encrypted_private_key.split('\n').join('\\')); - }), - ); - }; - - delGeneratedUser() { - apiClient.delete(this.props.baseUrl, '/api/user'); - - systemClient.deleteCookie('sessionid'); - systemClient.deleteItem('robot_token'); - systemClient.deleteItem('pub_key'); - systemClient.deleteItem('enc_priv_key'); - } - - handleClickNewRandomToken = () => { - const inputToken = genBase62Token(36); - this.setState({ - inputToken, - tokenHasChanged: true, - }); - this.props.setRobot({ ...this.props.robot, copiedToken: true }); - }; - - handleChangeToken = (e) => { - this.setState({ - inputToken: e.target.value.split(' ').join(''), - tokenHasChanged: true, - }); - }; - - handleClickSubmitToken = () => { - this.delGeneratedUser(); - this.getGeneratedUser(this.state.inputToken); - this.setState({ tokenHasChanged: false }); - this.props.setRobot({ - ...this.props.robot, - avatarLoaded: false, - nickname: null, - token: null, - copiedToken: false, - lastOrderId: null, - activeOrderId: null, - }); - }; - - createJsonFile = () => { - return { - token: this.props.robot.token, - token_shannon_entropy: this.props.robot.shannonEntropy, - token_bit_entropy: this.props.robot.bitsEntropy, - public_key: this.props.robot.pub_key, - encrypted_private_key: this.props.robot.enc_priv_key, - }; - }; - - render() { - const { t, i18n } = this.props; - const fontSize = this.props.theme.typography.fontSize; - const fontSizeFactor = fontSize / 14; // to scale sizes, default fontSize is 14 - return ( - - -
- - - {this.props.robot.avatarLoaded && this.props.robot.nickname ? ( -
- - - - {this.props.robot.nickname && systemClient.getCookie('sessionid') ? ( - - ) : ( - '' - )} - - - - - -
-
-
- ) : ( - - )} -
- {this.state.found ? ( - - - {this.state.found ? t('A robot avatar was found, welcome back!') : null} -
-
-
- ) : ( - '' - )} - - - { - if (e.key === 'Enter') { - this.handleClickSubmitToken(); - } - }} - InputProps={{ - startAdornment: ( -
- - - - - - saveAsJson( - this.props.robot.nickname + '.json', - this.createJsonFile(), - ) - } - > - - - - - - - - - systemClient.copyToClipboard(systemClient.getItem('robot_token')) & - this.props.setRobot({ ...this.props.robot, copiedToken: true }) - } - > - - - - - -
- ), - endAdornment: ( - - - - - - ), - }} - /> -
-
- - {this.state.tokenHasChanged ? ( - - ) : ( - -
- -
-
- )} -
- - - -
- -
- - - - - {t('Simple and Private LN P2P Exchange')} - - - - - - -
- - - ); - } -} - -export default withTranslation()(UserGenPage); diff --git a/frontend/src/components/Dialogs/Profile.tsx b/frontend/src/components/Dialogs/Profile.tsx index 244d0d97..b242c004 100644 --- a/frontend/src/components/Dialogs/Profile.tsx +++ b/frontend/src/components/Dialogs/Profile.tsx @@ -147,7 +147,7 @@ const ProfileDialog = ({
- {t('Your Profile')} + {t('Your Robot')}