fixes

DefGuard · Aug 4, 2023 · 3de9b6f · 3de9b6f
1 parent 7619a25
commit 3de9b6f
Show file tree

Hide file tree

Showing 13 changed files with 171 additions and 20 deletions.
diff --git a/web/src/pages/enrollment/components/TimeLeft/TimeLeft.tsx b/web/src/pages/enrollment/components/TimeLeft/TimeLeft.tsx
@@ -6,7 +6,11 @@ import { useMemo } from 'react';
 import { useI18nContext } from '../../../../i18n/i18n-react';
 import { useEnrollmentStore } from '../../hooks/store/useEnrollmentStore';
 
-export const TimeLeft = () => {
+type Props = {
+  disableLabel?: boolean;
+};
+
+export const TimeLeft = ({ disableLabel }: Props) => {
   const { LL, locale } = useI18nContext();
   const sessionEnd = useEnrollmentStore((state) => state.sessionEnd);
 
@@ -20,6 +24,10 @@ export const TimeLeft = () => {
     return 'not set';
   }, [locale, sessionEnd]);
 
+  if (disableLabel) {
+    return <span className="time-left solo">{dateDisplay}</span>;
+  }
+
   return (
     <div className="time-left">
       <p>

diff --git a/web/src/pages/enrollment/components/TimeLeft/style.scss b/web/src/pages/enrollment/components/TimeLeft/style.scss
@@ -2,6 +2,7 @@
 
 .time-left {
   display: inline-block;
+
   & > p {
     @include typography(app-body-2);
 
@@ -11,4 +12,10 @@
       color: var(--text-body-tertiary);
     }
   }
+
+  &.solo {
+    @include typography(app-body-2);
+
+    color: var(--text-body-tertiary);
+  }
 }
diff --git a/web/src/pages/enrollment/steps/DataVerificationStep/DataVerificationStep.tsx b/web/src/pages/enrollment/steps/DataVerificationStep/DataVerificationStep.tsx
@@ -1,3 +1,5 @@
+import './style.scss';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect, useMemo, useRef } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
@@ -76,18 +78,18 @@ export const DataVerificationStep = () => {
       <form onSubmit={handleSubmit(handleValidSubmit)}>
         <div className="row">
           <div className="item">
-            <label>{pageLL.form.fields.firstName.label()}</label>
-            <p>PLACEHOLDER</p>
+            <label>{pageLL.form.fields.firstName.label()}:</label>
+            <p>{userInfo?.first_name}</p>
           </div>
           <div className="item">
-            <label>{pageLL.form.fields.lastName.label()}</label>
-            <p>PLACEHOLDER</p>
+            <label>{pageLL.form.fields.lastName.label()}:</label>
+            <p>{userInfo?.last_name}</p>
           </div>
         </div>
         <div className="row">
           <div className="item">
-            <label>{pageLL.form.fields.email.label()}</label>
-            <p>PLACEHOLDER</p>
+            <label>{pageLL.form.fields.email.label()}:</label>
+            <p>{userInfo?.email}</p>
           </div>
           <FormInput
             label={pageLL.form.fields.phone.label()}

diff --git a/web/src/pages/enrollment/steps/DataVerificationStep/style.scss b/web/src/pages/enrollment/steps/DataVerificationStep/style.scss
@@ -0,0 +1,60 @@
+@use '@scssutils' as *;
+
+#enrollment-data-verification-card {
+  padding: 0 20px;
+
+  @include media-breakpoint-up(lg) {
+    padding: 50px 40px;
+  }
+
+  & > h3 {
+    margin-bottom: 15px;
+  }
+
+  & > .message-box {
+    margin-bottom: 15px;
+  }
+
+  & > form {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 25px 0;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    row-gap: 36px;
+
+    & > .row {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: flex-start;
+      align-content: flex-start;
+      justify-content: space-between;
+      width: 100%;
+      row-gap: 36px;
+
+      & > * {
+        width: 100%;
+        max-width: 250px;
+      }
+
+      & > .item {
+        & > label {
+          user-select: none;
+          display: block;
+          @include typography(app-wizard-1);
+
+          color: var(--text-body-tertiary);
+          margin-bottom: 8px;
+          padding: 0;
+        }
+        & > p {
+          @include typography(app-input);
+
+          color: var(--text-body-primary);
+        }
+      }
+    }
+  }
+}
diff --git a/...es/enrollment/steps/DeviceStep/components/ConfigureDeviceCard/components/CreateDevice.tsx b/...es/enrollment/steps/DeviceStep/components/ConfigureDeviceCard/components/CreateDevice.tsx
@@ -142,6 +142,7 @@ export const CreateDevice = () => {
           label={cardLL.create.form.fields.public.label()}
           controller={{ control, name: 'public' }}
           disabled={configTypeValue === ConfigurationType.AUTO}
+          required={configTypeValue === ConfigurationType.MANUAL}
         />
         <Button
           type="submit"

diff --git a/web/src/pages/enrollment/steps/DeviceStep/components/ConfigureDeviceCard/style.scss b/web/src/pages/enrollment/steps/DeviceStep/components/ConfigureDeviceCard/style.scss
@@ -11,5 +11,9 @@
     .toggle {
       margin-bottom: 25px;
     }
+
+    & > .btn {
+      width: 100%;
+    }
   }
 }
