add sign in component

Author: nyein2001-dev

public/assets/icons/google-logo.svg

@@ -1,9 +1,32 @@
-<form class="my-10 space-y-6" [formGroup]="form" (ngSubmit)="onSubmit()" >
+<!-- login form -->
+<form class="my-10 space-y-6" [formGroup]="form" (ngSubmit)="onSubmit()">
     <div class="text-center">
-        <h2 class="mb-1 text-3xl font-semibold text-foreground">
-            Hello Again
-            <span class="text-primary">!</span>
-        </h2>
-        <p class="text-sm text-muted foreground">Enter your credential to access your account.</p>
+        <h2 class="mb-1 text-3xl font-semibold text-foreground">Hello Again <span class="text-primary">!</span></h2>
+        <p class="text-sm text-muted-foreground">Enter your credential to access your account.</p>
+    </div>
+
+    <div routerLink="/dashboard">
+        <app-button full impact="bold" tone="light" shape="rounded" size="medium">
+            <svg-icon src="assets/icons/google-logo.svg" [svgClass]="'h-6 w-6 mr-2'"> </svg-icon>
+            Log in with Google
+        </app-button>
+    </div>
+
+    <div
+        class="my-4 flex items-center before:mt-0.5 before:flex-1 before:border-t before:border-muted after:mt-0.5 after:flex-1 after:border-t after:border-muted">
+        <p class="mx-4 mb-0 text-center text-sm text-muted-foreground">or</p>
+    </div>
+
+    <div class="space-y-3 text-left">
+        <div class="form__group">
+            <div class="relative">
+                <input type="text" id="email" [ngClass]="{ 'is__invalid-input': submitted && f['email'].errors }"
+                    class="peer block" placeholder=" " formControlName="email" />
+                <label for="email"
+                    class="absolute top-2 left-1 z-10 origin-[0] -translate-y-4 scale-95 transform bg-background px-2 text-sm text-muted-foreground duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-95 peer-focus:px-2 peer-focus:text-primary">
+                    Email address
+                </label>
+            </div>
+        </div>
     </div>
 </form>

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

@@ -1,15 +1,16 @@
-import { NgClass, NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
+import { NgClass, NgIf } from '@angular/common';
 import { AngularSvgIconModule } from 'angular-svg-icon';
+import { ButtonComponent } from '../../../../shared/components/button/button.component';
 
 @Component({
   selector: 'app-sign-in',
-  standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, RouterLink, AngularSvgIconModule, NgClass, NgIf],
   templateUrl: './sign-in.component.html',
-  styleUrl: './sign-in.component.scss'
+  styleUrls: ['./sign-in.component.scss'],
+  standalone: true,
+  imports: [FormsModule, ReactiveFormsModule, RouterLink, AngularSvgIconModule, NgClass, NgIf, ButtonComponent],
 })
 export class SignInComponent implements OnInit {
   form!: FormGroup;