Auth #28

Merged
Sieciech merged 3 commits from 21-auth into dev 2021-08-04 08:23:05 +00:00
15 changed files with 84 additions and 81 deletions
Showing only changes of commit 0465d05f10 - Show all commits

View File

@ -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('/');
} }

View File

@ -12,8 +12,7 @@ export class UsersComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.adminUserService.getUsers().subscribe(() => { this.adminUserService.getUsers().subscribe(() => {
}); });
} }
} }

View File

@ -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);

View File

@ -7,11 +7,12 @@ import { ThemeService } from 'src/app/modules/shared/services/theme/theme.servic
styleUrls: ['./theme-switcher.component.scss'] styleUrls: ['./theme-switcher.component.scss']
}) })
export class ThemeSwitcherComponent implements OnInit { export class ThemeSwitcherComponent implements OnInit {
isDark = false; isDark = false;
darkTheme = 'dark'; darkTheme = 'dark';
lightTheme = 'light'; lightTheme = 'light';
theme = 'light'; theme = 'light';
constructor( constructor(
private themeService: ThemeService, private themeService: ThemeService,
) { ) {
@ -20,11 +21,11 @@ export class ThemeSwitcherComponent implements OnInit {
this.theme = theme; this.theme = theme;
}); });
} }
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;
} }

View File

@ -1,4 +1,4 @@
export interface LoginModel { export interface LoginModel {
email: string; email: string;
password: string; password: string;
} }

View File

@ -3,4 +3,4 @@ export interface RegisterModel {
surname: string; surname: string;
email: string; email: string;
password: string; password: string;
} }

View File

@ -1,3 +1,3 @@
export interface RestoreModel { export interface RestoreModel {
email: string; email: string;
} }

View File

@ -1,3 +1,3 @@
export interface TokenResponse { export interface TokenResponse {
token: string; token: string;
} }

View File

@ -5,4 +5,4 @@ export interface UserModel {
avatar: string | null; avatar: string | null;
country: string | null; country: string | null;
state: string | null; state: string | null;
} }

View File

@ -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']);
} }

View File

@ -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']);
} }

View File

@ -5,29 +5,29 @@ import {MatButtonModule} from '@angular/material/button';
import {MatSidenavModule} from '@angular/material/sidenav'; import {MatSidenavModule} from '@angular/material/sidenav';
import {MatSelectModule} from '@angular/material/select'; import {MatSelectModule} from '@angular/material/select';
import {MatMenuModule} from '@angular/material/menu'; import {MatMenuModule} from '@angular/material/menu';
import {MatCardModule} from '@angular/material/card'; import {MatCardModule} from '@angular/material/card';
import {MatTabsModule} from '@angular/material/tabs'; import {MatTabsModule} from '@angular/material/tabs';
import {MatInputModule} from '@angular/material/input'; import {MatInputModule} from '@angular/material/input';
const itemsToExport = [ const itemsToExport = [
MatToolbarModule, MatToolbarModule,
MatButtonModule, MatButtonModule,
MatSidenavModule, MatSidenavModule,
MatSelectModule, MatSelectModule,
MatMenuModule, MatMenuModule,
MatCardModule, MatCardModule,
MatTabsModule, MatTabsModule,
MatInputModule, MatInputModule,
]; ];
@NgModule({ @NgModule({
declarations: [], declarations: [],
imports: [ imports: [
CommonModule, CommonModule,
...itemsToExport, ...itemsToExport,
], ],
exports: [ exports: [
...itemsToExport, ...itemsToExport,
] ]
}) })
export class MaterialModule { } export class MaterialModule { }

View File

@ -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()}`;
@ -14,4 +17,4 @@ export class TokenInterceptor implements HttpInterceptor {
return next.handle(httpRequest); return next.handle(httpRequest);
} }
} }

View File

@ -5,18 +5,18 @@ import { BrowserStorageService } from '../browser-storage/browser-storage.servic
export class WindowSize { export class WindowSize {
isMobile: boolean; isMobile: boolean;
constructor( constructor(
public width: number, public width: number,
public height: number, public height: number,
) { ) {
this.isMobile = this.width <= 700; this.isMobile = this.width <= 700;
} }
static generate(): WindowSize { static generate(): WindowSize {
return new WindowSize(window.innerWidth, window.innerHeight); return new WindowSize(window.innerWidth, window.innerHeight);
} }
update(): WindowSize { update(): WindowSize {
this.width = window.innerWidth; this.width = window.innerWidth;
this.height = window.innerHeight; this.height = window.innerHeight;
@ -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,35 +72,35 @@ 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;
} }
changeLang(lang: string): void { changeLang(lang: string): void {
if (lang !== this.lang) { if (lang !== this.lang) {
this.translate.use(lang); this.translate.use(lang);
this.langChange.next(lang); this.langChange.next(lang);
} }
} }
getLang(): string { getLang(): string {
return this.lang; return this.lang;
} }
getLangs(): string[] { getLangs(): string[] {
return [ return [
'pl', 'pl',

View File

@ -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;
} }