feat: google button

Shiyan7 · Oct 14, 2023 · 9f15a0b · 9f15a0b
1 parent 24cd944
commit 9f15a0b
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 13 deletions.
diff --git a/public/sprite/common.svg b/public/sprite/common.svg
diff --git a/src/shared/ui/icon/assets/common/google.svg b/src/shared/ui/icon/assets/common/google.svg
diff --git a/src/shared/ui/icon/sprite.h.ts b/src/shared/ui/icon/sprite.h.ts
@@ -11,6 +11,7 @@ export interface SpritesMap {
     | 'eye-closed'
     | 'eye'
     | 'filters'
+    | 'google'
     | 'history'
     | 'link'
     | 'play'
@@ -37,6 +38,7 @@ export const SPRITES_META: { [K in keyof SpritesMap]: SpritesMap[K][] } = {
     'eye-closed',
     'eye',
     'filters',
+    'google',
     'history',
     'link',
     'play',

diff --git a/src/widgets/auth/config/index.ts b/src/widgets/auth/config/index.ts
@@ -0,0 +1 @@
+export * from './transition-delays';
diff --git a/src/widgets/auth/config/transition-delays.ts b/src/widgets/auth/config/transition-delays.ts
@@ -0,0 +1,14 @@
+export const enum TransitionDelays {
+  GoogleLogo = 130,
+  EmailSeparator = 140,
+  EmailInput = 160,
+  ContinueButton = 200,
+  PolicyText = 230,
+  EmailInMessage = 80,
+  PasswordForm = 250,
+  PasswordMessage = 300,
+  PasswordInMessage = 300,
+  PasswordInput = 350,
+  PasswordButton = 450,
+  SuccessMessage = 600,
+}
diff --git a/src/widgets/auth/ui/email-form/styles.module.scss b/src/widgets/auth/ui/email-form/styles.module.scss
@@ -8,7 +8,7 @@
   margin-top: 25px;
 
   @media (max-width: 576px) {
-    margin-top: 30px;
+    margin-top: 22px;
     padding: 0;
     max-width: 90%;
   }
@@ -51,3 +51,45 @@
   transition: opacity var(--duration);
   margin-top: 2px;
 }
+
+.top {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.logo {
+  display: block;
+  width: 45px;
+  height: 45px;
+  margin-bottom: 15px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  @media (max-width: 576px) {
+    width: 42px;
+    height: 42px;
+    margin-bottom: 12px;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.sep {
+  display: block;
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: 300;
+  color: rgba(#fff, 0.5);
+  margin-bottom: 30px;
+
+  @media (max-width: 576px) {
+    margin-bottom: 22px;
+  }
+}
diff --git a/src/widgets/auth/ui/email-form/ui.tsx b/src/widgets/auth/ui/email-form/ui.tsx
@@ -1,10 +1,12 @@
+import clsx from 'clsx';
 import { useEvent, useStore } from 'effector-react';
 import { FormEventHandler, useEffect, useRef } from 'react';
 import { authModel } from 'widgets/auth';
 import { paths } from 'shared/routing';
-import { Input } from 'shared/ui';
+import { Icon, Input } from 'shared/ui';
 import { Button } from 'shared/ui/button';
 import { Link } from 'shared/ui/link';
+import { TransitionDelays } from '../../config';
 import { Transition } from '../transition';
 import styles from './styles.module.scss';
 
@@ -26,8 +28,18 @@ export const EmailForm = () => {
 
   return (
     <div className={styles.content}>
+      <div className={styles.top}>
+        <Transition delay={TransitionDelays.GoogleLogo}>
+          <button type="button" className={clsx('btn-reset', styles.logo)}>
+            <Icon type="common" name="google" />
+          </button>
+        </Transition>
+        <Transition delay={TransitionDelays.EmailSeparator}>
+          <span className={styles.sep}>или</span>
+        </Transition>
+      </div>
       <form onSubmit={handleSubmitForm} className={styles.form}>
-        <Transition offset={20} delay={130}>
+        <Transition offset={20} delay={TransitionDelays.EmailInput}>
           <Input
             pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
             onChange={(e) => emailChanged(e.target.value)}
@@ -38,13 +50,13 @@ export const EmailForm = () => {
             placeholder="Введите email"
           />
         </Transition>
-        <Transition offset={40} delay={150}>
+        <Transition offset={40} delay={TransitionDelays.ContinueButton}>
           <Button className={styles.btn} disabled={!email} loading={pending} type="submit">
             Продолжить
           </Button>
         </Transition>
       </form>
-      <Transition offset={40} delay={185}>
+      <Transition offset={40} delay={TransitionDelays.PolicyText}>
         <div className={styles.policy}>
           <span className={styles.caption}>Нажимая «Продолжить», я соглашаюсь</span>
           <span className={styles.caption}>

diff --git a/src/widgets/auth/ui/password-form/ui.tsx b/src/widgets/auth/ui/password-form/ui.tsx
@@ -4,6 +4,7 @@ import { authModel } from 'widgets/auth';
 import { sessionModel } from 'entities/session';
 import { Input } from 'shared/ui';
 import { Button } from 'shared/ui/button';
+import { TransitionDelays } from '../../config';
 import { Message } from '../message';
 import { Transition } from '../transition';
 import { maskString } from './lib';
@@ -33,19 +34,24 @@ export const PasswordForm = () => {
 
   return (
     <>
-      <Transition offset={30} delay={80}>
+      <Transition offset={30} delay={TransitionDelays.EmailInMessage}>
         <Message position="right" isEditable onEdit={editClicked} title={email} />
       </Transition>
-      <Transition offset={30} delay={300}>
+      <Transition offset={30} delay={TransitionDelays.PasswordMessage}>
         <Message
           title={isNewUser ? 'Придумайте пароль для входа' : 'Введите пароль, чтобы войти'}
           description={isNewUser ? 'Установите пароль для входа, минимум 6 символов' : ''}
         />
       </Transition>
-      <Transition animation="bounceOutUp" startIn={isAuthorizedState} offset={-30} delay={250}>
+      <Transition
+        animation="bounceOutUp"
+        startIn={isAuthorizedState}
+        offset={-30}
+        delay={TransitionDelays.PasswordForm}
+      >
         <form onSubmit={handleSubmitForm} className={styles.form}>
           <div className={styles.inputs}>
-            <Transition offset={20} delay={350}>
+            <Transition offset={20} delay={TransitionDelays.PasswordInput}>
               <Input
                 togglePassword
                 minLength={6}
@@ -58,7 +64,7 @@ export const PasswordForm = () => {
               />
             </Transition>
           </div>
-          <Transition offset={40} delay={400}>
+          <Transition offset={20} delay={TransitionDelays.PasswordButton}>
             <Button loading={pending} className={styles.btn} type="submit">
               {isNewUser ? 'Зарегистрироваться' : 'Войти'}
             </Button>
@@ -67,10 +73,10 @@ export const PasswordForm = () => {
       </Transition>
       {isAuthorizedState && (
         <>
-          <Transition offset={30} delay={300}>
+          <Transition offset={30} delay={TransitionDelays.PasswordInMessage}>
             <Message className={styles.message} position="right" title={maskPassword} />
           </Transition>
-          <Transition offset={30} delay={600}>
+          <Transition offset={30} delay={TransitionDelays.SuccessMessage}>
             <Message isSuccess title={isNewUser ? 'Успешная регистрация' : 'Вы успешно вошли'} />
           </Transition>
         </>