Fix conflicts

Author: guanquann

backend/user-service/.env.sample

@@ -29,4 +29,8 @@ USER=EMAIL_ADDRESS
 PASS=PASSWORD
 
 # Redis configuration
-REDIS_URI=REDIS_URI
+REDIS_URI=REDIS_URI
+
+# Test
+MONGO_URI_TEST=mongodb://mongo:mongo@test-mongo:27017/
+REDIS_URI_TEST=redis://test-redis:6379

backend/user-service/config/redis.ts

@@ -3,7 +3,10 @@ import dotenv from "dotenv";
 
 dotenv.config();
 
-const REDIS_URI = process.env.REDIS_URI || "redis://localhost:6379";
+const REDIS_URI =
+  process.env.NODE_ENV === "test"
+    ? process.env.REDIS_URI_TEST
+    : process.env.REDIS_URI || "redis://localhost:6379";
 
 const client = createClient({ url: REDIS_URI });
 

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

@@ -164,12 +164,10 @@ export const verifyUser = async (
 
     const updatedUser = await _updateUserVerification(email);
     if (!updatedUser) {
-      return res.status(404).json({ message: `User ${email} not verified.` });
+      return res.status(404).json({ message: `User not verified.` });
     }
 
-    return res
-      .status(200)
-      .json({ message: `User ${email} verified successfully.` });
+    return res.status(200).json({ message: `User verified successfully.` });
   } catch (error) {
     return res
       .status(500)

backend/user-service/scripts/seed.ts

@@ -38,6 +38,7 @@ export async function seedAdminAccount() {
       adminUsername,
       adminEmail,
       hashedPassword,
+      true,
       true
     );
     console.log("Admin account created successfully.");

backend/user-service/tests/authRoutes.spec.ts

@@ -4,6 +4,8 @@ import supertest from "supertest";
 import app from "../app";
 import UserModel from "../model/user-model";
 
+jest.setTimeout(10000);
+
 const request = supertest(app);
 
 const AUTH_BASE_URL = "/api/auth";
@@ -25,6 +27,7 @@ const insertAdminUser = async () => {
     email,
     password: hashedPassword,
     isAdmin: true,
+    isVerified: true,
   }).save();
 
   return { email, password };
@@ -37,6 +40,7 @@ const insertNonAdminUser = async () => {
     lastName,
     email,
     password: hashedPassword,
+    isVerified: true,
   }).save();
 
   return { email, password };

backend/user-service/tests/setup.ts

