Add edit component

src/app/components/add-user/add-user.component.html

@@ -72,7 +72,6 @@ <h2 class="modal-content__title">
           </nz-select>
           } @else {
           <input
-            #inputField
             [type]="control.type"
             [formControlName]="control.name"
             class="modal-content-form__input-container__input"

src/app/components/add-user/add-user.component.ts

@@ -53,7 +53,6 @@ export class AddUserComponent {
       minLength: 4,
     },
   ];
-  @ViewChildren('inputField') inputFields!: QueryList<ElementRef>;
   @Input() isVisible = false;
 
   @Output() handleCancel: EventEmitter<boolean> = new EventEmitter<boolean>();

src/app/components/edit-password/edit-password.component.html

@@ -0,0 +1,86 @@
+<div class="edit-profile-container">
+  <div class="edit-profile-container__title-container">
+    <img
+      class="edit-profile-container__title-container__image"
+      src="/profile/asterisk.svg"
+      alt="avatar"
+    />
+    <h1 class="edit-profile-container__title-container__title">
+      Change Password
+    </h1>
+  </div>
+  <main class="edit-profile-container__main">
+    <h2 class="edit-profile-container__main__title">
+      Changing your sign in password is an easy way to keep your account secure.
+    </h2>
+    <form
+      [formGroup]="passwordForm"
+      class="edit-profile-container__main__form"
+      data-testid="auth-form"
+      (ngSubmit)="onSubmit()"
+    >
+      <div class="edit-profile-container__main__form__field-container">
+        <ng-container *ngFor="let control of formControls">
+          <div
+            class="edit-profile-container__main__form__field-container__input-container"
+          >
+            <div
+              class="edit-profile-container__main__form__field-container__input-container__label-group"
+            >
+              <label
+                class="edit-profile-container__main__form__field-container__input-container__label"
+              >
+                {{ control.placeholder }}
+              </label>
+              <p
+                *ngIf="
+                  passwordForm.get(control.name)?.touched &&
+                  passwordForm.get(control.name)?.invalid
+                "
+                class="edit-profile-container__main__form__field-container__input-container__error-container"
+              >
+                <span
+                  *ngIf="passwordForm.get(control.name)?.hasError('required')"
+                  class="edit-profile-container__main__form__field-container__input-container__error-container__error"
+                >
+                  *required
+                </span>
+                <span
+                  *ngIf="passwordForm.get(control.name)?.hasError('minlength')"
+                  class="edit-profile-container__main__form__field-container__input-container__error-container__error"
+                >
+                  *at least {{ control.minLength }} characters
+                </span>
+                <span
+                  *ngIf="
+                    passwordForm.get(control.name)?.hasError('mismatch') &&
+                    !passwordForm.get(control.name)?.hasError('minlength') &&
+                    !passwordForm.get(control.name)?.hasError('required')
+                  "
+                  class="edit-profile-container__main__form__field-container__input-container__error-container__error"
+                >
+                  *passwords do not match
+                </span>
+              </p>
+            </div>
+            <input
+              #inputField
+              [type]="control.type"
+              [formControlName]="control.name"
+              class="edit-profile-container__main__form__field-container__input-container__input"
+              [ngClass]="{
+                'edit-profile-container__main__form__field-container__input-container__input--invalid':
+                  passwordForm.get(control.name)?.invalid &&
+                  passwordForm.get(control.name)?.touched,
+                'edit-profile-container__main__form__field-container__input-container__input--default':
+                  !passwordForm.get(control.name)?.touched,
+                shake: isSubmitted && passwordForm.get(control.name)?.invalid
+              }"
+            />
+          </div>
+        </ng-container>
+      </div>
+      <button class="edit-profile-container__main__form__button">Update</button>
+    </form>
+  </main>
+</div>

src/app/components/edit-password/edit-password.component.scss

@@ -0,0 +1,178 @@
+@mixin center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .edit-profile-container {
+    background-color: #fff;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+    border-radius: 2rem;
+    overflow: hidden;
+
+    &__title-container {
+      font-size: 2rem;
+      font-weight: bold;
+      background-color: #f6f7f9;
+      padding: 2rem 2rem;
+      display: flex;
+      align-items: center;
+      gap: 0.7rem;
+
+      &__title {
+        color: #2c3034;
+      }
+
+      &__image {
+        width: 2rem;
+        height: 2rem;
+      }
+    }
+
+    &__main {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 1rem;
+      padding-inline: 3rem;
+      padding-block: 3rem;
+
+      &__title {
+        inline-size: 25%;
+        color: #6c757d;
+        font-size: 1.6rem;
+        line-height: 2rem;
+      }
+
+      &__form {
+        inline-size: 65%;
+        margin: auto;
+        @include center();
+        gap: 5rem;
+        transition: all 0.2s ease;
+
+        &__field-container {
+          inline-size: 100%;
+          @include center();
+          gap: 3rem;
+
+          &__input-container {
+            @include center();
+            inline-size: 100%;
+            gap: 0.5rem;
+            flex-direction: column;
+            align-items: flex-start;
+
+            &__label-group {
+              inline-size: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              gap: 0.5rem;
+            }
+
+            &__label {
+              font-size: 1.6rem;
+              color: #565656;
+            }
+
+            &__select {
+              inline-size: 100%;
+              background-color: transparent;
+              font-size: 1.7rem;
+              color: #2c3034;
+
+              ::ng-deep {
+                .ant-select-selector {
+                  padding-inline: 1rem 0;
+                  padding-block: 0.5rem;
+                  gap: 1rem;
+                  border: none;
+                  border-bottom: 1px solid #565656;
+                  background-color: transparent;
+                }
+
+                .ant-select-arrow {
+                  color: #565656;
+                }
+
+                .ant-select-selection-item {
+                  color: #2c3034;
+                }
+              }
+
+              &--invalid {
+                ::ng-deep .ant-select-selector {
+                  border-bottom-color: #c91e1e;
+                }
+              }
+
+              &--default {
+                ::ng-deep .ant-select-selector {
+                  border-bottom-color: #565656;
+                }
+              }
+            }
+
+            &__input {
+              inline-size: 100%;
+              background-color: transparent;
+              padding-inline: 1rem 0;
+              padding-block: 0.5rem;
+              outline: 0;
+              font-size: 2.4rem;
+              border: none;
+              border-bottom: 1px solid #565656;
+              color: #2c3034;
+
+              &--invalid {
+                border-bottom-color: #c91e1e;
+              }
+
+              &--default {
+                border-bottom-color: #565656;
+              }
+            }
+
+            &__error-container {
+              margin: 0;
+
+              &__error {
+                color: #c91e1e;
+                font-size: 1.6rem;
+                font-weight: bold;
+              }
+            }
+          }
+        }
+
+        &__button {
+          align-self: flex-start;
+          font-size: 1.8rem;
+          font-weight: 600;
+          user-select: none;
+          border: 1px solid #c0e0f1;
+          padding-block: 1rem;
+          padding-inline: 1.3rem;
+          border-radius: 0.7rem;
+          background-color: #c0e0f1;
+          transition: all .15s ease-in-out;
+          cursor: pointer;
+
+          &:hover {
+              color: #013550;
+              background-color: #81c2e3;
+              border-color: #81c2e3;
+              transform: scale(1.05);
+          }
+
+          &:active {
+              transform: scale(1);
+          }
+        }
+      }
+    }
+  }
+

src/app/components/edit-password/edit-password.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditPasswordComponent } from './edit-password.component';
+
+describe('EditPasswordComponent', () => {
+  let component: EditPasswordComponent;
+  let fixture: ComponentFixture<EditPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EditPasswordComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EditPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});