feat(23UG-19): добавляет раздел со сменой пароля #36

MakhovRoman · 2023-03-21T14:44:36Z

Какую задачу решаем

добавлен раздел со сменой пароля
добавлена валидация полей

vercel · 2023-03-21T14:44:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
uno-game-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 3, 2023 3:55am

cap-Bernardito

Проверки - такая форма, либо другая форма, такая кнопка, либо другая кнопка - это нездорово. По сути выглядит, как будто 2 страницы в одну объединены.
Ну и визуально на сайте похоже на смену страницы. По этим причинам предлагаю вынести эту историю в отдельный роут.

EAbashin · 2023-03-21T16:08:06Z

Ещё, как вариант, можно вынести в отдельный компонент, сделать в виде модального окна и вызывать его при клике по кнопке. Модальное окно будет просто загораживать контент профиля. В общем, сделать как предложил Алексей, только без роута.
Плюсы такого решения: после смены пароля логично будет возвращаться на страницу профиля и в этом случае не надо будет её отрисовывать заново и отправлять запрос за аватаркой.

cap-Bernardito · 2023-03-21T17:08:19Z

Плюсы такого решения: после смены пароля логично будет возвращаться на страницу профиля и в этом случае не надо будет её отрисовывать заново и отправлять запрос за аватаркой.

Но только он не должен возвращаться сразу. Нужно будет дождаться ответа, показать оповещение Ок или не ОК все прошло (т.к. должно быть понятно сменился пароль или нет). Ну и по крестику наверное закрываться... или по таймауту после отображения оповещения.

MakhovRoman · 2023-03-22T11:08:21Z

Хорошо, я тогда вынесу все в отдельный компонент и модалкой реализую на странице

cap-Bernardito · 2023-03-25T04:04:54Z

packages/client/src/components/changePassword/ChangePassword.tsx

+import { UpdateUserPassword } from "../../services/api/types";
+import {
+  ERROR_MESSAGE,
+  InputNames,
+  REQUIRED_MESSAGE,
+  validationTemplate,
+} from "../../utils/validation/validation";


import { UpdateUserPassword } from "services/api/types"; import { ERROR_MESSAGE, InputNames, REQUIRED_MESSAGE, validationTemplate, } from "utils/validation/validation";

cap-Bernardito · 2023-03-25T04:15:58Z

packages/client/src/components/changePassword/ChangePassword.module.scss

