FrontEnd Angular - v0.0.1-alpha

src/app/header/header-dropdown/header-dropdown.component.css

@@ -0,0 +1,67 @@
+.dropdown {
+    width: 180px;
+    border-radius: 8px;
+    background-color: #ffffff;
+    border: 1px solid rgba(46, 46, 46, .3);
+    box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
+    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.2);
+}
+
+.dropdown:before {
+    content: '';
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    background-color: #ffffff;
+    border-top: 1px solid rgba(46, 46, 46, .3);
+    border-left: 1px solid rgba(46, 46, 46, .3);
+    transform: translateX(120px) translateY(-50%) rotate(45deg);
+}
+
+.info h3{
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    font-size: 20px;
+    font-weight: 400;
+    color: #555555;
+}
+
+.user-management {
+    padding: 0;
+    margin-bottom: 10px;
+}
+
+.dropdown-item {
+    display: flex; 
+    align-items: center;
+    padding: 8px 30px;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.dropdown-item .icon-box {
+    width: 22px;
+    margin: 0;
+}
+
+.dropdown-item .icon-box fa-icon {
+    color: #919294;
+    font-size: 20px;
+}
+
+.dropdown-item:hover .icon-box fa-icon {
+    opacity: 1;
+    color: #f44336;
+    transition: .5s;
+}
+
+.dropdown-item p {
+    color: #555555;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    text-decoration: none;
+    padding-left: 10px;
+    margin: 0;
+}

src/app/header/header-dropdown/header-dropdown.component.html

@@ -0,0 +1,49 @@
+<div 
+    class="dropdown" 
+    appClickedOutside 
+    (clickOutside)="onClickedOutside()" 
+    [includeClickedOutside]="[management]"
+    [ignoreElementList]="ignoreClickOutside" 
+    [@dropdownState]="dropDownState"
+    (@dropdownState.start)="$event.element.style.display = 'block'"
+    (@dropdownState.done)="$event.element.style.display = (state ? 'block' : 'none')">
+    <div class="info">
+        <h3>{{ this.user ? this.user.username : 'User Account' }}</h3>
+    </div>
+    <div #management>
+        <ul class="user-management" *ngIf="!this.user">
+            <li class="dropdown-item" (click)="onLoginOptionClicked()">
+                <div class="icon-box">
+                    <fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
+                </div>
+                <p>Login</p>
+            </li>
+            <li class="dropdown-item" (click)="onSignUpOptionClick()">
+                <div class="icon-box">
+                    <fa-icon class="fas fa-edit" [icon]="editIcon"></fa-icon>
+                </div>
+                <p>Sign up</p>
+            </li>
+        </ul>
+        <ul class="user-management" *ngIf="this.user">
+            <li class="dropdown-item">
+                <div class="icon-box">
+                    <fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
+                </div>
+                <p>My Profile</p>
+            </li>
+            <li class="dropdown-item">
+                <div class="icon-box">
+                    <fa-icon class="fas fa-question-circle" [icon]="questionCircleIcon"></fa-icon>
+                </div>
+                <p>Help</p>
+            </li>
+            <li class="dropdown-item" (click)="onLogout()">
+                <div class="icon-box">
+                    <fa-icon class="fas fa-sign-out-alt" [icon]="signOutAltIcon"></fa-icon>
+                </div>
+                <p>Logout</p>
+            </li>
+        </ul>
+    </div>
+</div>

src/app/header/header-dropdown/header-dropdown.component.spec.ts

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

src/app/header/header-dropdown/header-dropdown.component.ts

@@ -0,0 +1,93 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { faEdit, faQuestionCircle, faSignOutAlt, faUser } from '@fortawesome/free-solid-svg-icons';
+import { Subscription, timeout } from 'rxjs';
+import { AuthService } from 'src/app/shared/auth/auth.service';
+import UserChecker from 'src/app/shared/model/user/user.checker';
+import { User } from 'src/app/shared/model/user/user.model';
+
+@Component({
+    selector: 'app-header-dropdown',
+    templateUrl: './header-dropdown.component.html',
+    styleUrls: ['./header-dropdown.component.css'],
+    animations: [
+        trigger('dropdownState', [
+            state('hide', style({
+                'opacity': '0'
+            })),
+            state('show', style({
+                'opacity': '1'
+            })),
+            transition('hide => show', animate('20ms ease-in')),
+            transition('show => hide', animate('5ms ease-out'))
+        ])
+    ]
+})
+export class HeaderDropdownComponent implements OnInit, OnDestroy {
+    
+    userIcon = faUser;
+
+    editIcon = faEdit;
+
+    questionCircleIcon = faQuestionCircle;
+
+    signOutAltIcon = faSignOutAlt;
+
+    user!: User | null;
+
+    private userSubscription!: Subscription;
+
+    @Input()
+        state: boolean = false;
+
+    @Input()
+        ignoreClickOutside!: HTMLDivElement[];
+
+    @Output()
+        clickOutside = new EventEmitter();
+
+    @Output()
+        loginPopupState: EventEmitter<boolean> = new EventEmitter();
+
+    @Output()
+        signupPopupState: EventEmitter<boolean> = new EventEmitter();
+
+    constructor(private authService: AuthService) { }
+
+    ngOnInit(): void {
+        this.userSubscription = this.authService.authSubject.subscribe(
+            res => {
+                if (res && UserChecker.test(res)) {
+                    this.user = <User>res;
+                } else {
+                    this.user = null;
+                }
+            }
+        )
+    }
+
+    ngOnDestroy(): void {
+        this.userSubscription.unsubscribe();
+    }
+
+    get dropDownState() {
+        return this.state ? 'show' : 'hide';
+    }
+
+    onClickedOutside() {
+        this.clickOutside.emit();
+    }
+
+    onLoginOptionClicked() {
+        this.loginPopupState.emit(true);
+    }
+
+    onSignUpOptionClick() {
+        this.signupPopupState.emit(true);
+    }
+
+    onLogout() {
+        this.authService.logout();
+    }
+
+}

src/app/header/header-popup/login/login.component.css

@@ -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%;
+    }
+
+}

