@griddo/ax 10.1.69 → 10.1.71

package/src/components/Login/LoginSlider/style.tsx

@@ -0,0 +1,68 @@
+import styled, { keyframes } from "styled-components";
+
+const PrevAnimation = keyframes`
+  to {
+    opacity: 0;
+  }
+}`;
+
+const Wrapper = styled.div`
+  position: relative;
+  bottom: 0;
+
+  .prev-slide-anim {
+    opacity: 1;
+    animation: ${PrevAnimation} 0.8s ease-out;
+    animation-fill-mode: forwards;
+  }
+`;
+
+const BannerWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  padding-left: 100px;
+`;
+
+const Title = styled.div`
+  color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  font-family: Source Sans Pro;
+  font-size: 36px;
+  font-weight: 300;
+  line-height: 48px;
+  letter-spacing: 0px;
+  text-align: left;
+  padding-top: 140px;
+  width: 450px;
+`;
+
+const Image = styled.div<{ image: string }>`
+  background: no-repeat top left url(${(p) => p.image});
+  background-size: 130%;
+  width: 100%;
+  height: 100%;
+  margin-top: ${(p) => p.theme.spacing.l};
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  position: absolute;
+  left: 100px;
+  top: 64px;
+  z-index: 10;
+`;
+
+const Arrow = styled.div<{ direction: string }>`
+  background: ${(p) => `no-repeat url("/img/slider/${p.direction}.svg")`};
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  &:last-child {
+    margin-left: ${(p) => p.theme.spacing.s};
+  }
+  &:hover {
+    background: ${(p) => `no-repeat url("/img/slider/${p.direction}-on.svg")`};
+  }
+`;
+
+export { Wrapper, BannerWrapper, Title, Image, Buttons, Arrow };

package/src/components/Login/index.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { IGlobalSettings } from "@ax/containers/App/reducer";
 import { useModal } from "@ax/hooks";
 import { Button, FieldsBehavior, ErrorToast } from "@ax/components";
 import RecoveryModal from "./RecoveryModal";
+import Circle from "./Circle";
 
 import * as S from "./style";
 
@@ -24,78 +25,119 @@ const Login = (props: ILoginProps): JSX.Element => {
     settings,
     rememberMe,
     handleRememberMe,
+    isLoginSuccess,
+    handleLoginSuccess,
   } = props;
 
   const [viewPass, setViewPass] = useState(false);
+  const [wrapperWidth, setWrapperWidth] = useState<number>(0);
   const { isOpen, toggleModal } = useModal();
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleResize = () => wrapperRef.current && setWrapperWidth(wrapperRef.current.clientWidth);
+
+    window.addEventListener("resize", handleResize, false);
+
+    if (wrapperRef.current) {
+      setWrapperWidth(wrapperRef.current.clientWidth);
+    }
+  }, [wrapperRef.current]);
+
   window.handleErrorClick = toggleModal;
-  const _handleEmail = (e: string) => handleEmail(e);
 
-  const textWelcome = settings.welcomeText1 ? settings.welcomeText1 : "";
-  const textName = settings.welcomeText2 ? settings.welcomeText2 : "";
+  const _handleEmail = (e: string) => handleEmail(e);
 
   const _handlePwd = (e: string) => handlePassword(e);
-  const btnText = isLoggingIn ? "Sending" : "Log in";
 
   const _togglePassword = () => setViewPass(!viewPass);
+
+  const _handleAnimationEnd = () => handleLoginSuccess();
+
+  const btnText = isLoggingIn ? "Sending" : "Login";
+
   const inputType = viewPass ? "text" : "password";
   const icon = viewPass ? "hide" : "view";
 
+  const textName = settings.welcomeText2 ? settings.welcomeText2 : "Griddo";
+  const nameLogo =
+    textName === "Griddo" ? <img src="/img/logos/logoGriddoExtended@3x.svg" alt="Griddo Logo" /> : textName;
+
   return (
     <S.Wrapper data-testid="login-wrapper">
-      <S.Main>
-        <S.Header>
-          <S.Subtitle>{textWelcome}</S.Subtitle>
-          <S.Title>{textName}</S.Title>
-        </S.Header>
-        <ErrorToast />
-        <S.Form onSubmit={handleSubmit}>
-          <FieldsBehavior
-            fieldType="TextField"
-            title="Email"
-            autoComplete="email"
-            value={email}
-            onChange={_handleEmail}
-            name="email"
-          />
-          <FieldsBehavior
-            fieldType="TextField"
-            title="Password"
-            inputType={inputType}
-            value={password}
-            onChange={_handlePwd}
-            autoComplete="current-password"
-            icon={icon}
-            onClickIcon={_togglePassword}
-            iconPosition="in"
-            name="password"
-          />
-          <FieldsBehavior
-            fieldType="UniqueCheck"
-            title=""
-            value={rememberMe}
-            onChange={handleRememberMe}
-            options={[{ title: "Remember me" }]}
-            name="rememberMe"
-          />
-          <Button type="submit" disabled={isLoggingIn ? true : false}>
-            {btnText}
-          </Button>
-          <S.Password>
-            <span
-              onClick={toggleModal}
-              onKeyPress={toggleModal}
-              role="checkbox"
-              aria-checked="false"
-              tabIndex={0}
-              data-testid="forgot-button"
-            >
-              Forgot your password?
-            </span>
-          </S.Password>
-          <RecoveryModal isOpen={isOpen} toggleModal={toggleModal} />
-        </S.Form>
-      </S.Main>
+      <S.LeftWrapper className={isLoginSuccess ? "animate" : ""} onAnimationEnd={_handleAnimationEnd} ref={wrapperRef}>
+        <S.LoginWrapper className={isLoginSuccess ? "animate" : ""} width={wrapperWidth}>
+          <S.Main>
+            <S.Header>
+              <S.Title>
+                <div>Welcome to</div>
+                <div>{nameLogo}</div>
+              </S.Title>
+              <S.Subtitle>To start using {textName}, introduce your email and password.</S.Subtitle>
+            </S.Header>
+            <ErrorToast />
+            <S.Form onSubmit={handleSubmit}>
+              <FieldsBehavior
+                fieldType="TextField"
+                title="Email"
+                autoComplete="email"
+                value={email}
+                onChange={_handleEmail}
+                name="email"
+                inversed={true}
+                placeholder="Type your email"
+              />
+              <FieldsBehavior
+                fieldType="TextField"
+                title="Password"
+                inputType={inputType}
+                value={password}
+                onChange={_handlePwd}
+                autoComplete="current-password"
+                icon={icon}
+                onClickIcon={_togglePassword}
+                iconPosition="in"
+                name="password"
+                inversed={true}
+              />
+              <S.Actions>
+                <FieldsBehavior
+                  fieldType="UniqueCheck"
+                  title=""
+                  value={rememberMe}
+                  onChange={handleRememberMe}
+                  options={[{ title: "Remember me" }]}
+                  name="rememberMe"
+                  inversed={true}
+                />
+                <S.Password>
+                  <span
+                    onClick={toggleModal}
+                    role="checkbox"
+                    aria-checked="false"
+                    tabIndex={0}
+                    data-testid="forgot-button"
+                  >
+                    Lost your password?
+                  </span>
+                </S.Password>
+              </S.Actions>
+              <Button type="submit" disabled={isLoggingIn ? true : false}>
+                {btnText}
+              </Button>
+              <RecoveryModal isOpen={isOpen} toggleModal={toggleModal} />
+            </S.Form>
+          </S.Main>
+          <S.Secuoyas width={wrapperWidth}>
+            Made with care at <img src="/img/logos/logoSQY.svg" alt="Secuoyas logo" />
+          </S.Secuoyas>
+        </S.LoginWrapper>
+      </S.LeftWrapper>
+      <S.RightWrapper>
+        <Circle animation={1} />
+        <Circle animation={2} />
+        <S.AnimatedLoginSlider className={isLoginSuccess ? "animate" : ""} />
+      </S.RightWrapper>
     </S.Wrapper>
   );
 };
@@ -110,6 +152,8 @@ export interface ILoginProps {
   settings: IGlobalSettings;
   rememberMe: boolean;
   handleRememberMe: () => void;
+  isLoginSuccess: boolean;
+  handleLoginSuccess: () => void;
 }
 
 export default Login;

package/src/components/Login/style.tsx

@@ -1,33 +1,103 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+import LoginSlider from "./LoginSlider";
 
 const Wrapper = styled.section`
