@griddo/ax 10.6.21 → 10.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.6.21",
+  "version": "10.7.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -233,5 +233,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "52124754ba1a1030fdf5495dcec6e4a6281ac84d"
+  "gitHead": "0c56d9f6d66dea9fd92f811630b97808227aa693"
 }

package/src/__tests__/components/Login/RecoveryModal/RecoveryModal.test.tsx

@@ -5,7 +5,7 @@ import { render, cleanup, screen, fireEvent, waitFor, act } from "@testing-libra
 import "@testing-library/jest-dom";
 
 import { parseTheme } from "@ax/helpers";
-import RecoveryModal, { IRecoveryProps } from "@ax/components/Login/RecoveryModal";
+import RecoveryModal, { IRecoveryProps } from "@ax/components/Login/LoginForm/RecoveryModal";
 import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);

package/src/api/global.tsx

@@ -34,9 +34,8 @@ const SERVICES: { [key: string]: IServiceConfig } = {
   },
 };
 
-const login = async (username: string, password: string) => {
-  // FIXME set email as param instead of username
-  return sendRequest(SERVICES.LOGIN, { username, password });
+const login = async (data?: { username?: string; password?: string; petitionId?: string }) => {
+  return sendRequest(SERVICES.LOGIN, data);
 };
 
 const getSettings = () => {

package/src/components/Button/index.tsx

@@ -12,7 +12,7 @@ enum buttonStyles {
 }
 
 const Button = (props: IButtonProps): JSX.Element => {
-  const { children, type, disabled, icon, buttonStyle, onClick, className, loader, backIcon } = props;
+  const { children, type, disabled, icon, buttonStyle, onClick, className, loader, backIcon, iconFill = true } = props;
 
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (onClick !== undefined) {
@@ -23,8 +23,8 @@ const Button = (props: IButtonProps): JSX.Element => {
 
   const iconSize = buttonStyle === buttonStyles.MINIMAL ? "16" : "24";
 
-  let iconWrapper = icon ? <Icon name={icon} size={iconSize} /> : loader ? <Loader name={loader} /> : <></>;
-  let iconBackWrapper = backIcon ? <Icon name={backIcon} /> : <></>;
+  const iconWrapper = icon ? <Icon name={icon} size={iconSize} /> : loader ? <Loader name={loader} /> : <></>;
+  const iconBackWrapper = backIcon ? <Icon name={backIcon} /> : <></>;
 
   const buttonContent = (
     <S.Label icon={icon || loader} backIcon={backIcon}>
@@ -83,6 +83,7 @@ const Button = (props: IButtonProps): JSX.Element => {
           type={type}
           disabled={disabled}
           onClick={handleOnClick}
+          iconFill={iconFill}
         >
           {buttonContent}
         </S.Button>
@@ -100,6 +101,7 @@ export interface IButtonProps {
   buttonStyle?: "solid" | "text" | "line" | "lineInverse" | "minimal";
   className?: string;
   backIcon?: string;
+  iconFill?: boolean;
 }
 
 export default Button;

package/src/components/Button/style.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-const Button = styled.button`
+const Button = styled.button<{ iconFill: boolean }>`
   ${(p) => p.theme.textStyle.uiButton};
   background-color: ${(p) => p.theme.color.interactive01};
   border-radius: 4px;
@@ -55,7 +55,7 @@ const Button = styled.button`
     width: ${(p) => p.theme.spacing.s};
     height: ${(p) => p.theme.spacing.s};
     path {
-      fill: #ffffff;
+      fill: ${(p) => (p.iconFill ? "#ffffff" : "")};
     }
     circle {
       stroke: #ffffff;

package/src/components/Icon/components/Microsoft.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+const SvgMicrosoft = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={17} height={16} fill="none" {...props}>
+    <path fill="#F35325" d="M1.196.695h6.956v6.957H1.196V.695Z" />
+    <path fill="#81BC06" d="M8.848.695h6.956v6.957H8.848V.695Z" />
+    <path fill="#05A6F0" d="M1.196 8.348h6.956v6.956H1.196V8.348Z" />
+    <path fill="#FFBA08" d="M8.848 8.348h6.956v6.956H8.848V8.348Z" />
+  </svg>
+);
+export default SvgMicrosoft;

package/src/components/Icon/index.tsx

@@ -20,6 +20,8 @@ const Icon = (props: IProps) => {
   const size = props.size ? props.size : "22";
   const fill = props.fill ? props.fill : "black";
 
+  const viewBox = props.viewBox ? `0 0 ${props.viewBox} ${props.viewBox}` : "0 0 24 24";
+
   const Svg = getImage(name);
 
   if (Svg) {
@@ -28,7 +30,7 @@ const Icon = (props: IProps) => {
         data-testid={`icon-component-${name.toLowerCase()}`}
         height={size}
         width={size}
-        viewBox="0 0 24 24"
+        viewBox={viewBox}
         fill={fill}
       />
     );
@@ -41,6 +43,7 @@ export interface IStateProps {
   name: string;
   size?: string;
   fill?: string;
+  viewBox?: number;
 }
 
 type IProps = IStateProps;

package/src/components/Icon/svgs/microsoft.svg

@@ -0,0 +1,6 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.19565 0.695312H8.15217V7.65183H1.19565V0.695312Z" fill="#F35325"/>
+<path d="M8.84782 0.695312H15.8043V7.65183H8.84782V0.695312Z" fill="#81BC06"/>
+<path d="M1.19565 8.34766H8.15217V15.3042H1.19565V8.34766Z" fill="#05A6F0"/>
+<path d="M8.84782 8.34766H15.8043V15.3042H8.84782V8.34766Z" fill="#FFBA08"/>
+</svg>

package/src/components/Login/LoginForm/RecoveryModal/style.tsx

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+  div {
+    margin-bottom: 0;
+  }
+`;
+
+export { ModalContent };

package/src/components/Login/LoginForm/index.tsx

@@ -0,0 +1,135 @@
+import React, { 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 * as S from "./style";
+
+declare global {
+  interface Window {
+    handleErrorClick: () => void;
+  }
+}
+
+const LoginForm = (props: ILoginFormProps): JSX.Element => {
+  const {
+    handleSubmit,
+    email,
+    handleEmail,
+    password,
+    handlePassword,
+    isLoggingIn,
+    settings,
+    rememberMe,
+    handleRememberMe,
+  } = props;
+
+  const [viewPass, setViewPass] = useState(false);
+  const { isOpen, toggleModal } = useModal();
+
+  window.handleErrorClick = toggleModal;
+
+  const _handleEmail = (e: string) => handleEmail(e);
+
+  const _handlePwd = (e: string) => handlePassword(e);
+
+  const _togglePassword = () => setViewPass(!viewPass);
+
+  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>
+      <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}
+                onKeyDown={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>
+        Made with care at{" "}
+        <a href="https://www.secuoyas.com/" target="_blank" rel="noopener noreferrer">
+          <img src="/img/logos/logoSQY.svg" alt="Secuoyas logo" />
+        </a>
+      </S.Secuoyas>
+    </S.Wrapper>
+  );
+};
+
+export interface ILoginFormProps {
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  email: string;
+  handleEmail: (email: string) => void;
+  password: string;
+  handlePassword: (password: string) => void;
+  isLoggingIn: boolean;
+  settings: IGlobalSettings;
+  rememberMe: boolean;
+  handleRememberMe: () => void;
+}
+
+export default LoginForm;

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

@@ -0,0 +1,78 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  width: 368px;
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+const Main = styled.div`
+  width: 100%;
+`;
+
+const Header = styled.header``;
+
+const Subtitle = styled.p`
+  ${(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.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`
+  display: flex;
+  flex-direction: column;
+  margin-top: ${(p) => p.theme.spacing.m};
+`;
+
+const Password = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.interactiveInverse};
+  width: 100%;
+  text-align: right;
+
+  span {
+    cursor: pointer;
+  }
+`;
+
+const Actions = styled.div`
+  display: flex;
+`;
+
+const Secuoyas = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  position: absolute;
+  display: flex;
+  color: ${(p) => p.theme.color.textMediumEmphasisInverse};
+  justify-content: center;
+  align-items: center;
+  bottom: ${(p) => p.theme.spacing.m};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  width: 100%;
+  img {
+    width: 20px;
+    height: 20px;
+    margin-left: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+export { Wrapper, Main, Header, Subtitle, Title, Form, Password, Actions, Secuoyas };

package/src/components/Login/LoginSSO/index.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Icon, ErrorToast } from "@ax/components";
+
+import * as S from "./style";
+
+const LoginSSO = (props: ILoginSSOProps): JSX.Element => {
+  const { handleSSO, errorSSO } = props;
+
+  const handleClick = () => handleSSO();
+
+  return (
+    <S.Wrapper>
+      <S.Main>
+        <S.Logo>
+          <img src="/img/logos/logoGriddoExtended@3x.svg" alt="Griddo Logo" />
+        </S.Logo>
+        <S.Welcome>
+          Wel
+          <br />
+          come
+        </S.Welcome>
+        <S.StartWrapper>
+          <ErrorToast />
+          {errorSSO ? (
+            <>
+              <S.StyledNotification text={errorSSO} type="error" closeButton={false} />
+              <S.StyledButton type="button" iconFill={false} onClick={handleClick}>
+                <S.ContentButton>
+                  <S.TextButton>Try again</S.TextButton>
+                </S.ContentButton>
+              </S.StyledButton>
+            </>
+          ) : (
+            <>
+              <S.Text>
+                To start using Griddo, login with your
+                <br />
+                autentication platform
+              </S.Text>
+              <S.StyledButton type="button" iconFill={false} onClick={handleClick}>
+                <S.ContentButton>
+                  <S.IconButton>
+                    <Icon name="microsoft" size="16" viewBox={16} />
+                  </S.IconButton>
+                  <S.TextButton>Microsoft ID</S.TextButton>
+                </S.ContentButton>
+              </S.StyledButton>
+            </>
+          )}
+        </S.StartWrapper>
+      </S.Main>
+      <S.Secuoyas>
+        Made with care at{" "}
+        <a href="https://www.secuoyas.com/" target="_blank" rel="noopener noreferrer">
+          <img src="/img/logos/logoSQY.svg" alt="Secuoyas logo" />
+        </a>
+      </S.Secuoyas>
+    </S.Wrapper>
+  );
+};
+
+interface ILoginSSOProps {
+  handleSSO: () => void;
+  errorSSO: string | null;
+}
+
+export default LoginSSO;

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

@@ -0,0 +1,99 @@
+import React from "react";
+import styled from "styled-components";
+import { Button, Notification } from "@ax/components";
+
+const Wrapper = styled.div`
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: strech;
+`;
+
+const Main = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Logo = styled.div`
+  margin-top: 15%;
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  img {
+    height: 40px;
+    width: auto;
+  }
+`;
+
+const Welcome = styled.div`
+  color: #ffffff;
+  font-size: 181px;
+  line-height: 149.32px;
+  word-break: break-word;
+  margin-bottom: ${(p) => p.theme.spacing.l};
+`;
+
+const StartWrapper = styled.div`
+  max-width: 416px;
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasisInverse};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const StyledButton = styled((props) => <Button {...props} />)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  width: 288px;
+`;
+
+const ContentButton = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const IconButton = styled.div`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  margin-right: ${(p) => p.theme.spacing.xs};
+`;
+
+const TextButton = styled.div``;
+
+const Secuoyas = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  position: absolute;
+  display: flex;
+  color: ${(p) => p.theme.color.textMediumEmphasisInverse};
+  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};
+  }
+`;
+
+const StyledNotification = styled((props) => <Notification {...props} />)`
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+export {
+  Wrapper,
+  Main,
+  Logo,
+  Welcome,
+  StartWrapper,
+  Text,
+  StyledButton,
+  ContentButton,
+  IconButton,
+  TextButton,
+  Secuoyas,
+  StyledNotification,
+};

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

@@ -14,10 +14,10 @@ const LoginSlider = (props: ILoginSliderProps): JSX.Element => {
     const nextSlideElement = customSlider.current.innerSlider.list.querySelector(`[data-index="${next}"]`);
 
     setTimeout(() => {
-      prevSlideElement.classList.add('prev-slide-anim');
-      nextSlideElement.classList.remove('prev-slide-anim');
-    },100);
-  }
+      prevSlideElement.classList.add("prev-slide-anim");
+      nextSlideElement.classList.remove("prev-slide-anim");
+    }, 100);
+  };
 
   const settings = {
     dots: false,

package/src/components/Login/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 
 import { IGlobalSettings } from "@ax/containers/App/reducer";
-import { useModal } from "@ax/hooks";
-import { Button, FieldsBehavior, ErrorToast, Circle } from "@ax/components";
-import RecoveryModal from "./RecoveryModal";
+import { Circle } from "@ax/components";
+import LoginForm from "./LoginForm";
+import LoginSSO from "./LoginSSO";
 
 import * as S from "./style";
 
@@ -26,11 +26,11 @@ const Login = (props: ILoginProps): JSX.Element => {
     handleRememberMe,
     isLoginSuccess,
     handleLoginSuccess,
+    handleSSO,
+    errorSSO,
   } = props;
 
-  const [viewPass, setViewPass] = useState(false);
   const [wrapperWidth, setWrapperWidth] = useState<number>(0);
-  const { isOpen, toggleModal } = useModal();
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -41,99 +41,29 @@ const Login = (props: ILoginProps): JSX.Element => {
     if (wrapperRef.current) {
       setWrapperWidth(wrapperRef.current.clientWidth);
     }
-  }, [wrapperRef.current]);
-
-  window.handleErrorClick = toggleModal;
-
-  const _handleEmail = (e: string) => handleEmail(e);
-
-  const _handlePwd = (e: string) => handlePassword(e);
-
-  const _togglePassword = () => setViewPass(!viewPass);
+  }, [wrapperRef]);
 
   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.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}
