style screen

src/app/login/login.component.html

@@ -15,20 +15,21 @@
                     <mat-form-field class="input-field" appearance="outline">
                         <mat-label>Username</mat-label>
                         <input formControlName="usernameId" matInput placeholder="Username" value="">
+                        <mat-error class="error" *ngIf="loginForm.get('usernameId')?.hasError('required')">invalid username</mat-error>
                     </mat-form-field>
                 </div>
             </div>
             <div class="align-middle flex-row">
                 <div class="align-middle">
-                    <mat-form-field class="input-field" appearance="outline">
+                    <mat-form-field class="input-field" type="password" appearance="outline">
                         <mat-label>Password</mat-label>
                         <input formControlName="passwwordId"  matInput placeholder="passwordId" value="" >
+                        <mat-error class="error" *ngIf="loginForm.get('passwwordId')?.hasError('required')">invalid password</mat-error>
                     </mat-form-field>
                 </div>
             </div>
             <div class="align-middle flex-row">
-                <button mat-raised-button color="primary" (click)="loginHandler()">Sign In</button>
-                <!-- downloadPDF -->
+                <button mat-raised-button color="primary">Sign In</button>
             </div>
         </div>
     </form>

src/app/login/login.component.scss

@@ -1,14 +1,10 @@
 #login-screen {
-    // background: rgb(250,250,250);
-    // background: linear-gradient(283deg, rgba(250,250,250,1) 0%, rgba(226,189,43,1) 1%, rgba(34,158,194,1) 81%, rgba(3,151,198,1) 100%);
-    //     background: rgb(34,193,195);
-    // background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
-
     background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
-    .content{
-        padding:5%
 }
-    .icon {
+#login-screen .content {
+    padding: 5%;
+}
+#login-screen .icon {
     width: 70%;
     height: 70%;
     align-items: center;
@@ -16,62 +12,52 @@
     margin: auto;
     padding: 30% 5%;
 }
-    button {
+#login-screen button {
     border-radius: 10px;
     font-size: 0.938rem;
     width: 100%;
-        background: #22138B 0 0 no-repeat padding-box !important;
+    background: #22138b 0 0 no-repeat padding-box !important;
     margin: 2%;
 }
-      .flex-row {
+#login-screen .flex-row {
     flex-direction: row;
     display: flex;
     width: 100%;
 }
-    .font-body-medium {
+#login-screen .font-body-medium {
     font-size: 1.25rem;
     line-height: 1.125rem;
     letter-spacing: 1px;
     font-family: "Raleway VariableFont";
     text-transform: uppercase;
 }
-    
-      ::ng-deep .mat-form-field-outline-start {
+#login-screen ::ng-deep .mat-form-field-outline-start {
     border-radius: 0.5rem 0 0 0.5rem !important;
     min-width: 0.5rem !important;
 }
-      
-      ::ng-deep .mat-form-field-outline-end {
+#login-screen ::ng-deep .mat-form-field-outline-end {
     border-radius: 0 0.5rem 0.5rem 0 !important;
 }
-
-      ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
-        background-color: #E0E9F8;
+#login-screen ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
+    background-color: #e0e9f8;
     border-radius: 0.5rem;
 }
-    
-    .align-middle{
+#login-screen .align-middle {
     width: 100%;
     text-align: center;
 }
-    .title{
-        color:#ffffff;
+#login-screen .title {
+    color: #fff;
     font-weight: bold;
     font-size: 1.563rem;
     margin-bottom: 15%;
     font-family: "Raleway VariableFont";
     text-transform: uppercase;
 }
-   .input-field {
+#login-screen .input-field {
     width: 100%;
 }
+#login-screen .error {
+    color: #fff;
+    font-size: 1rem;
 }
-
-
-// #login-screen ::ng-deep .mat-form-field-underline, #generateLetter ::ng-deep .mat-form-field-ripple{
-//     background-color: '#E0E9F8';
-// }
-
-// ::ng-deep .mat-form-field-underline, #addDependants ::ng-deep .mat-form-field-ripple {
-//     background-color: #E0E9F8 !important;
-//   }

src/app/login/login.component.ts

@@ -12,6 +12,10 @@ export class LoginComponent implements OnInit {
   loginForm!: FormGroup;
   username:string ='';
   password:string = '';
+  userObject = {
+    username:'',
+    password:''
+  }
 
   constructor( private formBuilder: FormBuilder) { }
 
@@ -21,8 +25,8 @@ export class LoginComponent implements OnInit {
 
   initFormControls(){
     this.loginForm = this.formBuilder.group({
-      usernameId: [{ value: '', disabled: false }],
-      passwwordId: [{ value: '', disabled: false }]
+      usernameId: ['',[Validators.required]],
+      passwwordId: ['', [Validators.required]]
     });
   }
 
@@ -30,4 +34,15 @@ export class LoginComponent implements OnInit {
     this.username = this.loginForm?.get("usernameId")?.value;
     this.password = this.loginForm?.get("passwwordId")?.value;
   }
+
+  validateCredentials(){
+    if(this.username.length <=0){
+      this.userObject.username = 'invalid';
+      console.log('invalid username');
+    }
+    if(this.password.length <=0){
+      this.userObject.password = 'invalid';
+      console.log('invalid password');
+    }
+  }
 }