Configure error handling for existing username and email, handle cancel edit user details revert

Author: bensohh

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

@@ -77,26 +77,6 @@ const ProfilePage = (props: ProfilePageProps): JSX.Element => {
               </div>
             </div>
             <div className="right-header">
-              {/* {isEditable && (
-                <>
-                  <Button
-                    icon={<SaveOutlined />}
-                    type="primary"
-                    className="save-button"
-                    htmlType="submit"
-                  >
-                    Save
-                  </Button>
-                  <Button
-                    className="cancel-button"
-                    onClick={() => {
-                      setIsEditable(false);
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                </>
-              )} */}
               {!isEditable && (
                 <Button
                   icon={<EditOutlined />}
@@ -125,7 +105,9 @@ const ProfilePage = (props: ProfilePageProps): JSX.Element => {
                     setRefresh(!refresh);
                     success("Profile Updated");
                   })
-                  .catch((error) => error(error.message));
+                  .catch((errors: Error) => {
+                    error(errors.message);
+                  });
               }}
               layout="vertical"
               disabled={!isEditable}
@@ -156,22 +138,13 @@ const ProfilePage = (props: ProfilePageProps): JSX.Element => {
                       },
                     ]}
                   >
-                    <Input name="email" type="email" disabled />
+                    <Input name="email" type="email" />
                   </Form.Item>
                 </Col>
               </Row>
               <Row gutter={16}>
                 <Col span={12}>
-                  <Form.Item
-                    name="password"
-                    label="Password"
-                    // rules={[
-                    //   {
-                    //     required: true,
-                    //     message: "Please enter valid password!",
-                    //   },
-                    // ]}
-                  >
+                  <Form.Item name="password" label="Password">
                     <Input.Password
                       name="password"
                       type="password"
@@ -188,6 +161,9 @@ const ProfilePage = (props: ProfilePageProps): JSX.Element => {
                     <Button
                       className="cancel-button"
                       onClick={() => {
+                        form.setFieldValue("username", username);
+                        form.setFieldValue("email", email);
+                        form.setFieldValue("password", undefined);
                         setIsEditable(false);
                       }}
                     >

apps/frontend/src/app/services/user.ts

@@ -1,4 +1,4 @@
-const USER_SERVICE_URL = process.env.NEXT_PUBLIC_USER_SERVICE_URL
+const USER_SERVICE_URL = process.env.NEXT_PUBLIC_USER_SERVICE_URL;
 
 export interface User {
   id: string;
@@ -25,51 +25,65 @@ export interface VerifyTokenResponseType {
 }
 
 type UserResponseData = {
-  "id": string,
-  "username": string,
-  "email": string,
-  "isAdmin": boolean,
-  "createdAt": string,
-}
+  id: string;
+  username: string;
+  email: string;
+  isAdmin: boolean;
+  createdAt: string;
+};
 
 function withDefaultHeaders(opts: RequestInit): RequestInit {
   return {
     ...opts,
     headers: {
       ...(opts.headers ?? {}),
-      "Content-Type": "application/json"
+      "Content-Type": "application/json",
     },
-  }
+  };
 }
 
-export async function createUser(username: string, email: string, password: string): Promise<void> {
+export async function createUser(
+  username: string,
+  email: string,
+  password: string
+): Promise<void> {
   const opts = withDefaultHeaders({
     method: "POST",
     body: JSON.stringify({
-      username, email, password
+      username,
+      email,
+      password,
     }),
-  })
-  const res = await fetch(`${USER_SERVICE_URL}users`, opts)
+  });
+  const res = await fetch(`${USER_SERVICE_URL}users`, opts);
 
   if (!res.ok) {
-    throw new Error(`User service responded with ${res.status}: ${await res.text()}`)
+    throw new Error(
+      `User service responded with ${res.status}: ${await res.text()}`
+    );
   }
 }
 
-export async function loginUser(email: string, password: string): Promise<string> {
+export async function loginUser(
+  email: string,
+  password: string
+): Promise<string> {
   const opts = withDefaultHeaders({
     method: "POST",
     body: JSON.stringify({
-      email, password
-    })
+      email,
+      password,
+    }),
   });
   const res = await fetch(`${USER_SERVICE_URL}auth/login`, opts);
 
   if (!res.ok) {
-    throw new Error(`User service responded with ${res.status}: ${await res.text()}`);
+    throw new Error(
+      `User service responded with ${res.status}: ${await res.text()}`
+    );
   }
 
-  const ret: { "data": { "accessToken": string } } = await res.json();
+  const ret: { data: { accessToken: string } } = await res.json();
   return ret.data.accessToken;
 }
 
@@ -89,9 +103,11 @@ export const UpdateUser = async (
       body: JSON.stringify(user),
     }
   );
-
   if (response.status === 200) {
     return response.json();
+  } else if (response.status === 409) {
+    const errorResponse = await response.json();
+    throw new Error(errorResponse.message);
   } else {
     throw new Error(
       `Error updating user: ${response.status} ${response.statusText}`