diff --git a/web/src/pages/enrollment/steps/PasswordStep/PasswordStep.tsx b/web/src/pages/enrollment/steps/PasswordStep/PasswordStep.tsx
@@ -2,6 +2,7 @@ import './style.scss';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import { useEffect, useMemo, useRef } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -64,8 +65,8 @@ export const PasswordStep = () => {
     onSuccess: () => {
       next();
     },
-    onError: (err) => {
-      console.error(err);
+    onError: (err: AxiosError) => {
+      console.error(err.message);
     },
   });
 
@@ -97,6 +98,9 @@ export const PasswordStep = () => {
           label={pageLL.form.fields.password.label()}
           controller={{ control, name: 'password' }}
           type="password"
+          floatingErrors={{
+            title: LL.form.errors.password.floatingTitle(),
+          }}
         />
         <FormInput
           label={pageLL.form.fields.repeat.label()}

diff --git a/web/src/pages/enrollment/steps/PasswordStep/style.scss b/web/src/pages/enrollment/steps/PasswordStep/style.scss
@@ -0,0 +1,22 @@
+@use '@scssutils' as *;
+
+#enrollment-password-card {
+  width: 100%;
+  max-width: 650px;
+  padding: 50px 40px;
+
+  & > h3 {
+    margin-bottom: 40px;
+  }
+
+  & > form {
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    row-gap: 15px;
+
+    & > * {
+      width: 100%;
+    }
+  }
+}
diff --git a/web/src/pages/sessionTimeout/SessionTimeoutPage.tsx b/web/src/pages/sessionTimeout/SessionTimeoutPage.tsx
@@ -1,5 +1,6 @@
 import './style.scss';
 
+import { useNavigate } from 'react-router-dom';
 import { useBreakpoint } from 'use-breakpoint';
 
 import { LogoContainer } from '../../components/LogoContainer/LogoContainer';