+.changePassword {
+  position: absolute;
+  top: -6rem;
+  left: 0;


А зачем верстать свою модалку, когда у нас библиотека компонентов подключена и там полно их?

Ну и если уж на то пошло, то 100% модальное окно должно быть отдельным компонентом, получающим содержимое в качестве чилдренов... А не монолитом с формой. Завтра еще одна форма в модалке понадобится - как ты будешь ее реализовывать?

cap-Bernardito · 2023-03-25T04:18:50Z

packages/client/src/components/changePassword/ChangePassword.tsx

+
+export const ChangePassword: React.FC<Props> = (props: Props) => {
+  const updatedUserPassword = {


В качестве названия компонента обычно выбирают существительное.

cap-Bernardito · 2023-03-25T04:23:20Z

packages/client/src/components/changePassword/ChangePassword.tsx

+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm({
+    defaultValues: {
+      ...updatedUserPassword,
+    },
+    mode: "onChange",
+  });


А для чего тут переменная updatedUserPassword, если она используется в одном месте сразу после своего объявления?
Почему не написать так?

const { control, handleSubmit, formState: { errors, isValid }, } = useForm({ defaultValues: { oldPassword: "", newPassword: "", confirmPassword: "", }, mode: "onChange", });

cap-Bernardito · 2023-03-25T04:26:11Z

packages/client/src/components/changePassword/ChangePassword.tsx

+
+          {isPasswordSend && (
+            <Box mt={2} textAlign={"center"}>
+              Пароль успешно изменен
+            </Box>
+          )}
+        </form>


У нас во всех формах уведомления о статусе запроса выводятся между полями и кнопкой. Давай так же сделаем, чтобы единообразно было.

cap-Bernardito · 2023-03-25T04:28:28Z

packages/client/src/pages/ProfilePage/ProfilePage.tsx

@@ -11,6 +12,7 @@ import { authSelect } from "services/slices/auth-slice";
 import { userSelect, userSlice, userThunks } from "services/slices/user-slice";
 import { InputNames, validationTemplate } from "utils/validation/validation";

+import { ChangePassword } from "../../components/changePassword/ChangePassword";


import { ChangePassword } from "components/changePassword/ChangePassword";

cap-Bernardito · 2023-03-25T04:30:16Z

packages/client/src/pages/ProfilePage/ProfilePage.tsx

+  const updatedUserPassword = {
+    oldPassword: "",
+    newPassword: "",
+    confirmPassword: "",
+  };
+


Страницу профиля нужно вернуть в исходный вид. На ней только кнопка вызова модалки должна поменяться.

cap-Bernardito · 2023-03-25T04:30:57Z

packages/client/src/pages/ProfilePage/ProfilePage.tsx

+            onClick={onOpenFormChangePassword}
+          >
+            "Сменить пароль"
          </Typography>
        </Link>


В "Сменить пароль" не нужны кавычки

cap-Bernardito · 2023-03-25T04:35:27Z

packages/client/src/services/api/types.ts

+export type UpdateUserPassword = {
+  oldPassword: string;
+  newPassword: string;
+};
+


С названием опять же беда. Пример названия можно посмотреть выше, можно посмотреть ниже в этом же файле.

cap-Bernardito · 2023-03-31T10:50:03Z

packages/client/src/components/modal-form/ModalForm.tsx

+        }}
+      >
+        {props.children}
+      </DialogContent>


Думаю, имеет смысл вынести ModalForm в отдельный компонент и сменить название на Modal, т.к. он не имеет никакого отношения к форме (что ему в чилдрены подашь, то и отрисуется)

cap-Bernardito · 2023-03-31T10:54:21Z

packages/client/src/components/modal-form/password-change-form/PasswordChangeForm.tsx

+
+      {isPasswordSend && (
+        <Box
+          textAlign={"center"}
+          sx={{
+            marginTop: 3,
+          }}
+        >
+          Пароль успешно изменен
+        </Box>
+      )}
+


Если это только для демонстрации, то ок, но вообще так не верно делать. Сам факт отправки пароля не говорит о том, что он успешно изменен. Может прийти сообщение с ошибкой и его надо будет тоже показать в таком случае.
Когда будешь приделывать отправку запроса, учти этот момент. И если ошибка будет, то не должно окно по таймауту закрываться.

cap-Bernardito · 2023-03-31T10:58:36Z

packages/client/src/pages/ProfilePage/ProfilePage.tsx

+
+        <ModalForm
+          onClick={onOpenFormChangePassword}
+          isOpen={isChangePassword}
+          setIsOpen={setIsChangePassword}
+        >
+          <PasswordChangeForm
+            className={styles.profile__form}
+            isOpen={isChangePassword}
+            setIsOpen={setIsChangePassword}
+          />
+        </ModalForm>
      </Container>


Ну, о чем выше и писал - это 2 разных компонента должны быть.

…е об успешной отправке и закрытие по таймауту

…мления

…зовал его непосредственно на странице профиля

MakhovRoman requested review from cap-Bernardito, AleksandrMenshchikov, KozlovAleksandr and EAbashin March 21, 2023 14:44

MakhovRoman changed the base branch from main to dev March 21, 2023 14:44

cap-Bernardito requested changes Mar 21, 2023

View reviewed changes

vercel bot deployed to Preview March 25, 2023 03:38 View deployment

cap-Bernardito requested changes Mar 25, 2023

View reviewed changes

vercel bot deployed to Preview March 26, 2023 16:35 View deployment

EAbashin force-pushed the dev-app-changePassword branch from 010297d to 5bf2036 Compare March 26, 2023 17:44

KozlovAleksandr approved these changes Mar 26, 2023

View reviewed changes

MakhovRoman force-pushed the dev-app-changePassword branch from 5bf2036 to b166ad7 Compare March 31, 2023 10:21

vercel bot deployed to Preview March 31, 2023 10:23 View deployment

cap-Bernardito reviewed Mar 31, 2023

View reviewed changes

vercel bot deployed to Preview April 2, 2023 14:58 View deployment

AleksandrMenshchikov approved these changes Apr 3, 2023

View reviewed changes

MakhovRoman added 6 commits April 3, 2023 06:51

feat: добавляет раздел со сменой пароля

7c5e17e

fix: блок смены пароля вынесен в модальное окно, добавлено уведомлени…

12f640f

…е об успешной отправке и закрытие по таймауту

style: откорректирован фон модального окна с учетом светлой темы офор…

fffe68d

…мления

fix: внесены изменения по результатам review

6eb7a42

fix: убрал выделение блока смены пароля в отдельный компонент и реали…

f2f2db0

…зовал его непосредственно на странице профиля

fix: форма смены пароля вынесена в отдельный компонент

c6e2fbf

MakhovRoman force-pushed the dev-app-changePassword branch from 28540bd to c6e2fbf Compare April 3, 2023 03:55

vercel bot deployed to Preview April 3, 2023 03:55 View deployment

EAbashin approved these changes Apr 3, 2023

View reviewed changes

cap-Bernardito approved these changes Apr 4, 2023

View reviewed changes

MakhovRoman requested a review from Olegas April 4, 2023 04:44

Olegas approved these changes Apr 4, 2023

View reviewed changes

MakhovRoman merged commit e65213f into dev Apr 4, 2023

cap-Bernardito deleted the dev-app-changePassword branch April 26, 2023 03:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(23UG-19): добавляет раздел со сменой пароля #36

feat(23UG-19): добавляет раздел со сменой пароля #36

MakhovRoman commented Mar 21, 2023

vercel bot commented Mar 21, 2023 •

edited

Loading

cap-Bernardito left a comment

EAbashin commented Mar 21, 2023

cap-Bernardito commented Mar 21, 2023

MakhovRoman commented Mar 22, 2023

cap-Bernardito Mar 25, 2023

cap-Bernardito Mar 25, 2023

cap-Bernardito Mar 25, 2023

cap-Bernardito Mar 25, 2023

cap-Bernardito Mar 25, 2023

cap-Bernardito Mar 25, 2023

cap-Bernardito Mar 25, 2023

cap-Bernardito Mar 25, 2023

cap-Bernardito Mar 25, 2023

cap-Bernardito Mar 31, 2023

cap-Bernardito Mar 31, 2023

cap-Bernardito Mar 31, 2023 •

edited

Loading


		export const ChangePassword: React.FC<Props> = (props: Props) => {
		const updatedUserPassword = {

feat(23UG-19): добавляет раздел со сменой пароля #36

feat(23UG-19): добавляет раздел со сменой пароля #36

Conversation

MakhovRoman commented Mar 21, 2023

Какую задачу решаем

vercel bot commented Mar 21, 2023 • edited Loading

cap-Bernardito left a comment

Choose a reason for hiding this comment

EAbashin commented Mar 21, 2023

cap-Bernardito commented Mar 21, 2023

MakhovRoman commented Mar 22, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cap-Bernardito Mar 31, 2023 • edited Loading

Choose a reason for hiding this comment

vercel bot commented Mar 21, 2023 •

edited

Loading

cap-Bernardito Mar 31, 2023 •

edited

Loading