Ryan/docmost-ryan
1
0
Fork 0
mirror of https://github.com/Shadowfita/docmost.git synced 2025-11-15 09:11:11 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: refactor forgot password system (#329)

Browse Source 
* refactor forgot password system

* ready
This commit is contained in:
Philip Okugbe
2024-09-19 15:51:51 +01:00
committed by GitHub
parent b152c858b4
commit e56f7933f4
29 changed files with 578 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/App.tsx
View File

@ -25,6 +25,7 @@ import Layout from "@/components/layouts/global/layout.tsx";
import { ErrorBoundary } from "react-error-boundary";
import InviteSignup from "@/pages/auth/invite-signup.tsx";
import ForgotPassword from "@/pages/auth/forgot-password.tsx";
import PasswordReset from "./pages/auth/password-reset";
export default function App() {
const [, setSocket] = useAtom(socketAtom);
@ -62,9 +63,10 @@ export default function App() {
<Routes>
<Route index element={<Navigate to="/home" />} />
<Route path={"/login"} element={<LoginPage />} />
<Route path={"/forgotPassword"} element={<ForgotPassword />} />
<Route path={"/invites/:invitationId"} element={<InviteSignup />} />
<Route path={"/setup/register"} element={<SetupWorkspace />} />
<Route path={"/forgot-password"} element={<ForgotPassword />} />
<Route path={"/password-reset"} element={<PasswordReset />} />
<Route path={"/p/:pageSlug"} element={<PageRedirect />} />

28
apps/client/src/components/ui/error-404.tsx
View File

@ -1,19 +1,25 @@
import { Title, Text, Button, Container, Group } from "@mantine/core";
import classes from "./error-404.module.css";
import { Link } from "react-router-dom";
import { Helmet } from "react-helmet-async";
export function Error404() {
return (
<Container className={classes.root}>
<Title className={classes.title}>404 Page Not Found</Title>
<Text c="dimmed" size="lg" ta="center" className={classes.description}>
Sorry, we can't find the page you are looking for.
</Text>
<Group justify="center">
<Button component={Link} to={"/home"} variant="subtle" size="md">
Take me back to homepage
</Button>
</Group>
</Container>
<>
<Helmet>
<title>404 page not found - Docmost</title>
</Helmet>
<Container className={classes.root}>
<Title className={classes.title}>404 Page Not Found</Title>
<Text c="dimmed" size="lg" ta="center" className={classes.description}>
Sorry, we can't find the page you are looking for.
</Text>
<Group justify="center">
<Button component={Link} to={"/home"} variant="subtle" size="md">
Take me back to homepage
</Button>
</Group>
</Container>
</>
);
}

9
apps/client/src/features/auth/components/auth.module.css
View File

@ -3,12 +3,3 @@
border-radius: 4px;
background: light-dark(var(--mantine-color-body), rgba(0, 0, 0, 0.1));
}
.forgotPasswordBtn {
font-size: var(--input-label-size, var(--mantine-font-size-sm));
text-decoration: underline;
}
.formElemWithTopMargin {
margin-top: var(--mantine-spacing-md);
}

149
apps/client/src/features/auth/components/forgot-password-form.tsx
View File

@ -1,109 +1,70 @@
import * as React from "react";
import {useState} from "react";
import { useState } from "react";
import * as z from "zod";
import {useForm, zodResolver} from "@mantine/form";
import { useForm, zodResolver } from "@mantine/form";
import useAuth from "@/features/auth/hooks/use-auth";
import {IForgotPassword} from "@/features/auth/types/auth.types";
import {Box, Button, Container, PasswordInput, TextInput, Title,} from "@mantine/core";
import { IForgotPassword } from "@/features/auth/types/auth.types";
import { Box, Button, Container, Text, TextInput, Title } from "@mantine/core";
import classes from "./auth.module.css";
import {useRedirectIfAuthenticated} from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
import {notifications} from "@mantine/notifications";
import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
const stepOneSchema = z.object({
email: z
.string()
.min(1, {message: "Email is required"})
.email({message: "Invalid email address"}),
});
const stepTwoSchema = z.object({
email: z
.string()
.min(1, {message: "Email is required"})
.email({message: "Invalid email address"}),
token: z.string().min(1, {message: 'Token is required'}),
newPassword: z.string().min(8, {message: 'Password must contain at least 8 character(s)'}),
const formSchema = z.object({
email: z
.string()
.min(1, { message: "Email is required" })
.email({ message: "Invalid email address" }),
});
export function ForgotPasswordForm() {
const {forgotPassword, isLoading} = useAuth();
const [isTokenSend, setIsTokenSend] = useState<boolean>(false)
useRedirectIfAuthenticated();
const { forgotPassword, isLoading } = useAuth();
const [isTokenSent, setIsTokenSent] = useState<boolean>(false);
useRedirectIfAuthenticated();
const form = useForm<IForgotPassword>({
validate: isTokenSend ? zodResolver(stepTwoSchema) : zodResolver(stepOneSchema),
initialValues: {
email: "",
token: null,
newPassword: null,
},
});
const form = useForm<IForgotPassword>({
validate: zodResolver(formSchema),
initialValues: {
email: "",
},
});
async function onSubmit(data: IForgotPassword) {
const success = await forgotPassword(data);
if (success) {
if (isTokenSend) {
notifications.show({
message: 'Password updated',
color: "green",
});
}
if (!isTokenSend) {
setIsTokenSend(true);
}
}
async function onSubmit(data: IForgotPassword) {
if (await forgotPassword(data)) {
setIsTokenSent(true);
}
}
return (
<Container size={420} my={40} className={classes.container}>
<Box p="xl" mt={200}>
<Title order={2} ta="center" fw={500} mb="md">
Forgot password
</Title>
return (
<Container size={420} my={40} className={classes.container}>
<Box p="xl" mt={200}>
<Title order={2} ta="center" fw={500} mb="md">
Forgot password
</Title>
<form onSubmit={form.onSubmit(onSubmit)}>
<TextInput
id="email"
type="email"
label="Email"
placeholder="email@example.com"
variant="filled"
disabled={isTokenSend}
{...form.getInputProps("email")}
/>
<form onSubmit={form.onSubmit(onSubmit)}>
{!isTokenSent && (
<TextInput
id="email"
type="email"
label="Email"
placeholder="email@example.com"
variant="filled"
{...form.getInputProps("email")}
/>
)}
{
isTokenSend
&& (
<>
<TextInput
id="token"
className={classes.formElemWithTopMargin}
type="text"
label="Token"
placeholder="token"
variant="filled"
{...form.getInputProps("token")}
/>
{isTokenSent && (
<Text>
A password reset link has been sent to your email. Please check
your inbox.
</Text>
)}
<PasswordInput
label="Password"
placeholder="Your password"
variant="filled"
mt="md"
{...form.getInputProps("newPassword")}
/>
</>
)
}
<Button type="submit" fullWidth mt="xl" loading={isLoading}>
{isTokenSend ? 'Set password' : 'Send Token'}
</Button>
</form>
</Box>
</Container>
);
{!isTokenSent && (
<Button type="submit" fullWidth mt="xl" loading={isLoading}>
Send reset link
</Button>
)}
</form>
</Box>
</Container>
);
}

24
apps/client/src/features/auth/components/login-form.tsx
View File

@ -1,4 +1,3 @@
import * as React from "react";
import * as z from "zod";
import { useForm, zodResolver } from "@mantine/form";
import useAuth from "@/features/auth/hooks/use-auth";
@ -10,12 +9,12 @@ import {
Button,
PasswordInput,
Box,
UnstyledButton,
Anchor,
} from "@mantine/core";
import classes from "./auth.module.css";
import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
import clsx from "clsx";
import {useNavigate} from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import APP_ROUTE from "@/lib/app-route.ts";
const formSchema = z.object({
@ -28,7 +27,6 @@ const formSchema = z.object({
export function LoginForm() {
const { signIn, isLoading } = useAuth();
const navigate = useNavigate();
useRedirectIfAuthenticated();
const form = useForm<ILogin>({
@ -68,17 +66,19 @@ export function LoginForm() {
{...form.getInputProps("password")}
/>
<UnstyledButton
onClick={() => navigate(APP_ROUTE.AUTH.FORGOT_PASSWORD)}
className = {clsx(classes.forgotPasswordBtn, classes.formElemWithTopMargin)}>
<div>
<span>Forgot Password</span>
</div>
</UnstyledButton>
<Button type="submit" fullWidth mt="xl" loading={isLoading}>
Sign In
</Button>
</form>
<Anchor
to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
component={Link}
underline="never"
size="sm"
>
Forgot your password?
</Anchor>
</Box>
</Container>
);

67
apps/client/src/features/auth/components/password-reset-form.tsx Normal file
View File

@ -0,0 +1,67 @@
import * as z from "zod";
import { useForm, zodResolver } from "@mantine/form";
import useAuth from "@/features/auth/hooks/use-auth";
import { IPasswordReset } from "@/features/auth/types/auth.types";
import {
Box,
Button,
Container,
PasswordInput,
Text,
Title,
} from "@mantine/core";
import classes from "./auth.module.css";
import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
const formSchema = z.object({
newPassword: z
.string()
.min(8, { message: "Password must contain at least 8 characters" }),
});
interface PasswordResetFormProps {
resetToken?: string;
}
export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
const { passwordReset, isLoading } = useAuth();
useRedirectIfAuthenticated();
const form = useForm<IPasswordReset>({
validate: zodResolver(formSchema),
initialValues: {
newPassword: "",
},
});
async function onSubmit(data: IPasswordReset) {
await passwordReset({
token: resetToken,
newPassword: data.newPassword
})
}
return (
<Container size={420} my={40} className={classes.container}>
<Box p="xl" mt={200}>
<Title order={2} ta="center" fw={500} mb="md">
Password Reset
</Title>
<form onSubmit={form.onSubmit(onSubmit)}>
<PasswordInput
label="New password"
placeholder="Your new password"
variant="filled"
mt="md"
{...form.getInputProps("newPassword")}
/>
<Button type="submit" fullWidth mt="xl" loading={isLoading}>
Set password
</Button>
</form>
</Box>
</Container>
);
}

60
apps/client/src/features/auth/hooks/use-auth.ts
View File

@ -1,10 +1,22 @@
import { useState } from "react";
import {forgotPassword, login, setupWorkspace} from "@/features/auth/services/auth-service";
import {
forgotPassword,
login,
passwordReset,
setupWorkspace,
verifyUserToken,
} from "@/features/auth/services/auth-service";
import { useNavigate } from "react-router-dom";
import { useAtom } from "jotai";
import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom";
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
import {IForgotPassword, ILogin, ISetupWorkspace} from "@/features/auth/types/auth.types";
import {
IForgotPassword,
ILogin,
IPasswordReset,
ISetupWorkspace,
IVerifyUserToken,
} from "@/features/auth/types/auth.types";
import { notifications } from "@mantine/notifications";
import { IAcceptInvite } from "@/features/workspace/types/workspace.types.ts";
import { acceptInvitation } from "@/features/workspace/services/workspace-service.ts";
@ -76,6 +88,28 @@ export default function useAuth() {
}
};
const handlePasswordReset = async (data: IPasswordReset) => {
setIsLoading(true);
try {
const res = await passwordReset(data);
setIsLoading(false);
setAuthToken(res.tokens);
navigate(APP_ROUTE.HOME);
notifications.show({
message: "Password reset was successful",
});
} catch (err) {
setIsLoading(false);
notifications.show({
message: err.response?.data.message,
color: "red",
});
}
};
const handleIsAuthenticated = async () => {
if (!authToken) {
return false;
@ -109,7 +143,7 @@ export default function useAuth() {
setIsLoading(true);
try {
const res = await forgotPassword(data);
await forgotPassword(data);
setIsLoading(false);
return true;
@ -125,13 +159,31 @@ export default function useAuth() {
}
};
const handleVerifyUserToken = async (data: IVerifyUserToken) => {
setIsLoading(true);
try {
await verifyUserToken(data);
setIsLoading(false);
} catch (err) {
console.log(err);
setIsLoading(false);
notifications.show({
message: err.response?.data.message,
color: "red",
});
}
};
return {
signIn: handleSignIn,
invitationSignup: handleInvitationSignUp,
setupWorkspace: handleSetupWorkspace,
isAuthenticated: handleIsAuthenticated,
logout: handleLogout,
forgotPassword: handleForgotPassword,
passwordReset: handlePasswordReset,
verifyUserToken: handleVerifyUserToken,
logout: handleLogout,
hasTokens,
isLoading,
};

14
apps/client/src/features/auth/queries/auth-query.tsx Normal file
View File

@ -0,0 +1,14 @@
import { useQuery, UseQueryResult } from "@tanstack/react-query";
import { verifyUserToken } from "../services/auth-service";
import { IVerifyUserToken } from "../types/auth.types";
export function useVerifyUserTokenQuery(
verify: IVerifyUserToken,
): UseQueryResult<any, Error> {
return useQuery({
queryKey: ["verify-token", verify],
queryFn: () => verifyUserToken(verify),
enabled: !!verify.token,
staleTime: 0,
});
}

19
apps/client/src/features/auth/services/auth-service.ts
View File

@ -3,9 +3,11 @@ import {
IChangePassword,
IForgotPassword,
ILogin,
IPasswordReset,
IRegister,
ISetupWorkspace,
ITokenResponse,
IVerifyUserToken,
} from "@/features/auth/types/auth.types";
export async function login(data: ILogin): Promise<ITokenResponse> {
@ -20,21 +22,30 @@ export async function register(data: IRegister): Promise<ITokenResponse> {
}*/
export async function changePassword(
data: IChangePassword,
data: IChangePassword
): Promise<IChangePassword> {
const req = await api.post<IChangePassword>("/auth/change-password", data);
return req.data;
}
export async function setupWorkspace(
data: ISetupWorkspace,
data: ISetupWorkspace
): Promise<ITokenResponse> {
const req = await api.post<ITokenResponse>("/auth/setup", data);
return req.data;
}
export async function forgotPassword(data: IForgotPassword): Promise<any> {
const req = await api.post<any>("/auth/forgot-password", data);
export async function forgotPassword(data: IForgotPassword): Promise<void> {
await api.post<any>("/auth/forgot-password", data);
}
export async function passwordReset(
data: IPasswordReset
): Promise<ITokenResponse> {
const req = await api.post<any>("/auth/password-reset", data);
return req.data;
}
export async function verifyUserToken(data: IVerifyUserToken): Promise<any> {
return api.post<any>("/auth/verify-token", data);
}

20
apps/client/src/features/auth/types/auth.types.ts
View File

@ -3,12 +3,6 @@ export interface ILogin {
password: string;
}
export interface IForgotPassword {
email: string;
token: string;
newPassword: string;
}
export interface IRegister {
name?: string;
email: string;
@ -35,3 +29,17 @@ export interface IChangePassword {
oldPassword: string;
newPassword: string;
}
export interface IForgotPassword {
email: string;
}
export interface IPasswordReset {
token?: string;
newPassword: string;
}
export interface IVerifyUserToken {
token: string;
type: string;
}

1
apps/client/src/features/space/queries/space-query.ts
View File

@ -20,6 +20,7 @@ import {
removeSpaceMember,
createSpace,
updateSpace,
deleteSpace,
} from '@/features/space/services/space-service.ts';
import { notifications } from '@mantine/notifications';
import { IPagination, QueryParams } from '@/lib/types.ts';

3
apps/client/src/lib/app-route.ts
View File

@ -4,7 +4,8 @@ const APP_ROUTE = {
LOGIN: "/login",
SIGNUP: "/signup",
SETUP: "/setup/register",
FORGOT_PASSWORD: "/forgotPassword",
FORGOT_PASSWORD: "/forgot-password",
PASSWORD_RESET: "/password-reset",
},
SETTINGS: {
ACCOUNT: {

4
apps/client/src/pages/auth/forgot-password.tsx
View File

@ -1,11 +1,11 @@
import { ForgotPasswordForm } from "@/features/auth/components/forgot-password-form";
import { Helmet } from "react-helmet-async";
import {ForgotPasswordForm} from "@/features/auth/components/forgot-password-form.tsx";
export default function ForgotPassword() {
return (
<>
<Helmet>
<title>Forgot Password</title>
<title>Forgot Password - Docmost</title>
</Helmet>
<ForgotPasswordForm />
</>

2
apps/client/src/pages/auth/invite-signup.tsx
View File

@ -5,7 +5,7 @@ export default function InviteSignup() {
return (
<>
<Helmet>
<title>Invitation signup</title>
<title>Invitation signup - Docmost</title>
</Helmet>
<InviteSignUpForm />
</>

2
apps/client/src/pages/auth/login.tsx
View File

@ -5,7 +5,7 @@ export default function LoginPage() {
return (
<>
<Helmet>
<title>Login</title>
<title>Login - Docmost</title>
</Helmet>
<LoginForm />
</>

53
apps/client/src/pages/auth/password-reset.tsx Normal file
View File

@ -0,0 +1,53 @@
import { Helmet } from "react-helmet-async";
import { PasswordResetForm } from "@/features/auth/components/password-reset-form";
import { Link, useSearchParams } from "react-router-dom";
import { useVerifyUserTokenQuery } from "@/features/auth/queries/auth-query";
import { Button, Container, Group, Text } from "@mantine/core";
import APP_ROUTE from "@/lib/app-route";
export default function PasswordReset() {
const [searchParams] = useSearchParams();
const { data, isLoading, isError } = useVerifyUserTokenQuery({
token: searchParams.get("token"),
type: "forgot-password",
});
const resetToken = searchParams.get("token");
if (isLoading) {
return <div></div>;
}
if (isError || !resetToken) {
return (
<>
<Helmet>
<title>Password Reset - Docmost</title>
</Helmet>
<Container my={40}>
<Text size="lg" ta="center">
Invalid or expired password reset link
</Text>
<Group justify="center">
<Button
component={Link}
to={APP_ROUTE.AUTH.LOGIN}
variant="subtle"
size="md"
>
Goto login page
</Button>
</Group>
</Container>
</>
);
}
return (
<>
<Helmet>
<title>Password Reset - Docmost</title>
</Helmet>
<PasswordResetForm resetToken={resetToken} />
</>
);
}

2
apps/client/src/pages/auth/setup-workspace.tsx
View File

@ -32,7 +32,7 @@ export default function SetupWorkspace() {
return (
<>
<Helmet>
<title>Setup workspace</title>
<title>Setup workspace - Docmost</title>
</Helmet>
<SetupWorkspaceForm />
</>