fix: PAT UI (#1949)

* fix * fix * fix * fix * lint fix * lint fix * format fix
myriadsocial · Mar 4, 2024 · d385a0e · d385a0e
1 parent 1e3478e
commit d385a0e
Show file tree

Hide file tree

Showing 16 changed files with 570 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "i18next": "^21.6.7",
     "i18next-browser-languagedetector": "^6.1.2",
     "immutability-helper": "^3.1.1",
+    "js-sha256": "^0.11.0",
     "lodash": "^4.17.21",
     "millify": "^4.0.0",
     "mux.js": "^6.0.1",
@@ -118,7 +119,7 @@
     "styled-components": "^5.3.5",
     "ua-parser-js": "^1.0.33",
     "unique-names-generator": "^4.7.1",
-    "uuid": "^8.3.2",
+    "uuid": "^9.0.1",
     "validator": "^13.7.0",
     "yarn-deduplicate": "^5.0.0"
   },

diff --git a/pages/api/auth/[...nextauth].ts b/pages/api/auth/[...nextauth].ts
@@ -119,6 +119,52 @@ const createOptions = (req: NextApiRequest) => ({
         }
       },
     }),
+    CredentialsProvider({
+      id: 'tokenCredentials',
+      // The name to display on the sign in form (e.g. 'Sign in with...')
+      name: 'Token Credential',
+      // The credentials is used to generate a suitable form on the sign in page.
+      // You can specify whatever fields you are expecting to be submitted.
+      // e.g. domain, username, password, 2FA token, etc.
+      credentials: {
+        token: { label: 'Token', type: 'text' },
+        rpcUrl: { label: 'rpc url', type: 'text' },
+        instanceURL: { label: 'Instance url', type: 'text' },
+      },
+      async authorize(credentials) {
+        if (!credentials?.token) throw Error('no token!');
+
+        // Initialize instance api url
+        initialize({ apiURL: credentials.instanceURL });
+
+        const data = await AuthLinkAPI.loginWithAccessToken(
+          credentials.token,
+          credentials.rpcUrl,
+        );
+
+        if (!data?.token?.accessToken) throw Error('Failed to authorize user!');
+
+        try {
+          const user = data.user;
+          const accessToken = data.token.accessToken;
+          const payload = encryptMessage(accessToken, user.username);
+          const signInCredential = parseCredential(
+            user,
+            credentials,
+            LoginType.WALLET,
+          );
+
+          // Any object returned will be saved in `user` property of the JWT
+          return credentialToSession(signInCredential, payload);
+        } catch (error) {
+          // If failed, use instance url from session
+          initialize({ cookie: req.headers.cookie });
+
+          console.log('[api][Auth]', error);
+          return null;
+        }
+      },
+    }),
     CredentialsProvider({
       id: 'updateSession',
       // The name to display on the sign in form (e.g. 'Sign in with...')

diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
@@ -20,6 +20,7 @@ import LoginByEmail from './render/Email/LoginByEmail';
 import { Options } from './render/Options';
 import { Profile } from './render/Profile';
 import SigninMethod from './render/SignInMethod/SigninMethod';
+import LoginByToken from './render/Token/LoginByToken';
 
 import { COOKIE_INSTANCE_URL } from 'components/SelectServer';
 import { MyriadFullIcon } from 'components/atoms/Icons';
@@ -345,6 +346,12 @@ export const Login: React.FC<LoginProps> = props => {
             element={<LoginByEmail onNext={checkEmailRegistered} />}
           />
 
+          <Route
+            index={false}
+            path="/token"
+            element={<LoginByToken onNext={checkEmailRegistered} />}
+          />
+
           <Route
             index={false}
             path="/createAccounts"

diff --git a/src/components/Login/render/Options/Options.tsx b/src/components/Login/render/Options/Options.tsx
@@ -547,7 +547,13 @@ export const Options: React.FC<OptionProps> = props => {
                   <Grid item xs={12} key={network.id}>
                     {network.id === NetworkIdEnum.POLKADOT ? (
                       <>
-                        <ListItem disableGutters disabled>
+                        <ListItem
+                          disableGutters
+                          selected={networkId === network.id}
+                          onClick={setSelectedNetwork(
+                            network.id,
+                            network.blockchainPlatform,
+                          )}>
                           <div className={styles.rowCard}>
                             {icons['polkadot']}
                             <Typography>

diff --git a/src/components/Login/render/SignInMethod/SigninMethod.tsx b/src/components/Login/render/SignInMethod/SigninMethod.tsx
@@ -18,7 +18,9 @@ export default function SigninMethod({
   const styles = useStyles(detect.isMobile())();
 
   const handleSelected = ({ method }: { method: string }) => {
-    if (method === 'web2') {
+    if (method === 'token') {
+      navigate('/token');
+    } else if (method === 'web2') {
       navigate('/email');
     } else {
       navigate('/options');
@@ -87,6 +89,15 @@ export default function SigninMethod({
             disabled={disableSignIn}
             tooltip={i18n.t('Sign_In.Email.tooltip')}
           />
+          <div className={styles.textOr}>or</div>
+          <CardSign
+            title={i18n.t('Sign_In.Token.title')}
+            desc={i18n.t('Sign_In.Token.desc')}
+            image={<LoginWeb2 />}
+            onClick={() => handleSelected({ method: 'token' })}
+            disabled={disableSignIn}
+            tooltip={i18n.t('Sign_In.Email.tooltip')}
+          />
         </div>
       </div>
     </>

diff --git a/src/components/Login/render/Token/LoginByToken.style.ts b/src/components/Login/render/Token/LoginByToken.style.ts
@@ -0,0 +1,81 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      position: 'relative',
+      maxHeight: 'fit-content',
+      maxWidth: 508,
+      background: '#FFFFFF',
+      borderRadius: 10,
+      padding: 40,
+      boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.05)',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 24,
+      '& .MuiFormControl-root': {
+        marginBottom: 0,
+      },
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      color: 'black',
+      textAlign: 'center',
+    },
+    icon: {
+      width: 80,
+      fontSize: 32,
+      marginBottom: 8,
+      [theme.breakpoints.down('md')]: {
+        width: 60,
+        fontSize: 26,
+      },
+    },
+    list: {
+      display: 'flex',
+      boxSizing: 'border-box',
+
+      '& .MuiListItem-root': {
+        display: 'block',
+        boxSizing: 'border-box',
+        paddingLeft: 2,
+        paddingRight: 2,
+      },
+      '& .Mui-selected': {
+        border: '1px solid #6E3FC3',
+        borderRadius: 10,
+        backgroundColor: 'inherit',
+        paddingTop: 7,
+        paddingBottom: 7,
+        paddingLeft: 1,
+        paddingRight: 1,
+        [theme.breakpoints.down('md')]: {
+          paddingTop: 5,
+          paddingBottom: 5,
+        },
+      },
+    },
+    card: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      padding: 10,
+      cursor: 'pointer',
+      [theme.breakpoints.down('md')]: {
+        padding: 5,
+      },
+    },
+    subtitle: {
+      fontSize: 14,
+      fontWeight: 'normal',
+      color: 'black',
+      textAlign: 'center',
+    },
+    actionWrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 24,
+    },
+  }),
+);