Merge pull request #2701 from devtron-labs/feat/login-page-animation

feat: add animation in login and sso variants

Author: arunjaindev

src/components/login/Login.tsx

@@ -18,6 +18,7 @@ import { useEffect, useState } from 'react'
 import { Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom'
 
 import {
+    AnimatePresence,
     Button,
     ButtonComponentType,
     ButtonStyleType,
@@ -27,6 +28,7 @@ import {
     Host,
     Icon,
     LoginBanner,
+    MotionDiv,
     SSOProviderIcon,
     ToastManager,
     ToastVariantType,
@@ -40,7 +42,7 @@ import { importComponentFromFELibrary } from '@Components/common'
 import { TOKEN_COOKIE_NAME, URLS } from '../../config'
 import { getSSOConfigList } from '../../Pages/GlobalConfigurations/Authorization/SSOLoginServices/service'
 import { dashboardAccessed } from '../../services/service'
-import { SSOProvider } from './constants'
+import { LOGIN_CARD_ANIMATION_VARIANTS, SSOProvider } from './constants'
 import { SSOConfigLoginList } from './login.types'
 import { LoginForm } from './LoginForm'
 
@@ -125,10 +127,22 @@ const Login = () => {
 
     const renderSSOLoginPage = () => (
         <div className="flexbox-col dc__gap-12 p-36">
+            {initLoading && !loginList.length && (
+                <Button
+                    variant={ButtonVariantType.secondary}
+                    text="Checking SSO"
+                    dataTestId="checking-sso"
+                    style={ButtonStyleType.neutral}
+                    startIcon={<Icon name="ic-circle-loader" color={null} />}
+                    fullWidth
+                    size={ComponentSizeType.xl}
+                    disabled
+                />
+            )}
             {loginList
                 .filter((sso) => sso.active)
                 .map((item) => (
-                    <div className="login-button" key={item.name}>
+                    <div key={item.name}>
                         <Button
                             variant={ButtonVariantType.secondary}
                             text={`Login with ${item.name}`}
@@ -171,23 +185,35 @@ const Login = () => {
     )
 
     const renderLoginContent = () => (
-        <Switch>
+        <Switch location={location}>
             <Route path={URLS.LOGIN_SSO} component={renderSSOLoginPage} />
             <Route path={URLS.LOGIN_ADMIN} component={renderAdminLoginPage} />
             <Redirect to={URLS.LOGIN_SSO} />
         </Switch>
     )
 
     return (
-        <div className="full-height-width login dc__grid-half bg__secondary">
+        <div className="full-height-width dc__grid-half bg__secondary">
             <div className="flexbox p-12">
                 <LoginBanner />
             </div>
             <div className="flex">
-                <div className="login-card__wrapper dc__overflow-hidden br-12 mw-420 bg__primary dc__border">
+                <div className="shadow__overlay dc__overflow-hidden br-12 mw-420 bg__primary dc__border">
                     <div className="flexbox-col">
                         {renderDevtronLogo()}
-                        {renderLoginContent()}
+                        <AnimatePresence>
+                            <MotionDiv
+                                key={location.pathname}
+                                variants={LOGIN_CARD_ANIMATION_VARIANTS}
+                                initial="initial"
+                                animate="animate"
+                                exit="exit"
+                                transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
+                                className="dc__overflow-hidden"
+                            >
+                                {renderLoginContent()}
+                            </MotionDiv>
+                        </AnimatePresence>
                     </div>
                     {getTermsAndConditions && getTermsAndConditions()}
                 </div>

src/components/login/constants.ts

@@ -59,3 +59,9 @@ export const ssoProviderToDisplayNameMap: Record<SSOProvider, string> = {
     [SSOProvider.oidc]: 'OIDC',
     [SSOProvider.openshift]: 'OpenShift',
 } as const
+
+export const LOGIN_CARD_ANIMATION_VARIANTS = {
+    initial: { opacity: 0, y: 40, height: 0 },
+    animate: { opacity: 1, y: 0, height: 'auto' },
+    exit: { opacity: 0, y: -40, height: 0 },
+}

src/components/login/login.scss

@@ -14,20 +14,6 @@
  * limitations under the License.
  */
 
- // Login css
-.login {
-
-    .login-card__wrapper {
-        box-shadow: var(--shadow-overlay);
-    }
-
-    .login-button {
-        .button__secondary--neutral{
-            color: var(--N900)
-        }
-    }
-}
-
 // SSO login & GitOps configuration css
 
 .login__btn {