feat: add PAT & account sharing setting

src/components/Settings/SharingSettings.tsx

@@ -0,0 +1,98 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import {
+  Button,
+  TextField,
+  Paper,
+  Grid,
+  CircularProgress,
+  Typography,
+} from '@material-ui/core';
+
+import { useStyles } from './Settings.styles';
+
+import i18n from 'src/locale';
+import { RootState } from 'src/reducers';
+
+const SharingSetting = () => {
+  const styles = useStyles();
+  const loading = useSelector<RootState>(
+    ({ configState: { loading } }) => loading,
+  );
+  const [tokenValue, setToken] = useState('');
+  const [error, setError] = useState({
+    isError: false,
+    message: '',
+  });
+
+  const onChangeToken = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const input = event.target.value;
+
+    if (!input.length) {
+      setError({ isError: false, message: '' });
+    }
+    setToken(event.target.value);
+  };
+
+  const onClickAddToken = () => {
+    setToken('');
+  };
+
+  if (loading)
+    return (
+      <Grid container justifyContent="center">
+        <CircularProgress />
+      </Grid>
+    );
+
+  return (
+    <Paper elevation={0} className={styles.root}>
+      <Typography className={styles.subtitle}>Input Code Here</Typography>
+      <div
+        className={styles.option}
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}>
+        <>
+          <TextField
+            variant="outlined"
+            fullWidth
+            label={i18n.t('Setting.List_Menu.Token_Code')}
+            placeholder={i18n.t('Setting.List_Menu.Token_Code')}
+            value={tokenValue}
+            style={{ marginBottom: 'unset' }}
+            onChange={onChangeToken}
+            error={error.isError}
+            helperText={error.isError ? error.message : ''}
+          />
+          <Button
+            size="small"
+            variant="contained"
+            color="primary"
+            style={{ marginLeft: '24px', marginRight: '17px' }}
+            onClick={onClickAddToken}>
+            Add
+          </Button>
+        </>
+      </div>
+      <div>
+        <Button
+          size="medium"
+          variant="contained"
+          color="primary"
+          style={{ marginLeft: '24px', marginRight: '17px', marginTop: '15px' }}
+          onClick={onClickAddToken}>
+          Generate Token
+        </Button>
+      </div>
+    </Paper>
+  );
+};
+
+export default SharingSetting;

src/components/Settings/hooks/use-setting-list.hook.tsx

@@ -7,6 +7,7 @@ import { AccountSettingsContainer } from '../AccountSettingsContainer';
 import EmailSettings from '../EmailSettings';
 import { LanguageSettingsContainer } from '../LanguageSettingsContainer';
 import { NotificationSettingsContainer } from '../NotificationSettings.container';
+import SharingSetting from '../SharingSettings';
 import { BlockListContainer } from '../render/BlockList';
 import { HelpComponent } from '../render/Help';
 
@@ -20,6 +21,7 @@ export type SettingsType =
   | 'account'
   | 'notification'
   | 'email'
+  | 'sharing'
   | 'block'
   | 'language'
   | 'about'
@@ -90,6 +92,12 @@ export const useSettingList = (): SettingsOption<SettingsType>[] => {
         subtitle: i18n.t('Setting.List_Menu.Notification_Subtitle'),
         component: <NotificationSettingsContainer />,
       },
+      {
+        id: 'sharing',
+        title: i18n.t('Setting.List_Menu.Sharing_Title'),
+        subtitle: i18n.t('Setting.List_Menu.Sharing_Subtitle'),
+        component: <SharingSetting />,
+      },
       {
         id: 'block',
         title: i18n.t('Setting.List_Menu.Blocked_Title'),

src/locale/en.json

@@ -1016,6 +1016,8 @@
       },
       "Notification_Title": "Notification Settings",
       "Notification_Subtitle": "Manage your notification",
+      "Sharing_Title": "Account Sharing Setting",
+      "Sharing_Subtitle": "TBA",
       "Notification_Setting": {
         "Comments": "Comments",
         "Mention": "Mention",
@@ -1051,7 +1053,8 @@
       "Email_Title": "Email Configuration",
       "Email_Subtitle": "Set email address for another method of login",
       "Email_Address": "Email Address",
-      "Email_Placeholder": "Add Email Address"
+      "Email_Placeholder": "Add Email Address",
+      "Token_Code": "Add Token Code"
     }
   },
   "SocialMedia": {

src/locale/fra.json

@@ -1016,6 +1016,8 @@
       },
       "Notification_Title": "Paramètres de notification",
       "Notification_Subtitle": "Gérer votre notification",
+      "Sharing_Title": "Account Sharing Setting",
+      "Sharing_Subtitle": "TBA",
       "Notification_Setting": {
         "Comments": "Commentaires",
         "Mention": "Mention",
@@ -1047,7 +1049,8 @@
       "About_Subtitle": "En savoir plus sur Myriad",
       "Feedback_Title": "Soumettre des commentaires",
       "Feedback_Subtitle": "N'hésitez pas à nous faire part de vos commentaires en nous envoyant un e-mail.",
-      "Version_Title": "Version Myriad"
+      "Version_Title": "Version Myriad",
+      "Token_Code": "Add Token Code"
     }
   },
   "SocialMedia": {

src/locale/id.json

@@ -1011,6 +1011,8 @@
       },
       "Notification_Title": "Notifikasi",
       "Notification_Subtitle": "Pengaturan notifikasi",
+      "Sharing_Title": "Account Sharing Setting",
+      "Sharing_Subtitle": "TBA",
       "Notification_Setting": {
         "Comments": "Komentar",
         "Mention": "Sebutan",
@@ -1046,7 +1048,8 @@
       "Email_Title": "Pengaturan Email",
       "Email_Subtitle": "Atur alamat email sebagai metode lain untuk login",
       "Email_Address": "Alamat Email",
-      "Email_Placeholder": "Tambah Alamat Email"
+      "Email_Placeholder": "Tambah Alamat Email",
+      "Token_Code": "Add Token Code"
     }
   },
   "SocialMedia": {

src/locale/ru.json

@@ -998,6 +998,8 @@
       },
       "Notification_Title": "Настройка уведомлений",
       "Notification_Subtitle": "Управление уведомлениями",
+      "Sharing_Title": "Account Sharing Setting",
+      "Sharing_Subtitle": "TBA",
       "Notification_Setting": {
         "Comments": "Комментарии",
         "Mention": "Упоминания",
@@ -1033,7 +1035,8 @@
       "Email_Title": "Email Configuration",
       "Email_Subtitle": "Set email address for another method of login",
       "Email_Address": "Email Address",
-      "Email_Placeholder": "Add Email Address"
+      "Email_Placeholder": "Add Email Address",
+      "Token_Code": "Add Token Code"
     }
   },
   "SocialMedia": {