Auth #28
|
@ -63,14 +63,14 @@ export class AppComponent {
|
||||||
this.configureUserEvents();
|
this.configureUserEvents();
|
||||||
}
|
}
|
||||||
|
|
||||||
configureUserEvents() {
|
configureUserEvents(): void {
|
||||||
this.user = this.authService.getUser();
|
this.user = this.authService.getUser();
|
||||||
this.authService.userChange.subscribe(user => {
|
this.authService.userChange.subscribe(user => {
|
||||||
this.user = user;
|
this.user = user;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
configureSidebarEvents() {
|
configureSidebarEvents(): void {
|
||||||
this.isSidebarHidden = this.appService.getSidebarHidden();
|
this.isSidebarHidden = this.appService.getSidebarHidden();
|
||||||
this.appService.sidebarHiddenChange.subscribe(hidden => {
|
this.appService.sidebarHiddenChange.subscribe(hidden => {
|
||||||
this.isSidebarHidden = hidden;
|
this.isSidebarHidden = hidden;
|
||||||
|
@ -80,12 +80,11 @@ export class AppComponent {
|
||||||
this.sidebarOpen = sidebarUserPrefference;
|
this.sidebarOpen = sidebarUserPrefference;
|
||||||
}
|
}
|
||||||
this.appService.dynamicToolbarComponentsChange.subscribe(components => {
|
this.appService.dynamicToolbarComponentsChange.subscribe(components => {
|
||||||
console.log({components});
|
|
||||||
this.dynamicToolbarComponents = components;
|
this.dynamicToolbarComponents = components;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
configureThemeEvents() {
|
configureThemeEvents(): void {
|
||||||
this.themes = this.themeService.getThemes();
|
this.themes = this.themeService.getThemes();
|
||||||
this.themeControl.valueChanges.subscribe(theme => {
|
this.themeControl.valueChanges.subscribe(theme => {
|
||||||
this.themeService.setTheme(theme);
|
this.themeService.setTheme(theme);
|
||||||
|
@ -96,7 +95,7 @@ export class AppComponent {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
configureLanguageEvents() {
|
configureLanguageEvents(): void {
|
||||||
this.langs = this.appService.getLangs();
|
this.langs = this.appService.getLangs();
|
||||||
this.lang = this.appService.getLang();
|
this.lang = this.appService.getLang();
|
||||||
|
|
||||||
|
@ -109,10 +108,9 @@ export class AppComponent {
|
||||||
this.appService.langChange.subscribe(lang => {
|
this.appService.langChange.subscribe(lang => {
|
||||||
this.onLangChanged(lang);
|
this.onLangChanged(lang);
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
configureResizeEvents() {
|
configureResizeEvents(): void {
|
||||||
this.onResize(this.appService.size);
|
this.onResize(this.appService.size);
|
||||||
this.appService.sizeChange.subscribe(size => {
|
this.appService.sizeChange.subscribe(size => {
|
||||||
this.onResize(size);
|
this.onResize(size);
|
||||||
|
@ -157,7 +155,7 @@ export class AppComponent {
|
||||||
return this.sanitizer.bypassSecurityTrustStyle(`url('${url}')`);
|
return this.sanitizer.bypassSecurityTrustStyle(`url('${url}')`);
|
||||||
}
|
}
|
||||||
|
|
||||||
logout() {
|
logout(): void {
|
||||||
this.authService.logout();
|
this.authService.logout();
|
||||||
this.router.navigateByUrl('/');
|
this.router.navigateByUrl('/');
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,5 +15,4 @@ export class UsersComponent implements OnInit {
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { Location } from '@angular/common';
|
import { Location } from '@angular/common';
|
||||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||||
import { ActivatedRoute, Router } from '@angular/router';
|
import { ActivatedRoute, Router, UrlSegment } from '@angular/router';
|
||||||
import { FormBuilder, FormGroup } from '@ng-stack/forms';
|
import { FormBuilder, FormGroup } from '@ng-stack/forms';
|
||||||
import { AppService } from 'src/app/modules/shared/services/app/app.service';
|
import { AppService } from 'src/app/modules/shared/services/app/app.service';
|
||||||
import { AuthTabEnum } from '../../enums/auth-tab.enum';
|
import { AuthTabEnum } from '../../enums/auth-tab.enum';
|
||||||
|
@ -53,17 +53,19 @@ export class AuthComponent implements OnInit, OnDestroy {
|
||||||
email: 'email@test.com',
|
email: 'email@test.com',
|
||||||
});
|
});
|
||||||
|
|
||||||
const path = activatedRoute.snapshot.url[0].path;
|
this.handleUrl(activatedRoute.snapshot.url);
|
||||||
this.tab = path as AuthTabEnum;
|
|
||||||
this.selectedIndex = this.getSelectedIndex();
|
|
||||||
activatedRoute.url.subscribe(url => {
|
activatedRoute.url.subscribe(url => {
|
||||||
const path = url[0].path;
|
this.handleUrl(url);
|
||||||
this.tab = path as AuthTabEnum;
|
|
||||||
this.selectedIndex = this.getSelectedIndex();
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
getSelectedIndex(tab: AuthTabEnum = null) {
|
handleUrl(url: UrlSegment[]): void {
|
||||||
|
const path = url[0].path;
|
||||||
|
this.tab = path as AuthTabEnum;
|
||||||
|
this.selectedIndex = this.getSelectedIndex();
|
||||||
|
}
|
||||||
|
|
||||||
|
getSelectedIndex(tab: AuthTabEnum = null): number {
|
||||||
if (tab === null) {
|
if (tab === null) {
|
||||||
tab = this.tab;
|
tab = this.tab;
|
||||||
}
|
}
|
||||||
|
@ -74,11 +76,11 @@ export class AuthComponent implements OnInit, OnDestroy {
|
||||||
return index;
|
return index;
|
||||||
}
|
}
|
||||||
|
|
||||||
getIndexTab() {
|
getIndexTab(): AuthTabEnum {
|
||||||
return this.tabIndexes[this.selectedIndex];
|
return this.tabIndexes[this.selectedIndex];
|
||||||
}
|
}
|
||||||
|
|
||||||
selectedIndexChange(index: number) {
|
selectedIndexChange(index: number): void {
|
||||||
this.selectedIndex = index;
|
this.selectedIndex = index;
|
||||||
const tab = this.getIndexTab();
|
const tab = this.getIndexTab();
|
||||||
const url = this.router.createUrlTree(['..', tab], {
|
const url = this.router.createUrlTree(['..', tab], {
|
||||||
|
@ -97,7 +99,7 @@ export class AuthComponent implements OnInit, OnDestroy {
|
||||||
this.appService.removeDynamicToolbarComponent(ThemeSwitcherComponent);
|
this.appService.removeDynamicToolbarComponent(ThemeSwitcherComponent);
|
||||||
}
|
}
|
||||||
|
|
||||||
register() {
|
register(): void {
|
||||||
this.authService.createAccount(this.registerForm.getRawValue()).subscribe(data => {
|
this.authService.createAccount(this.registerForm.getRawValue()).subscribe(data => {
|
||||||
this.loginForm.patchValue({
|
this.loginForm.patchValue({
|
||||||
email: this.registerForm.controls.email.value,
|
email: this.registerForm.controls.email.value,
|
||||||
|
@ -107,7 +109,7 @@ export class AuthComponent implements OnInit, OnDestroy {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
login() {
|
login(): void {
|
||||||
this.authService.login(this.loginForm.getRawValue()).subscribe(data => {
|
this.authService.login(this.loginForm.getRawValue()).subscribe(data => {
|
||||||
const afterUrl = '/';
|
const afterUrl = '/';
|
||||||
this.router.navigateByUrl(afterUrl);
|
this.router.navigateByUrl(afterUrl);
|
||||||
|
|
|
@ -12,6 +12,7 @@ export class ThemeSwitcherComponent implements OnInit {
|
||||||
darkTheme = 'dark';
|
darkTheme = 'dark';
|
||||||
lightTheme = 'light';
|
lightTheme = 'light';
|
||||||
theme = 'light';
|
theme = 'light';
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private themeService: ThemeService,
|
private themeService: ThemeService,
|
||||||
) {
|
) {
|
||||||
|
@ -24,7 +25,7 @@ export class ThemeSwitcherComponent implements OnInit {
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleTheme() {
|
toggleTheme(): void {
|
||||||
this.themeService.setTheme(this.theme === this.darkTheme ? this.lightTheme : this.darkTheme);
|
this.themeService.setTheme(this.theme === this.darkTheme ? this.lightTheme : this.darkTheme);
|
||||||
this.isDark = this.theme === this.darkTheme;
|
this.isDark = this.theme === this.darkTheme;
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,14 +7,14 @@ import { AuthTokenService } from 'src/app/modules/shared/services/auth/auth-toke
|
||||||
providedIn: 'root'
|
providedIn: 'root'
|
||||||
})
|
})
|
||||||
export class AuthGuard implements CanActivate, CanActivateChild {
|
export class AuthGuard implements CanActivate, CanActivateChild {
|
||||||
constructor(private AuthTokenService: AuthTokenService, private router: Router) {
|
constructor(private authTokenService: AuthTokenService, private router: Router) {
|
||||||
|
|
||||||
}
|
}
|
||||||
canActivate(
|
canActivate(
|
||||||
route: ActivatedRouteSnapshot,
|
route: ActivatedRouteSnapshot,
|
||||||
state: RouterStateSnapshot,
|
state: RouterStateSnapshot,
|
||||||
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
|
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
|
||||||
const can = this.AuthTokenService.userValidate();
|
const can = this.authTokenService.userValidate();
|
||||||
if (!can){
|
if (!can){
|
||||||
this.router.navigate(['/auth']);
|
this.router.navigate(['/auth']);
|
||||||
}
|
}
|
||||||
|
@ -25,7 +25,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
|
||||||
childRoute: ActivatedRouteSnapshot,
|
childRoute: ActivatedRouteSnapshot,
|
||||||
state: RouterStateSnapshot,
|
state: RouterStateSnapshot,
|
||||||
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
|
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
|
||||||
const can = this.AuthTokenService.userValidate();
|
const can = this.authTokenService.userValidate();
|
||||||
if (!can){
|
if (!can){
|
||||||
this.router.navigate(['/auth']);
|
this.router.navigate(['/auth']);
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,7 +30,7 @@ export class AuthService {
|
||||||
return this.user;
|
return this.user;
|
||||||
}
|
}
|
||||||
|
|
||||||
checkUser() {
|
checkUser(): void {
|
||||||
this.http.post<UserModel>('/api/user-check', {}).subscribe(user => {
|
this.http.post<UserModel>('/api/user-check', {}).subscribe(user => {
|
||||||
this.userChange.next(user);
|
this.userChange.next(user);
|
||||||
if (AuthService.updateAgent) {
|
if (AuthService.updateAgent) {
|
||||||
|
@ -53,15 +53,15 @@ export class AuthService {
|
||||||
this.http.post<TokenResponse>('/api/login', {
|
this.http.post<TokenResponse>('/api/login', {
|
||||||
username: data.email,
|
username: data.email,
|
||||||
password: data.password,
|
password: data.password,
|
||||||
}).subscribe(data => {
|
}).subscribe(response => {
|
||||||
this.authTokenService.setToken(data.token);
|
this.authTokenService.setToken(response.token);
|
||||||
this.checkUser();
|
this.checkUser();
|
||||||
out.next(data);
|
out.next(response);
|
||||||
});
|
});
|
||||||
return out;
|
return out;
|
||||||
}
|
}
|
||||||
|
|
||||||
logout() {
|
logout(): void {
|
||||||
this.authTokenService.removeToken();
|
this.authTokenService.removeToken();
|
||||||
this.router.navigate(['/auth']);
|
this.router.navigate(['/auth']);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
|
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
|
||||||
import { Injectable } from "@angular/core";
|
import { Injectable } from '@angular/core';
|
||||||
import { Observable } from "rxjs";
|
import { Observable } from 'rxjs';
|
||||||
import { AuthTokenService } from "src/app/modules/shared/services/auth/auth-token.service";
|
import { AuthTokenService } from 'src/app/modules/shared/services/auth/auth-token.service';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class TokenInterceptor implements HttpInterceptor {
|
export class TokenInterceptor implements HttpInterceptor {
|
||||||
constructor(private authTokenService: AuthTokenService) {}
|
|
||||||
|
constructor(private authTokenService: AuthTokenService) {
|
||||||
|
}
|
||||||
|
|
||||||
intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
|
intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
|
||||||
if (this.authTokenService.hasToken()) {
|
if (this.authTokenService.hasToken()) {
|
||||||
const Authorization = `Bearer ${this.authTokenService.getToken()}`;
|
const Authorization = `Bearer ${this.authTokenService.getToken()}`;
|
||||||
|
|
|
@ -45,13 +45,13 @@ export class AppService {
|
||||||
this.configureSidebarEvents();
|
this.configureSidebarEvents();
|
||||||
}
|
}
|
||||||
|
|
||||||
configureSidebarEvents() {
|
configureSidebarEvents(): void {
|
||||||
this.sidebarHiddenChange.subscribe(hidden => {
|
this.sidebarHiddenChange.subscribe(hidden => {
|
||||||
this.sidebarHidden = hidden;
|
this.sidebarHidden = hidden;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
configureResizeEvents() {
|
configureResizeEvents(): void {
|
||||||
this.sizeChange.subscribe(size => this.size = size);
|
this.sizeChange.subscribe(size => this.size = size);
|
||||||
this.sizeChange.next(WindowSize.generate());
|
this.sizeChange.next(WindowSize.generate());
|
||||||
fromEvent(window, 'resize').subscribe(e => {
|
fromEvent(window, 'resize').subscribe(e => {
|
||||||
|
@ -59,7 +59,7 @@ export class AppService {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
configureLanguageEvents() {
|
configureLanguageEvents(): void {
|
||||||
this.langChange.subscribe(lang => {
|
this.langChange.subscribe(lang => {
|
||||||
this.lang = lang;
|
this.lang = lang;
|
||||||
this.browserStorageService.setItem('language', lang);
|
this.browserStorageService.setItem('language', lang);
|
||||||
|
@ -72,21 +72,21 @@ export class AppService {
|
||||||
this.changeLang(language);
|
this.changeLang(language);
|
||||||
}
|
}
|
||||||
|
|
||||||
addDynamicToolbarComponent(component) {
|
addDynamicToolbarComponent(component): void {
|
||||||
this.dynamicToolbarComponents.push(component);
|
this.dynamicToolbarComponents.push(component);
|
||||||
this.dynamicToolbarComponentsChange.next(this.dynamicToolbarComponents);
|
this.dynamicToolbarComponentsChange.next(this.dynamicToolbarComponents);
|
||||||
}
|
}
|
||||||
|
|
||||||
removeDynamicToolbarComponent(component) {
|
removeDynamicToolbarComponent(component): void {
|
||||||
this.dynamicToolbarComponents = this.dynamicToolbarComponents.filter(c => c !== component);
|
this.dynamicToolbarComponents = this.dynamicToolbarComponents.filter(c => c !== component);
|
||||||
this.dynamicToolbarComponentsChange.next(this.dynamicToolbarComponents);
|
this.dynamicToolbarComponentsChange.next(this.dynamicToolbarComponents);
|
||||||
}
|
}
|
||||||
|
|
||||||
setSidebarHidden(hidden: boolean) {
|
setSidebarHidden(hidden: boolean): void {
|
||||||
this.sidebarHiddenChange.next(hidden);
|
this.sidebarHiddenChange.next(hidden);
|
||||||
}
|
}
|
||||||
|
|
||||||
getSidebarHidden() {
|
getSidebarHidden(): boolean {
|
||||||
return this.sidebarHidden;
|
return this.sidebarHidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,24 +8,24 @@ export class AuthTokenService {
|
||||||
constructor( private browserStorageService: BrowserStorageService) {
|
constructor( private browserStorageService: BrowserStorageService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
setToken(token: string) {
|
setToken(token: string): void {
|
||||||
this.browserStorageService.setItem(this.TokenKey, token);
|
this.browserStorageService.setItem(this.TokenKey, token);
|
||||||
}
|
}
|
||||||
|
|
||||||
hasToken() {
|
hasToken(): boolean {
|
||||||
const token = this.browserStorageService.getItemOrDefault(this.TokenKey, null);
|
const token = this.browserStorageService.getItemOrDefault(this.TokenKey, null);
|
||||||
return token !== null;
|
return token !== null;
|
||||||
}
|
}
|
||||||
|
|
||||||
getToken() {
|
getToken(): string {
|
||||||
return this.browserStorageService.getItem(this.TokenKey);
|
return this.browserStorageService.getItem(this.TokenKey);
|
||||||
}
|
}
|
||||||
|
|
||||||
removeToken() {
|
removeToken(): void {
|
||||||
this.browserStorageService.setItem(this.TokenKey, null);
|
this.browserStorageService.setItem(this.TokenKey, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
userValidate() {
|
userValidate(): boolean {
|
||||||
if (!this.hasToken()) {
|
if (!this.hasToken()) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue