Auth #28
|
@ -63,14 +63,14 @@ export class AppComponent {
|
|||
this.configureUserEvents();
|
||||
}
|
||||
|
||||
configureUserEvents() {
|
||||
configureUserEvents(): void {
|
||||
this.user = this.authService.getUser();
|
||||
this.authService.userChange.subscribe(user => {
|
||||
this.user = user;
|
||||
});
|
||||
}
|
||||
|
||||
configureSidebarEvents() {
|
||||
configureSidebarEvents(): void {
|
||||
this.isSidebarHidden = this.appService.getSidebarHidden();
|
||||
this.appService.sidebarHiddenChange.subscribe(hidden => {
|
||||
this.isSidebarHidden = hidden;
|
||||
|
@ -80,12 +80,11 @@ export class AppComponent {
|
|||
this.sidebarOpen = sidebarUserPrefference;
|
||||
}
|
||||
this.appService.dynamicToolbarComponentsChange.subscribe(components => {
|
||||
console.log({components});
|
||||
this.dynamicToolbarComponents = components;
|
||||
});
|
||||
}
|
||||
|
||||
configureThemeEvents() {
|
||||
configureThemeEvents(): void {
|
||||
this.themes = this.themeService.getThemes();
|
||||
this.themeControl.valueChanges.subscribe(theme => {
|
||||
this.themeService.setTheme(theme);
|
||||
|
@ -96,7 +95,7 @@ export class AppComponent {
|
|||
});
|
||||
}
|
||||
|
||||
configureLanguageEvents() {
|
||||
configureLanguageEvents(): void {
|
||||
this.langs = this.appService.getLangs();
|
||||
this.lang = this.appService.getLang();
|
||||
|
||||
|
@ -109,10 +108,9 @@ export class AppComponent {
|
|||
this.appService.langChange.subscribe(lang => {
|
||||
this.onLangChanged(lang);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
configureResizeEvents() {
|
||||
configureResizeEvents(): void {
|
||||
this.onResize(this.appService.size);
|
||||
this.appService.sizeChange.subscribe(size => {
|
||||
this.onResize(size);
|
||||
|
@ -157,7 +155,7 @@ export class AppComponent {
|
|||
return this.sanitizer.bypassSecurityTrustStyle(`url('${url}')`);
|
||||
}
|
||||
|
||||
logout() {
|
||||
logout(): void {
|
||||
this.authService.logout();
|
||||
this.router.navigateByUrl('/');
|
||||
}
|
||||
|
|
|
@ -12,8 +12,7 @@ export class UsersComponent implements OnInit {
|
|||
|
||||
ngOnInit(): void {
|
||||
this.adminUserService.getUsers().subscribe(() => {
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { Location } from '@angular/common';
|
||||
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 { AppService } from 'src/app/modules/shared/services/app/app.service';
|
||||
import { AuthTabEnum } from '../../enums/auth-tab.enum';
|
||||
|
@ -53,17 +53,19 @@ export class AuthComponent implements OnInit, OnDestroy {
|
|||
email: 'email@test.com',
|
||||
});
|
||||
|
||||
const path = activatedRoute.snapshot.url[0].path;
|
||||
this.tab = path as AuthTabEnum;
|
||||
this.selectedIndex = this.getSelectedIndex();
|
||||
this.handleUrl(activatedRoute.snapshot.url);
|
||||
activatedRoute.url.subscribe(url => {
|
||||
const path = url[0].path;
|
||||
this.tab = path as AuthTabEnum;
|
||||
this.selectedIndex = this.getSelectedIndex();
|
||||
this.handleUrl(url);
|
||||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
tab = this.tab;
|
||||
}
|
||||
|
@ -74,11 +76,11 @@ export class AuthComponent implements OnInit, OnDestroy {
|
|||
return index;
|
||||
}
|
||||
|
||||
getIndexTab() {
|
||||
getIndexTab(): AuthTabEnum {
|
||||
return this.tabIndexes[this.selectedIndex];
|
||||
}
|
||||
|
||||
selectedIndexChange(index: number) {
|
||||
selectedIndexChange(index: number): void {
|
||||
this.selectedIndex = index;
|
||||
const tab = this.getIndexTab();
|
||||
const url = this.router.createUrlTree(['..', tab], {
|
||||
|
@ -97,7 +99,7 @@ export class AuthComponent implements OnInit, OnDestroy {
|
|||
this.appService.removeDynamicToolbarComponent(ThemeSwitcherComponent);
|
||||
}
|
||||
|
||||
register() {
|
||||
register(): void {
|
||||
this.authService.createAccount(this.registerForm.getRawValue()).subscribe(data => {
|
||||
this.loginForm.patchValue({
|
||||
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 => {
|
||||
const afterUrl = '/';
|
||||
this.router.navigateByUrl(afterUrl);
|
||||
|
|
|
@ -7,11 +7,12 @@ import { ThemeService } from 'src/app/modules/shared/services/theme/theme.servic
|
|||
styleUrls: ['./theme-switcher.component.scss']
|
||||
})
|
||||
export class ThemeSwitcherComponent implements OnInit {
|
||||
|
||||
|
||||
isDark = false;
|
||||
darkTheme = 'dark';
|
||||
lightTheme = 'light';
|
||||
theme = 'light';
|
||||
|
||||
constructor(
|
||||
private themeService: ThemeService,
|
||||
) {
|
||||
|
@ -20,11 +21,11 @@ export class ThemeSwitcherComponent implements OnInit {
|
|||
this.theme = theme;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
toggleTheme() {
|
||||
toggleTheme(): void {
|
||||
this.themeService.setTheme(this.theme === this.darkTheme ? this.lightTheme : this.darkTheme);
|
||||
this.isDark = this.theme === this.darkTheme;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
export interface LoginModel {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,4 +3,4 @@ export interface RegisterModel {
|
|||
surname: string;
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
export interface RestoreModel {
|
||||
email: string;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
export interface TokenResponse {
|
||||
token: string;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,4 +5,4 @@ export interface UserModel {
|
|||
avatar: string | null;
|
||||
country: string | null;
|
||||
state: string | null;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,14 +7,14 @@ import { AuthTokenService } from 'src/app/modules/shared/services/auth/auth-toke
|
|||
providedIn: 'root'
|
||||
})
|
||||
export class AuthGuard implements CanActivate, CanActivateChild {
|
||||
constructor(private AuthTokenService: AuthTokenService, private router: Router) {
|
||||
constructor(private authTokenService: AuthTokenService, private router: Router) {
|
||||
|
||||
}
|
||||
canActivate(
|
||||
route: ActivatedRouteSnapshot,
|
||||
state: RouterStateSnapshot,
|
||||
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
|
||||
const can = this.AuthTokenService.userValidate();
|
||||
const can = this.authTokenService.userValidate();
|
||||
if (!can){
|
||||
this.router.navigate(['/auth']);
|
||||
}
|
||||
|
@ -25,7 +25,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
|
|||
childRoute: ActivatedRouteSnapshot,
|
||||
state: RouterStateSnapshot,
|
||||
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
|
||||
const can = this.AuthTokenService.userValidate();
|
||||
const can = this.authTokenService.userValidate();
|
||||
if (!can){
|
||||
this.router.navigate(['/auth']);
|
||||
}
|
||||
|
|
|
@ -30,7 +30,7 @@ export class AuthService {
|
|||
return this.user;
|
||||
}
|
||||
|
||||
checkUser() {
|
||||
checkUser(): void {
|
||||
this.http.post<UserModel>('/api/user-check', {}).subscribe(user => {
|
||||
this.userChange.next(user);
|
||||
if (AuthService.updateAgent) {
|
||||
|
@ -53,15 +53,15 @@ export class AuthService {
|
|||
this.http.post<TokenResponse>('/api/login', {
|
||||
username: data.email,
|
||||
password: data.password,
|
||||
}).subscribe(data => {
|
||||
this.authTokenService.setToken(data.token);
|
||||
}).subscribe(response => {
|
||||
this.authTokenService.setToken(response.token);
|
||||
this.checkUser();
|
||||
out.next(data);
|
||||
out.next(response);
|
||||
});
|
||||
return out;
|
||||
}
|
||||
|
||||
logout() {
|
||||
logout(): void {
|
||||
this.authTokenService.removeToken();
|
||||
this.router.navigate(['/auth']);
|
||||
}
|
||||
|
|
|
@ -5,29 +5,29 @@ import {MatButtonModule} from '@angular/material/button';
|
|||
import {MatSidenavModule} from '@angular/material/sidenav';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatMenuModule} from '@angular/material/menu';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatTabsModule} from '@angular/material/tabs';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatTabsModule} from '@angular/material/tabs';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
|
||||
const itemsToExport = [
|
||||
MatToolbarModule,
|
||||
MatButtonModule,
|
||||
MatSidenavModule,
|
||||
MatSelectModule,
|
||||
MatMenuModule,
|
||||
MatCardModule,
|
||||
MatTabsModule,
|
||||
MatInputModule,
|
||||
MatToolbarModule,
|
||||
MatButtonModule,
|
||||
MatSidenavModule,
|
||||
MatSelectModule,
|
||||
MatMenuModule,
|
||||
MatCardModule,
|
||||
MatTabsModule,
|
||||
MatInputModule,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
CommonModule,
|
||||
...itemsToExport,
|
||||
],
|
||||
exports: [
|
||||
...itemsToExport,
|
||||
]
|
||||
declarations: [],
|
||||
imports: [
|
||||
CommonModule,
|
||||
...itemsToExport,
|
||||
],
|
||||
exports: [
|
||||
...itemsToExport,
|
||||
]
|
||||
})
|
||||
export class MaterialModule { }
|
||||
|
|
|
@ -1,11 +1,14 @@
|
|||
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
|
||||
import { Injectable } from "@angular/core";
|
||||
import { Observable } from "rxjs";
|
||||
import { AuthTokenService } from "src/app/modules/shared/services/auth/auth-token.service";
|
||||
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { AuthTokenService } from 'src/app/modules/shared/services/auth/auth-token.service';
|
||||
|
||||
@Injectable()
|
||||
export class TokenInterceptor implements HttpInterceptor {
|
||||
constructor(private authTokenService: AuthTokenService) {}
|
||||
|
||||
constructor(private authTokenService: AuthTokenService) {
|
||||
}
|
||||
|
||||
intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
|
||||
if (this.authTokenService.hasToken()) {
|
||||
const Authorization = `Bearer ${this.authTokenService.getToken()}`;
|
||||
|
@ -14,4 +17,4 @@ export class TokenInterceptor implements HttpInterceptor {
|
|||
return next.handle(httpRequest);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,18 +5,18 @@ import { BrowserStorageService } from '../browser-storage/browser-storage.servic
|
|||
|
||||
export class WindowSize {
|
||||
isMobile: boolean;
|
||||
|
||||
|
||||
constructor(
|
||||
public width: number,
|
||||
public height: number,
|
||||
) {
|
||||
this.isMobile = this.width <= 700;
|
||||
}
|
||||
|
||||
|
||||
static generate(): WindowSize {
|
||||
return new WindowSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
|
||||
update(): WindowSize {
|
||||
this.width = window.innerWidth;
|
||||
this.height = window.innerHeight;
|
||||
|
@ -45,13 +45,13 @@ export class AppService {
|
|||
this.configureSidebarEvents();
|
||||
}
|
||||
|
||||
configureSidebarEvents() {
|
||||
configureSidebarEvents(): void {
|
||||
this.sidebarHiddenChange.subscribe(hidden => {
|
||||
this.sidebarHidden = hidden;
|
||||
});
|
||||
}
|
||||
|
||||
configureResizeEvents() {
|
||||
configureResizeEvents(): void {
|
||||
this.sizeChange.subscribe(size => this.size = size);
|
||||
this.sizeChange.next(WindowSize.generate());
|
||||
fromEvent(window, 'resize').subscribe(e => {
|
||||
|
@ -59,7 +59,7 @@ export class AppService {
|
|||
});
|
||||
}
|
||||
|
||||
configureLanguageEvents() {
|
||||
configureLanguageEvents(): void {
|
||||
this.langChange.subscribe(lang => {
|
||||
this.lang = lang;
|
||||
this.browserStorageService.setItem('language', lang);
|
||||
|
@ -72,35 +72,35 @@ export class AppService {
|
|||
this.changeLang(language);
|
||||
}
|
||||
|
||||
addDynamicToolbarComponent(component) {
|
||||
addDynamicToolbarComponent(component): void {
|
||||
this.dynamicToolbarComponents.push(component);
|
||||
this.dynamicToolbarComponentsChange.next(this.dynamicToolbarComponents);
|
||||
}
|
||||
|
||||
removeDynamicToolbarComponent(component) {
|
||||
removeDynamicToolbarComponent(component): void {
|
||||
this.dynamicToolbarComponents = this.dynamicToolbarComponents.filter(c => c !== component);
|
||||
this.dynamicToolbarComponentsChange.next(this.dynamicToolbarComponents);
|
||||
}
|
||||
|
||||
setSidebarHidden(hidden: boolean) {
|
||||
setSidebarHidden(hidden: boolean): void {
|
||||
this.sidebarHiddenChange.next(hidden);
|
||||
}
|
||||
|
||||
getSidebarHidden() {
|
||||
getSidebarHidden(): boolean {
|
||||
return this.sidebarHidden;
|
||||
}
|
||||
|
||||
|
||||
changeLang(lang: string): void {
|
||||
if (lang !== this.lang) {
|
||||
this.translate.use(lang);
|
||||
this.langChange.next(lang);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
getLang(): string {
|
||||
return this.lang;
|
||||
}
|
||||
|
||||
|
||||
getLangs(): string[] {
|
||||
return [
|
||||
'pl',
|
||||
|
|
|
@ -8,24 +8,24 @@ export class AuthTokenService {
|
|||
constructor( private browserStorageService: BrowserStorageService) {
|
||||
}
|
||||
|
||||
setToken(token: string) {
|
||||
setToken(token: string): void {
|
||||
this.browserStorageService.setItem(this.TokenKey, token);
|
||||
}
|
||||
|
||||
hasToken() {
|
||||
hasToken(): boolean {
|
||||
const token = this.browserStorageService.getItemOrDefault(this.TokenKey, null);
|
||||
return token !== null;
|
||||
}
|
||||
|
||||
getToken() {
|
||||
getToken(): string {
|
||||
return this.browserStorageService.getItem(this.TokenKey);
|
||||
}
|
||||
|
||||
removeToken() {
|
||||
removeToken(): void {
|
||||
this.browserStorageService.setItem(this.TokenKey, null);
|
||||
}
|
||||
|
||||
userValidate() {
|
||||
userValidate(): boolean {
|
||||
if (!this.hasToken()) {
|
||||
return false;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue