Skip to content

Commit

Permalink
added registration capability
Browse files Browse the repository at this point in the history
  • Loading branch information
maxkarnold committed Feb 1, 2022
1 parent 41e1faf commit 5bf9932
Show file tree
Hide file tree
Showing 5 changed files with 373 additions and 214 deletions.
181 changes: 143 additions & 38 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,40 +1,145 @@
<header class="header header--mobile">
<mat-toolbar color="primary" class="nav-bar">
<a routerLink="/" class="logo logo--ripple">
<span class="logo__title">National Team Generator</span>
</a>
<span class="nav-bar__nav-spacer"></span>
<button mat-icon-button class="nav-bar__menu-button nav-bar__menu-button--ripple" aria-label="Example icon-button with menu icon" (click)="navToggle = !navToggle" >
<mat-icon class="nav-bar__menu-button__icon">menu</mat-icon>
</button>
</mat-toolbar>
<mat-nav-list class="nav-list" role="list" *ngIf="navToggle">
<a routerLink="/leaderboard" class="nav-list__link nav-list__link--ripple">Leaderboards</a>
<a class="nav-list__link nav-list__link--ripple" (click)="loginOverlay()" *ngIf="!isLoggedIn" cdkOverlayOrigin #trigger="cdkOverlayOrigin">Login</a>
<a class="nav-list__link nav-list__link--ripple" (click)="logout()" *ngIf="isLoggedIn">Logout</a>
</mat-nav-list>
</header>
<header class="header header--desktop">
<mat-toolbar color="primary" class="nav-bar">
<a routerLink="/" class="logo logo--ripple">
<span class="logo__title">National Team Generator</span>
</a>
<span class="nav-bar__nav-spacer"></span>
<a routerLink="/leaderboard" class="nav-bar__link nav-bar__link--ripple">Leaderboards</a>
<a (click)="loginOverlay()" *ngIf="!isLoggedIn" class="nav-bar__link nav-bar__link--ripple">Login</a>
<a (click)="logout()" *ngIf="isLoggedIn" class="nav-bar__link nav-bar__link--ripple">Logout</a>
</mat-toolbar>
</header>
<ng-container *ngIf="loginOverlayOpen" class="ng-container">
<div class="login-overlay ng-container__login-overlay">
<div class="login-overlay__exit">
<button mat-button (click)="loginOverlay()" class="login-overlay__exit__button">
<mat-icon class="login-overlay__exit__button__icon">close</mat-icon>
</button>
</div>
<input class="login-overlay__input login-overlay__input--override" type="text" #email placeholder="email">
<input class="login-overlay__input login-overlay__input--override" type="password" #password placeholder="password">
<button mat-raised-button type="submit" (click)="login(email.value, password.value)" class="login-overlay__button login-overlay__button--ripple">Login</button>
<header class="header header--mobile">
<mat-toolbar color="primary" class="nav-bar">
<a routerLink="/" class="logo logo--ripple">
<span class="logo__title">National Team Generator</span>
</a>
<span class="nav-bar__nav-spacer"></span>
<button
mat-icon-button
class="nav-bar__menu-button nav-bar__menu-button--ripple"
aria-label="Example icon-button with menu icon"
(click)="navToggle = !navToggle"
>
<mat-icon class="nav-bar__menu-button__icon">menu</mat-icon>
</button>
</mat-toolbar>
<mat-nav-list class="nav-list" role="list" *ngIf="navToggle">
<a routerLink="/leaderboard" class="nav-list__link nav-list__link--ripple"
>Leaderboards</a
>
<a
class="nav-list__link nav-list__link--ripple"
(click)="loginOverlay()"
*ngIf="!isLoggedIn"
cdkOverlayOrigin
#trigger="cdkOverlayOrigin"
>Login</a
>
<a
class="nav-list__link nav-list__link--ripple"
(click)="registerOverlay()"
*ngIf="!isLoggedIn"
cdkOverlayOrigin
#trigger="cdkOverlayOrigin"
>Register</a
>
<a
class="nav-list__link nav-list__link--ripple"
(click)="logout()"
*ngIf="isLoggedIn"
>Logout</a
>
</mat-nav-list>
</header>
<header class="header header--desktop">
<mat-toolbar color="primary" class="nav-bar">
<a routerLink="/" class="logo logo--ripple">
<span class="logo__title">National Team Generator</span>
</a>
<span class="nav-bar__nav-spacer"></span>
<a routerLink="/leaderboard" class="nav-bar__link nav-bar__link--ripple"
>Leaderboards</a
>
<a
(click)="loginOverlay()"
*ngIf="!isLoggedIn"
class="nav-bar__link nav-bar__link--ripple"
>Login</a
>
<a
(click)="registerOverlay()"
*ngIf="!isLoggedIn"
class="nav-bar__link nav-bar__link--ripple"
>Register</a
>
<a
(click)="logout()"
*ngIf="isLoggedIn"
class="nav-bar__link nav-bar__link--ripple"
>Logout</a
>
</mat-toolbar>
</header>
<ng-container *ngIf="loginOverlayOpen" class="ng-container">
<div class="login-overlay ng-container__login-overlay">
<div class="login-overlay__exit">
<button
mat-button
(click)="loginOverlay()"
class="login-overlay__exit__button"
>
<mat-icon class="login-overlay__exit__button__icon">close</mat-icon>
</button>
</div>
</ng-container>
<input
class="login-overlay__input login-overlay__input--override"
type="text"
#email
placeholder="Email"
/>
<input
class="login-overlay__input login-overlay__input--override"
type="password"
#password
placeholder="Password"
/>
<button
mat-raised-button
type="submit"
(click)="login(email.value, password.value)"
class="login-overlay__button login-overlay__button--ripple"
>
Login
</button>
</div>
</ng-container>
<ng-container *ngIf="registerOverlayOpen" class="ng-container">
<div class="register-overlay ng-container__register-overlay">
<div class="register-overlay__exit">
<button
mat-button
(click)="registerOverlay()"
class="register-overlay__exit__button"
>
<mat-icon class="register-overlay__exit__button__icon">close</mat-icon>
</button>
</div>
<input
class="register-overlay__input register-overlay__input--override"
type="text"
#name
placeholder="Name"
/>
<input
class="register-overlay__input register-overlay__input--override"
type="text"
#email
placeholder="Email"
/>
<input
class="register-overlay__input register-overlay__input--override"
type="password"
#password
placeholder="Password"
/>
<button
mat-raised-button
type="submit"
(click)="signup(name.value, email.value, password.value)"
class="register-overlay__button register-overlay__button--ripple"
>
Create Your Account
</button>
</div>
</ng-container>
<router-outlet></router-outlet>
Loading

0 comments on commit 5bf9932

Please sign in to comment.