+  position: relative;
+  display: flex;
   height: 100vh;
-  width: 100vw;
+  background: ${(p) => p.theme.color.uiBackground04};
+  flex-direction: row;
+`;
+
+const LoginAnimation = keyframes`
+  to {
+    width: 100%;
+  }
+}`;
+
+const OpacityAnimation = keyframes`
+  to {
+    opacity: 0;
+  }
+}`;
+
+const LeftWrapper = styled.div`
+  position: relative;
+  display: flex;
+  width: 45%;
+  background: ${(p) => p.theme.color.uiBackground04};
+
+  &.animate {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 2;
+    animation: ${LoginAnimation} 1.2s ease-in;
+    animation-fill-mode: forwards;
+  }
+`;
+
+const LoginWrapper = styled.div<{ width: number }>`
+  width: ${(p) => p.width > 0 ? `${p.width}px` : "100%"};
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(p) => p.theme.color.uiBackground01};
+
+  &.animate {
+    opacity: 1;
+    margin-right: auto;
+    animation: ${OpacityAnimation} 1.2s ease-in;
+    animation-fill-mode: forwards;
+  }
 `;
 
-const Main = styled.div`
-  width: calc(${(p) => p.theme.spacing.xl} * 5);
+const RightWrapper = styled.div`
+  background-color: #001B3C;
+  position: relative;
+  width: 55%;
+  height: 100%;
+  color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  margin-left: auto;
+  z-index: 1;
+  overflow: hidden;
 `;
 
