Redesign auth modal: text, inputs

vladislav0sidorov · Nov 4, 2023 · bb2d0be · bb2d0be
1 parent 312e5ed
commit bb2d0be
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 64 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/json-server/db.json b/json-server/db.json
@@ -148,7 +148,7 @@
         "isAppRedesigned": true
       },
       "jsonSettings": {
-        "theme": "app_dark_theme",
+        "theme": "app_light_theme",
         "isArticlePageWasOpen": true
       },
       "avatar": "https://sun9-60.userapi.com/impg/eqo5sYxr_jyw_yWO9_pKJRMkx8WVwVENfJrecQ/1zVSkEZs5NM.jpg?size=1620x2160&quality=95&sign=73cab6427b2934395f04d96835eb3720&type=album"

diff --git a/...tities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.tsx b/...tities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.tsx
@@ -98,7 +98,7 @@ export const ArticleListItemRedesigned: FC<ArticleListItemProps> = React.memo((p
       to={getRouteArticleDetails(article.id)}
       className={classNames(cls.ArticleListItem, {}, [className, cls[view]])}
     >
-      <Card padding="0" className={cls.card} borderRadius="round">
+      <Card padding="0" className={cls.card}>
         {image}
         <VStack className={cls.info} gap="4">
           <Text title={article.title} className={cls.title} />

diff --git a/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx b/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx
@@ -13,10 +13,14 @@ import cls from './LoginForm.module.scss'
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { DynamicModuleLoader, ReducersList } from '@/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
-import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
-import { Input } from '@/shared/ui/deprecated/Input'
+import { Button as ButtonDeprecated, ButtonVariables } from '@/shared/ui/deprecated/Button'
+import { Input as InputDeprecated } from '@/shared/ui/deprecated/Input'
 import { InputVariable } from '@/shared/ui/deprecated/Input/ui/Input'
-import { Text, TextTheme } from '@/shared/ui/deprecated/Text/ui/Text'
+import { Text as TextDeprecated, TextTheme } from '@/shared/ui/deprecated/Text/ui/Text'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { Text } from '@/shared/ui/redesigned/Text'
+import { Input } from '@/shared/ui/redesigned/Input'
+import { Button } from '@/shared/ui/redesigned/Button'
 
 export interface LoginFormProps {
   className?: string
@@ -57,32 +61,67 @@ const LoginForm = React.memo((props: LoginFormProps) => {
       onSuccess()
     }
   }, [dispatch, username, password, onSuccess])
+
+  const deprecatedContent = (
+    <div className={classNames(cls.LoginForm, {}, [className])}>
+      <TextDeprecated title={t('Форма авторизации')} theme={TextTheme.SECONDORY} />
+      {error === 'ERROR' && <TextDeprecated text={t('Вы ввели невереный логин или пароль')} theme={TextTheme.ERROR} />}
+      <InputDeprecated
+        value={username}
+        theme={InputVariable.PRIMARY}
+        onChange={onChangeUsername}
+        autoFocus
+        placeholder={t('Введите имя пользователя')}
+        className={cls.input}
+        type="text"
+      />
+      <InputDeprecated
+        value={password}
+        theme={InputVariable.PRIMARY}
+        onChange={onChangePassword}
+        placeholder={t('Введите пароль')}
+        className={cls.input}
+        type="text"
+      />
+      <ButtonDeprecated
+        disabled={isLoading}
+        onClick={onLoginClick}
+        theme={ButtonVariables.OUTLINE}
+        className={cls.loginBtn}
+      >
+        {t('Войти')}
+      </ButtonDeprecated>
+    </div>
+  )
+
+  const redesignedContent = (
+    <div className={classNames(cls.LoginForm, {}, [className])}>
+      <Text title={t('Форма авторизации')} />
+      {error === 'ERROR' && <Text text={t('Вы ввели невереный логин или пароль')} variant="error" />}
+      <Input
+        value={username}
+        onChange={onChangeUsername}
+        autoFocus
+        placeholder={t('Введите имя пользователя')}
+        className={cls.input}
+        type="text"
+      />
+      <Input
+        value={password}
+        onChange={onChangePassword}
+        placeholder={t('Введите пароль')}
+        className={cls.input}
+        type="text"
+      />
+      <Button disabled={isLoading} onClick={onLoginClick} variant="outline" className={cls.loginBtn}>
+        {t('Войти')}
+      </Button>
+    </div>
+  )
+
   return (
     <DynamicModuleLoader removeAfterUnmount={false} reducers={initialReducers}>
-      <div className={classNames(cls.LoginForm, {}, [className])}>
-        <Text title={t('Форма авторизации')} theme={TextTheme.SECONDORY} />
-        {error === 'ERROR' && <Text text={t('Вы ввели невереный логин или пароль')} theme={TextTheme.ERROR} />}
-        <Input
-          value={username}
-          theme={InputVariable.PRIMARY}
-          onChange={onChangeUsername}
-          autoFocus
-          placeholder={t('Введите имя пользователя')}
-          className={cls.input}
-          type="text"
-        />
-        <Input
-          value={password}
-          theme={InputVariable.PRIMARY}
-          onChange={onChangePassword}
-          placeholder={t('Введите пароль')}
-          className={cls.input}
-          type="text"
-        />
-        <Button disabled={isLoading} onClick={onLoginClick} theme={ButtonVariables.OUTLINE} className={cls.loginBtn}>
-          {t('Войти')}
-        </Button>
-      </div>
+      <ToggleFeaturesComponent featureName="isAppRedesigned" on={redesignedContent} off={deprecatedContent} />
     </DynamicModuleLoader>
   )
 })

