From a4769248113d5f9f4a86292382f39aa9bb1b7d5e Mon Sep 17 00:00:00 2001 From: lele9h0st Date: Wed, 27 Jul 2022 21:17:33 +0700 Subject: [PATCH] #4 - add auth.guard to avoid user try access to profile page when haven't signin yet --- src/app/_help/auth.guard.spec.ts | 16 ++++++ src/app/_help/auth.guard.ts | 24 +++++++++ src/app/app-routing.module.ts | 3 +- .../signin-form/signin-form.component.ts | 1 + src/app/pages/notfound/notfound.component.css | 3 ++ .../pages/notfound/notfound.component.css.map | 1 + src/app/shared/navbar/navbar.component.css | 54 +++++++++++++++++-- .../shared/navbar/navbar.component.css.map | 2 +- 8 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 src/app/_help/auth.guard.spec.ts create mode 100644 src/app/_help/auth.guard.ts create mode 100644 src/app/pages/notfound/notfound.component.css create mode 100644 src/app/pages/notfound/notfound.component.css.map diff --git a/src/app/_help/auth.guard.spec.ts b/src/app/_help/auth.guard.spec.ts new file mode 100644 index 0000000..68889d2 --- /dev/null +++ b/src/app/_help/auth.guard.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { AuthGuard } from './auth.guard'; + +describe('AuthGuard', () => { + let guard: AuthGuard; + + beforeEach(() => { + TestBed.configureTestingModule({}); + guard = TestBed.inject(AuthGuard); + }); + + it('should be created', () => { + expect(guard).toBeTruthy(); + }); +}); diff --git a/src/app/_help/auth.guard.ts b/src/app/_help/auth.guard.ts new file mode 100644 index 0000000..9631c8c --- /dev/null +++ b/src/app/_help/auth.guard.ts @@ -0,0 +1,24 @@ +import { Injectable } from '@angular/core'; +import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router'; +import { Observable } from 'rxjs'; +import {TokenStorageService} from "../_service/token-storage.service"; + +@Injectable({ + providedIn: 'root' +}) +export class AuthGuard implements CanActivate { + + constructor(private router:Router, private tokenStorage: TokenStorageService ) { + } + canActivate( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { + if(!(localStorage.getItem("isSignin")=="true")){ + this.router.navigate(["signin"]); + return false; + } + + return true; + } + +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 14f3178..61f47e9 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -4,9 +4,10 @@ import { ContactComponent } from './pages/contact/contact.component'; import { HomeComponent } from './pages/home/home.component'; import { NotfoundComponent } from './pages/notfound/notfound.component'; import { ProfileComponent } from "./profile/profile/profile.component"; +import {AuthGuard} from "./_help/auth.guard"; const routes: Routes = [ - { path: 'profile', component: ProfileComponent }, + { path: 'profile', component: ProfileComponent ,canActivate:[AuthGuard]}, { path: 'home', component: HomeComponent }, { path: 'contact', component: ContactComponent }, { path: '404', component: NotfoundComponent }, diff --git a/src/app/auth/signin/signin-form/signin-form.component.ts b/src/app/auth/signin/signin-form/signin-form.component.ts index d1bb738..0054b31 100644 --- a/src/app/auth/signin/signin-form/signin-form.component.ts +++ b/src/app/auth/signin/signin-form/signin-form.component.ts @@ -37,6 +37,7 @@ export class SigninFormComponent implements OnInit { this.tokenStorage.saveUser(user); console.log(user); alert("login success") + localStorage.setItem("isSignin","true"); this.isLoggedIn = true; this.siginForm.reset(); alert(this.tokenStorage.getUser().username) diff --git a/src/app/pages/notfound/notfound.component.css b/src/app/pages/notfound/notfound.component.css new file mode 100644 index 0000000..e3fa3fe --- /dev/null +++ b/src/app/pages/notfound/notfound.component.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=notfound.component.css.map */ diff --git a/src/app/pages/notfound/notfound.component.css.map b/src/app/pages/notfound/notfound.component.css.map new file mode 100644 index 0000000..b3f2fb9 --- /dev/null +++ b/src/app/pages/notfound/notfound.component.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"notfound.component.css"} \ No newline at end of file diff --git a/src/app/shared/navbar/navbar.component.css b/src/app/shared/navbar/navbar.component.css index 9599407..6812e8b 100644 --- a/src/app/shared/navbar/navbar.component.css +++ b/src/app/shared/navbar/navbar.component.css @@ -1,3 +1,11 @@ +.cursor-df { + cursor: default !important; +} + +.cursor-pointer { + cursor: pointer !important; +} + #custom-brand:hover { opacity: 0.5; } @@ -10,11 +18,12 @@ opacity: 0.5; } -.btn-subscribe { +.btn__login { background-color: #567b95; color: white; font-size: smaller; padding: 4px 10px; + margin-left: 20px; transition: ease 0.1s; } @@ -22,6 +31,13 @@ margin: -8px 100px; } +.nav-item { + transition: all 0.3s linear !important; +} +.nav-item:hover { + opacity: 0.6; +} + .mr-20 { margin-right: 20px !important; } @@ -40,11 +56,10 @@ width: 100%; display: none; position: fixed; - z-index: 1; + z-index: 100; top: 0; left: 0; background-color: rgb(0, 0, 0); - background-color: rgba(0, 0, 0, 0.9); } .overlay-content { @@ -98,6 +113,39 @@ .main__navbar { position: sticky; top: 0; + z-index: 1; +} + +.dropdown { + position: relative; + display: inline-block; + margin-top: 7px; +} + +.dropdown-content { + visibility: hidden; + opacity: 0; + position: absolute; + right: 0; + top: 23px; + background-color: #f9f9f9; + min-width: 200px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + padding: 10px 15px; + z-index: 10; + transition: all 0.3s ease-in-out; +} + +.dropdown:hover .dropdown-content { + visibility: visible; + opacity: 1; +} + +.hover-half__opacity { + transition: all ease-in-out 0.3s; +} +.hover-half__opacity:hover { + opacity: 0.5; } /*# sourceMappingURL=navbar.component.css.map */ diff --git a/src/app/shared/navbar/navbar.component.css.map b/src/app/shared/navbar/navbar.component.css.map index 77e15d4..b9a0b5c 100644 --- a/src/app/shared/navbar/navbar.component.css.map +++ b/src/app/shared/navbar/navbar.component.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["navbar.component.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA","file":"navbar.component.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["navbar.component.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;;AACA;EACE;;;AAGJ;EACE;;;AAGF;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;AACA;EACE","file":"navbar.component.css"} \ No newline at end of file