modern page -> classic page 수정

src/app/modules/auth/confirmation-required/confirmation-required.component.html

@@ -1,8 +1,6 @@
+<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
   <div
-  class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
+    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
->
-  <div
-    class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
   >
     <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
       <!-- Logo -->
@@ -31,90 +29,4 @@
       </div>
     </div>
   </div>
-  <div
-    class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
-  >
-    <!-- Background - @formatter:off -->
-    <!-- Rings -->
-    <svg
-      class="absolute inset-0 pointer-events-none"
-      viewBox="0 0 960 540"
-      width="100%"
-      height="100%"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        class="text-gray-700 opacity-25"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="100"
-      >
-        <circle r="234" cx="196" cy="23"></circle>
-        <circle r="234" cx="790" cy="491"></circle>
-      </g>
-    </svg>
-    <!-- Dots -->
-    <svg
-      class="absolute -top-16 -right-16 text-gray-700"
-      viewBox="0 0 220 192"
-      width="220"
-      height="192"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          id="837c3e70-6c3a-44e6-8854-cc48c737b659"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-          patternUnits="userSpaceOnUse"
-        >
-          <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
-        </pattern>
-      </defs>
-      <rect
-        width="220"
-        height="192"
-        fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
-      ></rect>
-    </svg>
-    <!-- @formatter:on -->
-    <!-- Content -->
-    <div class="z-10 relative w-full max-w-2xl">
-      <div class="text-7xl font-bold leading-none text-gray-100">
-        <div>Welcome to</div>
-        <div>our community</div>
-      </div>
-      <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
-        Fuse helps developers to build organized and well coded dashboards full
-        of beautiful and rich modules. Join us and start building your
-        application today.
-      </div>
-      <div class="flex items-center mt-8">
-        <div class="flex flex-0 items-center -space-x-1.5">
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-18.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-11.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-09.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-16.jpg"
-          />
-        </div>
-        <div class="ml-4 font-medium tracking-tight text-gray-400">
-          More than 17k people joined us, it's your turn
-        </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/modules/auth/forgot-password/forgot-password.component.html

@@ -1,8 +1,6 @@
+<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
   <div
-  class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
+    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
->
-  <div
-    class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
   >
     <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
       <!-- Logo -->
@@ -39,13 +37,11 @@
           <mat-label>Email address</mat-label>
           <input id="email" matInput [formControlName]="'email'" />
           <mat-error
-            *ngIf="forgotPasswordForm?.get('email')?.hasError('required')"
+            *ngIf="forgotPasswordForm.get('email')?.hasError('required')"
           >
             Email address is required
           </mat-error>
-          <mat-error
+          <mat-error *ngIf="forgotPasswordForm.get('email')?.hasError('email')">
-            *ngIf="forgotPasswordForm?.get('email')?.hasError('email')"
-          >
             Please enter a valid email address
           </mat-error>
         </mat-form-field>
@@ -55,12 +51,12 @@
           class="fuse-mat-button-large w-full mt-3"
           mat-flat-button
           [color]="'primary'"
-          [disabled]="forgotPasswordForm?.disabled"
+          [disabled]="forgotPasswordForm.disabled"
           (click)="sendResetLink()"
         >
-          <span *ngIf="!forgotPasswordForm?.disabled"> Send reset link </span>
+          <span *ngIf="!forgotPasswordForm.disabled"> Send reset link </span>
           <mat-progress-spinner
-            *ngIf="forgotPasswordForm?.disabled"
+            *ngIf="forgotPasswordForm.disabled"
             [diameter]="24"
             [mode]="'indeterminate'"
           ></mat-progress-spinner>
@@ -78,90 +74,4 @@
       </form>
     </div>
   </div>
-  <div
-    class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
-  >
-    <!-- Background - @formatter:off -->
-    <!-- Rings -->
-    <svg
-      class="absolute inset-0 pointer-events-none"
-      viewBox="0 0 960 540"
-      width="100%"
-      height="100%"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        class="text-gray-700 opacity-25"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="100"
-      >
-        <circle r="234" cx="196" cy="23"></circle>
-        <circle r="234" cx="790" cy="491"></circle>
-      </g>
-    </svg>
-    <!-- Dots -->
-    <svg
-      class="absolute -top-16 -right-16 text-gray-700"
-      viewBox="0 0 220 192"
-      width="220"
-      height="192"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          id="837c3e70-6c3a-44e6-8854-cc48c737b659"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-          patternUnits="userSpaceOnUse"
-        >
-          <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
-        </pattern>
-      </defs>
-      <rect
-        width="220"
-        height="192"
-        fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
-      ></rect>
-    </svg>
-    <!-- @formatter:on -->
-    <!-- Content -->
-    <div class="z-10 relative w-full max-w-2xl">
-      <div class="text-7xl font-bold leading-none text-gray-100">
-        <div>Welcome to</div>
-        <div>our community</div>
-      </div>
-      <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
-        Fuse helps developers to build organized and well coded dashboards full
-        of beautiful and rich modules. Join us and start building your
-        application today.
-      </div>
-      <div class="flex items-center mt-8">
-        <div class="flex flex-0 items-center -space-x-1.5">
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-18.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-11.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-09.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-16.jpg"
-          />
-        </div>
-        <div class="ml-4 font-medium tracking-tight text-gray-400">
-          More than 17k people joined us, it's your turn
-        </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/modules/auth/reset-password/reset-password.component.html

