From aac3aef07d3e85ef3667d450d8a951ee02aca03a Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Thu, 3 Jun 2021 16:39:20 +0200
Subject: [PATCH 1/2] cleanup

---
 .../Modules/LoginModule/InitialScreen.tsx     | 419 +++++++++---------
 1 file changed, 214 insertions(+), 205 deletions(-)

diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
index ba02e00139..31f8060c44 100644
--- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
+++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
@@ -202,6 +202,186 @@ const InitialScreen = ({ className }: IInitialScreen) => {
     setIsConnecting(false)
   }
 
+  const LoginButtons = () => {
+    return (
+      <>
+        <section className={classes.buttonSection}>
+          {maintenanceMode && (
+            <Typography>
+              <Trans>The system is undergoing maintenance, thank you for being patient.</Trans>
+            </Typography>
+          )}
+          <Button
+            data-cy="web3"
+            onClick={() => {
+              setLoginMode("web3")
+              handleSelectWalletAndConnect()
+            }}
+            className={clsx(classes.button, classes.web3Button)}
+            variant="primary"
+            size="large"
+            disabled={maintenanceMode || isConnecting || status !== "initialized"}
+          >
+            <Trans>Continue with Web3 Wallet</Trans>
+          </Button>
+          <Button
+            className={classes.button}
+            size="large"
+            onClick={() => {
+              setLoginMode("email")
+            }}
+            variant="secondary"
+          >
+            <MailIcon className="icon"/>
+            <Trans>Continue with Email</Trans>
+          </Button>
+          <Button
+            className={classes.button}
+            size="large"
+            onClick={() => handleLogin("github")}
+            disabled={maintenanceMode || isConnecting || status !== "initialized"}
+            loading={isConnecting && loginMode === "github"}
+            variant="secondary"
+          >
+            <GithubLogoIcon className="icon"/>
+            <Trans>Continue with Github</Trans>
+          </Button>
+          <Button
+            className={classes.button}
+            size="large"
+            onClick={() => handleLogin("google")}
+            disabled={maintenanceMode || isConnecting || status !== "initialized"}
+            loading={isConnecting && loginMode === "google"}
+            variant="secondary"
+          >
+            <GoogleLogoIcon className="icon"/>
+            <Trans>Continue with Google</Trans>
+          </Button>
+          <Button
+            className={classes.button}
+            size="large"
+            onClick={() => handleLogin("facebook")}
+            disabled={maintenanceMode || isConnecting || status !== "initialized"}
+            loading={isConnecting && loginMode === "facebook"}
+            variant="secondary"
+          >
+            <FacebookLogoIcon className="icon"/>
+            <Trans>Continue with Facebook</Trans>
+          </Button>
+        </section>
+        <footer className={classes.footer}>
+          <a
+            href={ROUTE_LINKS.PrivacyPolicy}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Typography>
+              <Trans>Privacy Policy</Trans>
+            </Typography>
+          </a>
+          <a
+            href={ROUTE_LINKS.Terms}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Typography>
+              <Trans>Terms and Conditions</Trans>
+            </Typography>
+          </a>
+        </footer>
+      </>
+    )
+  }
+
+  const ConnectWallet = () => {
+    if (!wallet) {
+      console.error("No wallet found")
+      return null
+    }
+
+    return (
+      <div>
+        <section className={classes.buttonSection}>
+          <Button
+            data-cy="sign-in-with-web3-button"
+            onClick={() => {handleLogin("web3")}}
+            className={classes.button}
+            variant="primary"
+            size="large"
+            disabled={maintenanceMode}
+          >
+            <Trans>Sign-in with {wallet.name}</Trans>
+          </Button>
+          <Button
+            onClick={handleResetAndSelectWallet}
+            className={classes.button}
+            variant="primary"
+            size="large"
+            disabled={maintenanceMode}
+          >
+            <Trans>Connect a new wallet</Trans>
+          </Button>
+          <div
+            className={classes.buttonLink}
+            onClick={resetLogin}
+          >
+            <Typography><Trans>Go back</Trans></Typography>
+          </div>
+        </section>
+        <Footer/>
+      </div>
+    )}
+
+  const WalletConnection = () => {
+    return (
+      <section className={classes.connectingWallet}>
+        <Typography variant='h2'><Trans>Connect Wallet to Files</Trans></Typography>
+        {status === "awaiting confirmation" &&
+          <Typography variant='h5'>
+            <Trans>You will need to sign a message in your wallet to complete sign in.</Trans>
+          </Typography>}
+        {status === "logging in" && <>
+          <Typography variant='h5'>
+            <Trans>Hold on, we are logging you in...</Trans>
+          </Typography>
+          <Loading
+            className={classes.loader}
+            size={50}
+            type='inherit'
+          />
+        </>}
+      </section>
+    )
+  }
+
+  const WalletSelection = () => {
+    return (
+      <>
+        <section className={classes.buttonSection}>
+          <Button
+            onClick={handleResetAndSelectWallet}
+            className={classes.button}
+            variant="primary"
+            size="large"
+            disabled={maintenanceMode}
+          >
+            <Trans>Select a wallet</Trans>
+          </Button>
+          <Button
+            onClick={() => setLoginMode(undefined)}
+            className={classes.button}
+            variant="primary"
+            size="large"
+            disabled={maintenanceMode}
+          >
+            <Trans>Use a different login method</Trans>
+          </Button>
+        </section>
+        <Footer/>
+      </>
+    )
+  }
+
   const Footer = () => (
     <footer className={classes.connectWalletFooter}>
       <Typography variant='h5'>
@@ -227,212 +407,41 @@ const InitialScreen = ({ className }: IInitialScreen) => {
 
   return (
     <div className={clsx(classes.root, className)}>
-      {
-        loginMode !== "email" &&
-        ((desktop && !isConnecting && !error) || (isConnecting && loginMode !== "web3")) && (
-          <Typography
-            variant="h6"
-            component="h1"
-            className={classes.headerText}
-          >
-            <Trans>
-              Get Started
-            </Trans>
-          </Typography>
-        )
-      }
-      {
-        !error ?
-          loginMode !== "web3" && loginMode !== "email" ? (
-            <>
-              <section className={classes.buttonSection}>
-                {maintenanceMode && (
-                  <Typography>
-                    <Trans>
-                      The system is undergoing maintenance, thank you for being patient.
-                    </Trans>
-                  </Typography>
-                )}
-                <Button
-                  data-cy="web3"
-                  onClick={() => {
-                    setLoginMode("web3")
-                    handleSelectWalletAndConnect()
-                  }}
-                  className={clsx(classes.button, classes.web3Button)}
-                  variant="primary"
-                  size="large"
-                  disabled={maintenanceMode || isConnecting || status !== "initialized"}
-                >
-                  <Trans>Continue with Web3 Wallet</Trans>
-                </Button>
-                <Button
-                  className={classes.button}
-                  size="large"
-                  onClick={() => {
-                    setLoginMode("email")
-                  }}
-                  variant="secondary"
-                >
-                  <MailIcon className="icon"/>
-                  <Trans>Continue with Email</Trans>
-                </Button>
-                <Button
-                  className={classes.button}
-                  size="large"
-                  onClick={() => handleLogin("github")}
-                  disabled={maintenanceMode || isConnecting || status !== "initialized"}
-                  loading={isConnecting && loginMode === "github"}
-                  variant="secondary"
-                >
-                  <GithubLogoIcon className="icon"/>
-                  <Trans>Continue with Github</Trans>
-                </Button>
-                <Button
-                  className={classes.button}
-                  size="large"
-                  onClick={() => handleLogin("google")}
-                  disabled={maintenanceMode || isConnecting || status !== "initialized"}
-                  loading={isConnecting && loginMode === "google"}
-                  variant="secondary"
-                >
-                  <GoogleLogoIcon className="icon"/>
-                  <Trans>Continue with Google</Trans>
-                </Button>
-                <Button
-                  className={classes.button}
-                  size="large"
-                  onClick={() => handleLogin("facebook")}
-                  disabled={maintenanceMode || isConnecting || status !== "initialized"}
-                  loading={isConnecting && loginMode === "facebook"}
-                  variant="secondary"
-                >
-                  <FacebookLogoIcon className="icon"/>
-                  <Trans>Continue with Facebook</Trans>
-                </Button>
-              </section>
-              <footer className={classes.footer}>
-                <a
-                  href={ROUTE_LINKS.PrivacyPolicy}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <Typography>
-                    <Trans>
-                        Privacy Policy
-                    </Trans>
-                  </Typography>
-                </a>
-                <a
-                  href={ROUTE_LINKS.Terms}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <Typography>
-                    <Trans>
-                        Terms and Conditions
-                    </Trans>
-                  </Typography>
-                </a>
-              </footer>
-            </>
-          ) :
-            loginMode === "email" ? (
-              <PasswordlessEmail resetLogin={resetLogin} />
-            ) : (
-              wallet ?
-                !isConnecting ? (
-                  <div>
-                    <section className={classes.buttonSection}>
-                      <Button
-                        data-cy="sign-in-with-web3-button"
-                        onClick={() => {handleLogin("web3")}}
-                        className={classes.button}
-                        variant="primary"
-                        size="large"
-                        disabled={maintenanceMode}
-                      >
-                        <Trans>Sign-in with {wallet.name}</Trans>
-                      </Button>
-                      <Button
-                        onClick={handleResetAndSelectWallet}
-                        className={classes.button}
-                        variant="primary"
-                        size="large"
-                        disabled={maintenanceMode}
-                      >
-                        <Trans>Connect a new wallet</Trans>
-                      </Button>
-                      <div
-                        className={classes.buttonLink}
-                        onClick={resetLogin}
-                      >
-                        <Typography><Trans>Go back</Trans></Typography>
-                      </div>
-                    </section>
-                    <Footer/>
-                  </div>
-                ) : (
-                  <>
-                    <section className={classes.connectingWallet}>
-                      <Typography variant='h2'><Trans>Connect Wallet to Files</Trans></Typography>
-                      {status === "awaiting confirmation" &&
-                      <Typography variant='h5'>
-                        <Trans>You will need to sign a message in your wallet to complete sign in.</Trans>
-                      </Typography>}
-                      {status === "logging in" && <>
-                        <Typography variant='h5'>
-                          <Trans>Hold on, we are logging you in...</Trans>
-                        </Typography>
-                        <Loading
-                          className={classes.loader}
-                          size={50}
-                          type='inherit'
-                        />
-                      </>}
-                    </section>
-                  </>
-                )
-                : <>
-                  <section className={classes.buttonSection}>
-                    <Button
-                      onClick={handleResetAndSelectWallet}
-                      className={classes.button}
-                      variant="primary"
-                      size="large"
-                      disabled={maintenanceMode}
-                    >
-                      <Trans>Select a wallet</Trans>
-                    </Button>
-                    <Button
-                      onClick={() => setLoginMode(undefined)}
-                      className={classes.button}
-                      variant="primary"
-                      size="large"
-                      disabled={maintenanceMode}
-                    >
-                      <Trans>Use a different login method</Trans>
-                    </Button>
-                  </section>
-                  <Footer/>
-                </>
-            ) : (
-            <>
-              <section className={classes.connectingWallet}>
-                <Typography variant='h2'><Trans>Connection failed</Trans></Typography>
-                <Typography variant='h5'>
-                  {error}
-                </Typography>
-                <Button
-                  variant="primary"
-                  onClick={resetLogin}
-                >
-                  <Trans>Try again</Trans>
-                </Button>
-              </section>
-            </>
-          )
+      {loginMode !== "email" && ((desktop && !isConnecting && !error) || (isConnecting && loginMode !== "web3")) && (
+        <Typography
+          variant="h6"
+          component="h1"
+          className={classes.headerText}
+        >
+          <Trans>Get Started</Trans>
+        </Typography>
+      )}
+      { !error && loginMode !== "web3" && loginMode !== "email"
+        ? <LoginButtons />
+        : loginMode === "email"
+          ? <PasswordlessEmail resetLogin={resetLogin} />
+          : wallet
+            ? !isConnecting
+              ? <ConnectWallet />
+              : <WalletConnection />
+            : <WalletSelection />
       }
+      {!!error && (
+        <>
+          <section className={classes.connectingWallet}>
+            <Typography variant='h2'><Trans>Connection failed</Trans></Typography>
+            <Typography variant='h5'>
+              {error}
+            </Typography>
+            <Button
+              variant="primary"
+              onClick={resetLogin}
+            >
+              <Trans>Try again</Trans>
+            </Button>
+          </section>
+        </>
+      )}
     </div>
   )
 }

From c433c045d872c205db84af63d3f3017de431fc6d Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Thu, 3 Jun 2021 16:47:23 +0200
Subject: [PATCH 2/2] spaces

---
 .../Modules/LoginModule/InitialScreen.tsx     | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
index 31f8060c44..cdaffe7371 100644
--- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
+++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
@@ -325,7 +325,9 @@ const InitialScreen = ({ className }: IInitialScreen) => {
             className={classes.buttonLink}
             onClick={resetLogin}
           >
-            <Typography><Trans>Go back</Trans></Typography>
+            <Typography>
+              <Trans>Go back</Trans>
+            </Typography>
           </div>
         </section>
         <Footer/>
@@ -385,22 +387,19 @@ const InitialScreen = ({ className }: IInitialScreen) => {
   const Footer = () => (
     <footer className={classes.connectWalletFooter}>
       <Typography variant='h5'>
-        <Trans>
-
-          By connecting your wallet, you agree to our <a
-            href={ROUTE_LINKS.Terms}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+        <Trans>By connecting your wallet, you agree to our <a
+          href={ROUTE_LINKS.Terms}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
             Terms of Service
-          </a> and <a
-            href={ROUTE_LINKS.PrivacyPolicy}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+        </a> and <a
+          href={ROUTE_LINKS.PrivacyPolicy}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
             Privacy Policy
-          </a>
-        </Trans>
+        </a></Trans>
       </Typography>
     </footer>
   )
@@ -429,7 +428,9 @@ const InitialScreen = ({ className }: IInitialScreen) => {
       {!!error && (
         <>
           <section className={classes.connectingWallet}>
-            <Typography variant='h2'><Trans>Connection failed</Trans></Typography>
+            <Typography variant='h2'>
+              <Trans>Connection failed</Trans>
+            </Typography>
             <Typography variant='h5'>
               {error}
             </Typography>