jwt auth scaffolding

logging in now works

UI login component created
This commit is contained in:
Isaac Grynsztein
2020-04-16 22:35:34 -04:00
parent da8571fb1a
commit 1f3572a630
9 changed files with 185 additions and 13 deletions

View File

@@ -0,0 +1,22 @@
<mat-card class="login-card">
<mat-tab-group>
<mat-tab label="Login">
<div style="margin-top: 10px;">
<mat-form-field>
<input [(ngModel)]="usernameInput" matInput placeholder="User name">
</mat-form-field>
</div>
<div>
<mat-form-field>
<input [(ngModel)]="passwordInput" type="password" matInput placeholder="Password">
</mat-form-field>
</div>
<div style="margin-bottom: 10px; margin-top: 10px;">
<button [disabled]="loggingIn" color="primary" (click)="login()" mat-raised-button>Login</button>
</div>
</mat-tab>
<mat-tab *ngIf="registrationEnabled" label="Register">
</mat-tab>
</mat-tab-group>
</mat-card>

View File

@@ -0,0 +1,6 @@
.login-card {
max-width: 600px;
width: 80%;
margin: 0 auto;
margin-top: 20px;
}

View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LoginComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -0,0 +1,31 @@
import { Component, OnInit } from '@angular/core';
import { PostsService } from 'app/posts.services';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
usernameInput = '';
passwordInput = '';
registrationEnabled = true;
loggingIn = false;
constructor(private postsService: PostsService) { }
ngOnInit(): void {
}
login() {
this.loggingIn = true;
this.postsService.login(this.usernameInput, this.passwordInput).subscribe(res => {
this.loggingIn = false;
console.log(res);
}, err => {
this.loggingIn = false;
});
}
}