refactor(RSS-ECOMM-4_40): update password edit form

.github/labeler.yml

@@ -48,3 +48,6 @@ sprint3:
 
 sprint4:
   - head-branch: 'ECOMM-4'
+
+sprint5:
+  - head-branch: 'ECOMM-5'

.github/pull_request_template.md

@@ -3,10 +3,10 @@
 📍 conforms with the following format:
 
 - [ ] prefix (following the [convention](https://www.conventionalcommits.org/en/v1.0.0-beta.2/): `feat`, `fix`, `hotfix`, `chore`, `refactor`, `revert`, `docs`, `style`, `test`)
-- [ ] sprint and issue number (e.g. `RSS-ECOMM-4_01`, where `4` - is the sprint number and `01` - is the issue number)
+- [ ] sprint and issue number (e.g. `RSS-ECOMM-5_01`, where `5` - is the sprint number and `01` - is the issue number)
 - [ ] short description
 
-👀 Example: `feat(RSS-ECOMM-4_01): description`
+👀 Example: `feat(RSS-ECOMM-5_01): description`
 
 ## PR Description 🧙‍♂️
 

.github/workflows/ci.yml

@@ -7,6 +7,7 @@ on:
       - sprint-2
       - sprint-3
       - sprint-4
+      - sprint-5
 
 jobs:
   format:

.validate-branch-namerc.cjs

@@ -9,3 +9,4 @@ module.exports = {
 // "fix(RSS-ECOMM-2_15)/addCorrectProduct" // where 2 is the sprint number and 15 is the issue number
 // "chore(RSS-ECOMM-3_01)/addNewProduct" // where 3 is the sprint number and 01 is the issue number
 // "refactor(RSS-ECOMM-4_01)/addNewProduct" // where 4 is the sprint number and 01 is the issue number
+// "revert(RSS-ECOMM-5_01)/addNewProduct" // where 5 is the sprint number and 01 is the issue number

src/app/styles/mixins.scss

@@ -3,6 +3,60 @@ $transform-scale: 0.9;
 $transform-scale-active: 0.9;
 $filter-opacity: 0.5;
 $filter-brightness: 1.3;
+$basic-font: var(--regular-font);
+$one: var(--one);
+$two: var(--two);
+$active-color: var(--steam-green-800);
+
+@mixin link($padding: 0 calc(var(--extra-small-offset) / 2), $color: var(--noble-gray-800)) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: $padding;
+  height: 100%;
+  font: $basic-font;
+  letter-spacing: $one;
+  text-transform: uppercase;
+  color: $color;
+  transition: color $transition-duration;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: calc($one * -1);
+    width: 100%;
+    height: $two;
+    background-color: currentcolor;
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: center;
+    transition:
+      transform $transition-duration,
+      opacity $transition-duration;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      color: $active-color;
+
+      &::after {
+        opacity: 1;
+        transform: scaleX(1);
+      }
+    }
+  }
+}
+
+@mixin active {
+  color: $active-color;
+  opacity: 1;
+
+  &::after {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
 
 @mixin green-btn {
   display: flex;
@@ -12,10 +66,10 @@ $filter-brightness: 1.3;
   border-radius: var(--medium-br);
   padding: calc(var(--small-offset) / 3) var(--small-offset);
   width: max-content;
-  font: var(--regular-font);
-  letter-spacing: var(--one);
+  font: $basic-font;
+  letter-spacing: $one;
   color: var(--button-white);
-  background-color: var(--steam-green-800);
+  background-color: $active-color;
   transition:
     filter $transition-duration,
     color $transition-duration,
@@ -56,8 +110,8 @@ $filter-brightness: 1.3;
   $btn-padding: calc(var(--tiny-offset) * 1.5),
   $btn-bg: var(--noble-white-100),
   $btn-hover-bg: var(--white-tr),
-  $btn-fill: var(--steam-green-800),
-  $btn-stroke: var(--steam-green-800)
+  $btn-fill: $active-color,
+  $btn-stroke: $active-color
 ) {
   display: flex;
   align-items: center;

src/entities/Navigation/view/navigationView.module.scss

@@ -1,3 +1,5 @@
+@import 'src/app/styles/mixins';
+
 .navigation {
   display: flex;
   align-items: center;
@@ -14,52 +16,13 @@
   }
 }
 
-.link {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 calc(var(--extra-small-offset) / 2);
-  height: 100%;
-  font: var(--regular-font);
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: var(--noble-gray-1100);
-  transition: color 0.2s;
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: calc(var(--one) * -1);
-    width: 100%;
-    height: var(--two);
-    background-color: currentcolor;
-    opacity: 0;
-    transform: scaleX(0);
-    transform-origin: center;
-    transition:
-      transform 0.2s,
-      opacity 0.2s;
-  }
+$color: var(--noble-gray-1100);
+$padding: 0 calc(var(--extra-small-offset) / 2);
 
-  @media (hover: hover) {
-    &:hover {
-      color: var(--steam-green-800);
-
-      &::after {
-        opacity: 1;
-        transform: scaleX(1);
-      }
-    }
-  }
+.link {
+  @include link($padding, $color);
 }
 
 .active {
-  color: var(--steam-green-800);
-  opacity: 1;
-
-  &::after {
-    opacity: 1;
-    transform: scaleX(1);
-  }
+  @include active;
 }

src/features/Breadcrumbs/view/breadcrumbsView.module.scss

@@ -1,3 +1,5 @@
+@import 'src/app/styles/mixins';
+
 .breadcrumbs {
   display: flex;
   align-items: center;
@@ -10,44 +12,10 @@
 }
 
 .link {
-  position: relative;
-  display: flex;
-  align-items: center;
+  @include link;
+
   padding: var(--tiny-offset) calc(var(--tiny-offset) / 2);
-  height: 100%;
-  font: var(--regular-font);
   font-weight: 100;
-  letter-spacing: var(--one);
-  text-transform: uppercase;
-  color: var(--noble-gray-800);
-  transition: color 0.2s;
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: calc(var(--one) * -1);
-    width: 100%;
-    height: var(--two);
-    background-color: currentcolor;
-    opacity: 0;
-    transform: scaleX(0);
-    transform-origin: center;
-    transition:
-      transform 0.2s,
-      opacity 0.2s;
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      color: var(--steam-green-800);
-
-      &::after {
-        opacity: 1;
-        transform: scaleX(1);
-      }
-    }
-  }
 }
 
 .active {

src/features/PasswordEdit/model/PasswordEditModel.ts

@@ -1,3 +1,5 @@
+import type InputFieldModel from '@/entities/InputField/model/InputFieldModel.ts';
+
 import getCustomerModel from '@/shared/API/customer/model/CustomerModel.ts';
 import LoaderModel from '@/shared/Loader/model/LoaderModel.ts';
 import modal from '@/shared/Modal/model/ModalModel.ts';
@@ -17,10 +19,41 @@ class PasswordEditModel {
   }
 
   private init(): void {
+    this.view.getInputFields().forEach((inputField) => this.setInputFieldHandlers(inputField));
+    this.setPreventDefaultToForm();
     this.setSwitchOldPasswordVisibilityHandler();
     this.setSwitchNewPasswordVisibilityHandler();
+    this.setSubmitFormHandler();
     this.setCancelButtonHandler();
-    this.setSaveChangesButtonHandler();
+  }
+
+  private async saveNewPassword(): Promise<boolean> {
+    const loader = new LoaderModel(LOADER_SIZE.SMALL).getHTML();
+    this.view.getSubmitButton().getHTML().append(loader);
+    try {
+      await getCustomerModel()
+        .getCurrentUser()
+        .then(async (user) => {
+          if (user) {
+            try {
+              await getCustomerModel().editPassword(
+                user,
+                this.view.getOldPasswordField().getView().getValue(),
+                this.view.getNewPasswordField().getView().getValue(),
+              );
+              serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.PASSWORD_CHANGED, MESSAGE_STATUS.SUCCESS);
+              modal.hide();
+            } catch {
+              serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.PASSWORD_NOT_CHANGED, MESSAGE_STATUS.ERROR);
+            }
+          }
+        });
+    } catch (error) {
+      showErrorMessage(error);
+    } finally {
+      loader.remove();
+    }
+    return true;
   }
 
   private setCancelButtonHandler(): boolean {
@@ -33,37 +66,20 @@ class PasswordEditModel {
     return true;
   }
 
-  private setSaveChangesButtonHandler(): boolean {
-    this.view
-      .getSaveChangesButton()
-      .getHTML()
-      .addEventListener('click', async () => {
-        const loader = new LoaderModel(LOADER_SIZE.SMALL).getHTML();
-        this.view.getSaveChangesButton().getHTML().append(loader);
-        try {
-          await getCustomerModel()
-            .getCurrentUser()
-            .then(async (user) => {
-              if (user) {
-                try {
-                  await getCustomerModel().editPassword(
-                    user,
-                    this.view.getOldPasswordField().getView().getValue(),
-                    this.view.getNewPasswordField().getView().getValue(),
-                  );
-                  serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.PASSWORD_CHANGED, MESSAGE_STATUS.SUCCESS);
-                  modal.hide();
-                } catch {
-                  serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.PASSWORD_NOT_CHANGED, MESSAGE_STATUS.ERROR);
-                }
-              }
-            });
-        } catch (error) {
-          showErrorMessage(error);
-        } finally {
-          loader.remove();
-        }
-      });
+  private setInputFieldHandlers(inputField: InputFieldModel): boolean {
+    const inputHTML = inputField.getView().getInput().getHTML();
+    inputHTML.addEventListener('input', () => this.switchSubmitFormButtonAccess());
+    return true;
+  }
+
+  private setPreventDefaultToForm(): boolean {
+    this.view.getHTML().addEventListener('submit', (event) => event.preventDefault());
+    return true;
+  }
+
+  private setSubmitFormHandler(): boolean {
+    const submitButton = this.view.getSubmitButton().getHTML();
+    submitButton.addEventListener('click', this.saveNewPassword.bind(this));
     return true;
   }
 
@@ -87,7 +103,16 @@ class PasswordEditModel {
     return true;
   }
 
-  public getHTML(): HTMLDivElement {
+  private switchSubmitFormButtonAccess(): boolean {
+    if (this.view.getInputFields().every((inputField) => inputField.getIsValid())) {
+      this.view.getSubmitButton().setEnabled();
+    } else {
+      this.view.getSubmitButton().setDisabled();
+    }
+    return true;
+  }
+
+  public getHTML(): HTMLFormElement {
     return this.view.getHTML();
   }