From ee490bef8a3c3f88be84b0de8c6e408bfb0994bc Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 24 Jul 2022 15:36:49 +0100
Subject: [PATCH] login/signup page fixes

---
 .../fakeyou/src/v2/view/login/LoginPage.tsx   | 42 ++++++---
 .../fakeyou/src/v2/view/signup/SignupPage.tsx | 93 +++++++++++++------
 2 files changed, 92 insertions(+), 43 deletions(-)

diff --git a/packages/fakeyou/src/v2/view/login/LoginPage.tsx b/packages/fakeyou/src/v2/view/login/LoginPage.tsx
index 1fe4dce70d..82d45103bb 100644
--- a/packages/fakeyou/src/v2/view/login/LoginPage.tsx
+++ b/packages/fakeyou/src/v2/view/login/LoginPage.tsx
@@ -78,7 +78,7 @@ function LoginPage(props: Props) {
         <div className="notification is-danger is-light">
           <strong>Login Error:</strong> {errorMessage}
         </div>
-      )
+      );
     } else {
       errorWarning = (
         <div className="alert alert-danger mb-4">
@@ -92,36 +92,49 @@ function LoginPage(props: Props) {
     return (
       <div>
         <h1 className="title is-1"> Login </h1>
-  
+
         {errorWarning}
-  
+
         <form onSubmit={handleFormSubmit}>
           <div className="field">
             <label className="label">Username or Email</label>
             <div className="control has-icons-left has-icons-right">
-              <input className="input" type="text" placeholder="Username or Email" value={usernameOrEmail} onChange={handleUsernameOrEmailChange} />
+              <input
+                className="input"
+                type="text"
+                placeholder="Username or Email"
+                value={usernameOrEmail}
+                onChange={handleUsernameOrEmailChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faUser} />
               </span>
             </div>
             {/*<p className="help"></p>*/}
           </div>
-  
+
           <div className="field">
             <label className="label">Password</label>
             <div className="control has-icons-left has-icons-right">
-              <input className="input" type="password" placeholder="Password" value={password} onChange={handlePasswordChange} />
+              <input
+                className="input"
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={handlePasswordChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faKey} />
               </span>
             </div>
             {/*<p className="help"></p>*/}
           </div>
-  
+
           <br />
-  
-          <button className="button is-link is-large is-fullwidth">Login</button>
-  
+
+          <button className="button is-link is-large is-fullwidth">
+            Login
+          </button>
         </form>
       </div>
     );
@@ -131,7 +144,7 @@ function LoginPage(props: Props) {
     <div>
       <Fade bottom duration={duration} distance={distance}>
         <div className="container-panel pb-5 pt-lg-5 my-lg-5 login-panel">
-          <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
+          <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0 px-md-4">
             <h1 className="panel-title fw-bold">Login</h1>
             <div className="py-6">
               {errorWarning}
@@ -177,10 +190,9 @@ function LoginPage(props: Props) {
                     Login
                   </button>
                   <p>
-                    Don’t have an account?
-                    &nbsp;
-                    <Link 
-                      to={FrontendUrlConfig.signupPage()} 
+                    Don’t have an account? &nbsp;
+                    <Link
+                      to={FrontendUrlConfig.signupPage()}
                       className="text-link"
                     >
                       Create an account now.
diff --git a/packages/fakeyou/src/v2/view/signup/SignupPage.tsx b/packages/fakeyou/src/v2/view/signup/SignupPage.tsx
index e2c5644577..60ffd4c594 100644
--- a/packages/fakeyou/src/v2/view/signup/SignupPage.tsx
+++ b/packages/fakeyou/src/v2/view/signup/SignupPage.tsx
@@ -207,7 +207,20 @@ function SignupPage(props: Props) {
   };
 
   if (props.sessionWrapper.isLoggedIn()) {
-    return <div>Invalid view for logged in users.</div>;
+    return (
+      <div className="container py-5">
+        <div className="py-5">
+          <h1 className="fw-semibold text-center mb-4">
+            Invalid view for logged in users.
+          </h1>
+          <div className="text-center">
+            <Link className="btn btn-primary" to="/">
+              Back to main
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   let usernameInputClass = USE_REFRESH ? "form-control" : "input";
@@ -274,45 +287,69 @@ function SignupPage(props: Props) {
     return (
       <div>
         <h1 className="title is-1"> Sign Up </h1>
-  
+
         <form onSubmit={handleFormSubmit}>
           <div className="field">
             <label className="label">Username</label>
             <div className="control has-icons-left has-icons-right">
-              <input className={usernameInputClass} type="text" placeholder="Username" value={username} onChange={handleUsernameChange} />
+              <input
+                className={usernameInputClass}
+                type="text"
+                placeholder="Username"
+                value={username}
+                onChange={handleUsernameChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faUser} />
               </span>
             </div>
             <p className={usernameHelpClass}>{usernameInvalidReason}</p>
           </div>
-  
+
           <div className="field">
             <label className="label">Email</label>
             <div className="control has-icons-left has-icons-right">
-              <input className={emailInputClass} type="email" placeholder="Email" value={email} onChange={handleEmailChange} />
+              <input
+                className={emailInputClass}
+                type="email"
+                placeholder="Email"
+                value={email}
+                onChange={handleEmailChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faEnvelope} />
               </span>
             </div>
             <p className={emailHelpClass}>{emailInvalidReason}</p>
           </div>
-  
+
           <div className="field">
             <label className="label">Password</label>
             <div className="control has-icons-left has-icons-right">
-              <input className={passwordInputClass} type="password" placeholder="Password" value={password} onChange={handlePasswordChange} />
+              <input
+                className={passwordInputClass}
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={handlePasswordChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faKey} />
               </span>
             </div>
             <p className={passwordHelpClass}>{passwordInvalidReason}</p>
           </div>
-  
+
           <div className="field">
             <label className="label">Password Confirmation</label>
             <div className="control has-icons-left has-icons-right">
-              <input className={passwordConfirmationInputClass} type="password" placeholder="Password confirmation" value={passwordConfirmation} onChange={handlePasswordConfirmationChange} />
+              <input
+                className={passwordConfirmationInputClass}
+                type="password"
+                placeholder="Password confirmation"
+                value={passwordConfirmation}
+                onChange={handlePasswordConfirmationChange}
+              />
               <span className="icon is-small is-left">
                 <FontAwesomeIcon icon={faKey} />
               </span>
@@ -321,24 +358,29 @@ function SignupPage(props: Props) {
               {passwordConfirmationInvalidReason}
             </p>
           </div>
-  
+
           <br />
-  
+
           <div className="notification is-warning">
-            <strong>Remember your password!</strong> We don't have password reset currently, and it'll be a 
-            few more weeks before it's added (there are more important features to work on). If you lose your
+            <strong>Remember your password!</strong> We don't have password
+            reset currently, and it'll be a few more weeks before it's added
+            (there are more important features to work on). If you lose your
             password, please let us know in Discord.
           </div>
-  
-          <button className="button is-link is-large is-fullwidth">Sign up</button>
+
+          <button className="button is-link is-large is-fullwidth">
+            Sign up
+          </button>
         </form>
-  
+
         <br />
-  
-        <Link to="/login"
+
+        <Link
+          to="/login"
           className="button is-info is-large is-fullwidth is-inverted"
-          >Already have an account? Log in instead!</Link>
-  
+        >
+          Already have an account? Log in instead!
+        </Link>
       </div>
     );
   }
@@ -347,7 +389,7 @@ function SignupPage(props: Props) {
     <div>
       <Fade bottom duration={duration} distance={distance}>
         <div className="container-panel pb-5 pt-lg-5 my-lg-5 login-panel">
-          <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
+          <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0 px-md-4">
             <h1 className="panel-title fw-bold ">Sign Up</h1>
             <div className="py-6">
               <form onSubmit={handleFormSubmit}>
@@ -429,13 +471,8 @@ function SignupPage(props: Props) {
                     Sign up
                   </button>
                   <p>
-                    Already have an account?
-                    <Link
-                      to="/login"
-                      className="button is-info is-large is-fullwidth is-inverted"
-                    >
-                      Log in instead.
-                    </Link>
+                    Already have an account?{" "}
+                    <Link to="/login">Log in instead.</Link>
                   </p>
                 </div>
               </form>