From 9b0c302d535c0987db0922e2d6cc0960ac61560d Mon Sep 17 00:00:00 2001
From: tituschewxj <tituschewxj@gmail.com>
Date: Tue, 12 Nov 2024 21:20:47 +0800
Subject: [PATCH] fix(frontend): :bug: remove modifiability of username

Removes the ability to change username, which fixes the problem in the submission history, as records are queried based on username. This design also is more consistent for users as their matched users usernames in their history remains consistent.
---
 apps/frontend/src/app/profile/page.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/app/profile/page.tsx b/apps/frontend/src/app/profile/page.tsx
index 22b616bed8..424da4e9d0 100644
--- a/apps/frontend/src/app/profile/page.tsx
+++ b/apps/frontend/src/app/profile/page.tsx
@@ -4,17 +4,17 @@ import {
   Avatar,
   Button,
   Col,
-  Divider,
   Form,
   Input,
   Layout,
   message,
   Row,
+  Tooltip,
 } from "antd";
 import { Content } from "antd/es/layout/layout";
 import "./styles.scss";
 import { EditOutlined, SaveOutlined } from "@ant-design/icons";
-import { useEffect, useState, useLayoutEffect } from "react";
+import { useEffect, useState } from "react";
 import {
   UpdateUser,
   ValidateUser,
@@ -117,14 +117,14 @@ const ProfilePage = (props: ProfilePageProps): JSX.Element => {
                   <Form.Item
                     name="username"
                     label="Username"
+                    tooltip="Unmodifable to prevent confusion in other users history when your username changes"
                     rules={[
                       {
-                        required: true,
                         message: "Please enter valid username!",
                       },
                     ]}
                   >
-                    <Input name="username" />
+                    <Input name="username" disabled />
                   </Form.Item>
                 </Col>
                 <Col span={12}>
@@ -144,7 +144,11 @@ const ProfilePage = (props: ProfilePageProps): JSX.Element => {
               </Row>
               <Row gutter={16}>
                 <Col span={12}>
-                  <Form.Item name="password" label="Password">
+                  <Form.Item
+                    name="password"
+                    label="Password"
+                    tooltip="Password is not updated if this field is left empty"
+                  >
                     <Input.Password
                       name="password"
                       type="password"