FrontEnd Angular - v0.0.1-alpha
This commit is contained in:
141
src/app/header/header-popup/login/login.component.css
Normal file
141
src/app/header/header-popup/login/login.component.css
Normal file
@@ -0,0 +1,141 @@
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.authentication-container {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.authentication-body {
|
||||
justify-content: space-around;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.authentication-body .btn {
|
||||
background-color: #D8291C !important;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
height: 45px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.authentication-body form {
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.separator-line {
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin: 30px 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
border-bottom: 3px solid #80808076;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.input-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-bottom: 2px solid #7676769b;
|
||||
}
|
||||
.input-div:after {
|
||||
content: '';
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
bottom: -2px;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
background-color: #f44336;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.input-div:hover:after {
|
||||
width: 100%;
|
||||
transition: .4s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.input-div > .form-control, .input-div > .form-control:focus {
|
||||
border: none;
|
||||
border-color: inherit;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input-div > .form-control::placeholder,
|
||||
.input-div > .form-control,
|
||||
.input-div > .input-div-icon {
|
||||
font-size: 17px;
|
||||
color: #767676;
|
||||
}
|
||||
.input-div >.form-control:-webkit-autofill {
|
||||
-webkit-text-fill-color: #767676;
|
||||
box-shadow: 0 0 0px 1000px #ffffff inset;
|
||||
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
|
||||
}
|
||||
|
||||
.input-div:hover > .form-control::placeholder,
|
||||
.input-div:hover > .input-div-icon {
|
||||
color: #D8291C;
|
||||
transition: .3s;
|
||||
}
|
||||
.input-div:hover > .form-control::placeholder {
|
||||
font-weight: 500;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
@media (min-width:767px) {
|
||||
|
||||
.authentication-container {
|
||||
min-width: 630px;
|
||||
}
|
||||
|
||||
.authentication-body {
|
||||
all: unset;
|
||||
justify-content: space-around;
|
||||
width: calc(49.7% - 60px);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.separator-line {
|
||||
all: unset;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin: 0px 60px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.line {
|
||||
all: unset;
|
||||
border-right: 2px solid #80808076;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
46
src/app/header/header-popup/login/login.component.html
Normal file
46
src/app/header/header-popup/login/login.component.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<app-popup [state]="popupState"
|
||||
(stateChange)="onStateChange($event)"
|
||||
[ignoreClickOutside]="ignoreClickOutside">
|
||||
|
||||
{{errorMessage}}
|
||||
|
||||
<div class="container authentication-container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 authentication-body">
|
||||
<form [formGroup]="loginForm" (ngSubmit)="onLogin()">
|
||||
<div class="input-div">
|
||||
<fa-icon class="input-div-icon"
|
||||
[icon]="_userIcon">
|
||||
</fa-icon>
|
||||
<input type="text" id="username"
|
||||
formControlName="username"
|
||||
class="form-control"
|
||||
placeholder="Username">
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<fa-icon class="input-div-icon"
|
||||
[icon]="_passwordIcon">
|
||||
</fa-icon>
|
||||
<input type="password" id="password"
|
||||
formControlName="password"
|
||||
class="form-control"
|
||||
placeholder="Password">
|
||||
</div>
|
||||
<button class="btn"
|
||||
type="submit">
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="separator-line">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="col-lg-6 authentication-body">
|
||||
<p>Google</p>
|
||||
<p>Linkedin</p>
|
||||
<p>Github</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</app-popup>
|
||||
23
src/app/header/header-popup/login/login.component.spec.ts
Normal file
23
src/app/header/header-popup/login/login.component.spec.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LoginComponent } from './login.component';
|
||||
|
||||
describe('LoginComponent', () => {
|
||||
let component: LoginComponent;
|
||||
let fixture: ComponentFixture<LoginComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ LoginComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(LoginComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
93
src/app/header/header-popup/login/login.component.ts
Normal file
93
src/app/header/header-popup/login/login.component.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
import { AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { faLock, faUser } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { AuthService } from 'src/app/shared/auth/auth.service';
|
||||
import { HttpError } from 'src/app/shared/model/httpError/httpError.model';
|
||||
import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
|
||||
import UserChecker from 'src/app/shared/model/user/user.checker';
|
||||
import { User } from 'src/app/shared/model/user/user.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrls: ['./login.component.css']
|
||||
})
|
||||
export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||
|
||||
@Input()
|
||||
state: boolean = false;
|
||||
|
||||
@Input()
|
||||
ignoreClickOutside!: HTMLDivElement[];
|
||||
|
||||
@Output()
|
||||
stateChange = new EventEmitter<boolean>();
|
||||
|
||||
popupState = false;
|
||||
|
||||
loginForm!: FormGroup;
|
||||
|
||||
authSubject!: Subscription;
|
||||
|
||||
errorMessage!: string|null;
|
||||
|
||||
_userIcon = faUser;
|
||||
|
||||
_passwordIcon = faLock;
|
||||
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loginForm = new FormGroup({
|
||||
'username' : new FormControl(null, [Validators.required]),
|
||||
'password' : new FormControl(null, [Validators.required])
|
||||
});
|
||||
this.errorMessage = null;
|
||||
this.authSubject = this.authService.authSubject.subscribe(
|
||||
res => {
|
||||
this.validateLogin(res);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.popupState = this.state;
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.authSubject.unsubscribe();
|
||||
}
|
||||
|
||||
onStateChange(state: boolean) {
|
||||
this.stateChange.emit(state);
|
||||
}
|
||||
|
||||
onLogin() {
|
||||
let user: User = {
|
||||
username: this.loginForm.controls['username'].value,
|
||||
password: this.loginForm.controls['password'].value
|
||||
}
|
||||
this.authService.login(user);
|
||||
|
||||
}
|
||||
|
||||
private validateLogin(res: User|HttpError|null) {
|
||||
if (res && UserChecker.test(res)) {
|
||||
this.closePopup()
|
||||
} if (HttpErrorChecker.test(res)) {
|
||||
this.errorMessage = (<HttpError>res).details;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private closePopup() {
|
||||
this.popupState = false;
|
||||
this.loginForm.reset();
|
||||
}
|
||||
|
||||
}
|
||||
144
src/app/header/header-popup/signup/signup.component.css
Normal file
144
src/app/header/header-popup/signup/signup.component.css
Normal file
@@ -0,0 +1,144 @@
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.authentication-container {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.auth-body {
|
||||
justify-content: space-around;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.auth-body-form {
|
||||
height: 300px;
|
||||
}
|
||||
.auth-body-links {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.auth-body .btn {
|
||||
background-color: #D8291C !important;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
height: 45px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.auth-body form {
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.separator-line {
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin: 30px 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #80808076;
|
||||
}
|
||||
|
||||
.input-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-bottom: 2px solid #7676769b;
|
||||
}
|
||||
.input-div:after {
|
||||
content: '';
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
bottom: -2px;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
background-color: #f44336;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.input-div:hover:after {
|
||||
width: 100%;
|
||||
transition: .4s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.input-div > .form-control, .input-div > .form-control:focus {
|
||||
border: none;
|
||||
border-color: inherit;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input-div > .form-control::placeholder,
|
||||
.input-div > .form-control,
|
||||
.input-div > .input-div-icon {
|
||||
font-size: 17px;
|
||||
color: #767676;
|
||||
}
|
||||
.input-div >.form-control:-webkit-autofill {
|
||||
-webkit-text-fill-color: #767676;
|
||||
box-shadow: 0 0 0px 1000px #ffffff inset;
|
||||
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
|
||||
}
|
||||
|
||||
.input-div:hover > .form-control::placeholder,
|
||||
.input-div:hover > .input-div-icon {
|
||||
color: #D8291C;
|
||||
transition: .3s;
|
||||
}
|
||||
.input-div:hover > .form-control::placeholder {
|
||||
font-weight: 500;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
@media (min-width:767px) {
|
||||
|
||||
.authentication-container {
|
||||
min-width: 630px;
|
||||
}
|
||||
|
||||
.auth-body {
|
||||
all: unset;
|
||||
justify-content: space-around;
|
||||
width: calc(49.7% - 60px);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 300px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.separator-line {
|
||||
all: unset;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin: 0px 60px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.line {
|
||||
all: unset;
|
||||
border-right: 2px solid #80808076;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
62
src/app/header/header-popup/signup/signup.component.html
Normal file
62
src/app/header/header-popup/signup/signup.component.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<app-popup [state]="state"
|
||||
(stateChange)="onStateChange($event)"
|
||||
[ignoreClickOutside]="ignoreClickOutside">
|
||||
{{errorMessage}}
|
||||
<div class="container authentication-container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 auth-body auth-body-form">
|
||||
<form [formGroup]="signupForm" (ngSubmit)="onSignUp()">
|
||||
<div class="input-div">
|
||||
<fa-icon class="input-div-icon"
|
||||
[icon]="_fullnameIcon">
|
||||
</fa-icon>
|
||||
<input type="text" id="fullname"
|
||||
formControlName="fullname"
|
||||
class="form-control"
|
||||
placeholder="Full Name">
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<fa-icon class="input-div-icon"
|
||||
[icon]="_emailIcon">
|
||||
</fa-icon>
|
||||
<input type="text" id="email"
|
||||
formControlName="email"
|
||||
class="form-control"
|
||||
placeholder="Email">
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<fa-icon class="input-div-icon"
|
||||
[icon]="_userIcon">
|
||||
</fa-icon>
|
||||
<input type="text" id="username"
|
||||
formControlName="username"
|
||||
class="form-control"
|
||||
placeholder="Username">
|
||||
</div>
|
||||
<div class="input-div">
|
||||
<fa-icon class="input-div-icon"
|
||||
[icon]="_passwordIcon">
|
||||
</fa-icon>
|
||||
<input type="password" id="password"
|
||||
formControlName="password"
|
||||
class="form-control"
|
||||
placeholder="Password">
|
||||
</div>
|
||||
<button class="btn"
|
||||
type="submit">
|
||||
SignUp
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="separator-line">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="col-lg-6 auth-body auth-body-links">
|
||||
<p>Google</p>
|
||||
<p>Linkedin</p>
|
||||
<p>Github</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</app-popup>
|
||||
23
src/app/header/header-popup/signup/signup.component.spec.ts
Normal file
23
src/app/header/header-popup/signup/signup.component.spec.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SignupComponent } from './signup.component';
|
||||
|
||||
describe('SignupComponent', () => {
|
||||
let component: SignupComponent;
|
||||
let fixture: ComponentFixture<SignupComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ SignupComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(SignupComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
89
src/app/header/header-popup/signup/signup.component.ts
Normal file
89
src/app/header/header-popup/signup/signup.component.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { faEnvelope, faFingerprint, faLock, faUser } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { AuthService } from 'src/app/shared/auth/auth.service';
|
||||
import { HttpError } from 'src/app/shared/model/httpError/httpError.model';
|
||||
import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
|
||||
import UserChecker from 'src/app/shared/model/user/user.checker';
|
||||
import { User } from 'src/app/shared/model/user/user.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-signup',
|
||||
templateUrl: './signup.component.html',
|
||||
styleUrls: ['./signup.component.css']
|
||||
})
|
||||
export class SignupComponent implements OnInit {
|
||||
|
||||
@Input()
|
||||
state: boolean = false;
|
||||
|
||||
@Input()
|
||||
ignoreClickOutside!: HTMLDivElement[];
|
||||
|
||||
@Output()
|
||||
stateChange = new EventEmitter<boolean>();
|
||||
|
||||
signupForm!: FormGroup;
|
||||
|
||||
authSubject!: Subscription;
|
||||
|
||||
errorMessage!: string|null;
|
||||
|
||||
_fullnameIcon = faFingerprint;
|
||||
|
||||
_emailIcon = faEnvelope;
|
||||
|
||||
_userIcon = faUser;
|
||||
|
||||
_passwordIcon = faLock;
|
||||
|
||||
constructor(private authService: AuthService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.signupForm = new FormGroup({
|
||||
'fullname': new FormControl(null, [Validators.required]),
|
||||
// Create a Email Validator
|
||||
'email': new FormControl(null, [Validators.required]),
|
||||
'username': new FormControl(null, [Validators.required]),
|
||||
// Create a Password Validator
|
||||
'password': new FormControl(null, [Validators.required])
|
||||
});
|
||||
this.errorMessage = null;
|
||||
this.authSubject = this.authService.authSubject.subscribe(
|
||||
res => {
|
||||
this.validateSignup(res);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onStateChange(state: boolean) {
|
||||
this.stateChange.emit(state);
|
||||
}
|
||||
|
||||
onSignUp() {
|
||||
let user: User = {
|
||||
fullname: this.signupForm.controls['fullname'].value,
|
||||
email: this.signupForm.controls['email'].value,
|
||||
username: this.signupForm.controls['username'].value,
|
||||
password: this.signupForm.controls['password'].value
|
||||
}
|
||||
this.authService.signup(user);
|
||||
}
|
||||
|
||||
private validateSignup(res: User|HttpError|null) {
|
||||
if (res && UserChecker.test(res)) {
|
||||
this.closePopup()
|
||||
} if (HttpErrorChecker.test(res)) {
|
||||
this.errorMessage = (<HttpError>res).details;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private closePopup() {
|
||||
this.state = false;
|
||||
this.signupForm.reset();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user