@@ -3,7 +3,7 @@ import redisClient from "../config/redis";
 
 beforeAll(async () => {
   const mongoUri =
-    process.env.MONGO_URI_TEST || "mongodb://mongo:mongo@mongo:27017/";
+    process.env.MONGO_URI_TEST || "mongodb://mongo:mongo@test-mongo:27017/";
 
   await mongoose.connect(mongoUri, {});
   await redisClient.connect();

docker-compose-test.yml

@@ -1,13 +1,13 @@
+name: peerprep-test
+
 services:
   test-user-service:
     image: peerprep/user-service
     build: ./backend/user-service
     env_file: ./backend/user-service/.env
-    environment:
-      - MONGO_URI_TEST=mongodb://mongo:mongo@mongo:27017/
     depends_on:
-      - mongo
-      - redis
+      - test-mongo
+      - test-redis
     networks:
       - peerprep-network
     volumes:
@@ -16,17 +16,17 @@ services:
     restart: on-failure
     command: ["npm", "test"]
 
-  mongo:
+  test-mongo:
     image: mongo
     restart: always
     networks:
       - peerprep-network
     env_file:
       - ./backend/.env
 
-  redis:
+  test-redis:
     image: redis:8.0-M01
-    container_name: redis
+    container_name: test-redis
     networks:
       - peerprep-network
     healthcheck:

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, Navigate } from "react-router-dom";
 
 import NewQuestion from "./pages/NewQuestion";
 import QuestionDetail from "./pages/QuestionDetail";
@@ -65,11 +65,16 @@ function App() {
             </Route>
             <Route path="*" element={<PageNotFound />} />
           </Route>
-          <Route path="/auth">
+          <Route path="auth">
+            <Route index element={<Navigate to="/auth/login" />} />
             <Route path="signup" element={<SignUp />} />
             <Route path="login" element={<LogIn />} />
-            <Route path="verifyEmail/:userId" element={<EmailVerification />} />
+            <Route
+              path="verifyEmail/:userId?"
+              element={<EmailVerification />}
+            />
             <Route path="forget-password" element={<ForgetPassword />} />
+            <Route path="*" element={<Navigate to="/auth/login" />} />
           </Route>
         </Routes>
       </MatchProvider>

frontend/src/contexts/AuthContext.tsx

@@ -67,8 +67,6 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
       .then(() => userClient.post("users/send-verification-email", { email }))
       .then((res) => {
         navigate(`/auth/verifyEmail/${res.data.data.id}`);
-        // navigate("/login");
-        // toast.success(res.data.message);
       })
       .catch((err) => {
         setUser(null);
@@ -89,6 +87,9 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         navigate("/home");
       })
       .catch((err) => {
+        if (err.response?.data.message === "User not verified.") {
+          navigate(`/auth/verifyEmail`);
+        }
         setUser(null);
         toast.error(err.response?.data.message || err.message);
       });

frontend/src/pages/EmailVerification/index.tsx

@@ -7,7 +7,7 @@ import classes from "./index.module.css";
 import { toast } from "react-toastify";
 
 const EmailVerification: React.FC = () => {
-  const { userId } = useParams<{ userId: string }>();
+  const { userId } = useParams<{ userId?: string }>();
   const [token, setToken] = useState("");
   const [email, setEmail] = useState("");
   const navigate = useNavigate();
@@ -19,16 +19,17 @@ const EmailVerification: React.FC = () => {
         setEmail(res.data.data.email);
       })
       .catch((err) => console.error(err));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleResend = () => {
+  const handleSendEmail = () => {
     userClient
       .post(`/users/send-verification-email`, { email })
+      .then((res) => toast.success(res.data.message))
       .catch((err) => console.error(err));
   };
 
-  const handleVerify = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const handleVerifyAcc = () => {
     userClient
       .get(`/users/verify-email/${email}/${token}`)
       .then((res) => {
@@ -59,35 +60,51 @@ const EmailVerification: React.FC = () => {
           })}
         >
           <Typography variant="h5">Verify your email address</Typography>
-          <Typography sx={(theme) => ({ margin: theme.spacing(2, 0) })}>
-            An account verification token has been sent to your email.
-          </Typography>
-          <form onSubmit={handleVerify}>
-            <TextField
+          {userId ? (
+            <Typography sx={(theme) => ({ margin: theme.spacing(2, 0) })}>
+              An account verification token has been sent to your email.
+            </Typography>
+          ) : (
+            <Typography sx={(theme) => ({ margin: theme.spacing(2, 0) })}>
+              An account verification token will be sent to your email.
+            </Typography>
+          )}
+          <TextField
+            fullWidth
+            margin="normal"
+            label="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            slotProps={{
+              input: {
+                endAdornment: <Button onClick={handleSendEmail}>Send</Button>,
+              },
+            }}
+          />
+          <TextField
+            fullWidth
+            margin="normal"
+            label="Token"
+            value={token}
+            onChange={(e) => setToken(e.target.value)}
+          />
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={(theme) => ({ marginTop: theme.spacing(4) })}
+          >
+            <Button
               fullWidth
-              margin="normal"
-              label="Token"
-              value={token}
-              onChange={(e) => setToken(e.target.value)}
-            />
-            <Stack
-              direction="row"
-              spacing={2}
-              sx={(theme) => ({ marginTop: theme.spacing(4) })}
+              variant="contained"
+              color="secondary"
+              onClick={handleSendEmail}
             >
-              <Button
-                fullWidth
-                variant="contained"
-                color="secondary"
-                onClick={handleResend}
-              >
-                Resend
-              </Button>
-              <Button fullWidth variant="contained" type="submit">
-                Verify
-              </Button>
-            </Stack>
-          </form>
+              Resend
+            </Button>
+            <Button fullWidth variant="contained" onClick={handleVerifyAcc}>
+              Verify
+            </Button>
+          </Stack>
         </Box>
       </AppMargin>
     </Box>