Merge remote-tracking branch 'origin/main' into refactor/auth-client-…

…layer # Conflicts: # packages/client/src/routes/index.tsx
Jozwiaczek · Mar 15, 2021 · 3ce464b · 3ce464b
2 parents e6a29e5 + 3160864
commit 3ce464b
Show file tree

Hide file tree

Showing 40 changed files with 1,833 additions and 120 deletions.
diff --git a/packages/api/src/modules/auth/auth.controller.ts b/packages/api/src/modules/auth/auth.controller.ts
@@ -105,13 +105,15 @@ export class AuthController {
     const { tokenConfig } = constants;
     const { getCookies, clearCookies } = cookiesUtils;
 
-    clearCookies(response);
-
     const cookies = getCookies(request);
 
     const refreshToken = cookies[tokenConfig.refreshToken.name];
     const accessToken = cookies[tokenConfig.accessToken.name];
 
-    await this.authService.logout(refreshToken, accessToken);
+    try {
+      await this.authService.logout(refreshToken, accessToken);
+    } finally {
+      clearCookies(response);
+    }
   }
 }
diff --git a/packages/client/src/constants/localStorageKeys.ts b/packages/client/src/constants/localStorageKeys.ts
@@ -1,3 +1,5 @@
-export default {
-  LOGIN_EXPIRATION_DATE: 'loginExpirationDate',
-};
+enum LocalStorageKey {
+  LOGIN_EXPIRATION_DATE = 'loginExpirationDate',
+  THEME_TYPE = 'themeType',
+}
+export default LocalStorageKey;
diff --git a/packages/client/src/constants/routes.ts b/packages/client/src/constants/routes.ts
@@ -2,6 +2,7 @@ const routes = {
   HOME: '/',
   LOGIN: '/login',
   REGISTRATION: '/registration',
+  PAGE_NOT_FOUND: '/pageNotFound',
 };
 
 export default routes;