-const Header = styled.header`
-  text-align: center;
-  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
-  padding-bottom: ${(p) => p.theme.spacing.m};
+const AnimatedLoginSlider = styled(LoginSlider)`
+  &.animate {
+    opacity: 1;
+    animation: ${OpacityAnimation} 1.2s ease-in;
+    animation-fill-mode: forwards;
+  }
 `;
 
+const Main = styled.div`
+  width: 368px;
+`;
+
+const Header = styled.header``;
+
 const Subtitle = styled.p`
-  ${(p) => p.theme.textStyle.headingXXS};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasisInverse};
   font-weight: normal;
   margin-bottom: ${(p) => p.theme.spacing.xs};
+  width: 280px;
 `;
 
-const Title = styled.h1`
+const Title = styled.div`
   ${(p) => p.theme.textStyle.headingM};
+  color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  align-items: center;
+  div:last-child {
+    margin-left: ${(p) => p.theme.spacing.xxs};
+  }
+  img {
+    height: 24px;
+    margin-top: ${(p) => p.theme.spacing.xxs};
+  }
 `;
 
 const Form = styled.form`
@@ -38,14 +108,49 @@ const Form = styled.form`
 
 const Password = styled.div`
   ${(p) => p.theme.textStyle.uiS};
-  color: ${(p) => p.theme.color.interactive01};
-  margin-top: ${(p) => p.theme.spacing.m};
+  color: ${(p) => p.theme.color.interactiveInverse};
   width: 100%;
-  text-align: center;
+  text-align: right;
 
   span {
     cursor: pointer;
   }
 `;
 
