Migrate to modernize template

Web/src/app/pages/authentication/boxed-login/boxed-login.component.html

@@ -0,0 +1,108 @@
+<div class="blank-layout-container justify-content-center align-items-center">
+  <div
+    class="position-relative row w-100 h-100 bg-gredient justify-content-center"
+  >
+    <div class="col-lg-4 d-flex align-items-center">
+      <mat-card class="cardWithShadow boxed-auth">
+        <mat-card-content class="p-32">
+          <div class="text-center">
+            <app-branding></app-branding>
+          </div>
+
+          <div class="row m-t-24 custom-row">
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100">
+                <div class="d-flex align-items-center">
+                  <img
+                    src="/assets/images/svgs/google-icon.svg"
+                    alt="google"
+                    width="16"
+                    class="m-r-8"
+                  />
+                  Sign in with Google
+                </div>
+              </button>
+            </div>
+            <div class="col-12 col-sm-6">
+              <button
+                mat-stroked-button
+                class="w-100 d-flex align-items-center"
+              >
+                <div class="d-flex align-items-center">
+                  <img
+                    src="/assets/images/svgs/facebook-icon.svg"
+                    alt="facebook"
+                    width="40"
+                    class="m-r-4"
+                  />
+                  Sign in with FB
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div class="or-border m-t-30">or sign in with</div>
+
+          <form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              >Username</mat-label
+            >
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput formControlName="uname" />
+              @if(f['uname'].touched && f['uname'].invalid) {
+              <mat-hint class="m-b-16 error-msg">
+                @if(f['uname'].errors && f['uname'].errors['required']) {
+                <div class="text-error">Name is required.</div>
+                } @if(f['uname'].errors && f['uname'].errors['minlength']) {
+                <div class="text-error">Name should be 6 character.</div>
+                }
+              </mat-hint>
+              }
+            </mat-form-field>
+            <!-- password -->
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              >Password</mat-label
+            >
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="password" formControlName="password" />
+              @if(f['password'].touched && f['password'].invalid) {
+              <mat-hint class="m-b-16 error-msg">
+                @if(f['password'].errors && f['password'].errors['required']) {
+                <div class="text-error">Password is required.</div>
+                }
+              </mat-hint>
+              }
+            </mat-form-field>
+
+            <div class="d-flex align-items-center m-b-12">
+              <mat-checkbox color="primary">Remember this Device</mat-checkbox>
+              <a
+                [routerLink]="['/authentication/boxed-forgot-pwd']"
+                class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14"
+                >Forgot Password ?</a
+              >
+            </div>
+            <button
+              mat-flat-button
+              color="primary"
+              class="w-100"
+              [disabled]="!form.valid"
+            >
+              Sign In
+            </button>
+            <!-- input -->
+          </form>
+          <span class="d-block f-w-500 text-center m-t-24"
+            >New to Modernize?
+            <a
+              [routerLink]="['/authentication/boxed-register']"
+              class="text-decoration-none text-primary f-w-500 f-s-14"
+            >
+              Create an account</a
+            >
+          </span>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>