Merge branch 'fix-ui-v0.2' into 'main'

fix: custom avatar need upload

See merge request opensource/answer!155

ui/src/components/Avatar/index.tsx

@@ -21,9 +21,9 @@ const Index: FC<IProps> = ({ avatar, size, className, searchStr = '' }) => {
         avatar?.includes('gravatar') ? '&d=identicon' : ''
       }`;
     }
-  } else if (avatar?.type === 'gravatar') {
+  } else if (avatar?.type === 'gravatar' && avatar.gravatar) {
     url = `${avatar.gravatar}?${searchStr}&d=identicon`;
-  } else if (avatar?.type === 'custom') {
+  } else if (avatar?.type === 'custom' && avatar.custom) {
     url = `${avatar.custom}?${searchStr}`;
   }
 

ui/src/i18n/locales/en.json

@@ -523,7 +523,8 @@
         "custom": "Custom",
         "btn_refresh": "Refresh",
         "custom_text": "You can upload your image.",
-        "default": "Default"
+        "default": "Default",
+        "msg": "Please upload an avatar"
       },
       "bio": {
         "label": "About Me (optional)"

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

@@ -120,6 +120,17 @@ const Index: React.FC = () => {
       };
     }
 
+    if (formData.avatar.type === 'custom' && !formData.avatar.custom) {
+      bol = false;
+      formData.avatar = {
+        ...formData.avatar,
+        custom: '',
+        value: '',
+        isInvalid: true,
+        errorMsg: t('avatar.msg'),
+      };
+    }
+
     const reg = /^(http|https):\/\//g;
     if (website.value && !website.value.match(reg)) {
       bol = false;
@@ -368,6 +379,13 @@ const Index: React.FC = () => {
             <Avatar size="128px" avatar="" className="me-3 rounded" />
           )}
         </div>
+        <Form.Control
+          isInvalid={formData.avatar.isInvalid}
+          className="d-none"
+        />
+        <Form.Control.Feedback type="invalid">
+          {formData.avatar.errorMsg}
+        </Form.Control.Feedback>
       </Form.Group>
 
       <Form.Group controlId="bio" className="mb-3">