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

add forgot-password ui

Browse Source
This commit is contained in:
sahariardev
2024-09-07 21:30:54 +06:00
parent be0d97661a
commit a6b1145b5b
9 changed files with 183 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@ import PageRedirect from "@/pages/page/page-redirect.tsx";
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";
export default function App() {
const [, setSocket] = useAtom(socketAtom);
@ -61,6 +62,7 @@ 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 />} />

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

@ -3,3 +3,12 @@
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);
}

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

@ -0,0 +1,109 @@
import * as React from "react";
import {useState} from "react";
import * as z from "zod";
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 classes from "./auth.module.css";
import {useRedirectIfAuthenticated} from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
import {notifications} from "@mantine/notifications";
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)'}),
});
export function ForgotPasswordForm() {
const {forgotPassword, isLoading} = useAuth();
const [isTokenSend, setIsTokenSend] = useState<boolean>(false)
useRedirectIfAuthenticated();
const form = useForm<IForgotPassword>({
validate: isTokenSend ? zodResolver(stepTwoSchema) : zodResolver(stepOneSchema),
initialValues: {
email: "",
token: null,
newPassword: null,
},
});
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);
}
}
}
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")}
/>
{
isTokenSend
&& (
<>
<TextInput
id="token"
className={classes.formElemWithTopMargin}
type="text"
label="Token"
placeholder="token"
variant="filled"
{...form.getInputProps("token")}
/>
<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>
);
}

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

@ -10,9 +10,13 @@ import {
Button,
PasswordInput,
Box,
UnstyledButton,
} 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 APP_ROUTE from "@/lib/app-route.ts";
const formSchema = z.object({
email: z
@ -24,6 +28,7 @@ const formSchema = z.object({
export function LoginForm() {
const { signIn, isLoading } = useAuth();
const navigate = useNavigate();
useRedirectIfAuthenticated();
const form = useForm<ILogin>({
@ -62,6 +67,14 @@ export function LoginForm() {
mt="md"
{...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>

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

@ -1,10 +1,10 @@
import { useState } from "react";
import { login, setupWorkspace } from "@/features/auth/services/auth-service";
import {forgotPassword, login, setupWorkspace} 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 { ILogin, ISetupWorkspace } from "@/features/auth/types/auth.types";
import {IForgotPassword, ILogin, ISetupWorkspace} 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";
@ -105,12 +105,33 @@ export default function useAuth() {
navigate(APP_ROUTE.AUTH.LOGIN);
};
const handleForgotPassword = async (data: IForgotPassword) => {
setIsLoading(true);
try {
const res = await forgotPassword(data);
setIsLoading(false);
return true;
} catch (err) {
console.log(err);
setIsLoading(false);
notifications.show({
message: err.response?.data.message,
color: "red",
});
return false;
}
};
return {
signIn: handleSignIn,
invitationSignup: handleInvitationSignUp,
setupWorkspace: handleSetupWorkspace,
isAuthenticated: handleIsAuthenticated,
logout: handleLogout,
forgotPassword: handleForgotPassword,
hasTokens,
isLoading,
};

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

@ -1,6 +1,7 @@
import api from "@/lib/api-client";
import {
IChangePassword,
IForgotPassword,
ILogin,
IRegister,
ISetupWorkspace,
@ -31,3 +32,9 @@ export async function setupWorkspace(
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);
return req.data;
}

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

@ -3,6 +3,12 @@ export interface ILogin {
password: string;
}
export interface IForgotPassword {
email: string;
token: string;
newPassword: string;
}
export interface IRegister {
name?: string;
email: string;

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

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

13
apps/client/src/pages/auth/forgot-password.tsx Normal file
View File

@ -0,0 +1,13 @@
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>
</Helmet>
<ForgotPasswordForm />
</>
);
}