@@ -17,10 +18,13 @@ import {
 import { Card } from '../../shared/components/layout/Card/Card';
 import { PageContainer } from '../../shared/components/layout/PageContainer/PageContainer';
 import { deviceBreakpoints } from '../../shared/constants';
+import { routes } from '../../shared/routes';
 
 export const SessionTimeoutPage = () => {
   const { breakpoint } = useBreakpoint(deviceBreakpoints);
   const { LL } = useI18nContext();
+  const navigate = useNavigate();
+
   return (
     <PageContainer id="session-timeout">
       <LogoContainer />
@@ -39,6 +43,7 @@ export const SessionTimeoutPage = () => {
             />
           }
           text={LL.pages.sessionTimeout.controls.back()}
+          onClick={() => navigate(routes.token, { replace: true })}
         />
         <Button
           size={ButtonSize.LARGE}

diff --git a/web/src/pages/token/components/TokenCard.tsx b/web/src/pages/token/components/TokenCard.tsx
@@ -114,6 +114,7 @@ export const TokenCard = () => {
         />
         <div className="controls">
           <Button
+            type="submit"
             loading={isLoading}
             size={ButtonSize.LARGE}
             styleVariant={ButtonStyleVariant.PRIMARY}

diff --git a/web/src/shared/components/layout/ActionButton/style.scss b/web/src/shared/components/layout/ActionButton/style.scss
@@ -27,6 +27,17 @@
     }
   }
 
+  &.variant-qrcode {
+    & > svg {
+      & > path {
+        &:nth-of-type(1) {
+          fill: none;
+          stroke: var(--surface-icon-primary);
+        }
+      }
+    }
+  }
+
   &.active {
     background-color: var(--surface-main-primary);
 
@@ -35,6 +46,17 @@
         fill: var(--surface-icon-secondary);
       }
     }
+
+    &.variant-qrcode {
+      & > svg {
+        & > path {
+          &:nth-of-type(1) {
+            fill: none;
+            stroke: var(--surface-icon-secondary);
+          }
+        }
+      }
+    }
   }
 
   &.disabled {

diff --git a/web/src/shared/components/layout/Button/Button.tsx b/web/src/shared/components/layout/Button/Button.tsx
@@ -2,7 +2,7 @@ import './style.scss';
 
 import classNames from 'classnames';
 import { isUndefined } from 'lodash-es';
-import React, { ButtonHTMLAttributes, useMemo, useState } from 'react';
+import React, { ButtonHTMLAttributes, useEffect, useMemo, useState } from 'react';
 
 import { LoaderSpinner } from '../LoaderSpinner/LoaderSpinner';
 import { ButtonSize, ButtonStyleVariant } from './types';
@@ -77,6 +77,11 @@ export const Button = ({
     return res;
   }, [icon, loading, rightIcon, size, text]);
 
+  // reset hover state when disabled is changed bcs it can get stuck at hovered until mouse dont hover the element again
+  useEffect(() => {
+    setHovered(false);
+  }, [disabled, loading]);
+
   return (
     <button
       style={getButtonStyle}

diff --git a/web/src/shared/components/layout/Select/components/SelectOptionRow/SelectOptionRow.tsx b/web/src/shared/components/layout/Select/components/SelectOptionRow/SelectOptionRow.tsx
@@ -2,6 +2,8 @@ import classNames from 'classnames';
 import { HTMLMotionProps, motion } from 'framer-motion';
 import { useMemo, useState } from 'react';
 
+import { useTheme } from '../../../hooks/theme/useTheme';
+
 type Props = HTMLMotionProps<'button'> & {
   label?: string;
   selected?: boolean;
@@ -16,7 +18,10 @@ export const SelectOptionRow = ({
   createOption,
   ...rest
 }: Props) => {
+  const { colors } = useTheme();
+
   const [hovered, setHovered] = useState(false);
+
   const cn = useMemo(
     () =>
       classNames('select-option', className, {
@@ -29,22 +34,27 @@ export const SelectOptionRow = ({
 
   const getAnimate = useMemo(() => {
     const res = {
-      backgroundColor: ColorsRGB.White,
-      color: ColorsRGB.GrayDark,
+      color: colors.textBodySecondary,
     };
-    if (hovered) {
-      res.backgroundColor = ColorsRGB.BgLight;
-    }
+
     if (createOption) {
-      res.color = ColorsRGB.Primary;
+      res.color = colors.surfaceMainPrimary;
       return res;
     }
-    if (selected) {
-      res.backgroundColor = ColorsRGB.BgLight;
-      res.color = ColorsRGB.TextMain;
+
+    if (hovered || selected) {
+      res.color = colors.textBodyPrimary;
     }
+
     return res;
-  }, [createOption, hovered, selected]);
+  }, [
+    colors.surfaceMainPrimary,
+    colors.textBodyPrimary,
+    colors.textBodySecondary,
+    createOption,
+    hovered,
+    selected,
+  ]);
 
   return (
     <motion.button