bnsubramaniyan
/
skgangaEkam
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity
Browse Source

style screen

master
ganga satish kumar 3 years ago
parent
dbbc0ea1ed
commit
19190676f3
3 changed files with 83 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/app/login/login.component.html
  2. 134
      src/app/login/login.component.scss
  3. 21
      src/app/login/login.component.ts

9
src/app/login/login.component.html
View File

@ -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="">
<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>

134
src/app/login/login.component.scss
View File

@ -1,77 +1,63 @@
#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 {
width: 70%;
height: 70%;
align-items: center;
justify-content: center;
margin: auto;
padding: 30% 5%;
}
button {
border-radius: 10px;
font-size: 0.938rem;
width: 100%;
background: #22138B 0 0 no-repeat padding-box !important;
margin: 2%;
}
.flex-row {
flex-direction: row;
display: flex;
width: 100%;
}
.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 {
border-radius: 0.5rem 0 0 0.5rem !important;
min-width: 0.5rem !important;
}
::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;
border-radius: 0.5rem;
}
.align-middle{
width: 100%;
text-align: center;
}
.title{
color:#ffffff;
font-weight: bold;
font-size: 1.563rem;
margin-bottom: 15%;
font-family: "Raleway VariableFont";
text-transform: uppercase;
}
.input-field {
width: 100%;
}
}
// #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;
// }
#login-screen .content {
padding: 5%;
}
#login-screen .icon {
width: 70%;
height: 70%;
align-items: center;
justify-content: center;
margin: auto;
padding: 30% 5%;
}
#login-screen button {
border-radius: 10px;
font-size: 0.938rem;
width: 100%;
background: #22138b 0 0 no-repeat padding-box !important;
margin: 2%;
}
#login-screen .flex-row {
flex-direction: row;
display: flex;
width: 100%;
}
#login-screen .font-body-medium {
font-size: 1.25rem;
line-height: 1.125rem;
letter-spacing: 1px;
font-family: "Raleway VariableFont";
text-transform: uppercase;
}
#login-screen ::ng-deep .mat-form-field-outline-start {
border-radius: 0.5rem 0 0 0.5rem !important;
min-width: 0.5rem !important;
}
#login-screen ::ng-deep .mat-form-field-outline-end {
border-radius: 0 0.5rem 0.5rem 0 !important;
}
#login-screen ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
background-color: #e0e9f8;
border-radius: 0.5rem;
}
#login-screen .align-middle {
width: 100%;
text-align: center;
}
#login-screen .title {
color: #fff;
font-weight: bold;
font-size: 1.563rem;
margin-bottom: 15%;
font-family: "Raleway VariableFont";
text-transform: uppercase;
}
#login-screen .input-field {
width: 100%;
}
#login-screen .error {
color: #fff;
font-size: 1rem;
}

21
src/app/login/login.component.ts
View File

@ -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');
}
}
}
Write Preview
Loading…
Cancel
Save