From 2454cca6170625d20f1d58e3820631df372a9e78 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Thu, 9 Nov 2023 14:04:18 +0530 Subject: [PATCH] add auth page --- apps/auth/src/pages/_app.tsx | 8 +- apps/auth/src/pages/change-email/index.tsx | 2 +- apps/auth/src/pages/change-password/index.tsx | 2 +- apps/auth/src/pages/credentials/index.tsx | 2 +- apps/auth/src/pages/generate/index.tsx | 2 +- apps/auth/src/pages/login/index.tsx | 2 +- apps/auth/src/pages/recover/index.tsx | 2 +- apps/auth/src/pages/signup/index.tsx | 2 +- .../src/pages/two-factor/recover/index.tsx | 2 +- .../auth/src/pages/two-factor/setup/index.tsx | 2 +- .../src/pages/two-factor/verify/index.tsx | 2 +- apps/auth/src/pages/verify/index.tsx | 2 +- .../authenticator/authenticatorService.ts | 11 +- apps/photos/src/components/ChangeEmail.tsx | 164 ------------------ packages/accounts/components/ChangeEmail.tsx | 15 +- packages/accounts/pages/change-email.tsx | 4 +- packages/accounts/pages/credentials.tsx | 6 +- packages/accounts/pages/recover.tsx | 7 +- packages/accounts/pages/two-factor/setup.tsx | 9 +- .../shared/components/OverflowMenu/option.tsx | 4 +- 20 files changed, 54 insertions(+), 196 deletions(-) delete mode 100644 apps/photos/src/components/ChangeEmail.tsx diff --git a/apps/auth/src/pages/_app.tsx b/apps/auth/src/pages/_app.tsx index 8b2c23782..f849feed7 100644 --- a/apps/auth/src/pages/_app.tsx +++ b/apps/auth/src/pages/_app.tsx @@ -106,7 +106,7 @@ export default function App(props: EnteAppProps) { setupI18n().finally(() => setIsI18nReady(true)); // set client package name in headers HTTPService.setHeaders({ - 'X-Client-Package': CLIENT_PACKAGE_NAMES.get(APPS.PHOTOS), + 'X-Client-Package': CLIENT_PACKAGE_NAMES.get(APPS.AUTH), }); // setup logging clearLogsIfLocalStorageLimitExceeded(); @@ -195,8 +195,8 @@ export default function App(props: EnteAppProps) { {isI18nReady - ? t('TITLE', { context: APPS.PHOTOS }) - : APP_TITLES.get(APPS.PHOTOS)} + ? t('TITLE', { context: APPS.AUTH }) + : APP_TITLES.get(APPS.AUTH)} - + {showNavbar && } diff --git a/apps/auth/src/pages/change-email/index.tsx b/apps/auth/src/pages/change-email/index.tsx index b5df67d45..77f60e1b5 100644 --- a/apps/auth/src/pages/change-email/index.tsx +++ b/apps/auth/src/pages/change-email/index.tsx @@ -11,7 +11,7 @@ export default function ChangeEmail() { ); } diff --git a/apps/auth/src/pages/change-password/index.tsx b/apps/auth/src/pages/change-password/index.tsx index c71844119..71f0f3f2f 100644 --- a/apps/auth/src/pages/change-password/index.tsx +++ b/apps/auth/src/pages/change-password/index.tsx @@ -11,7 +11,7 @@ export default function ChangePassword() { ); } diff --git a/apps/auth/src/pages/credentials/index.tsx b/apps/auth/src/pages/credentials/index.tsx index 2155c5cc1..3e78bb041 100644 --- a/apps/auth/src/pages/credentials/index.tsx +++ b/apps/auth/src/pages/credentials/index.tsx @@ -11,7 +11,7 @@ export default function Credential() { ); } diff --git a/apps/auth/src/pages/generate/index.tsx b/apps/auth/src/pages/generate/index.tsx index e18500a7a..0b4278959 100644 --- a/apps/auth/src/pages/generate/index.tsx +++ b/apps/auth/src/pages/generate/index.tsx @@ -11,7 +11,7 @@ export default function Generate() { ); } diff --git a/apps/auth/src/pages/login/index.tsx b/apps/auth/src/pages/login/index.tsx index e1519da1f..e503fec3d 100644 --- a/apps/auth/src/pages/login/index.tsx +++ b/apps/auth/src/pages/login/index.tsx @@ -11,7 +11,7 @@ export default function Login() { ); } diff --git a/apps/auth/src/pages/recover/index.tsx b/apps/auth/src/pages/recover/index.tsx index 93a05b8bc..4e8380bee 100644 --- a/apps/auth/src/pages/recover/index.tsx +++ b/apps/auth/src/pages/recover/index.tsx @@ -11,7 +11,7 @@ export default function Recover() { ); } diff --git a/apps/auth/src/pages/signup/index.tsx b/apps/auth/src/pages/signup/index.tsx index 9213b3a67..8f8405fc3 100644 --- a/apps/auth/src/pages/signup/index.tsx +++ b/apps/auth/src/pages/signup/index.tsx @@ -11,7 +11,7 @@ export default function Sigup() { ); } diff --git a/apps/auth/src/pages/two-factor/recover/index.tsx b/apps/auth/src/pages/two-factor/recover/index.tsx index 99635303c..9a1c529e1 100644 --- a/apps/auth/src/pages/two-factor/recover/index.tsx +++ b/apps/auth/src/pages/two-factor/recover/index.tsx @@ -11,7 +11,7 @@ export default function TwoFactorRecover() { ); } diff --git a/apps/auth/src/pages/two-factor/setup/index.tsx b/apps/auth/src/pages/two-factor/setup/index.tsx index aac9c9a24..32f4d28b4 100644 --- a/apps/auth/src/pages/two-factor/setup/index.tsx +++ b/apps/auth/src/pages/two-factor/setup/index.tsx @@ -11,7 +11,7 @@ export default function TwoFactorSetup() { ); } diff --git a/apps/auth/src/pages/two-factor/verify/index.tsx b/apps/auth/src/pages/two-factor/verify/index.tsx index 1684d804e..c72c764c6 100644 --- a/apps/auth/src/pages/two-factor/verify/index.tsx +++ b/apps/auth/src/pages/two-factor/verify/index.tsx @@ -11,7 +11,7 @@ export default function TwoFactorVerify() { ); } diff --git a/apps/auth/src/pages/verify/index.tsx b/apps/auth/src/pages/verify/index.tsx index 2eceb26d8..2554ed631 100644 --- a/apps/auth/src/pages/verify/index.tsx +++ b/apps/auth/src/pages/verify/index.tsx @@ -11,7 +11,7 @@ export default function Verify() { ); } diff --git a/apps/auth/src/services/authenticator/authenticatorService.ts b/apps/auth/src/services/authenticator/authenticatorService.ts index 28fe17e60..ce3a145d0 100644 --- a/apps/auth/src/services/authenticator/authenticatorService.ts +++ b/apps/auth/src/services/authenticator/authenticatorService.ts @@ -1,11 +1,12 @@ import { HttpStatusCode } from 'axios'; -import HTTPService from 'services/HTTPService'; +import HTTPService from '@ente/shared/network/HTTPService'; import { AuthEntity, AuthKey } from 'types/authenticator/api'; import { Code } from 'types/authenticator/code'; -import ComlinkCryptoWorker from 'utils/comlink/ComlinkCryptoWorker'; -import { getEndpoint } from 'utils/common/apiUtil'; -import { getActualKey, getToken } from 'utils/common/key'; -import { ApiError, CustomError } from 'utils/error'; +import ComlinkCryptoWorker from '@ente/shared/crypto'; +import { getEndpoint } from '@ente/shared/network/api'; +import { getActualKey } from '@ente/shared/user'; +import { getToken } from '@ente/shared/storage/localStorage/helpers'; +import { ApiError, CustomError } from '@ente/shared/error'; import { logError } from '@ente/shared/sentry'; const ENDPOINT = getEndpoint(); diff --git a/apps/photos/src/components/ChangeEmail.tsx b/apps/photos/src/components/ChangeEmail.tsx deleted file mode 100644 index 28a6259f1..000000000 --- a/apps/photos/src/components/ChangeEmail.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import { Formik, FormikHelpers } from 'formik'; -import React, { useRef, useState } from 'react'; -import * as Yup from 'yup'; -import SubmitButton from '@ente/shared/components/SubmitButton'; -import router from 'next/router'; -import { changeEmail, sendOTTForEmailChange } from 'services/userService'; -import { getData, LS_KEYS, setData } from 'utils/storage/localStorage'; -import { PHOTOS_PAGES as PAGES } from '@ente/shared/constants/pages'; -import { Alert, Box, TextField } from '@mui/material'; -import { VerticallyCentered } from './Container'; -import LinkButton from './pages/gallery/LinkButton'; -import FormPaperFooter from '@ente/shared/components/Form/FormPaper/Footer'; -import { sleep } from 'utils/common'; -import { Trans } from 'react-i18next'; -import { t } from 'i18next'; - -interface formValues { - email: string; - ott?: string; -} - -function ChangeEmailForm() { - const [loading, setLoading] = useState(false); - const [ottInputVisible, setShowOttInputVisibility] = useState(false); - const ottInputRef = useRef(null); - const [email, setEmail] = useState(null); - const [showMessage, setShowMessage] = useState(false); - const [success, setSuccess] = useState(false); - - const requestOTT = async ( - { email }: formValues, - { setFieldError }: FormikHelpers - ) => { - try { - setLoading(true); - await sendOTTForEmailChange(email); - setEmail(email); - setShowOttInputVisibility(true); - setShowMessage(true); - setTimeout(() => { - ottInputRef.current?.focus(); - }, 250); - } catch (e) { - setFieldError('email', t('EMAIl_ALREADY_OWNED')); - } - setLoading(false); - }; - - const requestEmailChange = async ( - { email, ott }: formValues, - { setFieldError }: FormikHelpers - ) => { - try { - setLoading(true); - await changeEmail(email, ott); - setData(LS_KEYS.USER, { ...getData(LS_KEYS.USER), email }); - setLoading(false); - setSuccess(true); - await sleep(1000); - router.push(PAGES.GALLERY); - } catch (e) { - setLoading(false); - setFieldError('ott', t('INCORRECT_CODE')); - } - }; - - const goToGallery = () => router.push(PAGES.GALLERY); - - return ( - - initialValues={{ email: '' }} - validationSchema={Yup.object().shape({ - email: Yup.string() - .email(t('EMAIL_ERROR')) - .required(t('REQUIRED')), - ott: ottInputVisible && Yup.string().required(t('REQUIRED')), - })} - validateOnChange={false} - validateOnBlur={false} - onSubmit={!ottInputVisible ? requestOTT : requestEmailChange}> - {({ values, errors, handleChange, handleSubmit }) => ( - <> - {showMessage && ( - setShowMessage(false)}> - - ), - }} - values={{ email }} - /> - - )} -
- - - {ottInputVisible && ( - - )} - - -
- - - {ottInputVisible && ( - - setShowOttInputVisibility(false) - }> - {t('CHANGE_EMAIL')}? - - )} - - {t('GO_BACK')} - - - - )} - - ); -} - -export default ChangeEmailForm; diff --git a/packages/accounts/components/ChangeEmail.tsx b/packages/accounts/components/ChangeEmail.tsx index a5e41d0ca..09c0bd980 100644 --- a/packages/accounts/components/ChangeEmail.tsx +++ b/packages/accounts/components/ChangeEmail.tsx @@ -13,13 +13,14 @@ import FormPaperFooter from '@ente/shared/components/Form/FormPaper/Footer'; import { sleep } from '@ente/shared/utils'; import { Trans } from 'react-i18next'; import { t } from 'i18next'; +import { APPS } from '@ente/shared/apps/constants'; interface formValues { email: string; ott?: string; } -function ChangeEmailForm() { +function ChangeEmailForm({ appName }: { appName: string }) { const [loading, setLoading] = useState(false); const [ottInputVisible, setShowOttInputVisibility] = useState(false); const ottInputRef = useRef(null); @@ -57,14 +58,20 @@ function ChangeEmailForm() { setLoading(false); setSuccess(true); await sleep(1000); - router.push(PAGES.GALLERY); + goToApp(); } catch (e) { setLoading(false); setFieldError('ott', t('INCORRECT_CODE')); } }; - const goToGallery = () => router.push(PAGES.GALLERY); + const goToApp = () => { + if (appName === APPS.AUTH) { + router.push(PAGES.AUTH); + } else { + router.push(PAGES.GALLERY); + } + }; return ( @@ -151,7 +158,7 @@ function ChangeEmailForm() { {t('CHANGE_EMAIL')}? )} - + {t('GO_BACK')} diff --git a/packages/accounts/pages/change-email.tsx b/packages/accounts/pages/change-email.tsx index 72f3c551c..75ab62764 100644 --- a/packages/accounts/pages/change-email.tsx +++ b/packages/accounts/pages/change-email.tsx @@ -9,7 +9,7 @@ import FormPaper from '@ente/shared/components/Form/FormPaper'; import FormPaperTitle from '@ente/shared/components/Form/FormPaper/Title'; import { PageProps } from '@ente/shared/apps/types'; -function ChangeEmailPage({ router }: PageProps) { +function ChangeEmailPage({ router, appName }: PageProps) { useEffect(() => { const user = getData(LS_KEYS.USER); if (!user?.token) { @@ -21,7 +21,7 @@ function ChangeEmailPage({ router }: PageProps) { {t('CHANGE_EMAIL')} - + ); diff --git a/packages/accounts/pages/credentials.tsx b/packages/accounts/pages/credentials.tsx index d7d40f942..7e0568779 100644 --- a/packages/accounts/pages/credentials.tsx +++ b/packages/accounts/pages/credentials.tsx @@ -90,7 +90,11 @@ export default function Credentials({ } } if (key) { - router.push(PAGES.GALLERY); + if (appName === APPS.AUTH) { + router.push(PAGES.AUTH); + } else { + router.push(PAGES.GALLERY); + } return; } const kekEncryptedAttributes: B64EncryptionResult = getKey( diff --git a/packages/accounts/pages/recover.tsx b/packages/accounts/pages/recover.tsx index 95a2fccca..46f198856 100644 --- a/packages/accounts/pages/recover.tsx +++ b/packages/accounts/pages/recover.tsx @@ -22,6 +22,7 @@ import { sendOtt } from '@ente/accounts/api/user'; import InMemoryStore, { MS_KEYS } from '@ente/shared/storage/InMemoryStore'; import { PageProps } from '@ente/shared/apps/types'; import { logError } from '@ente/shared/sentry'; +import { APPS } from '@ente/shared/apps/constants'; const bip39 = require('bip39'); // mobile client library only supports english. bip39.setDefaultWordlist('english'); @@ -47,7 +48,11 @@ export default function Recover({ appContext, router, appName }: PageProps) { if (!keyAttributes) { router.push(PAGES.GENERATE); } else if (key) { - router.push(PAGES.GALLERY); + if (appName === APPS.AUTH) { + router.push(PAGES.AUTH); + } else { + router.push(PAGES.GALLERY); + } } else { setKeyAttributes(keyAttributes); } diff --git a/packages/accounts/pages/two-factor/setup.tsx b/packages/accounts/pages/two-factor/setup.tsx index 41fca7153..6ad35e317 100644 --- a/packages/accounts/pages/two-factor/setup.tsx +++ b/packages/accounts/pages/two-factor/setup.tsx @@ -16,13 +16,14 @@ import { TwoFactorSetup } from '@ente/accounts/components/two-factor/setup'; import LinkButton from '@ente/shared/components/LinkButton'; import { PageProps } from '@ente/shared/apps/types'; import { logError } from '@ente/shared/sentry'; +import { APPS } from '@ente/shared/apps/constants'; export enum SetupMode { QR_CODE, MANUAL_CODE, } -export default function SetupTwoFactor({ router }: PageProps) { +export default function SetupTwoFactor({ router, appName }: PageProps) { const [twoFactorSecret, setTwoFactorSecret] = useState(null); @@ -55,7 +56,11 @@ export default function SetupTwoFactor({ router }: PageProps) { ...getData(LS_KEYS.USER), isTwoFactorEnabled: true, }); - router.push(PAGES.GALLERY); + if (appName === APPS.AUTH) { + router.push(PAGES.AUTH); + } else { + router.push(PAGES.GALLERY); + } }; return ( diff --git a/packages/shared/components/OverflowMenu/option.tsx b/packages/shared/components/OverflowMenu/option.tsx index 5454c96b5..0c126fe40 100644 --- a/packages/shared/components/OverflowMenu/option.tsx +++ b/packages/shared/components/OverflowMenu/option.tsx @@ -1,6 +1,6 @@ import { MenuItem, ButtonProps, Typography, Box } from '@mui/material'; -import { FluidContainer } from 'components/Container'; -import { OverflowMenuContext } from 'contexts/overflowMenu'; +import { FluidContainer } from '@ente/shared/components/Container'; +import { OverflowMenuContext } from './context'; import React, { useContext } from 'react'; interface Iprops {