fix(user/settings): enable user can modify username

ui/src/i18n/locales/en.json

@@ -495,6 +495,12 @@
         "msg": "Display name cannot be empty.",
         "msg_range": "Display name up to 30 characters"
       },
+      "username": {
+        "label": "Username",
+        "msg": "Username cannot be empty.",
+        "msg_range": "Username up to 30 characters",
+        "character": "Must use the character set \"a-z\", \"0-9\", \" - . _\""
+      },
       "avatar": {
         "label": "Profile image",
         "text": "You can upload your image or <1>reset</1> it to"

ui/src/pages/Users/Settings/Profile/index.tsx

@@ -22,6 +22,11 @@ const Index: React.FC = () => {
       isInvalid: false,
       errorMsg: '',
     },
+    username: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
     avatar: {
       value: '',
       isInvalid: false,
@@ -66,7 +71,7 @@ const Index: React.FC = () => {
 
   const checkValidated = (): boolean => {
     let bol = true;
-    const { display_name, website } = formData;
+    const { display_name, website, username } = formData;
     if (!display_name.value) {
       bol = false;
       formData.display_name = {
@@ -83,6 +88,29 @@ const Index: React.FC = () => {
       };
     }
 
+    if (!username.value) {
+      bol = false;
+      formData.username = {
+        value: '',
+        isInvalid: true,
+        errorMsg: t('username.msg'),
+      };
+    } else if ([...username.value].length > 30) {
+      bol = false;
+      formData.username = {
+        value: username.value,
+        isInvalid: true,
+        errorMsg: t('username.msg_range'),
+      };
+    } else if (/[^a-z0-9\-._]/.test(username.value)) {
+      bol = false;
+      formData.username = {
+        value: username.value,
+        isInvalid: true,
+        errorMsg: t('username.character'),
+      };
+    }
+
     const reg = /^(http|https):\/\//g;
     if (website.value && !website.value.match(reg)) {
       bol = false;
@@ -101,12 +129,13 @@ const Index: React.FC = () => {
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
     event.stopPropagation();
-    if (checkValidated() === false) {
+    if (!checkValidated()) {
       return;
     }
 
     const params = {
       display_name: formData.display_name.value,
+      username: formData.username.value,
       avatar: formData.avatar.value,
       bio: formData.bio.value,
       website: formData.website.value,
@@ -137,6 +166,7 @@ const Index: React.FC = () => {
   const getProfile = () => {
     getUserInfo().then((res) => {
       formData.display_name.value = res.display_name;
+      formData.username.value = res.username;
       formData.bio.value = res.bio;
       formData.avatar.value = res.avatar;
       formData.location.value = res.location;
@@ -172,6 +202,28 @@ const Index: React.FC = () => {
         </Form.Control.Feedback>
       </Form.Group>
 
+      <Form.Group controlId="userName" className="mb-3">
+        <Form.Label>{t('username.label')}</Form.Label>
+        <Form.Control
+          required
+          type="text"
+          value={formData.username.value}
+          isInvalid={formData.username.isInvalid}
+          onChange={(e) =>
+            handleChange({
+              username: {
+                value: e.target.value,
+                isInvalid: false,
+                errorMsg: '',
+              },
+            })
+          }
+        />
+        <Form.Control.Feedback type="invalid">
+          {formData.username.errorMsg}
+        </Form.Control.Feedback>
+      </Form.Group>
+
       <Form.Group className="mb-3">
         <Form.Label>{t('avatar.label')}</Form.Label>
         <div className="d-flex align-items-center">