@@ -1,8 +1,6 @@
+<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
   <div
-  class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
+    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
->
-  <div
-    class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
   >
     <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
       <!-- Logo -->
@@ -103,14 +101,14 @@
           </button>
           <mat-error
             *ngIf="
-              resetPasswordForm?.get('passwordConfirm')?.hasError('required')
+              resetPasswordForm.get('passwordConfirm')?.hasError('required')
             "
           >
             Password confirmation is required
           </mat-error>
           <mat-error
             *ngIf="
-              resetPasswordForm?.get('passwordConfirm')?.hasError('mustMatch')
+              resetPasswordForm.get('passwordConfirm')?.hasError('mustMatch')
             "
           >
             Passwords must match
@@ -122,14 +120,12 @@
           class="fuse-mat-button-large w-full mt-3"
           mat-flat-button
           [color]="'primary'"
-          [disabled]="resetPasswordForm?.disabled"
+          [disabled]="resetPasswordForm.disabled"
           (click)="resetPassword()"
         >
-          <span *ngIf="!resetPasswordForm?.disabled">
+          <span *ngIf="!resetPasswordForm.disabled"> Reset your password </span>
-            Reset your password
-          </span>
           <mat-progress-spinner
-            *ngIf="resetPasswordForm?.disabled"
+            *ngIf="resetPasswordForm.disabled"
             [diameter]="24"
             [mode]="'indeterminate'"
           ></mat-progress-spinner>
@@ -147,90 +143,4 @@
       </form>
     </div>
   </div>
-  <div
-    class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
-  >
-    <!-- Background - @formatter:off -->
-    <!-- Rings -->
-    <svg
-      class="absolute inset-0 pointer-events-none"
-      viewBox="0 0 960 540"
-      width="100%"
-      height="100%"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        class="text-gray-700 opacity-25"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="100"
-      >
-        <circle r="234" cx="196" cy="23"></circle>
-        <circle r="234" cx="790" cy="491"></circle>
-      </g>
-    </svg>
-    <!-- Dots -->
-    <svg
-      class="absolute -top-16 -right-16 text-gray-700"
-      viewBox="0 0 220 192"
-      width="220"
-      height="192"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          id="837c3e70-6c3a-44e6-8854-cc48c737b659"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-          patternUnits="userSpaceOnUse"
-        >
-          <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
-        </pattern>
-      </defs>
-      <rect
-        width="220"
-        height="192"
-        fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
-      ></rect>
-    </svg>
-    <!-- @formatter:on -->
-    <!-- Content -->
-    <div class="z-10 relative w-full max-w-2xl">
-      <div class="text-7xl font-bold leading-none text-gray-100">
-        <div>Welcome to</div>
-        <div>our community</div>
-      </div>
-      <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
-        Fuse helps developers to build organized and well coded dashboards full
-        of beautiful and rich modules. Join us and start building your
-        application today.
-      </div>
-      <div class="flex items-center mt-8">
-        <div class="flex flex-0 items-center -space-x-1.5">
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-18.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-11.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-09.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-16.jpg"
-          />
-        </div>
-        <div class="ml-4 font-medium tracking-tight text-gray-400">
-          More than 17k people joined us, it's your turn
-        </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/modules/auth/sign-in/sign-in.component.html

@@ -1,8 +1,6 @@
+<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
   <div
-  class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
+    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
->
-  <div
-    class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
   >
     <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
       <!-- Logo -->
@@ -12,16 +10,16 @@
 
       <!-- Title -->
       <div class="mt-8 text-4xl font-extrabold tracking-tight leading-tight">
-        Sign in
+        Login Page
       </div>
-      <div class="flex items-baseline mt-0.5 font-medium">
+      <!-- <div class="flex items-baseline mt-0.5 font-medium">
         <div>Don't have an account?</div>
         <a
           class="ml-1 text-primary-500 hover:underline"
           [routerLink]="['/sign-up']"
           >Sign up
         </a>
-      </div>
+      </div> -->
 
       <!-- Alert -->
       <fuse-alert
@@ -39,19 +37,19 @@
       <form class="mt-8" [formGroup]="signInForm" #signInNgForm="ngForm">
         <!-- Email field -->
         <mat-form-field class="w-full">