-export { Wrapper, Main, Header, Subtitle, Title, Form, Password };
+const Actions = styled.div`
+  display: flex;
+`;
+
+const Secuoyas = styled.div<{ width: number }>`
+  ${(p) => p.theme.textStyle.uiXS};
+  position: absolute;
+  display: flex;
+  color: ${(p) => p.theme.color.textMediumEmphasisInverse};
+  width: ${(p) => p.width > 0 ? `${p.width}px` : "100%"};
+  justify-content: center;
+  align-items: center;
+  left: 0;
+  bottom: ${(p) => p.theme.spacing.m};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  img {
+    width: 20px;
+    height: 20px;
+    margin-left: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+export {
+  Wrapper,
+  Main,
+  Header,
+  Subtitle,
+  Title,
+  Form,
+  Password,
+  Actions,
+  Secuoyas,
+  LeftWrapper,
+  RightWrapper,
+  LoginWrapper,
+  AnimatedLoginSlider,
+};

package/src/components/MainWrapper/AppBar/index.tsx

@@ -45,6 +45,7 @@ const AppBar = (props: IProps): JSX.Element => {
     pageStatusActions,
     filterSearchAction,
     searchFilters,
+    hasAnimation,
   } = props;
 
   const publishedTooltip: any = {
@@ -152,8 +153,10 @@ const AppBar = (props: IProps): JSX.Element => {
 
   const languageTooltip = typeof currentPageID === "number" && "Add language";
 
+  const classes = hasAnimation ? `${fixedClass} ${additionalClass} animate` : `${fixedClass} ${additionalClass}`
+
   return (
-    <S.Header className={`${fixedClass} ${additionalClass}`} inversed={inversed} data-testid="appbar-header">
+    <S.Header className={classes} inversed={inversed} data-testid="appbar-header">
       <S.WrapperTitle>
         {backLink && (
           <span data-testid="back-button-wrapper">
@@ -288,6 +291,7 @@ export interface IAppBarProps {
   };
   isFromEditor?: boolean;
   pageStatusActions?: any[];
+  hasAnimation?: boolean;
 }
 
 type IProps = IAppBarProps & RouteComponentProps;

package/src/components/MainWrapper/AppBar/style.tsx

@@ -1,4 +1,13 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+
+const OpacityAnimation = keyframes`
+  from  {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}`;
 
 const ActionMenu = styled.ul``;
 
@@ -131,6 +140,7 @@ const Header = styled.section<{ inversed?: boolean }>`
   background: ${(p) => (p.inversed ? p.theme.color.uiMainMenuBackground : p.theme.color.uiBackground02)};
   display: flex;
   padding-right: ${(p) => p.theme.spacing.s};
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
 
   button:first-child {
     margin-left: ${(p) => p.theme.spacing.m};
@@ -152,6 +162,12 @@ const Header = styled.section<{ inversed?: boolean }>`
     z-index: 999;
   }
 
+  &.animate {
+    opacity: 0;
+    animation: ${OpacityAnimation} 1s ease-in 1.2s;
+    animation-fill-mode: forwards;
+  }
+
   ${Title} {
     color: ${(p) => (p.inversed ? p.theme.color.textHighEmphasisInverse : p.theme.color.textHighEmphasis)};
   }

package/src/components/MainWrapper/index.tsx

@@ -6,10 +6,11 @@ import AppBar from "./AppBar";
 import * as S from "./style";
 
 const MainWrapper = (props: IWrapperProps): JSX.Element => {
-  const { children, fixedAppBar, fullWidth } = props;
+  const { children, fixedAppBar, fullWidth, hasAnimation } = props;
 
   return (
     <S.Wrapper fixedAppBar={fixedAppBar} data-testid="main-wrapper">
+      {hasAnimation && <S.BackgroundAnimation />}
       <AppBar {...props} />
       <S.Main fullWidth={fullWidth} data-testid="main-component" id="main-component">
         {children}
@@ -52,6 +53,7 @@ export interface IWrapperProps {
     goToPackage(): void;
   };
   pageStatusActions?: any[];
+  hasAnimation?: boolean;
 }
 
 export default MainWrapper;

package/src/components/MainWrapper/style.tsx

@@ -1,17 +1,48 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 
-export const Wrapper = styled.section<{ fixedAppBar: boolean | undefined }>`
+const Wrapper = styled.section<{ fixedAppBar: boolean | undefined }>`
   height: 100%;
   display: flex;
   flex-direction: column;
   padding-top: ${(p) => (p.fixedAppBar ? p.theme.spacing.xl : "0")};
 `;
 
-export const Main = styled.article<{ fullWidth: boolean | undefined }>`
+const Main = styled.article<{ fullWidth: boolean | undefined }>`
   position: relative;
   overflow: ${(p) => (p.fullWidth ? "visible" : "auto")};
   background: ${(p) => p.theme.color.uiBackground01};
-  border-top: ${(p) => `1px solid ${p.theme.color.uiLine}`};
   margin-top: -1px;
   flex-grow: 1;
 `;
+
+const LoginAnimation = keyframes`
+  from  {
+    width: 100%;
+  }
+  to {
+    width: 72px;
+  }
+}`;
+
+const OpacityAnimation = keyframes`
+  from  {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}`;
+
+const BackgroundAnimation = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: ${(p) => p.theme.color.uiMainMenuBackground};
+  z-index: 10;
+  animation: ${LoginAnimation} 1.2s ease-in, ${OpacityAnimation} 1s ease-in 1.2s;
+  animation-fill-mode: forwards;
+`;
+
+export { Wrapper, Main, BackgroundAnimation };

package/src/components/TableList/index.tsx

