-
-
-
-
-
-
+
+
+
+
+
+
-
+
+
+
+
+
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index f40a924..5b109cc 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,148 +1,167 @@
.header {
- color: white;
- background-color: #3F51B5;
- &--desktop{
- display: block;
- @media screen and (max-width: 800px) { display: none; }
+ color: white;
+ background-color: #3f51b5;
+ &--desktop {
+ display: block;
+ @media screen and (max-width: 800px) {
+ display: none;
+ }
+ }
+ &--mobile {
+ display: none;
+ @media screen and (max-width: 800px) {
+ display: block;
}
- &--mobile {
- display: none;
- @media screen and (max-width: 800px) { display: block; }
- }
+ }
}
.logo {
- color: white;
+ color: white;
+ display: flex;
+ align-items: center;
+ min-height: 100%;
+ padding: 0 1rem;
+ &--ripple {
+ background-position: center;
+ transition: background 0.8s;
+ &:hover {
+ background: rgb(70, 90, 183)
+ radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%)
+ center/15000%;
+ }
+ &:active {
+ background-color: rgb(75, 100, 200);
+ background-size: 100%;
+ transition: background 0s;
+ }
+ }
+}
+.nav-bar {
+ &__menu-button {
+ &--ripple {
+ background-position: center;
+ transition: background 0.8s;
+ &:hover {
+ background: rgb(80, 110, 210)
+ radial-gradient(circle, transparent 1%, rgb(80, 110, 210) 1%)
+ center/15000%;
+ }
+ &:focus {
+ background-color: rgb(80, 110, 210);
+ background-size: 100%;
+ transition: background 0s;
+ }
+ }
+ }
+ &__nav-spacer {
+ flex: 1 1 auto;
+ }
+ &__link {
display: flex;
align-items: center;
min-height: 100%;
+ color: white;
padding: 0 1rem;
+ cursor: pointer;
&--ripple {
- background-position: center;
- transition: background 0.8s;
- &:hover {
- background: rgb(70, 90, 183) radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%) center/15000%;
- }
- &:active {
- background-color: rgb(75, 100, 200);
- background-size: 100%;
- transition: background 0s;
- }
- }
-}
-.nav-bar {
- &__menu-button {
- &--ripple {
- background-position: center;
- transition: background 0.8s;
- &:hover {
- background: rgb(80, 110, 210) radial-gradient(circle, transparent 1%, rgb(80, 110, 210) 1%) center/15000%;
- }
- &:focus {
- background-color: rgb(80, 110, 210);
- background-size: 100%;
- transition: background 0s;
- }
- }
- }
- &__nav-spacer {
- flex: 1 1 auto;
- }
- &__link {
- display: flex;
- align-items: center;
- min-height: 100%;
- color: white;
- padding: 0 1rem;
- cursor: pointer;
- &--ripple {
- background-position: center;
- transition: background 0.8s;
- &:hover {
- background: rgb(70, 90, 183) radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%) center/15000%;
- }
- &:active {
- background-color: rgb(75, 100, 200);
- background-size: 100%;
- transition: background 0s;
- }
- }
+ background-position: center;
+ transition: background 0.8s;
+ &:hover {
+ background: rgb(70, 90, 183)
+ radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%)
+ center/15000%;
+ }
+ &:active {
+ background-color: rgb(75, 100, 200);
+ background-size: 100%;
+ transition: background 0s;
+ }
}
+ }
}
.nav-list {
+ display: flex;
+ flex-flow: column;
+ padding: 0;
+ &__link {
display: flex;
- flex-flow: column;
- padding: 0;
- &__link {
- display: flex;
- justify-content: center;
- color: white;
- border-top: 1px solid rgb(242, 242, 242, 0.25);
- padding: 1rem 0;
- transition: background-color 400ms;
- background-color: rgb(63, 81, 181);
- cursor: pointer;
- &--ripple {
- background-position: center;
- transition: background 0.8s;
- &:hover {
- background: rgb(70, 90, 183) radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%) center/15000%;
- }
- &:active {
- background-color: rgb(75, 100, 200);
- background-size: 100%;
- transition: background 0s;
- }
- }
+ justify-content: center;
+ color: white;
+ border-top: 1px solid rgb(242, 242, 242, 0.25);
+ padding: 1rem 0;
+ transition: background-color 400ms;
+ background-color: rgb(63, 81, 181);
+ cursor: pointer;
+ &--ripple {
+ background-position: center;
+ transition: background 0.8s;
+ &:hover {
+ background: rgb(70, 90, 183)
+ radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%)
+ center/15000%;
+ }
+ &:active {
+ background-color: rgb(75, 100, 200);
+ background-size: 100%;
+ transition: background 0s;
+ }
}
+ }
}
.ng-container {
- &__login-overlay {
- z-index: 2;
- border-top: 1px solid whitesmoke;
- margin: 0 auto;
- position: absolute;
- right: 0;
- }
+ &__login-overlay,
+ &__register-overlay {
+ z-index: 2;
+ border-top: 1px solid whitesmoke;
+ margin: 0 auto;
+ position: absolute;
+ right: 0;
+ }
}
-.login-overlay {
- background-color: #3F51B5;
- box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
- color: white;
+.login-overlay,
+.register-overlay {
+ background-color: #3f51b5;
+ box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
+ 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+ color: white;
+ display: flex;
+ flex-flow: column;
+ justify-content: center;
+ width: 26rem;
+ @media screen and (max-width: 800px) {
+ width: 100%;
+ }
+ &__exit {
display: flex;
- flex-flow: column;
- justify-content: center;
- width: 26rem;
- @media screen and (max-width: 800px) { width: 100%; }
- &__exit {
- display: flex;
- justify-content: flex-end;
- &__button {
- display: flex;
- justify-content: center;
- min-width: 2.5rem;
- width: auto;
- padding: 0;
- }
- }
+ justify-content: flex-end;
&__button {
- background-color: white;
- margin: 1rem;
- &--ripple {
- background-position: center;
- transition: background 0.8s;
- &:hover {
- background: rgb(235,235,235) radial-gradient(circle, transparent 1%, rgb(235,235,235) 1%) center/15000%;
- }
- &:active {
- background-color: rgb(235,235,235);
- background-size: 100%;
- transition: background 0s;
- }
- }
+ display: flex;
+ justify-content: center;
+ min-width: 2.5rem;
+ width: auto;
+ padding: 0;
}
- &__input {
- color: white;
+ }
+ &__button {
+ background-color: white;
+ margin: 1rem;
+ &--ripple {
+ background-position: center;
+ transition: background 0.8s;
+ &:hover {
+ background: rgb(235, 235, 235)
+ radial-gradient(circle, transparent 1%, rgb(235, 235, 235) 1%)
+ center/15000%;
+ }
+ &:active {
+ background-color: rgb(235, 235, 235);
+ background-size: 100%;
+ transition: background 0s;
+ }
}
-}
\ No newline at end of file
+ }
+ &__input {
+ color: white;
+ }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5566df5..eaaa8b3 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,26 +1,32 @@
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { AuthService } from './services/auth.service';
+import { AngularFirestore } from '@angular/fire/firestore';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
+ styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
title = 'team-gen';
loginOverlayOpen = false;
+ registerOverlayOpen = false;
navToggle = false;
isLoggedIn = false;
-
- subscription: Subscription = new Subscription;
- constructor (private auth: AuthService, private cd: ChangeDetectorRef ) {
+ subscription: Subscription = new Subscription();
- }
+ constructor(
+ private afs: AngularFirestore,
+ private auth: AuthService,
+ private cd: ChangeDetectorRef
+ ) {}
ngOnInit(): void {
- this.subscription = this.auth.currentAuthState.subscribe(authState => this.isLoggedIn = authState);
+ this.subscription = this.auth.currentAuthState.subscribe(
+ (authState) => (this.isLoggedIn = authState)
+ );
if (localStorage.getItem('user') !== null) {
this.auth.changeAuthState(true);
} else {
@@ -31,35 +37,80 @@ export class AppComponent implements OnInit {
loginOverlay() {
if (!this.loginOverlayOpen) {
this.loginOverlayOpen = true;
+ this.registerOverlayOpen = false;
} else {
this.loginOverlayOpen = false;
}
}
+ registerOverlay() {
+ if (!this.registerOverlayOpen) {
+ this.registerOverlayOpen = true;
+ this.loginOverlayOpen = false;
+ } else {
+ this.registerOverlayOpen = false;
+ }
+ }
+
login(email: string, password: string) {
- this.auth.login(email, password)
- .then(res => {
+ this.auth
+ .login(email, password)
+ .then((res) => {
this.auth.changeAuthState(true);
localStorage.setItem('user', JSON.stringify(res.user));
this.loginOverlayOpen = false;
console.log('Logged in');
})
- .catch(err => {
- var errorCode = err.code;
- var errorMessage = err.message;
+ .catch((err) => {
+ let errorCode = err.code;
+ let errorMessage = err.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(err);
- });
+ });
}
-
+
+ signup(name: string, email: string, password: string) {
+ this.auth
+ .signUp(email, password)
+ .then((res) => {
+ this.auth.changeAuthState(true);
+ localStorage.setItem('user', JSON.stringify(res.user));
+ this.registerOverlayOpen = false;
+ console.log('Registered Account');
+ alert('Succesfully registered and logged in!');
+ })
+ .catch((err) => {
+ let errorCode = err.code;
+ let errorMessage = err.message;
+ if (errorCode === 'auth/email-already-in-use') {
+ alert('This email is already in use.');
+ } else if (errorCode === 'auth/invalid-email') {
+ alert('This email address is invalid.');
+ } else {
+ alert(errorMessage);
+ }
+ console.log(err);
+ });
+ this.auth.getUser().subscribe((user) => {
+ if (user) {
+ this.afs.collection('users').doc(user.uid).set({
+ email: email,
+ userId: user.uid,
+ displayName: name,
+ });
+ } else {
+ console.log('error when signing up');
+ }
+ });
+ }
+
logout() {
this.auth.logout();
console.log('logged out');
this.auth.changeAuthState(false);
}
-
}
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index b130ade..2a36a11 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -4,38 +4,20 @@ import { AngularFirestore } from '@angular/fire/firestore';
import { BehaviorSubject } from 'rxjs';
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class AuthService {
-
private authStateSource = new BehaviorSubject
(false);
currentAuthState = this.authStateSource.asObservable();
-
-
- constructor(public afAuth: AngularFireAuth, private afs: AngularFirestore) { }
+
+ constructor(public afAuth: AngularFireAuth, private afs: AngularFirestore) {}
login(email: string, password: string) {
- return this.afAuth.signInWithEmailAndPassword(email, password)
-
+ return this.afAuth.signInWithEmailAndPassword(email, password);
}
- async signUp(email: string, password: string) {
- await this.afAuth.createUserWithEmailAndPassword(email, password)
- .then(res => {
- this.changeAuthState(true);
- localStorage.setItem('user', JSON.stringify(res.user));
- });
- this.getUser().subscribe((user) => {
- if (user) {
- this.afs.collection('users').doc(user.uid).set({
- email: email,
- userId: user.uid
- });
- } else {
- console.log('error when signing up');
- }
- })
-
+ signUp(email: string, password: string) {
+ return this.afAuth.createUserWithEmailAndPassword(email, password);
}
logout() {
@@ -46,12 +28,10 @@ export class AuthService {
getUser() {
const user$ = this.afAuth.user;
- return user$
+ return user$;
}
changeAuthState(authState: boolean) {
this.authStateSource.next(authState);
}
-
-
}
diff --git a/src/styles.scss b/src/styles.scss
index 43e5be7..396edad 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,7 +1,7 @@
/* You can add global styles to this file, and also import other style files */
// ANGULAR MATERIAL THEME
-@import '~@angular/material/theming';
+@import "~@angular/material/theming";
// Define a custom mixin that takes in the current theme
@mixin theme-color-grabber($theme) {
@@ -26,23 +26,26 @@
:root {
--star-size: 1rem;
--star-color: #fff;
- --star-background:#fc0;
+ --star-background: #fc0;
--starter-rating: 0%;
--squad-rating: 0%;
}
-*, *::after, *::before {
+*,
+*::after,
+*::before {
box-sizing: border-box;
}
-html, body {
+html,
+body {
height: 100%;
}
-body {
- margin: 0;
+body {
+ margin: 0;
padding: 0;
- font-family: Roboto, "Helvetica Neue", sans-serif;
+ font-family: Roboto, "Helvetica Neue", sans-serif;
}
button {
@@ -51,7 +54,8 @@ button {
// CLASS OVERRIDES
-input.login-overlay__input.login-overlay__input--override {
+input.login-overlay__input.login-overlay__input--override,
+input.register-overlay__input.register-overlay__input--override {
margin: 0.5rem 1.5rem;
width: auto;
}
@@ -68,5 +72,5 @@ input.login-overlay__input.login-overlay__input--override {
}
.mat-list-base {
- background-color: #3F51B5;
-}
\ No newline at end of file
+ background-color: #3f51b5;
+}