FrontEnd Angular - v0.0.1-alpha

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