Merge branch 'feat/ui-0.6.0' into 'test'

Feat/ui 0.6.0

See merge request opensource/answer!326

i18n/en_US.yaml

@@ -661,7 +661,8 @@ ui:
       account: Account
       interface: Interface
     profile:
-      btn_name: Update profile
+      heading: Profile
+      btn_name: Save
       display_name:
         label: Display Name
         msg: Display name cannot be empty.
@@ -679,7 +680,7 @@ ui:
         custom: Custom
         btn_refresh: Refresh
         custom_text: You can upload your image.
-        default: Default
+        default: System
         msg: Please upload an avatar
       bio:
         label: About Me (optional)
@@ -691,10 +692,12 @@ ui:
         label: Location (optional)
         placeholder: "City, Country"
     notification:
+      heading: Notifications
       email:
         label: Email Notifications
         radio: "Answers to your questions, comments, and more"
     account:
+      heading: Account
       change_email_btn: Change email
       change_pass_btn: Change password
       change_email_info: >-
@@ -715,6 +718,7 @@ ui:
       pass_confirm:
         label: Confirm New Password
     interface:
+      heading: Interface
       lang:
         label: Interface Language
         text: User interface language. It will change when you refresh the page.
@@ -1206,7 +1210,8 @@ ui:
         text: Provide email address that will receive test sends.
         msg: Test email recipients is invalid
       smtp_authentication:
-        label: SMTP Authentication
+        label: Enable authentication
+        title: SMTP Authentication
         msg: SMTP authentication cannot be empty.
         "yes": "Yes"
         "no": "No"

ui/src/pages/Admin/Smtp/index.tsx

@@ -46,7 +46,8 @@ const Smtp: FC = () => {
       },
       smtp_authentication: {
         type: 'boolean',
-        title: t('smtp_authentication.label'),
+        title: t('smtp_authentication.title'),
+        label: t('smtp_authentication.label'),
         enum: [true, false],
         enumNames: [t('smtp_authentication.yes'), t('smtp_authentication.no')],
       },

ui/src/pages/Maintenance/index.tsx

@@ -20,7 +20,7 @@ const Index = () => {
           style={{ fontSize: '120px', lineHeight: 1.2 }}>
           (=‘_‘=)
         </div>
-        <div className="text-center mb-4">{t('description')}</div>
+        <div className="text-center mb-4">{t('desc')}</div>
       </Container>
     </div>
   );

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

@@ -458,7 +458,7 @@ const Ask = () => {
           </Form>
         </Col>
         <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
-          <Card className="mb-4">
+          <Card>
             <Card.Header>
               {t('title', { keyPrefix: 'how_to_format' })}
             </Card.Header>

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

@@ -34,7 +34,7 @@ const initFormData = {
     errorMsg: '',
   },
 };