-          <mat-label>Email address</mat-label>
+          <mat-label>로그인 아이디</mat-label>
           <input id="email" matInput [formControlName]="'email'" />
-          <mat-error *ngIf="signInForm?.get('email')?.hasError('required')">
+          <mat-error *ngIf="signInForm.get('email')?.hasError('required')">
-            Email address is required
+            아이디를 입력하세요.
           </mat-error>
-          <mat-error *ngIf="signInForm?.get('email')?.hasError('email')">
+          <mat-error *ngIf="signInForm.get('email')?.hasError('email')">
             Please enter a valid email address
           </mat-error>
         </mat-form-field>
 
         <!-- Password field -->
         <mat-form-field class="w-full">
-          <mat-label>Password</mat-label>
+          <mat-label>비밀번호</mat-label>
           <input
             id="password"
             matInput
@@ -80,11 +78,22 @@
               [svgIcon]="'heroicons_solid:eye-off'"
             ></mat-icon>
           </button>
-          <mat-error> Password is required </mat-error>
+          <mat-error> 비밀번호를 입력하세요 </mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="w-full">
+          <mat-label>보안코드*</mat-label>
+          <input id="email" matInput [formControlName]="'recaptcha'" />
+          <mat-error *ngIf="signInForm.get('email')?.hasError('required')">
+            보안코드를 입력하세요.
+          </mat-error>
+          <mat-error *ngIf="signInForm.get('email')?.hasError('email')">
+            유효한 보안코드가 아닙니다.
+          </mat-error>
         </mat-form-field>
 
         <!-- Actions -->
-        <div class="inline-flex items-end justify-between w-full mt-1.5">
+        <!-- <div class="inline-flex items-end justify-between w-full mt-1.5">
           <mat-checkbox [color]="'primary'" [formControlName]="'rememberMe'">
             Remember me
           </mat-checkbox>
@@ -93,33 +102,33 @@
             [routerLink]="['/forgot-password']"
             >Forgot password?
           </a>
-        </div>
+        </div> -->
 
         <!-- Submit button -->
         <button
           class="fuse-mat-button-large w-full mt-6"
           mat-flat-button
           [color]="'primary'"
-          [disabled]="signInForm?.disabled"
+          [disabled]="signInForm.disabled"
           (click)="signIn()"
         >
-          <span *ngIf="!signInForm?.disabled"> Sign in </span>
+          <span *ngIf="!signInForm.disabled"> 로그인</span>
           <mat-progress-spinner
-            *ngIf="signInForm?.disabled"
+            *ngIf="signInForm.disabled"
             [diameter]="24"
             [mode]="'indeterminate'"
           ></mat-progress-spinner>
         </button>
 
         <!-- Separator -->
-        <div class="flex items-center mt-8">
+        <!-- <div class="flex items-center mt-8">
           <div class="flex-auto mt-px border-t"></div>
           <div class="mx-2 text-secondary">Or continue with</div>
           <div class="flex-auto mt-px border-t"></div>
-        </div>
+        </div> -->
 
         <!-- Single sign-on buttons -->
-        <div class="flex items-center mt-8 space-x-4">
+        <!-- <div class="flex items-center mt-8 space-x-4">
           <button class="flex-auto" type="button" mat-stroked-button>
             <mat-icon
               class="icon-size-5"
@@ -138,94 +147,8 @@
               [svgIcon]="'feather:github'"
             ></mat-icon>
           </button>
-        </div>
+        </div> -->
       </form>
     </div>
   </div>
-  <div
-    class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
-  >
-    <!-- Background - @formatter:off -->
-    <!-- Rings -->
-    <svg
-      class="absolute inset-0 pointer-events-none"
-      viewBox="0 0 960 540"
-      width="100%"
-      height="100%"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        class="text-gray-700 opacity-25"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="100"
-      >
-        <circle r="234" cx="196" cy="23"></circle>
-        <circle r="234" cx="790" cy="491"></circle>
-      </g>
-    </svg>
-    <!-- Dots -->
-    <svg
-      class="absolute -top-16 -right-16 text-gray-700"
-      viewBox="0 0 220 192"
-      width="220"
-      height="192"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          id="837c3e70-6c3a-44e6-8854-cc48c737b659"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-          patternUnits="userSpaceOnUse"
-        >
-          <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
-        </pattern>
-      </defs>
-      <rect
-        width="220"
-        height="192"
-        fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
-      ></rect>
-    </svg>
-    <!-- @formatter:on -->
-    <!-- Content -->
-    <div class="z-10 relative w-full max-w-2xl">
-      <div class="text-7xl font-bold leading-none text-gray-100">
-        <div>Welcome to</div>
-        <div>our community</div>
-      </div>
-      <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
-        Fuse helps developers to build organized and well coded dashboards full
-        of beautiful and rich modules. Join us and start building your
-        application today.
-      </div>
-      <div class="flex items-center mt-8">
-        <div class="flex flex-0 items-center -space-x-1.5">
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-18.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-11.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-09.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-16.jpg"
-          />
-        </div>
-        <div class="ml-4 font-medium tracking-tight text-gray-400">
-          More than 17k people joined us, it's your turn
-        </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/modules/auth/sign-in/sign-in.component.ts

