Merge pull request #113 from rdkelley/login-animation

Fix animation, improve spacing on login screen for mobile devices

Author: EdrianI

web/client/src/App.scss

@@ -1,4 +1,6 @@
-$small: 672px;
+$small: 320px;
+$medium: 672px;
+$large: 1056px;
 $events-map-mobile-threshold: 1100px;
 
 @import '~carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family.scss';

web/client/src/components/LoginInput/index.js

@@ -76,7 +76,13 @@ const LoginInput = ({
               handleSubmit()
             }}
           >
-            {step === 2 && <input type="email" style={{ display: 'none' }} />}
+            {step === 2 && (
+              <input
+                type="email"
+                autoComplete="username"
+                style={{ display: 'none' }}
+              />
+            )}
             <TextInput
               id={step === 1 ? 'openeewId' : 'password'}
               type={step === 1 ? 'email' : 'password'}
@@ -122,34 +128,44 @@ const LoginInput = ({
               autoComplete={step === 1 ? 'email' : 'current-password'}
             />
             {step === 1 && (
-              <input type="password" style={{ display: 'none' }} />
+              <input
+                type="password"
+                autoComplete="current-password"
+                style={{ display: 'none' }}
+              />
             )}
-            <Button
-              renderIcon={step === 1 ? ArrowRight32 : null}
-              className={`login__continue-button marb-1 ${
-                isSubmitting ? 'display-none' : ''
-              }`}
-              type="submit"
-              iconDescription={t('content.login.continue')}
-            >
-              {step === 1 ? 'Continue' : 'Log in'}
-            </Button>
+
+            <div style={{ height: '55px' }}>
+              <Button
+                renderIcon={step === 1 ? ArrowRight32 : null}
+                className={`login__continue-button marb-1 ${
+                  isSubmitting ? 'display-none' : ''
+                }`}
+                type="submit"
+                iconDescription={t('content.login.continue')}
+              >
+                {step === 1 ? 'Continue' : 'Log in'}
+              </Button>
+
+              {isSubmitting && step === 2 ? (
+                <InlineLoading
+                  className="space-t-2"
+                  description={t('content.login.loggingIn')}
+                  status={'active'}
+                  aria-live={'polite'}
+                />
+              ) : null}
+            </div>
+
             {step === 1 ? (
               <Checkbox
                 labelText={t('content.login.rememberMe')}
-                className="login__checkbox"
+                className={`login__checkbox marb-1 ${
+                  isSubmitting ? 'display-none' : ''
+                }`}
                 id="login_rememberMe"
               />
             ) : null}
-
-            {isSubmitting ? (
-              <InlineLoading
-                className="space-t-2"
-                description={t('content.login.loggingIn')}
-                status={'active'}
-                aria-live={'polite'}
-              />
-            ) : null}
           </Form>
         )
       }}

web/client/src/content/Login/Login.scss

@@ -86,13 +86,23 @@
   -webkit-text-fill-color: #f4f4f4 !important;
 }
 
-@media only screen and (max-width: $small) {
+@media only screen and (min-width: $medium) and (max-width: $large) {
   .login__container {
-    padding: 0 40px;
+    padding-left: 45px;
+  }
+}
+
+@media only screen and (max-width: $medium) {
+  .login__container {
+    padding: 0 1rem;
     max-width: none;
   }
 
   .login__spacer {
-    padding-bottom: 6rem;
+    padding-bottom: $layout-05;
+  }
+
+  .login__supportingContainer {
+    min-height: $layout-06 / 2;
   }
 }

web/client/src/content/Login/animation.js

@@ -0,0 +1,22 @@
+const loginAnimation = {
+  desktop: {
+    transition: {
+      type: 'spring',
+      bounce: 0.25,
+      duration: 0.3,
+    },
+    initial: { x: 200, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: -200, opacity: 0 },
+  },
+  mobile: {
+    transition: {
+      duration: 0.18,
+    },
+    initial: { x: 0, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: 0, opacity: 0 },
+  },
+}
+
+export default loginAnimation

web/client/src/content/Login/index.js

@@ -1,4 +1,4 @@
-import React, { useContext, useCallback, useState } from 'react'
+import React, { useContext, useCallback, useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { InlineNotification } from 'carbon-components-react'
 
@@ -9,12 +9,16 @@ import Header from '../../components/Header'
 import { ReactComponent as Logo } from '../../assets/openeew_logo.svg'
 
 import AuthClient from '../../rest/auth'
+import animation from './animation'
 
 const Login = ({ history }) => {
   const { t, setCurrentUser } = useContext(AppContext)
   const [error, setError] = useState('')
   const [step, setStep] = useState(1)
   const [loginId, setLoginId] = useState('')
+  const [activeAnimation, setActiveAnimation] = useState(() =>
+    window.innerWidth < 672 ? animation.mobile : animation.desktop
+  )
 
   const initLogin = useCallback(
     /**
@@ -39,7 +43,6 @@ const Login = ({ history }) => {
           lastName: user.familyName,
         })
 
-        console.log('Login successful ', user.email)
         return history.push('/events')
       } catch (e) {
         setSubmitting(false)
@@ -50,6 +53,16 @@ const Login = ({ history }) => {
     [loginId, setCurrentUser, history]
   )
 
+  useEffect(() => {
+    window.addEventListener('resize', () =>
+      setActiveAnimation(
+        window.innerWidth < 672
+          ? { ...animation.mobile }
+          : { ...animation.desktop }
+      )
+    )
+  }, [])
+
   return (
     <>
       <Header removeLogin />
@@ -67,14 +80,7 @@ const Login = ({ history }) => {
           <motion.div
             // By changing the key, React treats each step as a unique component
             key={`login-${step}`}
-            transition={{
-              type: 'spring',
-              bounce: 0.4,
-              duration: 0.35,
-            }}
-            initial={{ x: 200, opacity: 0 }}
-            animate={{ x: 0, opacity: 1 }}
-            exit={{ x: -200, opacity: 0 }}
+            {...activeAnimation}
           >
             <div className="login__supportingContainer">
               {step === 2 ? (

web/client/src/content/Onboard/Onboard.scss

@@ -42,7 +42,7 @@
   @include carbon--type-style('productive-heading-01');
 }
 
-@media screen and (min-width: $small) {
+@media screen and (min-width: $medium) {
   .onboard__container {
     max-width: 400px;
     margin-left: 3rem;