chore: Update SetupWelcomeLogin component with password restore funct…

…ionality
valory-xyz · May 9, 2024 · d2ab157 · d2ab157
1 parent 22740aa
commit d2ab157
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 30 deletions.
diff --git a/frontend/components/Setup/SetupRestore.tsx b/frontend/components/Setup/SetupRestore.tsx
@@ -1,6 +1,7 @@
 import { CloseOutlined } from '@ant-design/icons';
-import { Button, Col, Flex, Input, Row, Typography } from 'antd';
-import { memo } from 'react';
+import { Button, Col, Flex, Form, Input, Row, Typography } from 'antd';
+import isEmpty from 'lodash/isEmpty';
+import { memo, useMemo, useState } from 'react';
 
 import { CardFlex } from '@/components/styled/CardFlex';
 import { CardSection } from '@/components/styled/CardSection';
@@ -21,14 +22,15 @@ export const SetupRestoreMain = () => {
   return (
     <CardFlex
       title={
-        <Flex justify="space-between">
-          <Typography.Title level={3}>Restore access</Typography.Title>
+        <Flex justify="space-between" align="center">
+          <Typography.Title className="m-0" level={4}>
+            Restore access
+          </Typography.Title>
           <ExitButton />
         </Flex>
       }
-      gap={10}
     >
-      <CardSection vertical border>
+      <CardSection gap={10} vertical border>
         <Typography.Text>
           You can recover the Operate account access by providing the seed
           phrase you received when setting up your account.
@@ -42,15 +44,14 @@ export const SetupRestoreMain = () => {
           Restore account via seed phrase
         </Button>
       </CardSection>
-      <CardSection vertical border>
+      <CardSection gap={10} vertical border>
         <Typography.Text>
           If you don’t have the seed phrase but added a backup wallet to your
           account, you can still restore your funds, but you won’t be able to
           recover access to your Operate account.
         </Typography.Text>
         <Button
           size="large"
-          type="primary"
           className="w-3/4"
           onClick={() => goto(SetupScreen.RestoreViaBackup)}
         >
@@ -63,53 +64,131 @@ export const SetupRestoreMain = () => {
 
 const SEED_PHRASE_WORDS = 12;
 export const SetupRestoreViaSeed = () => {
+  const { goto } = useSetup();
+
+  const [form] = Form.useForm();
+  const [formValues, setFormValues] = useState<{ [name: string]: string }>({});
+
+  const onValuesChange = (
+    changedValues: { [name: string]: string },
+    allValues: { [name: string]: string },
+  ) => setFormValues(allValues);
+
+  const isComplete = useMemo(
+    () =>
+      !isEmpty(formValues) &&
+      Object.values(formValues).every((v: string) => v && v.trim()),
+    [formValues],
+  );
+
   return (
     <CardFlex
       title={
-        <Flex justify="space-between">
-          <Typography.Title level={3}>Restore via seed phrase</Typography.Title>
+        <Flex justify="space-between" align="center">
+          <Typography.Title className="m-0" level={4}>
+            Restore via seed phrase
+          </Typography.Title>
           <ExitButton />
         </Flex>
       }
-      gap={10}
     >
-      <Typography.Text>
-        To restore access to your Operate account, enter the seed phrase you
-        received when setting up your account.
-      </Typography.Text>
-      <Row>
-        <Col span={12}>
-          <Input className="w-full" />
-        </Col>
-      </Row>
+      <Flex gap={24} vertical>
+        <Typography.Text>
+          To restore access to your Operate account, enter the seed phrase you
+          received when setting up your account.
+        </Typography.Text>
+        <Form form={form} onValuesChange={onValuesChange}>
+          <Flex vertical gap={24}>
+            <Row gutter={10}>
+              {[...new Array(SEED_PHRASE_WORDS)].map((_, i) => (
+                <Col span={12} key={i}>
+                  <Form.Item name={`${i + 1}`}>
+                    <Input
+                      prefix={`${i + 1}. `}
+                      size="large"
+                      className="w-full text-base"
+                    />
+                  </Form.Item>
+                </Col>
+              ))}
+            </Row>
+            <Button
+              disabled={!isComplete}
+              htmlType="submit"
+              onClick={() => goto(SetupScreen.RestoreSetPassword)}
+              size="large"
+              type="primary"
+            >
+              Continue
+            </Button>
+          </Flex>
+        </Form>
+      </Flex>
     </CardFlex>
   );
 };
 
 export const SetupRestoreSetPassword = () => {
+  const { goto } = useSetup();
+  const [password, setPassword] = useState('');
   return (
     <CardFlex
       title={
-        <Flex justify="space-between">
-          <Typography.Title level={3}>Set password</Typography.Title>
+        <Flex justify="space-between" align="center">
+          <Typography.Title className="m-0" level={4}>
+            Set password
+          </Typography.Title>
           <ExitButton />
         </Flex>
       }
-      gap={10}
-    ></CardFlex>
+    >
+      <Flex gap={24} vertical>
+        <Typography.Text>
+          Come up with a strong password to get access to the Operate account in
+          the future.
+        </Typography.Text>
+        <Flex vertical gap={16}>
+          <Input.Password
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password"
+            size="large"
+            value={password}
+          />
+          <Button
+            size="large"
+            type="primary"
+            onClick={() => goto(SetupScreen.Welcome)}
+          >
+            Set password
+          </Button>
+        </Flex>
+      </Flex>
+    </CardFlex>
   );
 };
 
 export const SetupRestoreViaBackup = () => {
   return (
     <CardFlex
       title={
-        <Flex justify="space-between">
-          <Typography.Title level={3}>Set password</Typography.Title>
+        <Flex justify="space-between" align="center">
+          <Typography.Title className="m-0" level={4}>
+            Set password
+          </Typography.Title>
           <ExitButton />
         </Flex>
       }
-      gap={10}
-    ></CardFlex>
+    >
+      <Flex vertical gap={10}>
+        <Typography.Text>
+          To restore access to the funds in your Operate account, please follow
+          the instructions below.
+        </Typography.Text>
+        <Typography.Text>
+          Note that the backup wallet won’t give you access to your Operate
+          account but only to the funds stored on it.
+        </Typography.Text>
+      </Flex>
+    </CardFlex>
   );
 };
diff --git a/frontend/components/Setup/SetupWelcome.tsx b/frontend/components/Setup/SetupWelcome.tsx
@@ -92,6 +92,7 @@ export const SetupWelcomeCreate = () => {
 };
 
 export const SetupWelcomeLogin = () => {
+  const { goto } = useSetup();
   const { goto: gotoPage } = usePageState();
 
   const [isLoggingIn, setIsLoggingIn] = useState(false);
@@ -131,11 +132,11 @@ export const SetupWelcomeLogin = () => {
         </Button>
         <Button
           type="link"
-          href={'https://discord.gg/RHY6eJ35ar'}
           target="_blank"
           size="small"
+          onClick={() => goto(SetupScreen.Restore)}
         >
-          Forgot password? Seek community help
+          Forgot password? Restore access
         </Button>
       </Flex>
     </FormFlex>

diff --git a/frontend/styles/globals.scss b/frontend/styles/globals.scss
@@ -67,6 +67,10 @@ button, input, select, textarea, .ant-input-suffix {
   justify-content: flex-start;
 }
 
+.m-0 {
+  margin: 0 !important;
+}
+
 .mb-auto {
   margin-bottom: auto !important;
 }