@@ -8,9 +8,7 @@ import * as S from "./style";
 const TableList = (props: ITableListProps): JSX.Element => {
   const { tableHeader, children, pagination, isLoading, onScroll, hasFixedHeader, tableRef } = props;
 
-  const { totalItems, setPage, itemsPerPage, currPage } = pagination;
-
-  const showPagination = totalItems > itemsPerPage;
+  const showPagination = pagination && pagination.totalItems > pagination.itemsPerPage;
 
   return (
     <S.TableList onScroll={onScroll} ref={tableRef} data-testid="table-list">
@@ -24,7 +22,7 @@ const TableList = (props: ITableListProps): JSX.Element => {
       </S.Table>
       <S.PaginationWrapper>
         {showPagination && (
-          <Pagination totalItems={totalItems} setPage={setPage} itemsPerPage={itemsPerPage} currPage={currPage} />
+          <Pagination totalItems={pagination.totalItems} setPage={pagination.setPage} itemsPerPage={pagination.itemsPerPage} currPage={pagination.currPage} />
         )}
       </S.PaginationWrapper>
     </S.TableList>
@@ -38,7 +36,7 @@ const mapStateToProps = (state: IRootState) => ({
 export interface ITableListProps {
   tableHeader: JSX.Element | JSX.Element[];
   children: JSX.Element | JSX.Element[];
-  pagination: {
+  pagination?: {
     totalItems: number;
     setPage: any;
     itemsPerPage: number;

package/src/containers/App/actions.tsx

@@ -20,6 +20,7 @@ import {
   SET_GLOBAL_SETTINGS,
   SET_USER,
   SET_SESSION_STARTED_AT,
+  SET_HAS_ANIMATION,
 } from "./constants";
 
 import {
@@ -34,6 +35,7 @@ import {
   ISetGlobalSettings,
   ISetUserAction,
   ISetSessionStartedAtAction,
+  ISetHasAnimation,
 } from "./interfaces";
 import { IError, IUser } from "./reducer";
 
@@ -45,6 +47,10 @@ function setIsSaving(isSaving: boolean): ISetIsSaving {
   return { type: SET_IS_SAVING, payload: { isSaving } };
 }
 
+function setHasAnimation(hasAnimation: boolean): ISetHasAnimation {
+  return { type: SET_HAS_ANIMATION, payload: { hasAnimation } };
+}
+
 const resetStateValues = (dispatch: Dispatch) => {
   dispatch(setIsLoading(true));
   dispatch(setIsSaving(false));
@@ -138,13 +144,12 @@ function handleError(response: any, isMultiple = false, msg?: string): (dispatch
   };
 }
 
-function login(email: string, password: string, rememberMe: boolean): (dispatch: Dispatch) => Promise<void> {
-  const welcomePageURI = "/sites";
+function login(email: string, password: string, rememberMe: boolean): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     dispatch(setIsLogging(true));
     const loginResponse: any = await global.login(email, password);
     dispatch(setIsLogging(false));
-    switch (loginResponse.status) {
+    switch (loginResponse?.status) {
       case 200: {
         const {
           data: { token },
@@ -153,12 +158,12 @@ function login(email: string, password: string, rememberMe: boolean): (dispatch:
         isReqOk(langResponse.status) && dispatch(setGlobalLanguages(langResponse.data.items));
         dispatch(setToken(loginResponse.data.token));
         dispatch(setSessionStartedAt(new Date()));
-        setHistoryPush(welcomePageURI)(dispatch);
+        dispatch(setHasAnimation(true));
         if (rememberMe) {
           const user: any = { token: loginResponse.data.token };
           localStorage.setItem("user", JSON.stringify(user));
         }
-        break;
+        return true;
       }
       case 403: {
         const error = {
@@ -167,11 +172,21 @@ function login(email: string, password: string, rememberMe: boolean): (dispatch:
           actionsBelow: true,
         };
         handleError(error)(dispatch);
-        break;
+        return false;
+      }
+      case undefined: {
+        const error = {
+          data: {
+            code: 500,
+            message: "An error has occurred. Please contact your system administrator.",
+          }
+        };
+        handleError(error)(dispatch);
+        return false;
       }
       default:
         handleError(loginResponse)(dispatch);
-        break;
+        return false;
     }
   };
 }
@@ -225,4 +240,5 @@ export {
   getGlobalSettings,
   setUser,
   checkUserSession,
+  setHasAnimation,
 };