-                    onKeyDown={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{" "}
-            <a href="https://www.secuoyas.com/" target="_blank">
-              <img src="/img/logos/logoSQY.svg" alt="Secuoyas logo" />
-            </a>
-          </S.Secuoyas>
+          {settings.SSOActivated ? (
+            <LoginSSO handleSSO={handleSSO} errorSSO={errorSSO} />
+          ) : (
+            <LoginForm
+              handleSubmit={handleSubmit}
+              email={email}
+              handleEmail={handleEmail}
+              password={password}
+              handlePassword={handlePassword}
+              isLoggingIn={isLoggingIn}
+              settings={settings}
+              rememberMe={rememberMe}
+              handleRememberMe={handleRememberMe}
+            />
+          )}
         </S.LoginWrapper>
       </S.LeftWrapper>
       <S.RightWrapper>
@@ -157,6 +87,8 @@ export interface ILoginProps {
   handleRememberMe: () => void;
   isLoginSuccess: boolean;
   handleLoginSuccess: () => void;
+  handleSSO: () => void;
+  errorSSO: string | null;
 }
 
 export default Login;

package/src/components/Login/style.tsx

@@ -71,56 +71,6 @@ const AnimatedLoginSlider = styled(LoginSlider)`
   }
 `;
 
-const Main = styled.div`
-  width: 368px;
-`;
-
-const Header = styled.header``;
-
-const Subtitle = styled.p`
-  ${(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.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`
-  display: flex;
-  flex-direction: column;
-  margin-top: ${(p) => p.theme.spacing.m};
-`;
-
-const Password = styled.div`
-  ${(p) => p.theme.textStyle.uiS};
-  color: ${(p) => p.theme.color.interactiveInverse};
-  width: 100%;
-  text-align: right;
-
-  span {
-    cursor: pointer;
-  }
-`;
-
-const Actions = styled.div`
-  display: flex;
-`;
-
 const Secuoyas = styled.div<{ width: number }>`
   ${(p) => p.theme.textStyle.uiXS};
   position: absolute;
@@ -139,18 +89,4 @@ const Secuoyas = styled.div<{ width: number }>`
   }
 `;
 
-export {
-  Wrapper,
-  Main,
-  Header,
-  Subtitle,
-  Title,
-  Form,
-  Password,
-  Actions,
-  Secuoyas,
-  LeftWrapper,
-  RightWrapper,
-  LoginWrapper,
-  AnimatedLoginSlider,
-};
+export { Wrapper, LeftWrapper, RightWrapper, LoginWrapper, AnimatedLoginSlider, Secuoyas };

package/src/components/Notification/index.tsx

@@ -5,7 +5,7 @@ import SubNotification from "./SubNotification";
 import * as S from "./style";
 
 const Notification = (props: INotificationProps): JSX.Element => {
-  const { text, type, btnText, resetError, onClick, closeButton = true, actionsBelow, subErrors } = props;
+  const { text, type, btnText, resetError, onClick, closeButton = true, actionsBelow, subErrors, className } = props;
 
   const [isVisible, setIsVisible] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
@@ -60,7 +60,7 @@ const Notification = (props: INotificationProps): JSX.Element => {
   const showText = isOpen ? "Hide errors" : "Show errors";
 
   return (
-    <S.Wrapper isVisible={isVisible} className={type} data-testid="notification-wrapper">
+    <S.Wrapper isVisible={isVisible} className={`${type} ${className}`} data-testid="notification-wrapper">
       <S.NotificationWrapper>
         <S.Row>
           {getNotificationIcon(type)}
@@ -98,6 +98,7 @@ export interface INotificationProps {
   closeButton?: boolean;
   actionsBelow?: boolean;
   subErrors?: { id: number; error: string }[];
+  className?: string;
 }
 
 export default Notification;

package/src/containers/App/actions.tsx

@@ -147,10 +147,15 @@ function handleError(response: any, isMultiple = false, msg?: string): (dispatch
   };
 }
 
-function login(email: string, password: string, rememberMe: boolean): (dispatch: Dispatch) => Promise<boolean> {
+function login(
+  email?: string,
+  password?: string,
+  rememberMe?: boolean,
+  petitionId?: string
+): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     dispatch(setIsLogging(true));
-    const loginResponse: any = await global.login(email, password);
+    const loginResponse: any = await global.login({ username: email, password, petitionId });
     dispatch(setIsLogging(false));
     switch (loginResponse?.status) {
       case 200: {
@@ -194,6 +199,23 @@ function login(email: string, password: string, rememberMe: boolean): (dispatch:
   };
 }
 
+function loginSSO(): (dispatch: Dispatch) => Promise<string | null> {
+  return async (dispatch) => {
+    try {
+      dispatch(setIsLogging(true));
+      const response: { status: number; data: any } = await global.login();
+
+      if (isReqOk(response?.status)) {
+        return response.data;
+      } else {
+        return null;
+      }
+    } catch (e) {
+      return null;
+    }
+  };
+}
+
 function getGlobalSettings(): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
@@ -244,4 +266,5 @@ export {
   setUser,
   checkUserSession,
   setHasAnimation,
+  loginSSO,
 };

package/src/containers/App/reducer.tsx

@@ -52,6 +52,7 @@ export interface IGlobalSettings {
   skipReviewOnPublish?: boolean;
   autoSummary: boolean;
   autoTranslation: boolean;
+  SSOActivated: boolean;
 }
 
 export const initialState = {
@@ -82,6 +83,7 @@ export const initialState = {
     welcomeText2: "",
     autoSummary: false,
     autoTranslation: false,
+    SSOActivated: false,
   },
   sessionStartedAt: null,
   hasAnimation: false,

package/src/modules/Login/constants.tsx

@@ -0,0 +1,7 @@
+const errorText: Record<string, string> = {
+  noemail: "No email found in token",
+  noregistered:
+    "It looks like your email isn't registered in Griddo. Please contact your administrator to request access.",
+};
+
+export { errorText };

package/src/modules/Login/index.tsx

@@ -1,13 +1,19 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { IRootState } from "@ax/types";
+import { useParams } from "react-router-dom";
 
+import { IRootState } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { Login } from "@ax/components";
 import { IGlobalSettings } from "@ax/containers/App/reducer";
+import { errorText } from "./constants";
 
 const LoginModule = (props: IProps) => {
-  const { isLoggingIn, globalSettings, login, resetError, getGlobalSettings, setHistoryPush } = props;
+  const { isLoggingIn, globalSettings, login, loginSSO, resetError, getGlobalSettings, setHistoryPush } = props;
+
+  const { petitionId } = useParams<{ petitionId?: string }>();
+
+  const errorSSO = petitionId && Object.keys(errorText).includes(petitionId) ? errorText[petitionId] : null;
 
   const initState = {
     email: "",
@@ -18,6 +24,20 @@ const LoginModule = (props: IProps) => {
   const [state, setState] = useState(initState);
   const [isSuccess, setIsSuccess] = useState(false);
 
+  useEffect(() => {
+    const handleLogin = async () => {
+      const isLogged = await login(undefined, undefined, undefined, petitionId);
+      if (isLogged) {
+        setIsSuccess(true);
+      }
+    };
+
+    if (petitionId && !errorSSO) {
+      handleLogin();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [petitionId, errorSSO]);
+
   useEffect(() => {
     const prefix = process.env.REACT_APP_SITE_TITLE ? process.env.REACT_APP_SITE_TITLE : "";
     document.title = `${prefix} ${globalSettings.welcomeText2}`;
@@ -30,11 +50,18 @@ const LoginModule = (props: IProps) => {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const isLogged = await login(state.email, state.password, state.rememberMe);
-    if(isLogged){
+    if (isLogged) {
       setIsSuccess(true);
     }
   };
 
+  const handleClickSSO = async () => {
+    const urlSSO = await loginSSO();
+    if (urlSSO) {
+      window.open(urlSSO, "_self");
+    }
+  };
+
   const _handleEmail = (email: string) => {
     resetError();
     setState({ ...state, email });
@@ -48,7 +75,7 @@ const LoginModule = (props: IProps) => {
   const handleLoginSuccess = () => {
     const welcomePageURI = "/sites";
     setHistoryPush(welcomePageURI);
-  }
+  };
 
   const _handleRememberMe = () => setState({ ...state, rememberMe: !state.rememberMe });
 
@@ -65,23 +92,26 @@ const LoginModule = (props: IProps) => {
       handleRememberMe={_handleRememberMe}
       isLoginSuccess={isSuccess}
       handleLoginSuccess={handleLoginSuccess}
+      handleSSO={handleClickSSO}
+      errorSSO={errorSSO}
     />
   );
 };
 
 interface IProps {
-  token: string;
   isLoggingIn: boolean;
   children: any;
   globalSettings: IGlobalSettings;
-  login(email: string, password: string, rememberMe: boolean): Promise<boolean>;
+  login(email?: string, password?: string, rememberMe?: boolean, petitionId?: string): Promise<boolean>;
+  loginSSO(): Promise<string | null>;
   resetError(): void;
   getGlobalSettings(): void;
-  setHistoryPush(path: string): Promise<void>
+  setHistoryPush(path: string): Promise<void>;
 }
 
 const mapDispatchToProps = {
   login: appActions.login,
+  loginSSO: appActions.loginSSO,
   resetError: appActions.resetError,
   getGlobalSettings: appActions.getGlobalSettings,
   setHistoryPush: appActions.setHistoryPush,

package/src/routes/publicRoutes.tsx

@@ -4,6 +4,7 @@ import Login from "./../modules/Login";
 import PublicPreview from "./../modules/PublicPreview";
 
 const publicRoutes = [
+  { path: "/login/:petitionId", component: Login, name: "Login", hideNav: true },
   { path: "/login", component: Login, name: "Login", hideNav: true },
   { path: "/new-password/:id/:token", component: ResetPass, name: "Reset Password", hideNav: true },
   { path: "/set-password/:id/:token", component: CreatePass, name: "Create Password", hideNav: true },

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

@@ -1,11 +0,0 @@
-import styled from "styled-components";
-
-export const ModalContent = styled.div`
-  padding: ${p => p.theme.spacing.m};
-  p {
-    margin-bottom: ${p => p.theme.spacing.m};
-  }
-  div {
-    margin-bottom: 0;
-  }
-`;