src/app/header/header-popup/login/login.component.html

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

src/app/header/header-popup/login/login.component.spec.ts

@@ -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();
+    });
+});

src/app/header/header-popup/login/login.component.ts

@@ -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();
+    }
+
+}

src/app/header/header-popup/signup/signup.component.css

@@ -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%;
+    }
+
+}

src/app/header/header-popup/signup/signup.component.html

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

src/app/header/header-popup/signup/signup.component.spec.ts

@@ -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();
+    });
+});

src/app/header/header-popup/signup/signup.component.ts

@@ -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();
+    }
+
+
+}

src/app/header/header-slider/header-slider.component.css

@@ -0,0 +1,9 @@
+.slider {
+    background-color: #2e2e2e;
+    width: 50%;
+    height: 90vh;
+    position: absolute;
+    top: 10vh;
+    right: 0;
+    overflow: hidden !important;
+}

src/app/header/header-slider/header-slider.component.html

@@ -0,0 +1,8 @@
+<div class="slider"
+appClickedOutside
+[ignoreElementList]="ignoreClickOutside"
+[clickOutsideStopWatching]="clickOutsideStopWatching"
+(clickOutside)="closeNavSlider()"
+[@slideState]="sliderStatus">
+    <ng-content></ng-content>
+</div>

src/app/header/header-slider/header-slider.component.spec.ts

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

src/app/header/header-slider/header-slider.component.ts

@@ -0,0 +1,70 @@
+import { animate, animateChild, group, query, state, style, transition, trigger } from '@angular/animations';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'app-header-slider',
+    templateUrl: './header-slider.component.html',
+    styleUrls: ['./header-slider.component.css'],
+    animations:[
+        trigger('slideState', [
+            state('hide', style({
+                transform: 'translateX(100%)'
+            })),
+            state('show', style({
+                transform: 'translateX(0%)'
+            })),
+            transition(
+                'hide => show', [
+                    group([
+                        query(
+                            "@*", 
+                            animateChild(),
+                            { optional: true }
+                        ),
+                        animate('600ms ease-in')
+                    ])
+                ]),
+            transition(
+                'show => hide', [
+                    group([
+                        query(
+                            "@*", 
+                            animateChild(), 
+                            { optional: true }
+                        ),
+                        animate('500ms ease-out')
+                    ])
+                ])
+        ])
+    ]
+})
+export class HeaderSliderComponent {
+
+    @Input()
+        ignoreClickOutside!: HTMLDivElement[];
+
+    @Input()
+        clickOutsideStopWatching: boolean = false;
+
+    @Input()
+        state: boolean = false;
+
+    @Output()
+        stateChange = new EventEmitter<boolean>();
+
+    constructor() { }
+
+    get sliderStatus() {
+        return this.state ? 'show' : 'hide';
+    }
+
+    public closeNavSlider(): void {
+        this.state = false;   
+        this.changeState();
+    }
+
+    public changeState() {
+        this.stateChange.emit(this.state)
+    }
+    
+}