@@ -46,7 +46,7 @@ export class AuthSignInComponent implements OnInit {
         [Validators.required, Validators.email],
       ],
       password: ['admin', Validators.required],
-      rememberMe: [''],
+      recaptcha: ['', Validators.required],
     });
   }
 

src/app/modules/auth/sign-up/sign-up.component.html

@@ -1,8 +1,6 @@
+<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
   <div
-  class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
+    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
->
-  <div
-    class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
   >
     <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
       <!-- Logo -->
@@ -18,7 +16,7 @@
         <div>Already have an account?</div>
         <a
           class="ml-1 text-primary-500 hover:underline"
-          [routerLink]="['/sign-in']"
+          [routerLink]="['/pages/authentication/sign-in']"
           >Sign in
         </a>
       </div>
@@ -41,7 +39,7 @@
         <mat-form-field class="w-full">
           <mat-label>Full name</mat-label>
           <input id="name" matInput [formControlName]="'name'" />
-          <mat-error *ngIf="signUpForm?.get('name')?.hasError('required')">
+          <mat-error *ngIf="signUpForm.get('name')?.hasError('required')">
             Full name is required
           </mat-error>
         </mat-form-field>
@@ -50,10 +48,10 @@
         <mat-form-field class="w-full">
           <mat-label>Email address</mat-label>
           <input id="email" matInput [formControlName]="'email'" />
-          <mat-error *ngIf="signUpForm?.get('email')?.hasError('required')">
+          <mat-error *ngIf="signUpForm.get('email')?.hasError('required')">
             Email address is required
           </mat-error>
-          <mat-error *ngIf="signUpForm?.get('email')?.hasError('email')">
+          <mat-error *ngIf="signUpForm.get('email')?.hasError('email')">
             Please enter a valid email address
           </mat-error>
         </mat-form-field>
@@ -121,12 +119,12 @@
           class="fuse-mat-button-large w-full mt-6"
           mat-flat-button
           [color]="'primary'"
-          [disabled]="signUpForm?.disabled"
+          [disabled]="signUpForm.disabled"
           (click)="signUp()"
         >
-          <span *ngIf="!signUpForm?.disabled"> Create your free account </span>
+          <span *ngIf="!signUpForm.disabled"> Create your free account </span>
           <mat-progress-spinner
-            *ngIf="signUpForm?.disabled"
+            *ngIf="signUpForm.disabled"
             [diameter]="24"
             [mode]="'indeterminate'"
           ></mat-progress-spinner>
@@ -134,90 +132,4 @@
       </form>
     </div>
   </div>
-  <div
-    class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
-  >
-    <!-- Background - @formatter:off -->
-    <!-- Rings -->
-    <svg
-      class="absolute inset-0 pointer-events-none"
-      viewBox="0 0 960 540"
-      width="100%"
-      height="100%"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        class="text-gray-700 opacity-25"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="100"
-      >
-        <circle r="234" cx="196" cy="23"></circle>
-        <circle r="234" cx="790" cy="491"></circle>
-      </g>
-    </svg>
-    <!-- Dots -->
-    <svg
-      class="absolute -top-16 -right-16 text-gray-700"
-      viewBox="0 0 220 192"
-      width="220"
-      height="192"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          id="837c3e70-6c3a-44e6-8854-cc48c737b659"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-          patternUnits="userSpaceOnUse"
-        >
-          <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
-        </pattern>
-      </defs>
-      <rect
-        width="220"
-        height="192"
-        fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
-      ></rect>
-    </svg>
-    <!-- @formatter:on -->
-    <!-- Content -->
-    <div class="z-10 relative w-full max-w-2xl">
-      <div class="text-7xl font-bold leading-none text-gray-100">
-        <div>Welcome to</div>
-        <div>our community</div>
-      </div>
-      <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
-        Fuse helps developers to build organized and well coded dashboards full
-        of beautiful and rich modules. Join us and start building your
-        application today.
-      </div>
-      <div class="flex items-center mt-8">
-        <div class="flex flex-0 items-center -space-x-1.5">
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-18.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-11.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-09.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-16.jpg"
-          />
-        </div>
-        <div class="ml-4 font-medium tracking-tight text-gray-400">
-          More than 17k people joined us, it's your turn
-        </div>
-      </div>
-    </div>
-  </div>
 </div>