Enhance login screen with quicker email (#1352)

* eth logo with stroke

* disable button and use useFormik

* lingui extract

Co-authored-by: GitHub Actions <[email protected]>
Co-authored-by: Michael Yankelev <[email protected]>

packages/common-components/src/Icons/icons/EthereumLogo.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as EthereumLogoSvg } from "../svgs/ethereum-logo.svg"
+
+export { EthereumLogoSvg }
+
+export default createSvgIcon(<EthereumLogoSvg />)

packages/common-components/src/Icons/index.ts

@@ -24,6 +24,7 @@ export { default as DirectionalRightIcon, DirectionalRightSvg } from "./icons/Di
 export { default as DiscoverCardIcon, DiscoverCardSvg } from "./icons/DiscoverCard.icon"
 export { default as DownloadIcon, DownloadSvg } from "./icons/Download.icon"
 export { default as EditIcon, EditSvg } from "./icons/Edit.icon"
+export { default as EthereumLogoIcon, EthereumLogoSvg } from "./icons/EthereumLogo.icon"
 export { default as ExclamationCircleIcon, ExclamationCircleSvg } from "./icons/ExclamationCircle.icon"
 export { default as ExclamationCircleInverseIcon, ExclamationCircleInverseSvg } from "./icons/ExclamationCircleInverse.icon"
 export { default as ExportIcon, ExportSvg } from "./icons/Export.icon"

packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx

@@ -1,5 +1,14 @@
-import React, { useState } from "react"
-import { Button, GithubLogoIcon, MailIcon, GoogleLogoIcon, Loading, Typography } from "@chainsafe/common-components"
+import React, { useCallback, useState } from "react"
+import {
+  Button,
+  GithubLogoIcon,
+  MailIcon,
+  GoogleLogoIcon,
+  Loading,
+  Typography,
+  FormikTextInput,
+  EthereumLogoIcon
+} from "@chainsafe/common-components"
 import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../Themes/types"
 import { t, Trans } from "@lingui/macro"
@@ -11,6 +20,8 @@ import { ROUTE_LINKS } from "../../FilesRoutes"
 import clsx from "clsx"
 import { IdentityProvider } from "@chainsafe/files-api-client"
 import PasswordlessEmail from "./PasswordlessEmail"
+import { Form, FormikProvider, useFormik } from "formik"
+import { emailValidation } from "../../../Utils/validationSchema"
 
 const useStyles = makeStyles(
   ({ constants, palette, breakpoints, typography }: CSFTheme) =>
@@ -128,6 +139,19 @@ const useStyles = makeStyles(
       },
       web3Button: {
         minHeight: 41
+      },
+      input: {
+        margin: 0,
+        width: "100%",
+        marginBottom: constants.generalUnit
+      },
+      inputLabel: {
+        fontSize: "16px",
+        lineHeight: "24px",
+        marginBottom: constants.generalUnit
+      },
+      secondaryLoginText: {
+        paddingTop: constants.generalUnit * 2
       }
     })
 )
@@ -144,8 +168,11 @@ const InitialScreen = ({ className }: IInitialScreen) => {
   const classes = useStyles()
   const [loginMode, setLoginMode] = useState<"web3" | "email" | LOGIN_TYPE | undefined>()
   const [error, setError] = useState<string | undefined>()
+  const [errorEmail, setErrorEmail] = useState<string>("")
   const maintenanceMode = process.env.REACT_APP_MAINTENANCE_MODE === "true"
   const [isConnecting, setIsConnecting] = useState(false)
+  const { filesApiClient } = useFilesApi()
+  const [email, setEmail] = useState("")
 
   const handleSelectWalletAndConnect = async () => {
     setError(undefined)
@@ -167,6 +194,7 @@ const InitialScreen = ({ className }: IInitialScreen) => {
 
   const resetLogin = async () => {
     setError(undefined)
+    setErrorEmail("")
     setLoginMode(undefined)
     resetStatus()
   }
@@ -202,6 +230,30 @@ const InitialScreen = ({ className }: IInitialScreen) => {
     setIsConnecting(false)
   }
 
+  const onSubmitEmail = useCallback((values) => {
+    setIsConnecting(true)
+    setErrorEmail("")
+    filesApiClient
+      .getIdentityEmailToken({ email: values.email })
+      .then(() => {
+        setEmail(values.email)
+        setLoginMode("email")
+      })
+      .catch((e) => {
+        setErrorEmail(t`Something went wrong with email login! Please try again.`)
+        console.error(e)
+      })
+      .finally(() => setIsConnecting(false))
+  }, [filesApiClient])
+
+  const formik = useFormik({
+    initialValues: {
+      email: ""
+    },
+    validationSchema: emailValidation,
+    onSubmit: onSubmitEmail
+  })
+
   const ConnectWallet = () => {
     if (!wallet) {
       console.error("No wallet found")
@@ -333,31 +385,52 @@ const InitialScreen = ({ className }: IInitialScreen) => {
                   <Trans>The system is undergoing maintenance, thank you for being patient.</Trans>
                 </Typography>
               )}
+              <FormikProvider value={formik}>
+                <Form>
+                  <FormikTextInput
+                    className={classes.input}
+                    name="email"
+                    label={t`Using an email:`}
+                    labelClassName={classes.inputLabel}
+                  />
+                  {!!errorEmail && (
+                    <Typography component="p"
+                      variant="body1"
+                      className={classes.error}>{error}</Typography>
+                  )}
+                  <Button
+                    className={clsx(classes.button)}
+                    variant="primary"
+                    fullsize
+                    type="submit"
+                    disabled={maintenanceMode || isConnecting || status !== "initialized" || !formik.isValid}
+                  >
+                    <MailIcon className="icon"/>
+                    <Trans>Continue with Email</Trans>
+                  </Button>
+                </Form>
+              </FormikProvider>
+              <Typography
+                variant="body1"
+                component="p"
+                className={clsx(classes.inputLabel, classes.secondaryLoginText)}
+              >
+                <Trans>Or using one of the following:</Trans>
+              </Typography>
               <Button
                 data-cy="web3"
                 onClick={() => {
                   setLoginMode("web3")
                   handleSelectWalletAndConnect()
                 }}
                 className={clsx(classes.button, classes.web3Button)}
-                variant="primary"
+                variant="secondary"
                 size="large"
                 disabled={maintenanceMode || isConnecting || status !== "initialized"}
               >
+                <EthereumLogoIcon className="icon"/>
                 <Trans>Continue with Web3 Wallet</Trans>
               </Button>
-              <Button
-                className={classes.button}
-                size="large"
-                onClick={() => {
-                  setLoginMode("email")
-                }}
-                variant="secondary"
-                disabled={maintenanceMode || isConnecting || status !== "initialized"}
-              >
-                <MailIcon className="icon"/>
-                <Trans>Continue with Email</Trans>
-              </Button>
               <Button
                 className={classes.button}
                 size="large"
@@ -403,7 +476,10 @@ const InitialScreen = ({ className }: IInitialScreen) => {
             </footer>
           </>
           : loginMode === "email"
-            ? <PasswordlessEmail resetLogin={resetLogin} />
+            ? <PasswordlessEmail
+              resetLogin={resetLogin}
+              email={email}
+            />
             : wallet
               ? !isConnecting
                 ? <ConnectWallet />