-const Ask = () => {
+const Index = () => {
   const [formData, setFormData] = useState<FormDataItem>(initFormData);
   const { aid = '', qid = '' } = useParams();
   const [focusType, setForceType] = useState('');
@@ -247,7 +247,7 @@ const Ask = () => {
             <Card.Body
               className="fmt small"
               dangerouslySetInnerHTML={{
-                __html: t('description', { keyPrefix: 'how_to_format' }),
+                __html: t('desc', { keyPrefix: 'how_to_format' }),
               }}
             />
           </Card>
@@ -257,4 +257,4 @@ const Ask = () => {
   );
 };
 
-export default Ask;
+export default Index;

ui/src/pages/Tags/Edit/index.tsx

@@ -40,7 +40,7 @@ const initFormData = {
     errorMsg: '',
   },
 };
-const Ask = () => {
+const Index = () => {
   const { is_admin = false } = loggedUserInfoStore((state) => state.user);
 
   const { tagId } = useParams();
@@ -269,4 +269,4 @@ const Ask = () => {
   );
 };
 
-export default Ask;
+export default Index;

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

@@ -1,11 +1,16 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import ModifyEmail from './components/ModifyEmail';
 import ModifyPassword from './components/ModifyPass';
 
 const Index = () => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'settings.account',
+  });
   return (
     <>
+      <h3 className="mb-4">{t('heading')}</h3>
       <ModifyEmail />
       <ModifyPassword />
     </>

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, FormEvent } from 'react';
-import { Form, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import type { LangsType, FormDataType } from '@/common/interface';
@@ -7,6 +6,7 @@ import { useToast } from '@/hooks';
 import { updateUserInterface } from '@/services';
 import { localize } from '@/utils';
 import { loggedUserInfoStore } from '@/stores';
+import { SchemaForm, JSONSchema, UISchema, initFormData } from '@/components';
 
 const Index = () => {
   const { t } = useTranslation('translation', {
@@ -15,19 +15,34 @@ const Index = () => {
   const loggedUserInfo = loggedUserInfoStore.getState().user;
   const toast = useToast();
   const [langs, setLangs] = useState<LangsType[]>();
-  const [formData, setFormData] = useState<FormDataType>({
+  const schema: JSONSchema = {
+    title: t('heading'),
+    properties: {
       lang: {
-      value: loggedUserInfo.language,
+        type: 'string',
-      isInvalid: false,
+        title: t('lang.label'),
-      errorMsg: '',
+        description: t('lang.text'),
+        enum: langs?.map((_) => _.value),
+        enumNames: langs?.map((_) => _.label),
+        default: loggedUserInfo.language,
       },
-  });
+    },
+  };
+  const uiSchema: UISchema = {
+    lang: {
+      'ui:widget': 'select',
+    },
+  };
+  const [formData, setFormData] = useState<FormDataType>(initFormData(schema));
 
   const getLangs = async () => {
     const res: LangsType[] = await localize.loadLanguageOptions();
     setLangs(res);
   };
 
+  const handleOnChange = (d) => {
+    setFormData(d);
+  };
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
     const lang = formData.lang.value;
@@ -48,39 +63,16 @@ const Index = () => {
     getLangs();
   }, []);
   return (
-    <Form noValidate onSubmit={handleSubmit}>
+    <>
-      <Form.Group controlId="emailSend" className="mb-3">
+      <h3 className="mb-4">{t('heading')}</h3>
-        <Form.Label>{t('lang.label')}</Form.Label>
+      <SchemaForm
-        <Form.Select
+        schema={schema}
-          value={formData.lang.value}
+        uiSchema={uiSchema}
-          isInvalid={formData.lang.isInvalid}
+        formData={formData}
-          onChange={(e) => {
+        onChange={handleOnChange}
-            setFormData({
+        onSubmit={handleSubmit}
-              lang: {
+      />
-                value: e.target.value,
+    </>
-                isInvalid: false,
-                errorMsg: '',
-              },
-            });
-          }}>
-          {langs?.map((item) => {
-            return (
-              <option value={item.value} key={item.label}>
-                {item.label}
-              </option>
-            );
-          })}
-        </Form.Select>
-        <Form.Text as="div">{t('lang.text')}</Form.Text>
-        <Form.Control.Feedback type="invalid">
-          {formData.lang.errorMsg}
-        </Form.Control.Feedback>
-      </Form.Group>
-
-      <Button variant="primary" type="submit">
-        {t('save', { keyPrefix: 'btns' })}
-      </Button>
-    </Form>
   );
 };
 

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

@@ -1,23 +1,33 @@
 import React, { useState, FormEvent, useEffect } from 'react';
-import { Form, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import type { FormDataType } from '@/common/interface';
 import { useToast } from '@/hooks';
 import { setNotice, getLoggedUserInfo } from '@/services';
+import { SchemaForm, JSONSchema, UISchema, initFormData } from '@/components';
 
 const Index = () => {
   const toast = useToast();
   const { t } = useTranslation('translation', {
     keyPrefix: 'settings.notification',
   });
-  const [formData, setFormData] = useState<FormDataType>({
+  const schema: JSONSchema = {
+    title: t('heading'),
+    properties: {
       notice_switch: {
-      value: false,
+        type: 'boolean',
-      isInvalid: false,
+        title: t('email.label'),
-      errorMsg: '',
+        label: t('email.radio'),
+        default: false,
       },
-  });
+    },
+  };
+  const uiSchema: UISchema = {
+    notice_switch: {
+      'ui:widget': 'switch',
+    },
+  };
+  const [formData, setFormData] = useState<FormDataType>(initFormData(schema));
 
   const getProfile = () => {
     getLoggedUserInfo().then((res) => {
@@ -47,34 +57,20 @@ const Index = () => {
   useEffect(() => {
     getProfile();
   }, []);
+  const handleChange = (ud) => {
+    setFormData(ud);
+  };
   return (
-    <Form noValidate onSubmit={handleSubmit}>
+    <>
-      <Form.Group controlId="emailSend" className="mb-3">
+      <h3 className="mb-4">{t('heading')}</h3>
-        <Form.Label>{t('email.label')}</Form.Label>
+      <SchemaForm
-        <Form.Check
+        schema={schema}
-          required
+        uiSchema={uiSchema}
-          type="checkbox"
+        formData={formData}
-          label={t('email.radio')}
+        onChange={handleChange}
-          checked={formData.notice_switch.value}
+        onSubmit={handleSubmit}
-          onChange={(e) => {
-            setFormData({
-              notice_switch: {
-                value: e.target.checked,
-                isInvalid: false,
-                errorMsg: '',
-              },
-            });
-          }}
       />
-        <Form.Control.Feedback type="invalid">
+    </>
-          {formData.notice_switch.errorMsg}
-        </Form.Control.Feedback>
-      </Form.Group>
-
-      <Button variant="primary" type="submit">
-        {t('save', { keyPrefix: 'btns' })}
-      </Button>
-    </Form>
   );
 };
 

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

@@ -1,12 +1,12 @@
 import React, { FormEvent, useState, useEffect } from 'react';
-import { Form, Button } from 'react-bootstrap';
+import { Form, Button, Stack, ButtonGroup } from 'react-bootstrap';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { marked } from 'marked';
 import MD5 from 'md5';
 
 import type { FormDataType } from '@/common/interface';
-import { UploadImg, Avatar } from '@/components';
+import { UploadImg, Avatar, Icon } from '@/components';
 import { loggedUserInfoStore } from '@/stores';
 import { useToast } from '@/hooks';
 import { modifyUserInfo, getLoggedUserInfo } from '@/services';
@@ -19,7 +19,7 @@ const Index: React.FC = () => {
   const toast = useToast();
   const { user, update } = loggedUserInfoStore();
   const [mailHash, setMailHash] = useState('');
-  const [count, setCount] = useState(0);
+  const [count] = useState(0);
 
   const [formData, setFormData] = useState<FormDataType>({
     display_name: {
@@ -60,6 +60,40 @@ const Index: React.FC = () => {
   const handleChange = (params: FormDataType) => {
     setFormData({ ...formData, ...params });
   };
+  const handleAvatarChange = (evt) => {
+    const { value: v } = evt.currentTarget;
+    if (v === 'gravatar') {
+      handleChange({
+        avatar: {
+          ...formData.avatar,
+          type: 'gravatar',
+          gravatar: `https://www.gravatar.com/avatar/${mailHash}`,
+          isInvalid: false,
+          errorMsg: '',
+        },
+      });
+    }
+    if (v === 'custom') {
+      handleChange({
+        avatar: {
+          ...formData.avatar,
+          type: 'custom',
+          isInvalid: false,
+          errorMsg: '',
+        },
+      });
+    }
+    if (v === 'default') {
+      handleChange({
+        avatar: {
+          ...formData.avatar,
+          type: 'default',
+          isInvalid: false,
+          errorMsg: '',
+        },
+      });
+    }
+  };
 
   const avatarUpload = (path: string) => {
     setFormData({
@@ -73,6 +107,17 @@ const Index: React.FC = () => {
       },
     });
   };
+  const removeCustomAvatar = () => {
+    setFormData({
+      ...formData,
+      avatar: {
+        ...formData.avatar,
+        custom: '',
+        isInvalid: false,
+        errorMsg: '',
+      },
+    });
+  };
 
   const checkValidated = (): boolean => {
     let bol = true;
@@ -201,14 +246,16 @@ const Index: React.FC = () => {
     });
   };
 
-  const refreshGravatar = () => {
+  // const refreshGravatar = () => {
-    setCount((pre) => pre + 1);
+  //   setCount((pre) => pre + 1);
-  };
+  // };
 
   useEffect(() => {
     getProfile();
   }, []);
   return (
+    <>
+      <h3 className="mb-4">{t('heading')}</h3>
       <Form noValidate onSubmit={handleSubmit}>
         <Form.Group controlId="displayName" className="mb-3">
           <Form.Label>{t('display_name.label')}</Form.Label>
@@ -257,85 +304,36 @@ const Index: React.FC = () => {
 
         <Form.Group className="mb-3">
           <Form.Label>{t('avatar.label')}</Form.Label>
-        <div className="mb-2">
+          <div className="mb-3">
-          <Form.Check
+            <Form.Select
-            inline
+              name="avatar.type"
-            type="radio"
+              value={formData.avatar.type}
-            id="gravatar"
+              onChange={handleAvatarChange}>
-            label={t('avatar.gravatar')}
+              <option value="gravatar" key="gravatar">
-            className="mb-0"
+                {t('avatar.gravatar')}
-            checked={formData.avatar.type === 'gravatar'}
+              </option>
-            onChange={() =>
+              <option value="default" key="default">
-              handleChange({
+                {t('avatar.default')}
-                avatar: {
+              </option>
-                  ...formData.avatar,
+              <option value="custom" key="custom">
-                  type: 'gravatar',
+                {t('avatar.custom')}
-                  gravatar: `https://www.gravatar.com/avatar/${mailHash}`,
+              </option>
-                  isInvalid: false,
+            </Form.Select>
-                  errorMsg: '',
-                },
-              })
-            }
-          />
-          <Form.Check
-            inline
-            type="radio"
-            label={t('avatar.custom')}
-            id="custom"
-            className="mb-0"
-            checked={formData.avatar.type === 'custom'}
-            onChange={() =>
-              handleChange({
-                avatar: {
-                  ...formData.avatar,
-                  type: 'custom',
-                  isInvalid: false,
-                  errorMsg: '',
-                },
-              })
-            }
-          />
-          <Form.Check
-            inline
-            type="radio"
-            id="default"
-            label={t('avatar.default')}
-            className="mb-0"
-            checked={formData.avatar.type === 'default'}
-            onChange={() =>
-              handleChange({
-                avatar: {
-                  ...formData.avatar,
-                  type: 'default',
-                  isInvalid: false,
-                  errorMsg: '',
-                },
-              })
-            }
-          />
           </div>
-        <div className="d-flex align-items-center">
+          <div className="d-flex">
             {formData.avatar.type === 'gravatar' && (
-            <>
+              <Stack>
                 <Avatar
-                size="128px"
+                  size="160px"
                   avatar={formData.avatar.gravatar}
                   searchStr={`s=256&d=identicon${
                     count > 0 ? `&t=${new Date().valueOf()}` : ''
                   }`}
                   className="me-3 rounded"
                 />
-              <div>
+                <Form.Text className="text-muted mt-1">
-                <Button
+                  <Trans i18nKey="settings.profile.avatar.gravatar_text">
-                  variant="outline-secondary"
+                    You can change image on
-                  className="mb-2"
-                  onClick={refreshGravatar}>
-                  {t('avatar.btn_refresh')}
-                </Button>
-                <div>
-                  <Form.Text className="text-muted mt-0">
-                    <Trans i18nKey="settings.profile.gravatar_text">
-                      You can change your image on{' '}
                     <a
                       href="https://gravatar.com"
                       target="_blank"
@@ -344,37 +342,38 @@ const Index: React.FC = () => {
                     </a>
                   </Trans>
                 </Form.Text>
-                </div>
+              </Stack>
-              </div>
-            </>
             )}
 
             {formData.avatar.type === 'custom' && (
-            <>
+              <Stack>
+                <Stack direction="horizontal" className="align-items-start">
                   <Avatar
-                size="128px"
+                    size="160px"
                     searchStr="s=256"
                     avatar={formData.avatar.custom}
-                className="me-3 rounded"
+                    className="me-2 bg-gray-300 "
                   />
-              <div>
+                  <ButtonGroup vertical className="fit-content">
-                <UploadImg
+                    <UploadImg type="avatar" uploadCallback={avatarUpload}>
-                  type="avatar"
+                      <Icon name="cloud-upload" />
-                  uploadCallback={avatarUpload}
+                    </UploadImg>
-                  className="mb-2"
+                    <Button
-                />
+                      variant="outline-secondary"
-                <div>
+                      onClick={removeCustomAvatar}>
-                  <Form.Text className="text-muted mt-0">
+                      <Icon name="trash" />
+                    </Button>
+                  </ButtonGroup>
+                </Stack>
+                <Form.Text className="text-muted mt-1">
                   <Trans i18nKey="settings.profile.avatar.text">
                     You can upload your image.
                   </Trans>
                 </Form.Text>
-                </div>
+              </Stack>
-              </div>
-            </>
             )}
             {formData.avatar.type === 'default' && (
-            <Avatar size="128px" avatar="" className="me-3 rounded" />
+              <Avatar size="160px" avatar="" />
             )}
           </div>
           <Form.Control
@@ -460,6 +459,7 @@ const Index: React.FC = () => {
           {t('btn_name')}
         </Button>
       </Form>
+    </>
   );
 };