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

Feat/ui 0.6.0 See merge request opensource/answer!326
2022-12-08 11:12:56 +00:00 · 2022-12-08 11:12:56 +00:00 · dd269d9a3e
parent 4843d66757 32f7a0a89c
commit dd269d9a3e
10 changed files with 328 additions and 329 deletions
--- a/i18n/en_US.yaml
+++ b/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"
--- a/ui/src/pages/Admin/Smtp/index.tsx
+++ b/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')],
      },
--- a/ui/src/pages/Maintenance/index.tsx
+++ b/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>
  );
--- a/ui/src/pages/Questions/Ask/index.tsx
+++ b/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>
--- a/ui/src/pages/Questions/EditAnswer/index.tsx
+++ b/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;
--- a/ui/src/pages/Tags/Edit/index.tsx
+++ b/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;
--- a/ui/src/pages/Users/Settings/Account/index.tsx
+++ b/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 />
    </>
--- a/ui/src/pages/Users/Settings/Interface/index.tsx
+++ b/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>({
-    lang: {
-      value: loggedUserInfo.language,
-      isInvalid: false,
-      errorMsg: '',
+  const schema: JSONSchema = {
+    title: t('heading'),
+    properties: {
+      lang: {
+        type: 'string',
+        title: t('lang.label'),
+        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">
-        <Form.Label>{t('lang.label')}</Form.Label>
-        <Form.Select
-          value={formData.lang.value}
-          isInvalid={formData.lang.isInvalid}
-          onChange={(e) => {
-            setFormData({
-              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>
+    <>
+      <h3 className="mb-4">{t('heading')}</h3>
+      <SchemaForm
+        schema={schema}
+        uiSchema={uiSchema}
+        formData={formData}
+        onChange={handleOnChange}
+        onSubmit={handleSubmit}
+      />
+    </>
  );
 };

--- a/ui/src/pages/Users/Settings/Notification/index.tsx
+++ b/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>({
-    notice_switch: {
-      value: false,
-      isInvalid: false,
-      errorMsg: '',
+  const schema: JSONSchema = {
+    title: t('heading'),
+    properties: {
+      notice_switch: {
+        type: 'boolean',
+        title: t('email.label'),
+        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">
-        <Form.Label>{t('email.label')}</Form.Label>
-        <Form.Check
-          required
-          type="checkbox"
-          label={t('email.radio')}
-          checked={formData.notice_switch.value}
-          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>
+    <>
+      <h3 className="mb-4">{t('heading')}</h3>
+      <SchemaForm
+        schema={schema}
+        uiSchema={uiSchema}
+        formData={formData}
+        onChange={handleChange}
+        onSubmit={handleSubmit}
+      />
+    </>
  );
 };

--- a/ui/src/pages/Users/Settings/Profile/index.tsx
+++ b/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,265 +246,220 @@ const Index: React.FC = () => {
    });
  };

-  const refreshGravatar = () => {
-    setCount((pre) => pre + 1);
-  };
+  // const refreshGravatar = () => {
+  //   setCount((pre) => pre + 1);
+  // };

  useEffect(() => {
    getProfile();
  }, []);
  return (
-    <Form noValidate onSubmit={handleSubmit}>
-      <Form.Group controlId="displayName" className="mb-3">
-        <Form.Label>{t('display_name.label')}</Form.Label>
-        <Form.Control
-          required
-          type="text"
-          value={formData.display_name.value}
-          isInvalid={formData.display_name.isInvalid}
-          onChange={(e) =>
-            handleChange({
-              display_name: {
-                value: e.target.value,
-                isInvalid: false,
-                errorMsg: '',
-              },
-            })
-          }
-        />
-        <Form.Control.Feedback type="invalid">
-          {formData.display_name.errorMsg}
-        </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.Text as="div">{t('username.caption')}</Form.Text>
-        <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="mb-2">
-          <Form.Check
-            inline
-            type="radio"
-            id="gravatar"
-            label={t('avatar.gravatar')}
-            className="mb-0"
-            checked={formData.avatar.type === 'gravatar'}
-            onChange={() =>
+    <>
+      <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>
+          <Form.Control
+            required
+            type="text"
+            value={formData.display_name.value}
+            isInvalid={formData.display_name.isInvalid}
+            onChange={(e) =>
              handleChange({
-                avatar: {
-                  ...formData.avatar,
-                  type: 'gravatar',
-                  gravatar: `https://www.gravatar.com/avatar/${mailHash}`,
+                display_name: {
+                  value: e.target.value,
                  isInvalid: false,
                  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">
-          {formData.avatar.type === 'gravatar' && (
-            <>
-              <Avatar
-                size="128px"
-                avatar={formData.avatar.gravatar}
-                searchStr={`s=256&d=identicon${
-                  count > 0 ? `&t=${new Date().valueOf()}` : ''
-                }`}
-                className="me-3 rounded"
-              />
-              <div>
-                <Button
-                  variant="outline-secondary"
-                  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"
-                        rel="noreferrer">
-                        gravatar.com
-                      </a>
-                    </Trans>
-                  </Form.Text>
-                </div>
-              </div>
-            </>
-          )}
+          <Form.Control.Feedback type="invalid">
+            {formData.display_name.errorMsg}
+          </Form.Control.Feedback>
+        </Form.Group>

-          {formData.avatar.type === 'custom' && (
-            <>
-              <Avatar
-                size="128px"
-                searchStr="s=256"
-                avatar={formData.avatar.custom}
-                className="me-3 rounded"
-              />
-              <div>
-                <UploadImg
-                  type="avatar"
-                  uploadCallback={avatarUpload}
-                  className="mb-2"
+        <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.Text as="div">{t('username.caption')}</Form.Text>
+          <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="mb-3">
+            <Form.Select
+              name="avatar.type"
+              value={formData.avatar.type}
+              onChange={handleAvatarChange}>
+              <option value="gravatar" key="gravatar">
+                {t('avatar.gravatar')}
+              </option>
+              <option value="default" key="default">
+                {t('avatar.default')}
+              </option>
+              <option value="custom" key="custom">
+                {t('avatar.custom')}
+              </option>
+            </Form.Select>
+          </div>
+          <div className="d-flex">
+            {formData.avatar.type === 'gravatar' && (
+              <Stack>
+                <Avatar
+                  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-0">
-                    <Trans i18nKey="settings.profile.avatar.text">
-                      You can upload your image.
-                    </Trans>
-                  </Form.Text>
-                </div>
-              </div>
-            </>
-          )}
-          {formData.avatar.type === 'default' && (
-            <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.Text className="text-muted mt-1">
+                  <Trans i18nKey="settings.profile.avatar.gravatar_text">
+                    You can change image on
+                    <a
+                      href="https://gravatar.com"
+                      target="_blank"
+                      rel="noreferrer">
+                      gravatar.com
+                    </a>
+                  </Trans>
+                </Form.Text>
+              </Stack>
+            )}

-      <Form.Group controlId="bio" className="mb-3">
-        <Form.Label>{t('bio.label')}</Form.Label>
-        <Form.Control
-          className="font-monospace"
-          required
-          as="textarea"
-          rows={5}
-          value={formData.bio.value}
-          isInvalid={formData.bio.isInvalid}
-          onChange={(e) =>
-            handleChange({
-              bio: {
-                value: e.target.value,
-                isInvalid: false,
-                errorMsg: '',
-              },
-            })
-          }
-        />
-        <Form.Control.Feedback type="invalid">
-          {formData.bio.errorMsg}
-        </Form.Control.Feedback>
-      </Form.Group>
+            {formData.avatar.type === 'custom' && (
+              <Stack>
+                <Stack direction="horizontal" className="align-items-start">
+                  <Avatar
+                    size="160px"
+                    searchStr="s=256"
+                    avatar={formData.avatar.custom}
+                    className="me-2 bg-gray-300 "
+                  />
+                  <ButtonGroup vertical className="fit-content">
+                    <UploadImg type="avatar" uploadCallback={avatarUpload}>
+                      <Icon name="cloud-upload" />
+                    </UploadImg>
+                    <Button
+                      variant="outline-secondary"
+                      onClick={removeCustomAvatar}>
+                      <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>
+              </Stack>
+            )}
+            {formData.avatar.type === 'default' && (
+              <Avatar size="160px" avatar="" />
+            )}
+          </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="website" className="mb-3">
-        <Form.Label>{t('website.label')}</Form.Label>
-        <Form.Control
-          required
-          type="text"
-          placeholder={t('website.placeholder')}
-          value={formData.website.value}
-          isInvalid={formData.website.isInvalid}
-          onChange={(e) =>
-            handleChange({
-              website: {
-                value: e.target.value,
-                isInvalid: false,
-                errorMsg: '',
-              },
-            })
-          }
-        />
-        <Form.Control.Feedback type="invalid">
-          {formData.website.errorMsg}
-        </Form.Control.Feedback>
-      </Form.Group>
+        <Form.Group controlId="bio" className="mb-3">
+          <Form.Label>{t('bio.label')}</Form.Label>
+          <Form.Control
+            className="font-monospace"
+            required
+            as="textarea"
+            rows={5}
+            value={formData.bio.value}
+            isInvalid={formData.bio.isInvalid}
+            onChange={(e) =>
+              handleChange({
+                bio: {
+                  value: e.target.value,
+                  isInvalid: false,
+                  errorMsg: '',
+                },
+              })
+            }
+          />
+          <Form.Control.Feedback type="invalid">
+            {formData.bio.errorMsg}
+          </Form.Control.Feedback>
+        </Form.Group>

-      <Form.Group controlId="email" className="mb-3">
-        <Form.Label>{t('location.label')}</Form.Label>
-        <Form.Control
-          required
-          type="text"
-          placeholder={t('location.placeholder')}
-          value={formData.location.value}
-          isInvalid={formData.location.isInvalid}
-          onChange={(e) =>
-            handleChange({
-              location: {
-                value: e.target.value,
-                isInvalid: false,
-                errorMsg: '',
-              },
-            })
-          }
-        />
-        <Form.Control.Feedback type="invalid">
-          {formData.location.errorMsg}
-        </Form.Control.Feedback>
-      </Form.Group>
+        <Form.Group controlId="website" className="mb-3">
+          <Form.Label>{t('website.label')}</Form.Label>
+          <Form.Control
+            required
+            type="text"
+            placeholder={t('website.placeholder')}
+            value={formData.website.value}
+            isInvalid={formData.website.isInvalid}
+            onChange={(e) =>
+              handleChange({
+                website: {
+                  value: e.target.value,
+                  isInvalid: false,
+                  errorMsg: '',
+                },
+              })
+            }
+          />
+          <Form.Control.Feedback type="invalid">
+            {formData.website.errorMsg}
+          </Form.Control.Feedback>
+        </Form.Group>

-      <Button variant="primary" type="submit">
-        {t('btn_name')}
-      </Button>
-    </Form>
+        <Form.Group controlId="email" className="mb-3">
+          <Form.Label>{t('location.label')}</Form.Label>
+          <Form.Control
+            required
+            type="text"
+            placeholder={t('location.placeholder')}
+            value={formData.location.value}
+            isInvalid={formData.location.isInvalid}
+            onChange={(e) =>
+              handleChange({
+                location: {
+                  value: e.target.value,
+                  isInvalid: false,
+                  errorMsg: '',
+                },
+              })
+            }
+          />
+          <Form.Control.Feedback type="invalid">
+            {formData.location.errorMsg}
+          </Form.Control.Feedback>
+        </Form.Group>
+
+        <Button variant="primary" type="submit">
+          {t('btn_name')}
+        </Button>
+      </Form>
+    </>
  );
 };