chore: set max characters for title&display_name

ui/src/components/Editor/ToolBars/image.tsx

@@ -232,10 +232,12 @@ const Image: FC<IEditorContext> = ({ editor }) => {
         </Modal.Header>
         <Modal.Body>
           <Tabs onSelect={handleSelect}>
-            <Tab eventKey="localImage" title={t('image.tab_1')}>
+            <Tab eventKey="localImage" title={t('image.tab_image')}>
               <Form className="mt-3" onSubmit={handleClick}>
                 <Form.Group controlId="editor.imgLink" className="mb-3">
-                  <Form.Label>{t('image.form1.fields.file.label')}</Form.Label>
+                  <Form.Label>
+                    {t('image.form_image.fields.file.label')}
+                  </Form.Label>
                   <Form.Control
                     type="file"
                     onChange={onUpload}
@@ -243,13 +245,13 @@ const Image: FC<IEditorContext> = ({ editor }) => {
                   />
 
                   <Form.Control.Feedback type="invalid">
-                    {t('image.form1.fields.file.msg.empty')}
+                    {t('image.form_image.fields.file.msg.empty')}
                   </Form.Control.Feedback>
                 </Form.Group>
 
                 <Form.Group controlId="editor.imgDescription" className="mb-3">
                   <Form.Label>
-                    {t('image.form1.fields.description.label')}
+                    {t('image.form_image.fields.description.label')}
                   </Form.Label>
                   <Form.Control
                     type="text"
@@ -262,10 +264,12 @@ const Image: FC<IEditorContext> = ({ editor }) => {
                 </Form.Group>
               </Form>
             </Tab>
-            <Tab eventKey="remoteImage" title={t('image.tab_2')}>
+            <Tab eventKey="remoteImage" title={t('image.tab_url')}>
               <Form className="mt-3" onSubmit={handleClick}>
                 <Form.Group controlId="editor.imgUrl" className="mb-3">
-                  <Form.Label>{t('image.form2.fields.url.label')}</Form.Label>
+                  <Form.Label>
+                    {t('image.form_url.fields.url.label')}
+                  </Form.Label>
                   <Form.Control
                     type="text"
                     value={link.value}
@@ -275,12 +279,14 @@ const Image: FC<IEditorContext> = ({ editor }) => {
                     isInvalid={currentTab === 'remoteImage' && link.isInvalid}
                   />
                   <Form.Control.Feedback type="invalid">
-                    {t('image.form2.fields.url.msg.empty')}
+                    {t('image.form_url.fields.url.msg.empty')}
                   </Form.Control.Feedback>
                 </Form.Group>
 
                 <Form.Group controlId="editor.imgName" className="mb-3">
-                  <Form.Label>{t('image.form2.fields.name.label')}</Form.Label>
+                  <Form.Label>
+                    {t('image.form_url.fields.name.label')}
+                  </Form.Label>
                   <Form.Control
                     type="text"
                     value={imageName.value}

ui/src/i18n/locales/en.json

@@ -100,8 +100,8 @@
     "image": {
       "text": "Image",
       "add_image": "Add image",
-      "tab_1": "Upload image",
-      "form1": {
+      "tab_image": "Upload image",
+      "form_image": {
         "fields": {
           "file": {
             "label": "Image file",
@@ -117,8 +117,8 @@
           }
         }
       },
-      "tab_2": "Image URL",
-      "form2": {
+      "tab_url": "Image URL",
+      "form_url": {
         "fields": {
           "url": {
             "label": "Image URL",
@@ -361,7 +361,8 @@
           "label": "Title",
           "placeholder": "Be specific and imagine you’re asking a question to another person",
           "msg": {
-            "empty": "Title cannot be empty."
+            "empty": "Title cannot be empty.",
+            "range": "Title up to 150 characters"
           }
         },
         "body": {
@@ -454,7 +455,8 @@
     "name": {
       "label": "Name",
       "msg": {
-        "empty": "Name cannot be empty."
+        "empty": "Name cannot be empty.",
+        "range": "Name up to 30 characters"
       }
     },
     "email": {
@@ -512,7 +514,8 @@
       "btn_name": "Update profile",
       "display_name": {
         "label": "Display name",
-        "msg": "Display name cannot be empty."
+        "msg": "Display name cannot be empty.",
+        "msg_range": "Display name up to 30 characters"
       },
       "avatar": {
         "label": "Profile image",
@@ -864,4 +867,4 @@
       }
     }
   }
-}
+}

ui/src/pages/Questions/Ask/index.tsx

@@ -124,6 +124,13 @@ const Ask = () => {
         isInvalid: true,
         errorMsg: t('form.fields.title.msg.empty'),
       };
+    } else if ([...title.value].length > 150) {
+      bol = false;
+      formData.title = {
+        value: title.value,
+        isInvalid: true,
+        errorMsg: t('form.fields.title.msg.range'),
+      };
     } else {
       formData.title = {
         value: title.value,

ui/src/pages/Users/Register/components/SignUpForm/index.tsx

@@ -52,6 +52,13 @@ const Index: React.FC<Props> = ({ callback }) => {
         isInvalid: true,
         errorMsg: t('name.msg.empty'),
       };
+    } else if ([...name.value].length > 30) {
+      bol = false;
+      formData.name = {
+        value: name.value,
+        isInvalid: true,
+        errorMsg: t('name.msg.range'),
+      };
     }
 
     if (!e_mail.value) {
@@ -182,7 +189,7 @@ const Index: React.FC<Props> = ({ callback }) => {
 
       <div className="text-center">
         <Trans i18nKey="login.info_login" ns="translation">
-          DAlready have an account? <Link to="/users/login">Log in</Link>
+          Already have an account? <Link to="/users/login">Log in</Link>
         </Trans>
       </div>
     </Col>

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

@@ -74,6 +74,13 @@ const Index: React.FC = () => {
         isInvalid: true,
         errorMsg: t('display_name.msg'),
       };
+    } else if ([...display_name.value].length > 30) {
+      bol = false;
+      formData.display_name = {
+        value: display_name.value,
+        isInvalid: true,
+        errorMsg: t('display_name.msg_range'),
+      };
     }
 
     const reg = /^(http|https):\/\//g;

ui/tsconfig.json

@@ -7,6 +7,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
+    "downlevelIteration": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",