Handle failure from user service due to duplicate email/username during registration

Added redirection from register to login page

Author: chiaryan

apps/frontend/src/app/login/page.tsx

@@ -30,29 +30,46 @@ import Link from "next/link";
 import TextArea from "antd/es/input/TextArea";
 import {loginUser} from '@/app/services/user'
 import {setToken} from '@/app/services/login-store'
+import { useRouter } from "next/navigation";
 
 type InputFields = {
   email?: string
   password?: string
 }
 
 export default function Home() {
+  
+  const [isLoginFailed, setIsLoginFailed] = useState(false);
+  const router = useRouter();
+  const [messageApi, contextHolder] = message.useMessage();
+  
+  const successMessage = (message: string) => {
+    messageApi.open({
+      type: "success",
+      content: message,
+    });
+  };
+
   function submitDetails({email, password}: InputFields): void {
     if (!email || email === "" ||
       !password || password === ""
     ) {
       return;
     }
     loginUser(email, password).then(jwt => {
-      console.log("login successful");
+      successMessage("Login successful")
       setToken(jwt);
+      router.push("/");
+
     }).catch(err => {
       console.error(err);
+      setIsLoginFailed(true);
     })
   }
 
   return (
-    <div>
+    <>
+      {contextHolder}
       <Layout>
         <Header/>
         <Content>
@@ -86,6 +103,11 @@ export default function Home() {
                 />
               </Form.Item>
 
+              <div 
+                style={{visibility: isLoginFailed ? "visible" : "hidden"}} 
+                className="registration-failed-text">This email/username is not valid
+              </div>
+
               <Form.Item>
                 <Button type="primary" htmlType="submit">
                   Login
@@ -100,6 +122,6 @@ export default function Home() {
           </div>
         </Content>
       </Layout>
-    </div>
+    </>
   );
 }

apps/frontend/src/app/login/styles.scss

@@ -27,6 +27,11 @@
   border-radius: 15px;
 }
 
+.registration-failed-text {
+  color: #f02849;
+  font-size: 13px;
+}
+
 .content-row-1 {
   display: flex;
   flex-direction: row;

apps/frontend/src/app/register/page.tsx

@@ -29,6 +29,7 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import TextArea from "antd/es/input/TextArea";
 import { createUser } from '@/app/services/user'
+import { useRouter } from "next/navigation";
 
 type InputFields = {
   username?: string
@@ -38,19 +39,37 @@ type InputFields = {
 }
 
 export default function Home() {
+
+  const [isRegistrationFailed, setIsRegistrationFailed] = useState(false);
+  const router = useRouter();
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const successMessage = (message: string) => {
+    messageApi.open({
+      type: "success",
+      content: message,
+    });
+  };
+
   function submitDetails({username, email, password}: InputFields): void {
     if (!username || username === "" ||
       !email || email === "" ||
       !password || password === ""
     ) {
       return;
     }
-    createUser(username, email, password).catch(err => {
-      console.error(err)
+    createUser(username, email, password)
+    .then(() => {
+      successMessage("Account successfully created")
+      router.push("/login");
+    }).catch(err => {
+      console.log(err);
+      setIsRegistrationFailed(true);
     })
   }
   return (
-    <div>
+    <>
+      {contextHolder}
       <Layout>
         <Header/>
         <Content>
@@ -120,6 +139,11 @@ export default function Home() {
                 />
               </Form.Item>
 
+              <div 
+                style={{visibility: isRegistrationFailed ? "visible" : "hidden"}} 
+                className="registration-failed-text">A user with the same email/username already exists
+              </div>
+
               <Form.Item>
                 <Button type="primary" htmlType="submit">
                   Register
@@ -134,6 +158,6 @@ export default function Home() {
           </div>
         </Content>
       </Layout>
-    </div>
+    </>
   );
 }

apps/frontend/src/app/register/styles.scss

@@ -27,6 +27,11 @@
   border-radius: 15px;
 }
 
+.registration-failed-text {
+  color: #f02849;
+  font-size: 13px;
+}
+
 .content-row-1 {
   display: flex;
   flex-direction: row;