Skip to content

Commit 6f4a0ea

Browse files
nicolelim02nicolelim02
committed
Change email verification
1 parent a8ae444 commit 6f4a0ea

File tree

9 files changed

+128
-16
lines changed

9 files changed

+128
-16
lines changed

‎backend/user-service/controller/auth-controller.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export async function handleLogin(
1919

2020
if (!user.isVerified) {
2121
return res.status(401).json({
22-
message: "User not verified. Please check your email for the link",
22+
message: "User not verified.",
2323
});
2424
}
2525

‎backend/user-service/controller/user-controller.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,13 @@ export const sendVerificationMail = async (
118118
email,
119119
ACCOUNT_VERIFICATION_SUBJ,
120120
user.username,
121-
`http://localhost:3001/api/users/verify-email/${email}/${emailToken}`
121+
emailToken
122122
);
123123

124-
return res
125-
.status(200)
126-
.json({ message: "Verification email sent. Please check your inbox." });
124+
return res.status(200).json({
125+
message: "Verification email sent. Please check your inbox.",
126+
data: { email, id: user.id },
127+
});
127128
} catch (error) {
128129
return res.status(500).json({
129130
message: "Unknown error when sending verification email!",

‎backend/user-service/utils/constants.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ export const ACCOUNT_VERIFICATION_TEMPLATE = `
99
<body>
1010
<p>Hello {{username}}!</p>
1111
<p>
12-
Thank you for signing up with us. Please verify your email address via
13-
this
14-
<span><a href={{verificationLink}}>link</a></span>.
12+
Thank you for signing up with us. Please verify your email address using this token: <strong>{{token}}</strong>.
1513
</p>
1614
<p>If you did not sign up with us, please ignore this email.</p>
1715
<p>Regards,</p>

‎backend/user-service/utils/mailer.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ export const sendAccVerificationMail = async (
4242
to: string,
4343
subject: string,
4444
username: string,
45-
verificationLink: string
45+
token: string
4646
) => {
4747
const template = Handlebars.compile(ACCOUNT_VERIFICATION_TEMPLATE);
48-
const replacement = { username, verificationLink };
48+
const replacement = { username, token };
4949
const html = template(replacement);
5050
const options = {
5151
from: USER,

‎frontend/src/App.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import "react-toastify/dist/ReactToastify.css";
2222
import MatchProvider from "./contexts/MatchContext";
2323
import CollabSandbox from "./pages/CollabSandbox";
2424
import NoDirectAccessRoutes from "./components/NoDirectAccessRoutes";
25+
import EmailVerification from "./pages/EmailVerification";
2526

2627
function App() {
2728
return (
@@ -63,8 +64,11 @@ function App() {
6364
</Route>
6465
<Route path="*" element={<PageNotFound />} />
6566
</Route>
66-
<Route path="signup" element={<SignUp />} />
67-
<Route path="login" element={<LogIn />} />
67+
<Route path="/auth">
68+
<Route path="signup" element={<SignUp />} />
69+
<Route path="login" element={<LogIn />} />
70+
<Route path="verifyEmail/:userId" element={<EmailVerification />} />
71+
</Route>
6872
</Routes>
6973
</MatchProvider>
7074
<ToastContainer position="bottom-right" />

‎frontend/src/components/Navbar/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,11 +124,14 @@ const Navbar: React.FC<NavbarProps> = (props) => {
124124
<>
125125
<Button
126126
variant="contained"
127-
onClick={() => navigate("/signup")}
127+
onClick={() => navigate("/auth/signup")}
128128
>
129129
Sign up
130130
</Button>
131-
<Button variant="outlined" onClick={() => navigate("/login")}>
131+
<Button
132+
variant="outlined"
133+
onClick={() => navigate("/auth/login")}
134+
>
132135
Log in
133136
</Button>
134137
</>

‎frontend/src/contexts/AuthContext.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,9 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
6666
})
6767
.then(() => userClient.post("users/send-verification-email", { email }))
6868
.then((res) => {
69-
navigate("/login");
70-
toast.success(res.data.message);
69+
navigate(`/auth/verifyEmail/${res.data.data.id}`);
70+
// navigate("/login");
71+
// toast.success(res.data.message);
7172
})
7273
.catch((err) => {
7374
setUser(null);

‎frontend/src/pages/EmailVerification/index.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.fullheight {
2+
display: flex;
3+
}
4+
5+
.center {
6+
justify-content: center;
7+
align-items: center;
8+
}

‎frontend/src/pages/EmailVerification/index.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { useNavigate, useParams } from "react-router-dom";
2+
import AppMargin from "../../components/AppMargin";
3+
import { Box, Button, Stack, TextField, Typography } from "@mui/material";
4+
import { useEffect, useState } from "react";
5+
import { userClient } from "../../utils/api";
6+
import classes from "./index.module.css";
7+
import { toast } from "react-toastify";
8+
9+
const EmailVerification: React.FC = () => {
10+
const { userId } = useParams<{ userId: string }>();
11+
const [token, setToken] = useState("");
12+
const [email, setEmail] = useState("");
13+
const navigate = useNavigate();
14+
15+
useEffect(() => {
16+
userClient
17+
.get(`/users/${userId}/`)
18+
.then((res) => {
19+
setEmail(res.data.data.email);
20+
})
21+
.catch((err) => console.error(err));
22+
}, []);
23+
24+
const handleResend = () => {
25+
userClient
26+
.post(`/users/send-verification-email`, { email })
27+
.catch((err) => console.error(err));
28+
};
29+
30+
const handleVerify = (e: React.FormEvent<HTMLFormElement>) => {
31+
e.preventDefault();
32+
userClient
33+
.get(`/users/verify-email/${email}/${token}`)
34+
.then((res) => {
35+
navigate("/auth/login");
36+
toast.success(res.data.message);
37+
})
38+
.catch((err) => console.error(err));
39+
};
40+
41+
return (
42+
<Box
43+
sx={{
44+
display: "flex",
45+
flexDirection: "column",
46+
minHeight: "100vh",
47+
justifyContent: "center",
48+
alignItems: "center",
49+
}}
50+
>
51+
<AppMargin classname={`${classes.fullheight}`}>
52+
<Box
53+
sx={(theme) => ({
54+
textAlign: "center",
55+
border: `1px solid ${theme.palette.divider}`,
56+
borderRadius: theme.spacing(1),
57+
width: "40vw",
58+
padding: theme.spacing(4),
59+
})}
60+
>
61+
<Typography variant="h5">Verify your email address</Typography>
62+
<Typography sx={(theme) => ({ margin: theme.spacing(2, 0) })}>
63+
An account verification token has been sent to your email.
64+
</Typography>
65+
<form onSubmit={handleVerify}>
66+
<TextField
67+
fullWidth
68+
margin="normal"
69+
label="Token"
70+
value={token}
71+
onChange={(e) => setToken(e.target.value)}
72+
/>
73+
<Stack
74+
direction="row"
75+
spacing={2}
76+
sx={(theme) => ({ marginTop: theme.spacing(4) })}
77+
>
78+
<Button
79+
fullWidth
80+
variant="contained"
81+
color="secondary"
82+
onClick={handleResend}
83+
>
84+
Resend
85+
</Button>
86+
<Button fullWidth variant="contained" type="submit">
87+
Verify
88+
</Button>
89+
</Stack>
90+
</form>
91+
</Box>
92+
</AppMargin>
93+
</Box>
94+
);
95+
};
96+
97+
export default EmailVerification;

0 commit comments

Comments
 (0)