diff --git a/packages/client/src/containers/Dashboard/index.tsx b/packages/client/src/containers/Dashboard/index.tsx
@@ -36,7 +36,7 @@ const Dashboard = () => {
     <Container>
       <h1>Smart Gate</h1>
       <h2>Dashboard</h2>
-      <Button to="/" onClick={logoutUser} margin="20px">
+      <Button onClick={logoutUser} margin="20px">
         {t('routes.dashboard.logout')}
       </Button>
       <Button onClick={onChangeTheme} margin="20px">

diff --git a/packages/client/src/containers/Login/index.tsx b/packages/client/src/containers/Login/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 
 import { routes } from '../../constants';
-import { AnimatedLogo, AuthLayout, Checkbox, Form, Link, TextField } from '../../elements';
+import { AnimatedLogo, CardLayout, Checkbox, Form, Link, TextField } from '../../elements';
 import { useAuth, useSnackbar } from '../../hooks';
 import useAnimated from '../../hooks/useAnimated';
 import { EmailIcon } from '../../icons';
@@ -18,10 +18,8 @@ const Login = () => {
   const showSnackbar = useSnackbar();
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const animatedCard = useAnimated<HTMLDivElement>({ type: 'fadeIn' });
-  const { trigger: triggerCardShake } = useAnimated({
+  const { trigger: triggerCardShake, ref: animatedCardRef } = useAnimated<HTMLDivElement>({
     type: 'shake',
-    targets: animatedCard.ref.current,
     opt: { autoTrigger: false },
   });
   const { register, handleSubmit, errors, reset, trigger } = useForm<LoginInputs>();
@@ -37,18 +35,18 @@ const Login = () => {
     setLoading(true);
     try {
       await login(values);
+      console.log('after');
       reset();
       history.push(routes.HOME);
     } catch (error) {
       onlyOnDevEnv(() => console.error(error));
       showSnackbar({ message: t('form.errors.onSubmitError'), severity: 'error' });
-    } finally {
       setLoading(false);
     }
   };
 
   return (
-    <AuthLayout.Container ref={animatedCard.ref}>
+    <CardLayout.Container ref={animatedCardRef}>
       <AnimatedLogo margin="10px 0" />
       <Form onSubmit={handleSubmit(onSubmit)} errors={errors} loading={loading} register={register}>
         <TextField
@@ -65,7 +63,7 @@ const Login = () => {
           validationType="password"
           label={t('user.password')}
         />
-        <AuthLayout.ActionsContainer direction="row">
+        <CardLayout.ActionsContainer direction="row">
           <Checkbox name="keepMeLoggedIn" label={t('routes.login.keepMeLoggedIn')} />
           <StyledButton
             type="submit"
@@ -76,17 +74,17 @@ const Login = () => {
           >
             {t('routes.login.login')}
           </StyledButton>
-        </AuthLayout.ActionsContainer>
+        </CardLayout.ActionsContainer>
       </Form>
-      <AuthLayout.ActionsContainer>
+      <CardLayout.ActionsContainer>
         <Link to="/" colorVariant="grey">
           {t('routes.login.forgotPassword')}
         </Link>
         <Link to="/registration" colorVariant="colour">
           {t('routes.login.register')}
         </Link>
-      </AuthLayout.ActionsContainer>
-    </AuthLayout.Container>
+      </CardLayout.ActionsContainer>
+    </CardLayout.Container>
   );
 };
 

diff --git a/packages/client/src/containers/PageNotFound/PageNotFound.styled.ts b/packages/client/src/containers/PageNotFound/PageNotFound.styled.ts
@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+import { ContentWrapperProps, DescriptionProps } from './PageNotFound.types';
+
+export const Title = styled.h2`
+  font-weight: 400;
+  margin-bottom: 40px;
+`;
+
+export const Description = styled.h5<DescriptionProps>`
+  color: ${({ theme: { palette } }) => palette.text.secondary};
+  font-weight: 400;
+  position: absolute;
+  top: ${({ illustrationHeight }) => illustrationHeight - illustrationHeight * 0.1}px;
+`;
+
+export const IllustrationWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+  flex-direction: column;
+`;
+
+export const ContentWrapper = styled.div<ContentWrapperProps>`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: ${({ illustrationHeight }) => illustrationHeight + 40}px;
+  margin-bottom: 40px;
+`;
diff --git a/packages/client/src/containers/PageNotFound/PageNotFound.types.d.ts b/packages/client/src/containers/PageNotFound/PageNotFound.types.d.ts
@@ -0,0 +1,7 @@
+export interface DescriptionProps {
+  illustrationHeight: number;
+}
+
+export interface ContentWrapperProps {
+  illustrationHeight: number;
+}
diff --git a/packages/client/src/containers/PageNotFound/index.tsx b/packages/client/src/containers/PageNotFound/index.tsx
@@ -0,0 +1,50 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { routes } from '../../constants';
+import { Button, CardLayout, Heaven, Hell } from '../../elements';
+import { useCurrentUser, useThemeType } from '../../hooks';
+import { ThemeType } from '../../theme/Theme';
+import { ContentWrapper, Description, IllustrationWrapper, Title } from './PageNotFound.styled';
+
+const PageNotFound = () => {
+  const { t } = useTranslation();
+  const { themeType } = useThemeType();
+  const [currentUser] = useCurrentUser();
+  const illustrationWrapperRef = useRef<HTMLDivElement>(null);
+  const [illustrationHeight, setIllustrationHeight] = useState(0);
+  const isLightTheme = themeType === ThemeType.light;
+
+  useLayoutEffect(() => {
+    if (illustrationWrapperRef && illustrationWrapperRef.current) {
+      setIllustrationHeight(illustrationWrapperRef.current.clientHeight);
+    }
+  }, []);
+
+  return (
+    <CardLayout.Container>
+      <Title>
+        <Trans i18nKey="routes.pageNotFound.title" components={{ b: <b /> }} />
+      </Title>
+      <ContentWrapper illustrationHeight={illustrationHeight}>
+        <IllustrationWrapper ref={illustrationWrapperRef}>
+          {isLightTheme ? <Heaven /> : <Hell />}
+        </IllustrationWrapper>
+        <Description illustrationHeight={illustrationHeight}>
+          <Trans i18nKey="routes.pageNotFound.description" components={{ b: <b /> }} />
+        </Description>
+      </ContentWrapper>
+      <Button
+        to={currentUser ? routes.HOME : routes.LOGIN}
+        fullWidth
+        withArrow
+        colorVariant={isLightTheme ? 'blue' : 'red'}
+      >
+        {t('routes.pageNotFound.goTo')}
+        {currentUser ? t('routes.pageNotFound.dashboard') : t('routes.pageNotFound.loginPage')}
+      </Button>
+    </CardLayout.Container>
+  );
+};
+
+export default PageNotFound;
diff --git a/packages/client/src/containers/Registration/index.tsx b/packages/client/src/containers/Registration/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 
 import { routes } from '../../constants';
-import { AuthLayout, Form, Link, TextField } from '../../elements';
+import { CardLayout, Form, Link, TextField } from '../../elements';
 import { useAuth, useSnackbar } from '../../hooks';
 import useAnimated from '../../hooks/useAnimated';
 import { EmailIcon, UserIcon } from '../../icons';
@@ -18,10 +18,8 @@ const Registration = () => {
   const history = useHistory();
   const showSnackbar = useSnackbar();
   const [loading, setLoading] = useState(false);
-  const animatedCard = useAnimated<HTMLDivElement>({ type: 'fadeIn' });
-  const { trigger: triggerCardShake } = useAnimated({
+  const { trigger: triggerCardShake, ref: animatedCardRef } = useAnimated<HTMLDivElement>({
     type: 'shake',
-    targets: animatedCard.ref.current,
     opt: { autoTrigger: false },
   });
   const {
@@ -57,7 +55,7 @@ const Registration = () => {
   };
 
   return (
-    <AuthLayout.Container ref={animatedCard.ref}>
+    <CardLayout.Container ref={animatedCardRef}>
       <Title>{t('routes.registration.title')}</Title>
       <Form onSubmit={handleSubmit(onSubmit)} errors={errors} loading={loading} register={register}>
         <TextField
@@ -93,7 +91,7 @@ const Registration = () => {
           }}
           required
         />
-        <AuthLayout.ActionsContainer>
+        <CardLayout.ActionsContainer>
           <StyledButton
             type="submit"
             fullWidth
@@ -109,9 +107,9 @@ const Registration = () => {
               {t('routes.registration.login')}
             </Link>
           </p>
-        </AuthLayout.ActionsContainer>
+        </CardLayout.ActionsContainer>
       </Form>
-    </AuthLayout.Container>
+    </CardLayout.Container>
   );
 };
 

diff --git a/packages/client/src/containers/index.ts b/packages/client/src/containers/index.ts
@@ -1,3 +1,4 @@
 export { default as Dashboard } from './Dashboard';
 export { default as Login } from './Login';
+export { default as PageNotFound } from './PageNotFound';
 export { default as Registration } from './Registration';
diff --git a/packages/client/src/elements/Link/Link.styled.ts b/packages/client/src/elements/Link/Link.styled.ts
@@ -41,10 +41,17 @@ const getHoverLinkColor = ({
   }
 };
 
-const baseLink = ({ theme: { palette } }: BaseLinkProps) => css`
+const baseLink = ({ theme: { palette }, $fullWidth, $asButton }: BaseLinkProps) => css`
   color: ${getLinkColor};
   transition: color 150ms ease-in-out;
 
+  ${$fullWidth && 'width: 100%'};
+
+  ${$asButton &&
+  `
+    text-decoration: none;
+  `};
+
   &:disabled {
     color: ${palette.action.disabled};
     cursor: not-allowed;

diff --git a/packages/client/src/elements/Link/Link.types.d.ts b/packages/client/src/elements/Link/Link.types.d.ts
@@ -9,20 +9,24 @@ export interface GetLinkColorProps {
   $colorVariant?: LinkColorVariant;
 }
 
-export interface LinkProps {
+interface BaseProps {
+  $fullWidth?: boolean;
+  $asButton?: boolean;
+  children: ReactNode;
+}
+
+export interface LinkProps extends BaseProps {
   colorVariant?: LinkColorVariant;
   asOuterLink?: boolean;
   to: string;
-  children: ReactNode;
 }
 
-export interface StyledLinkProps {
+export interface StyledLinkProps extends BaseProps {
   $colorVariant?: LinkColorVariant;
   to: string;
-  children: ReactNode;
 }
 
-export interface BaseLinkProps {
+export interface BaseLinkProps extends BaseProps {
   theme: ITheme;
   $colorVariant?: LinkColorVariant;
 }
diff --git a/packages/client/src/elements/animations/AnimatedLogo/AnimatedLogo.stories.tsx b/packages/client/src/elements/animations/AnimatedLogo/AnimatedLogo.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import React from 'react';
 
-import AnimatedLogo from './index';
+import AnimatedLogo from '.';
 
 export default {
   title: 'Elements/animations/Animated Logo',

diff --git a/packages/client/src/elements/animations/Heaven/Heaven.stories.tsx b/packages/client/src/elements/animations/Heaven/Heaven.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React from 'react';
+import styled from 'styled-components';
+
+import Heaven from '.';
+
+export default {
+  title: 'Elements/animations/Heaven',
+  component: Heaven,
+} as Meta;
+
+const Wrapper = styled.div`
+  width: 500px;
+`;
+
+const Template: Story = (args) => (
+  <Wrapper>
+    <Heaven {...args} />
+  </Wrapper>
+);
+
+export const Default = Template.bind({});