Myzel394/kleckrelay
1
0
Fork 0
mirror of https://github.com/Myzel394/kleckrelay-website.git synced 2025-06-23 01:20:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

bugfixes

Browse Source
This commit is contained in:
Myzel394 2022-11-02 12:36:54 +01:00
parent 2840645b94
commit a7eece7938
12 changed files with 214 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/locales/en/translation.json
View File

@ -226,6 +226,10 @@
"saveAction": "Save preferences"
}
}
},
"LogoutRoute": {
"title": "Log out",
"description": "We are logging you out..."
}
},
@ -240,6 +244,9 @@
"signup": "Sign up",
"login": "Log in"
},
"AuthenticatedRoute": {
"logout": "Logout"
},
"EnterDecryptionPassword": {
"title": "Decrypt Reports",
"description": "Please enter your password so that your reports can de decrypted.",

5
src/App.tsx
View File

@ -16,6 +16,7 @@ import AuthenticatedRoute from "~/routes/AuthenticatedRoute"
import CompleteAccountRoute from "~/routes/CompleteAccountRoute"
import EnterDecryptionPassword from "~/routes/EnterDecryptionPassword"
import LoginRoute from "~/routes/LoginRoute"
import LogoutRoute from "~/routes/LogoutRoute"
import ReportDetailRoute from "~/routes/ReportDetailRoute"
import ReportsRoute from "~/routes/ReportsRoute"
import RootRoute from "~/routes/Root"
@ -54,6 +55,10 @@ const router = createBrowserRouter([
path: "/auth/complete-account",
element: <CompleteAccountRoute />,
},
{
path: "/auth/logout",
element: <LogoutRoute />,
},
],
},
{

41
src/AuthContext/AuthContextProvider.tsx
View File

@ -2,16 +2,12 @@ import {ReactElement, ReactNode, useCallback, useEffect, useMemo} from "react"
import {useLocalStorage} from "react-use"
import {AxiosError} from "axios"
import {decrypt, readMessage, readPrivateKey} from "openpgp"
import {useNavigate} from "react-router-dom"
import {useMutation} from "@tanstack/react-query"
import {ServerUser, User} from "~/server-types"
import {
REFRESH_TOKEN_URL,
RefreshTokenResult,
logout as logoutUser,
refreshToken,
} from "~/apis"
import {REFRESH_TOKEN_URL, RefreshTokenResult, logout as logoutUser, refreshToken} from "~/apis"
import {client} from "~/constants/axios-client"
import {decryptString, encryptString} from "~/utils"
@ -21,20 +17,15 @@ export interface AuthContextProviderProps {
children: ReactNode
}
export default function AuthContextProvider({
children,
}: AuthContextProviderProps): ReactElement {
const {mutateAsync: refresh} = useMutation<
RefreshTokenResult,
AxiosError,
void
>(refreshToken, {
export default function AuthContextProvider({children}: AuthContextProviderProps): ReactElement {
const {mutateAsync: refresh} = useMutation<RefreshTokenResult, AxiosError, void>(refreshToken, {
onError: () => logout(false),
})
const [decryptionPassword, setDecryptionPassword] = useLocalStorage<
string | null
>("_global-context-auth-decryption-password", null)
const [decryptionPassword, setDecryptionPassword] = useLocalStorage<string | null>(
"_global-context-auth-decryption-password",
null,
)
const [user, setUser] = useLocalStorage<ServerUser | User | null>(
"_global-context-auth-user",
null,
@ -115,10 +106,7 @@ export default function AuthContextProvider({
try {
// Check if the password is correct
const masterPassword = decryptString(
user.encryptedPassword,
password,
)
const masterPassword = decryptString(user.encryptedPassword, password)
JSON.parse(decryptString(user.encryptedNotes, masterPassword))
} catch {
return false
@ -162,15 +150,8 @@ export default function AuthContextProvider({
// Decrypt user notes
useEffect(() => {
if (
user &&
!user.isDecrypted &&
user.encryptedPassword &&
masterPassword
) {
const note = JSON.parse(
decryptUsingMasterPassword(user.encryptedNotes!),
)
if (user && !user.isDecrypted && user.encryptedPassword && masterPassword) {
const note = JSON.parse(decryptUsingMasterPassword(user.encryptedNotes!))
const newUser: User = {
...user,

6
src/route-widgets/AliasesRoute/AliasesDetails.tsx
View File

@ -2,6 +2,8 @@ import {ReactElement} from "react"
import {useTranslation} from "react-i18next"
import {useKeyPress} from "react-use"
import {MdContentCopy} from "react-icons/md"
import {useSnackbar} from "notistack"
import {Link as RouterLink} from "react-router-dom"
import copy from "copy-to-clipboard"
import {
@ -16,7 +18,6 @@ import {
import {AliasTypeIndicator} from "~/components"
import {AliasList} from "~/server-types"
import {useUIState} from "~/hooks"
import {useSnackbar} from "notistack"
import {SUCCESS_SNACKBAR_SHOW_DURATION} from "~/constants/values"
import CreateAliasButton from "~/route-widgets/AliasesRoute/CreateAliasButton"
import EmptyStateScreen from "~/route-widgets/AliasesRoute/EmptyStateScreen"
@ -41,6 +42,7 @@ export default function AliasesDetails({aliases}: AliasesDetailsProps): ReactEle
<List>
{aliasesUIState.map(alias => (
<ListItemButton
component={RouterLink}
key={alias.id}
onClick={event => {
if (isInCopyAddressMode) {
@ -60,7 +62,7 @@ export default function AliasesDetails({aliases}: AliasesDetailsProps): ReactEle
)
}
}}
href={`/aliases/${btoa(getAddress(alias))}`}
to={`/aliases/${btoa(getAddress(alias))}`}
>
<ListItemIcon>
<AliasTypeIndicator type={alias.type} />

164
src/route-widgets/CompleteAccountRoute/PasswordForm.tsx
View File

@ -11,7 +11,7 @@ import {LoadingButton} from "@mui/lab"
import {Box, Grid, InputAdornment, Typography} from "@mui/material"
import {useMutation} from "@tanstack/react-query"
import {PasswordField} from "~/components"
import {PasswordField, SimpleForm} from "~/components"
import {buildEncryptionPassword, encryptString} from "~/utils"
import {isDev} from "~/constants/development"
import {useSystemPreferredTheme, useUser} from "~/hooks"
@ -68,7 +68,7 @@ export default function PasswordForm({onDone}: PasswordFormProps): ReactElement
{
onSuccess: ({user}) => {
login(user)
onDone()
setTimeout(onDone, 0)
},
},
)
@ -119,102 +119,72 @@ export default function PasswordForm({onDone}: PasswordFormProps): ReactElement
return (
<Box width="80vw">
<form onSubmit={formik.handleSubmit}>
<Grid
container
spacing={4}
paddingX={2}
paddingY={4}
alignItems="center"
justifyContent="center"
<SimpleForm
title={t("routes.CompleteAccountRoute.forms.password.title")}
description={t("routes.CompleteAccountRoute.forms.password.description")}
continueActionLabel={t(
"routes.CompleteAccountRoute.forms.password.continueAction",
)}
nonFieldError={formik.errors.detail}
>
<Grid item>
<Grid container spacing={2} direction="column">
<Grid item>
<Typography variant="h6" component="h2" align="center">
{t("routes.CompleteAccountRoute.forms.password.title")}
</Typography>
</Grid>
<Grid item>
<Typography variant="subtitle1" component="p">
{t("routes.CompleteAccountRoute.forms.password.description")}
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container spacing={2} justifyContent="center">
<Grid item>
<PasswordField
fullWidth
id="password"
name="password"
label={t(
"routes.CompleteAccountRoute.forms.password.form.password.label",
)}
placeholder={t(
"routes.CompleteAccountRoute.forms.password.form.password.placeholder",
)}
autoComplete="new-password"
value={formik.values.password}
onChange={formik.handleChange}
disabled={formik.isSubmitting}
error={
formik.touched.password && Boolean(formik.errors.password)
}
helperText={formik.touched.password && formik.errors.password}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<MdLock />
</InputAdornment>
),
}}
/>
</Grid>
<Grid item>
<PasswordField
fullWidth
id="passwordConfirmation"
name="passwordConfirmation"
label={t(
"routes.CompleteAccountRoute.forms.password.form.passwordConfirm.label",
)}
placeholder={t(
"routes.CompleteAccountRoute.forms.password.form.passwordConfirm.placeholder",
)}
value={formik.values.passwordConfirmation}
onChange={formik.handleChange}
disabled={formik.isSubmitting}
error={
formik.touched.passwordConfirmation &&
Boolean(formik.errors.passwordConfirmation)
}
helperText={
formik.touched.passwordConfirmation &&
formik.errors.passwordConfirmation
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<MdCheckCircle />
</InputAdornment>
),
}}
/>
</Grid>
</Grid>
</Grid>
<Grid item>
<LoadingButton
type="submit"
variant="contained"
loading={formik.isSubmitting}
startIcon={<MdChevronRight />}
>
{t("routes.CompleteAccountRoute.forms.password.continueAction")}
</LoadingButton>
</Grid>
</Grid>
{[
<PasswordField
key="password"
fullWidth
id="password"
name="password"
label={t(
"routes.CompleteAccountRoute.forms.password.form.password.label",
)}
placeholder={t(
"routes.CompleteAccountRoute.forms.password.form.password.placeholder",
)}
autoComplete="new-password"
value={formik.values.password}
onChange={formik.handleChange}
disabled={formik.isSubmitting}
error={formik.touched.password && Boolean(formik.errors.password)}
helperText={formik.touched.password && formik.errors.password}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<MdLock />
</InputAdornment>
),
}}
/>,
<PasswordField
key="passwordConfirmation"
fullWidth
id="passwordConfirmation"
name="passwordConfirmation"
label={t(
"routes.CompleteAccountRoute.forms.password.form.passwordConfirm.label",
)}
placeholder={t(
"routes.CompleteAccountRoute.forms.password.form.passwordConfirm.placeholder",
)}
value={formik.values.passwordConfirmation}
onChange={formik.handleChange}
disabled={formik.isSubmitting}
error={
formik.touched.passwordConfirmation &&
Boolean(formik.errors.passwordConfirmation)
}
helperText={
formik.touched.passwordConfirmation &&
formik.errors.passwordConfirmation
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<MdCheckCircle />
</InputAdornment>
),
}}
/>,
]}
</SimpleForm>
</form>
</Box>
)

3
src/route-widgets/LoginRoute/ConfirmCodeForm/ConfirmCodeForm.tsx
View File

@ -54,7 +54,8 @@ export default function ConfirmCodeForm({
return code.split("").every(char => chars.includes(char))
},
),
)
.label(t("routes.LoginRoute.forms.confirmCode.form.code.label")),
})
const {mutateAsync} = useMutation<AuthenticationDetails, AxiosError, VerifyLoginWithEmailData>(
verifyLoginWithEmail,

2
src/route-widgets/ReportsRoute/EmptyStateScreen.tsx
View File

@ -16,7 +16,7 @@ export default function EmptyStateScreen(): ReactElement {
</Typography>
</Grid>
<Grid item>
<Icon path={mdiTextBoxMultiple} size={2.5} />,
<Icon path={mdiTextBoxMultiple} size={2.5} />
</Grid>
<Grid item>
<Typography variant="body1">

71
src/routes/AuthenticatedRoute.tsx
View File

@ -1,7 +1,10 @@
import {ReactElement} from "react"
import {Outlet} from "react-router-dom"
import {Link as RouterLink} from "react-router-dom"
import {useTranslation} from "react-i18next"
import {MdLogout} from "react-icons/md"
import {Box, Grid, List, ListItem, Paper, useTheme} from "@mui/material"
import {Box, Button, Grid, List, ListItem, Paper, useTheme} from "@mui/material"
import {useUser} from "~/hooks"
import LockNavigationContextProvider from "~/LockNavigationContext/LockNavigationContextProvider"
@ -9,11 +12,12 @@ import NavigationButton, {
NavigationSection,
} from "~/route-widgets/AuthenticateRoute/NavigationButton"
const sections = (
Object.keys(NavigationSection) as Array<keyof typeof NavigationSection>
).filter(value => isNaN(Number(value)))
const sections = (Object.keys(NavigationSection) as Array<keyof typeof NavigationSection>).filter(
value => isNaN(Number(value)),
)
export default function AuthenticatedRoute(): ReactElement {
const {t} = useTranslation()
const theme = useTheme()
useUser()
@ -31,41 +35,64 @@ export default function AuthenticatedRoute(): ReactElement {
display="flex"
maxWidth="90vw"
width="100%"
height="100%"
justifyContent="center"
alignItems="center"
>
<Grid
maxWidth="md"
container
height="100%"
justifyContent="space-between"
alignItems="center"
>
<Grid item xs={12} sm={3} md={2}>
<Box
bgcolor={theme.palette.background.paper}
component="nav"
>
<List>
<Box bgcolor={theme.palette.background.paper}>
<List component="nav">
{sections.map(key => (
<ListItem key={key}>
<NavigationButton
section={NavigationSection[key]}
/>
<NavigationButton section={NavigationSection[key]} />
</ListItem>
))}
</List>
</Box>
</Grid>
<Grid item xs={12} sm={9} md={10}>
<Paper>
<Box
maxHeight="80vh"
sx={{overflowY: "auto"}}
padding={4}
>
<Outlet />
</Box>
</Paper>
<Grid item xs={12} sm={9} md={10} height="100%">
<Grid
container
direction="column"
height="100%"
justifyContent="space-between"
>
<Grid item></Grid>
<Grid item>
<Paper>
<Box maxHeight="80vh" sx={{overflowY: "auto"}} padding={4}>
<Outlet />
</Box>
</Paper>
</Grid>
<Grid item>
<Grid
container
spacing={2}
justifyContent="center"
marginBottom={2}
>
<Grid item>
<Button
component={RouterLink}
color="inherit"
size="small"
to="/auth/logout"
startIcon={<MdLogout />}
>
{t("components.AuthenticatedRoute.logout")}
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>

5
src/routes/CompleteAccountRoute.tsx
View File

@ -29,7 +29,10 @@ export default function CompleteAccountRoute(): ReactElement {
onYes={() => setShowGenerationReportForm(true)}
onNo={navigateToNext}
/>,
<PasswordForm onDone={navigateToNext} key="password_form" />,
<PasswordForm
onDone={() => setTimeout(navigateToNext, 0)}
key="password_form"
/>,
]}
index={showGenerationReportForm ? 1 : 0}
/>

32
src/routes/EnterDecryptionPassword.tsx
View File

@ -31,10 +31,7 @@ export default function EnterDecryptionPassword(): ReactElement {
password: "",
},
onSubmit: async ({password}, {setErrors}) => {
const decryptionPassword = buildEncryptionPassword(
password,
user.email.address,
)
const decryptionPassword = buildEncryptionPassword(password, user.email.address)
if (!_setDecryptionPassword(decryptionPassword)) {
setErrors({
@ -43,7 +40,7 @@ export default function EnterDecryptionPassword(): ReactElement {
),
})
} else {
navigateToNext()
setTimeout(navigateToNext, 0)
}
},
})
@ -52,15 +49,9 @@ export default function EnterDecryptionPassword(): ReactElement {
<form onSubmit={formik.handleSubmit}>
<SimpleForm
title={t("components.EnterDecryptionPassword.title")}
description={t(
"components.EnterDecryptionPassword.description",
)}
cancelActionLabel={t(
"components.EnterDecryptionPassword.cancelAction",
)}
continueActionLabel={t(
"components.EnterDecryptionPassword.continueAction",
)}
description={t("components.EnterDecryptionPassword.description")}
cancelActionLabel={t("components.EnterDecryptionPassword.cancelAction")}
continueActionLabel={t("components.EnterDecryptionPassword.continueAction")}
isSubmitting={formik.isSubmitting}
>
{[
@ -69,22 +60,15 @@ export default function EnterDecryptionPassword(): ReactElement {
fullWidth
name="password"
id="password"
label={t(
"components.EnterDecryptionPassword.form.password.label",
)}
label={t("components.EnterDecryptionPassword.form.password.label")}
placeholder={t(
"components.EnterDecryptionPassword.form.password.placeholder",
)}
value={formik.values.password}
onChange={formik.handleChange}
disabled={formik.isSubmitting}
error={
formik.touched.password &&
Boolean(formik.errors.password)
}
helperText={
formik.touched.password && formik.errors.password
}
error={formik.touched.password && Boolean(formik.errors.password)}
helperText={formik.touched.password && formik.errors.password}
InputProps={{
startAdornment: (
<InputAdornment position="start">

27
src/routes/LoginRoute.tsx
View File

@ -1,5 +1,6 @@
import {ReactElement, useContext, useState} from "react"
import {useNavigate} from "react-router-dom"
import {useUpdateEffect} from "react-use"
import {MultiStepForm} from "~/components"
import AuthContext from "~/AuthContext/AuthContext"
@ -8,11 +9,23 @@ import EmailForm from "~/route-widgets/LoginRoute/EmailForm"
export default function LoginRoute(): ReactElement {
const navigate = useNavigate()
const {login} = useContext(AuthContext)
const {login, user} = useContext(AuthContext)
const [email, setEmail] = useState<string>("")
const [sameRequestToken, setSameRequestToken] = useState<string>("")
useUpdateEffect(() => {
if (!user) {
return
}
if (user?.encryptedPassword) {
navigate("/enter-password")
} else {
navigate("/")
}
}, [user?.encryptedPassword])
return (
<MultiStepForm
steps={[
@ -25,17 +38,7 @@ export default function LoginRoute(): ReactElement {
/>,
<ConfirmCodeForm
key="confirm_code_form"
onConfirm={user => {
login(user)
setTimeout(() => {
if (user.encryptedPassword) {
navigate("/enter-password")
} else {
navigate("/")
}
}, 0)
}}
onConfirm={login}
email={email}
sameRequestToken={sameRequestToken}
/>,

41
src/routes/LogoutRoute.tsx Normal file
View File

@ -0,0 +1,41 @@
import {ReactElement, useContext} from "react"
import {useTranslation} from "react-i18next"
import {useEffectOnce} from "react-use"
import {Box, CircularProgress, Grid, Paper, Typography} from "@mui/material"
import {useNavigateToNext} from "~/hooks"
import AuthContext from "~/AuthContext/AuthContext"
export default function LogoutRoute(): ReactElement {
const {t} = useTranslation()
const navigateToNext = useNavigateToNext("/auth/login")
const {logout} = useContext(AuthContext)
useEffectOnce(() => {
logout()
navigateToNext()
})
return (
<Paper>
<Box padding={4}>
<Grid container spacing={4} direction="column" alignItems="center">
<Grid item>
<Typography variant="h6" component="h1">
{t("routes.LogoutRoute.title")}
</Typography>
</Grid>
<Grid item>
<CircularProgress />
</Grid>
<Grid item>
<Typography variant="body1">
{t("routes.LogoutRoute.description")}
</Typography>
</Grid>
</Grid>
</Box>
</Paper>
)
}