diff --git a/src/features/EditableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx b/src/features/EditableProfileCard/ui/EditableProfileCard/EditableProfileCard.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import { useTranslation } from 'react-i18next'
 import React, { memo } from 'react'
 import { useSelector } from 'react-redux'
@@ -18,7 +19,10 @@ import { Country } from '@/entities/Country'
 import { useInitialEffect } from '@/shared/lib/hooks/useInitialEffect/useInitialEffect'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { ProfileCard } from '@/entities/Profile'
-import { Text, TextTheme } from '@/shared/ui/deprecated/Text/ui/Text'
+import { Text as TextDeprecated, TextTheme } from '@/shared/ui/deprecated/Text/ui/Text'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { Text } from '@/shared/ui/redesigned/Text'
+import { Card } from '@/shared/ui/redesigned/Card'
 
 // import cls from './EditableProfileCard.module.scss';
 
@@ -124,15 +128,39 @@ export const EditableProfileCard = memo((props: EditableProfileCardProps) => {
   return (
     <DynamicModuleLoader reducers={reducers} removeAfterUnmount>
       <EditableProfileCardHeader />
-      {validateErrors?.length &&
-        validateErrors?.map((error) => (
-          <Text
-            data-testid="EditableProfileCard.Error"
-            key={error}
-            theme={TextTheme.ERROR}
-            text={validateErrorTranslates[error]}
-          />
-        ))}
+      <ToggleFeaturesComponent
+        featureName="isAppRedesigned"
+        on={
+          <>
+            {validateErrors?.length && (
+              <Card max padding="24">
+                {validateErrors?.map((error) => (
+                  <Text
+                    data-testid="EditableProfileCard.Error"
+                    key={error}
+                    variant="error"
+                    text={validateErrorTranslates[error]}
+                  />
+                ))}
+              </Card>
+            )}
+          </>
+        }
+        off={
+          <>
+            {validateErrors?.length &&
+              validateErrors?.map((error) => (
+                <TextDeprecated
+                  data-testid="EditableProfileCard.Error"
+                  key={error}
+                  theme={TextTheme.ERROR}
+                  text={validateErrorTranslates[error]}
+                />
+              ))}
+          </>
+        }
+      />
+      {}
       <ProfileCard
         onChangeFirstname={onChangeFirstname}
         onChangeLastname={onChangeLastname}

diff --git a/src/features/EditableProfileCard/ui/EditableProfileCardHeader/EditableProfileCardHeader.tsx b/src/features/EditableProfileCard/ui/EditableProfileCardHeader/EditableProfileCardHeader.tsx
@@ -11,8 +11,12 @@ import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { getUserAuthData } from '@/entities/User'
 import { HStack } from '@/shared/ui/redesigned/Stack'
-import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
-import { Text } from '@/shared/ui/deprecated/Text'
+import { Button as ButtonDeprecated, ButtonVariables } from '@/shared/ui/deprecated/Button'
+import { Text as TextDeprecated } from '@/shared/ui/deprecated/Text'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { Text } from '@/shared/ui/redesigned/Text'
+import { Button } from '@/shared/ui/redesigned/Button'
+import { Card } from '@/shared/ui/redesigned/Card'
 
 interface EditableProfileCardHeaderProps {
   className?: string
@@ -40,35 +44,67 @@ export const EditableProfileCardHeader: FC<EditableProfileCardHeaderProps> = Rea
     dispatch(updateProfileData())
   }, [dispatch])
 
-  return (
+  const deprecatedContent = (
     <HStack max justify="between" className={classNames('', {}, [className])}>
-      <Text title={t('Профиль')} />
+      <TextDeprecated title={t('Профиль')} />
       {canEdit && (
         <div>
           {readonly ? (
-            <Button data-testid="EditableProfileCardHeader.EditButton" theme={ButtonVariables.OUTLINE} onClick={onEdit}>
+            <ButtonDeprecated
+              data-testid="EditableProfileCardHeader.EditButton"
+              theme={ButtonVariables.OUTLINE}
+              onClick={onEdit}
+            >
               {t('Редактировать')}
-            </Button>
+            </ButtonDeprecated>
           ) : (
             <HStack gap="16">
-              <Button
+              <ButtonDeprecated
                 data-testid="EditableProfileCardHeader.CancelButton"
                 theme={ButtonVariables.OUTLINE_RED}
                 onClick={onCancelEdit}
               >
                 {t('Отменить')}
-              </Button>
-              <Button
+              </ButtonDeprecated>
+              <ButtonDeprecated
                 data-testid="EditableProfileCardHeader.SaveButton"
                 theme={ButtonVariables.OUTLINE}
                 onClick={onSave}
               >
                 {t('Сохранить')}
-              </Button>
+              </ButtonDeprecated>
             </HStack>
           )}
         </div>
       )}
     </HStack>
   )
+
+  const redesignedContent = (
+    <Card max padding="24">
+      <HStack max justify="between" className={classNames('', {}, [className])}>
+        <Text title={t('Профиль')} />
+        {canEdit && (
+          <div>
+            {readonly ? (
+              <Button data-testid="EditableProfileCardHeader.EditButton" variant="outline" onClick={onEdit}>
+                {t('Редактировать')}
+              </Button>
+            ) : (
+              <HStack gap="16">
+                <Button data-testid="EditableProfileCardHeader.CancelButton" variant="red" onClick={onCancelEdit}>
+                  {t('Отменить')}
+                </Button>
+                <Button data-testid="EditableProfileCardHeader.SaveButton" variant="outline" onClick={onSave}>
+                  {t('Сохранить')}
+                </Button>
+              </HStack>
+            )}
+          </div>
+        )}
+      </HStack>
+    </Card>
+  )
+
+  return <ToggleFeaturesComponent featureName="isAppRedesigned" on={redesignedContent} off={deprecatedContent} />
 })
diff --git a/src/widgets/Navbar/ui/Navbar.tsx b/src/widgets/Navbar/ui/Navbar.tsx
@@ -10,10 +10,11 @@ import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { NotificationButton } from '@/features/NotificationButton'
 import { AvatarDropdown } from '@/features/AvatarDropdown'
 import { getRouteArticleCreate } from '@/shared/const/router'
-import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { ToggleFeaturesComponent, toggleFeatures } from '@/shared/lib/features'
 import { HStack } from '@/shared/ui/redesigned/Stack'
 import { AppLink, ApplinkTheme } from '@/shared/ui/deprecated/AppLink'
-import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
+import { Button as ButtonDeprecated, ButtonVariables } from '@/shared/ui/deprecated/Button'
+import { Button } from '@/shared/ui/redesigned/Button'
 
 interface NavbarProps {
   className?: string
@@ -34,8 +35,10 @@ export const Navbar: React.FC<NavbarProps> = memo((props) => {
     setIsAuthModal(true)
   }, [])
 
+  const mainClass = toggleFeatures({ name: 'isAppRedesigned', on: () => cls.NavbarRedesigned, off: () => cls.Navbar })
+
   const deprecatedContent = (
-    <nav className={classNames(cls.Navbar, {}, [className])}>
+    <nav className={classNames(mainClass, {}, [className])}>
       {authData ? (
         <AppLink theme={ApplinkTheme.THIRD} to={getRouteArticleCreate()}>
           {t('Создать статью')}
@@ -48,25 +51,25 @@ export const Navbar: React.FC<NavbarProps> = memo((props) => {
             <AvatarDropdown />
           </>
         ) : (
-          <Button onClick={onShowModal} theme={ButtonVariables.CLEAR_INVERTED}>
+          <ButtonDeprecated onClick={onShowModal} theme={ButtonVariables.CLEAR_INVERTED}>
             {t('Войти')}
-          </Button>
+          </ButtonDeprecated>
         )}
       </HStack>
       {isAuthModal && <LoginModal isOpen={isAuthModal} onClose={onClose} />}
     </nav>
   )
 
   const redesignedContent = (
-    <nav className={classNames(cls.NavbarRedesigned, {}, [className])}>
+    <nav className={classNames(mainClass, {}, [className])}>
       <HStack gap="16" className={cls.actions}>
         {authData ? (
           <>
             <NotificationButton />
             <AvatarDropdown />
           </>
         ) : (
-          <Button onClick={onShowModal} theme={ButtonVariables.CLEAR_INVERTED}>
+          <Button onClick={onShowModal} variant="clear">
             {t('Войти')}
           </Button>
         )}