src/app/header/header-slider/nav-slider/nav-slider.component.css

@@ -0,0 +1,72 @@
+.links-container {
+    height: 70%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav-links {
+    height: 60%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.nav-links ul {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.nav-links li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.nav-links li a {
+    text-decoration: none;
+    font-family: 'Montserrat';
+    font-weight: 400;
+    color: #ffffff;
+    font-size: 18px;
+}
+
+
+.nav-links li a:hover {
+    opacity: .8;
+    color: #f44336;
+    transition: 0.5s;
+}
+
+.profile-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30%;
+}
+
+.profile {
+    display: unset;
+    cursor: pointer;
+    height: 45px;
+    width: 45px;
+}
+
+.profile .profile-btn {
+    display: flex;
+    border: 5px solid #ffffff;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+    height: 45px;
+    width: 45px;
+}
+
+.profile .profile-btn fa-icon {
+    font-size: 25px;
+}

src/app/header/header-slider/nav-slider/nav-slider.component.html

@@ -0,0 +1,22 @@
+<div class="links-container">
+    <div class="nav-links">
+        <ul>
+            <li *ngFor="let nav of navLink; let i=index"[@animateSliderItem]="{ value: itemStatus, params: { fadeInTime: .6 + i/20 , fadeOutTime: .6 - i/10 } }">
+                <a [routerLink]="nav.link">
+                    {{nav.page}}
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<div class="profile-container">
+    <div class="profile"
+    [@animateSliderItem]="{ value: itemStatus, params: { fadeInTime: .6 + (navLink.length+1)/20 , fadeOutTime: .6 - (navLink.length+1)/10 } }"
+    #profile>
+        <div class="profile-btn"
+        (click)="onProfileButtonClicked()">
+            <fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
+        </div>
+    </div>
+</div>

src/app/header/header-slider/nav-slider/nav-slider.component.spec.ts

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

src/app/header/header-slider/nav-slider/nav-slider.component.ts

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { SliderItemComponent } from 'src/app/shared/components/slider-item/slider-item.component';
+
+@Component({
+    selector: 'app-nav-slider',
+    templateUrl: './nav-slider.component.html',
+    styleUrls: ['./nav-slider.component.css']
+})
+export class NavSliderComponent extends SliderItemComponent {
+    
+    userIcon = faUser;
+
+    navLink = [
+        { page: "Home", link: "/home" },
+        { page: "Work", link: "/home" },
+        { page: "Contact", link: "/home" },
+        { page: "About", link: "/home" }
+    ]
+
+    @Output()
+        profileButtonClicked = new EventEmitter();
+
+    constructor() {
+        super();
+    }
+
+    onProfileButtonClicked() {
+        this.profileButtonClicked.emit();
+    }
+
+}

src/app/header/header-slider/user-slider/user-slider.component.css

@@ -0,0 +1,44 @@
+.user-container {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    height: 70%;
+}
+
+.user-options {
+    justify-content: space-between;
+    flex-direction: column;
+    display: flex;
+    height: 60%;
+}
+
+.user-options ul {
+    justify-content: space-around;
+    flex-direction: column;
+    display: flex;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+.user-options li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.user-options li a {
+    font-family: 'Montserrat';
+    text-decoration: none;
+    font-weight: 400;
+    color: #ffffff;
+    font-size: 18px;
+}
+
+
+.user-options li a:hover {
+    color: #f44336;
+    transition: 0.5s;
+    cursor: pointer;
+    opacity: .8;
+}

src/app/header/header-slider/user-slider/user-slider.component.html

@@ -0,0 +1,11 @@
+<div class="user-container">
+    <div class="user-options">
+        <ul>
+            <li *ngFor="let options of (user ? userOptions : userlessOptions); let i=index"[@animateSliderItem]="{ value: itemStatus, params: { fadeInTime: .6 + i/10 , fadeOutTime: .6 - i/10 } }">
+                <a (click)="options.onClick()">
+                    {{options.name}}
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>

src/app/header/header-slider/user-slider/user-slider.component.spec.ts

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

src/app/header/header-slider/user-slider/user-slider.component.ts

@@ -0,0 +1,87 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { AuthService } from 'src/app/shared/auth/auth.service';
+import { SliderItemComponent } from 'src/app/shared/components/slider-item/slider-item.component';
+import UserChecker from 'src/app/shared/model/user/user.checker';
+import { User } from 'src/app/shared/model/user/user.model';
+
+@Component({
+    selector: 'app-user-slider',
+    templateUrl: './user-slider.component.html',
+    styleUrls: ['./user-slider.component.css']
+})
+export class UserSliderComponent extends SliderItemComponent implements OnInit {
+    
+    userlessOptions = [
+        {
+            name: "Login",
+            onClick: () => {
+                this.loginOptionClicked();
+            }
+        },
+        {
+            name: "Signup",
+            onClick: () => {
+                this.signupOptionClicked();
+            }
+        }
+    ]
+
+    userOptions = [
+        {
+            name: "My Profile",
+            onClick: () => {}
+        },
+        {
+            name: "Help",
+            onClick: () => {}
+        },
+        {
+            name: "Logout",
+            onClick: () => {
+                this.onLogout();
+            }
+        }
+    ]
+
+    user!: User|null;
+
+    authSubscription!: Subscription;
+
+
+    @Output()
+        loginPopupState = new EventEmitter<boolean>();
+
+    @Output()
+        signupPopupState = new EventEmitter<boolean>();
+
+    constructor(private authService: AuthService) {
+        super();
+    }
+
+    ngOnInit() {
+        this.authSubscription = 
+            this.authService.authSubject.subscribe(
+                res => {
+                    if (UserChecker.test(res)) {
+                        this.user = <User>res;
+                    } else {
+                        this.user = null;
+                    }
+                }
+            )
+    }
+
+    loginOptionClicked(): void {
+        this.loginPopupState.emit(true);
+    }
+
+    signupOptionClicked(): void {
+        this.signupPopupState.emit(true);
+    }
+
+    onLogout() {
+        this.authService.logout();
+    }
+
+}

src/app/header/header.component.css

@@ -0,0 +1,179 @@
+.header {
+    top: 0;
+    left: 0;
+    display: flex;
+    position: fixed;
+    width: 100%;
+    background-color: #2e2e2e;
+    height: 10vh;
+    min-height: 80px;
+}
+
+.header-spacer {
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    background-color: #2e2e2e;
+    height: 10vh;
+    min-height: 80px;
+}
+
+.main {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+}
+
+.logo img {
+    width: 50px;
+    height: 50px;
+}
+
+.nav-links {
+    display: none;
+}
+
+.burger-container {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.burger-menu {
+    width: 40px;
+    height: 5px;
+    background: #ffffff;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
+    transition: all .5s ease-in-out;
+}
+
+.burger-menu::before,
+.burger-menu::after {
+    content: '';
+    position: absolute;
+    width: 40px;
+    height: 5px;
+    background: #ffffff;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
+    transition: all .5s ease-in-out;
+}
+
+.burger-menu::before {
+    transform: translateY(-12px);
+}
+
+.burger-menu::after {
+    transform: translateY(12px);
+}
+
+.burger-menu.open {
+    background: transparent;
+    box-shadow: none;
+    transition: all .5s ease-in-out;
+}
+
+.burger-menu.open::before {
+    transform: rotate(45deg);
+    transition: all .5s ease-in-out;
+}
+
+.burger-menu.open::after {
+    transform: rotate(-45deg);
+    transition: all .5s ease-in-out;
+}
+
+.profile {
+    display: none;
+}
+
+app-header-slider {
+    opacity: 1;
+}
+
+/* ====================== COMPUTER MEDIA FORMAT ======================== */
+
+@media only screen and (min-width: 712px) {
+
+    .nav-links {
+        all: unset;
+        width: 50%;
+    }
+    
+    .link-container {
+        display: flex;
+        justify-content: space-around;
+        padding: 0;
+        margin: 0;
+    }
+    
+    .link-container li {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #ffffff;
+        text-decoration: none;
+    }
+    
+    .link-container li a {
+        font-family: 'Montserrat', sans-serif;
+        text-decoration: none;
+        letter-spacing: 3px;
+        color: #ffffff;
+        font-weight: 500;
+        font-size: 16px;
+    }
+
+    .profile {
+        display: unset;
+        height: 45px;
+        width: 45px;
+        cursor: pointer;
+    }
+
+    .profile .profile-btn {
+        display: flex;
+        border: 5px solid #ffffff;
+        border-radius: 50%;
+        justify-content: center;
+        align-items: center;
+        color: #ffffff;
+        height: 45px;
+        width: 45px;
+    }
+
+    .profile .dropdown {
+        top: 15px;
+        right: 106px;
+    }
+
+    .profile .profile-btn fa-icon {
+        font-size: 25px;
+    }
+
+    .burger-container {
+        display: none;
+        all: unset;
+    }
+
+    .burger-menu {
+        display: none;
+        all: unset;
+    }
+
+    .burger-menu::before,
+    .burger-menu::after {
+        display: none;
+        all: unset;
+    }
+
+    app-header-slider {
+        opacity: 0;
+    }
+
+}

src/app/header/header.component.html

@@ -0,0 +1,70 @@
+<div class="header">
+    <div class="main" #header>
+        <div class="logo">
+            <a routerLink="">
+                <img src="assets/img/logohideyoshi-white.png" alt="">
+            </a>
+        </div>
+        <div class="nav-links">
+            <ul class="link-container">
+                <li><a routerLink="/home">Home</a></li>
+                <li><a routerLink="/home">Work</a></li>
+                <li><a routerLink="/home">Contact</a></li>
+                <li><a routerLink="/home">About</a></li>
+            </ul>
+        </div>
+
+        <div class="profile" #profileDropdown>
+            <div class="profile-btn" (click)="toogleProfileDropdown()" #profileBtn>
+                <fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
+            </div>
+            <app-header-dropdown 
+                class="dropdown" 
+                (clickOutside)="closeDropdown()" 
+                [ignoreClickOutside]="[profileBtn]"
+                [state]="profileDropdownState"
+                (loginPopupState)="loginPopupStateChange($event)"
+                (signupPopupState)="signupPopupStateChange($event)">
+            </app-header-dropdown>
+        </div>
+        <div class="burger-container" (click)="toogleNavSlider()">
+            <div class="burger-menu" [ngClass]="{'open' : navSliderStatus}">
+            </div>
+        </div>
+    </div>
+    <div #nav>
+        <app-header-slider
+        [(state)]="navSliderStatus"
+        [clickOutsideStopWatching]="userSliderStatus"
+        [ignoreClickOutside]="[header, user]">
+            <app-nav-slider
+                [state]="navSliderStatus"
+                (profileButtonClicked)="profileButtonClicked()">
+            </app-nav-slider>
+        </app-header-slider>
+    </div>
+    
+    <div #user>
+        <app-header-slider
+        [(state)]="userSliderStatus"
+        [ignoreClickOutside]="[header, nav]">
+            <app-user-slider 
+                [state]="userSliderStatus"
+                (loginPopupState)="loginPopupStateChange($event)"
+                (signupPopupState)="signupPopupStateChange($event)">
+            </app-user-slider>
+        </app-header-slider>
+    </div>
+</div>
+<div class="header-spacer"></div>
+
+<!-- <app-login 
+*ngIf="loginPopupState"
+[(state)]="loginPopupState"
+[ignoreClickOutside]="[profileBtn, profileDropdown, user]">
+</app-login>
+
+<app-signup
+[(state)]="signupPopupState"
+[ignoreClickOutside]="[profileBtn, profileDropdown, user]">
+</app-signup> -->

src/app/header/header.component.spec.ts

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

src/app/header/header.component.ts

@@ -0,0 +1,143 @@
+import { Component, ComponentRef, ElementRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { LoginComponent } from './header-popup/login/login.component';
+import { SignupComponent } from './header-popup/signup/signup.component';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.css']
+})
+export class HeaderComponent {
+
+    userIcon = faUser;
+
+    profileDropdownState: boolean = false;
+
+    signupPopupState: boolean = false;
+
+    navSliderStatus: boolean = false;
+    userSliderStatus: boolean = false;
+
+    @ViewChild('profileBtn')
+        profileBtnElementRef!: ElementRef;
+    
+    @ViewChild('profileDropdown')
+        profileDropdownElementRef!: ElementRef;
+    
+    @ViewChild('user')
+        userElementRef!: ElementRef;
+
+    private loginComponent!: ComponentRef<LoginComponent>;
+
+    private signupComponent!: ComponentRef<SignupComponent>;
+
+    constructor(private viewContainerRef: ViewContainerRef) { }
+
+
+    public toogleProfileDropdown(): void {
+        this.profileDropdownState = !this.profileDropdownState;
+    }
+
+    public toogleNavSlider(): void {
+        if (this.userSliderStatus) {
+            this.userSliderStatus = false;
+        } else {
+            if (this.navSliderStatus) {
+                this.navSliderStatus = false;
+            } else {
+                this.navSliderStatus = true;
+            }
+        }
+    }
+
+    public profileButtonClicked(): void {
+        this.userSliderStatus = true;
+    }
+
+    public closeDropdown(): void {
+        this.profileDropdownState = false;
+    }
+
+    public closeNavSlider(): void {
+        if (this.userSliderStatus) {
+            this.userSliderStatus = false;
+        } else {
+            this.navSliderStatus = false;   
+        }
+    }
+
+    public loginPopupStateChange(state: boolean): void {
+
+        if (state) {
+            this.createLoginPopup();
+        } else {
+            this.closeLoginPopup();
+        }
+
+    }
+
+    private createLoginPopup(): void {
+        this.loginComponent = this.viewContainerRef.createComponent(LoginComponent);
+        this.loginComponent.instance.state = true;
+
+        this.loginComponent.instance.ignoreClickOutside = [
+            this.profileBtnElementRef,
+            this.profileDropdownElementRef,
+            this.userElementRef
+        ].map(element => element.nativeElement);
+
+        this.loginComponent.instance.stateChange.subscribe(
+            state => {
+                if (!state) {
+                    this.closeLoginPopup()
+                }
+            }
+        );
+
+        this.navSliderStatus = false;
+        this.userSliderStatus = false;
+    }
+
+    private createSignupPopup() {
+        this.signupComponent = this.viewContainerRef.createComponent(SignupComponent);
+        this.signupComponent.instance.state = true;
+
+        this.signupComponent.instance.ignoreClickOutside = [
+            this.profileBtnElementRef,
+            this.profileDropdownElementRef,
+            this.userElementRef
+        ].map(element => element.nativeElement);
+
+        this.signupComponent.instance.stateChange.subscribe(
+            state => {
+                if (!state) {
+                    this.closeSignupPopup()
+                }
+            }
+        );
+
+        this.navSliderStatus = false;
+        this.userSliderStatus = false;
+    }
+
+    private closeLoginPopup() {
+        this.loginComponent.destroy();
+    }
+
+    private closeSignupPopup() {
+        this.signupComponent.destroy();
+    }
+
+    public signupPopupStateChange(state: boolean): void {
+        this.signupPopupState = state;
+
+        if (state) {
+            this.createSignupPopup();
+        } else {
+            this.closeSignupPopup();
+        }
+
+    }
+
+}

src/app/header/header.module.ts

@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+
+import { HeaderComponent } from './header.component';
+import { HeaderSliderComponent } from './header-slider/header-slider.component';
+import { NavSliderComponent } from './header-slider/nav-slider/nav-slider.component';
+import { UserSliderComponent } from './header-slider/user-slider/user-slider.component';
+import { HeaderDropdownComponent } from './header-dropdown/header-dropdown.component';
+import { SharedModule } from '../shared/shared.module';
+import { AppRouterModule } from '../app-router.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { LoginComponent } from './header-popup/login/login.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SignupComponent } from './header-popup/signup/signup.component';
+
+
+
+@NgModule({
+    declarations: [
+        HeaderComponent,
+        HeaderSliderComponent,
+        NavSliderComponent,
+        UserSliderComponent,
+        HeaderDropdownComponent,
+        LoginComponent,
+        SignupComponent
+    ],
+    imports: [
+        CommonModule,
+        BrowserAnimationsModule,
+        AppRouterModule,
+        FontAwesomeModule,
+        FormsModule,
+        ReactiveFormsModule,
+        SharedModule
+    ], exports: [
+        HeaderComponent,
+        HeaderSliderComponent,
+        NavSliderComponent,
+        UserSliderComponent
+    ]
+})
+export class HeaderModule { }