diff --git a/src/app/_helpers/auth.guard.ts b/src/app/_helpers/auth.guard.ts index 8b720cb..dffe4c8 100644 --- a/src/app/_helpers/auth.guard.ts +++ b/src/app/_helpers/auth.guard.ts @@ -5,20 +5,14 @@ import { AuthenticationService } from '@app/_services'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { - constructor(private router: Router, private authenticationService: AuthenticationService) { + constructor(private router: Router, private authService: AuthenticationService) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { - const oauthToken = this.authenticationService.oauthTokenValue; - if (oauthToken) { - // logged in so return true - return true; - } - - // not logged in so redirect to login page with the return url - this.authenticationService.popup('login'); - - //this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } }); - return false; + if (this.authService.isLoggedIn) return true; + let extras = (state.url !== '/') ? {queryParams: {returnUrl: state.url}} : {}; + this.authService.popup('login'); + //this.router.navigate(['login'], extras).then(); + return false; } } diff --git a/src/app/_helpers/jwt.interceptor.ts b/src/app/_helpers/jwt.interceptor.ts index c5431b0..51ccc9f 100644 --- a/src/app/_helpers/jwt.interceptor.ts +++ b/src/app/_helpers/jwt.interceptor.ts @@ -7,20 +7,16 @@ import { AuthenticationService } from '@app/_services'; @Injectable() export class JwtInterceptor implements HttpInterceptor { - constructor(private authenticationService: AuthenticationService) { } + constructor(private authService: AuthenticationService) { } intercept(request: HttpRequest, next: HttpHandler): Observable> { - const oauthToken = this.authenticationService.token.value; - const isLoggedIn = oauthToken && oauthToken.access_token; - const isApiUrl = request.url.startsWith(environment.apiUrl); - if (isLoggedIn && isApiUrl) { - request = request.clone({ - setHeaders: { - Authorization: `${oauthToken.token_type} ${oauthToken.access_token}` - } - }); - } - - return next.handle(request); + const oauthToken = this.authService.token; + const isApiUrl = request.url.startsWith(environment.apiUrl); + if (this.authService.isLoggedIn && isApiUrl) { + request = request.clone({ + setHeaders: {Authorization: `${oauthToken.token_type} ${oauthToken.access_token}`} + }); + } + return next.handle(request); } } diff --git a/src/app/_helpers/not-auth.guard.ts b/src/app/_helpers/not-auth.guard.ts new file mode 100644 index 0000000..07fd973 --- /dev/null +++ b/src/app/_helpers/not-auth.guard.ts @@ -0,0 +1,15 @@ +import { Injectable } from '@angular/core'; +import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; +import { AuthenticationService } from '@app/_services'; + +@Injectable({ providedIn: 'root' }) +export class NotAuthGuard implements CanActivate { + constructor(private router: Router, private authService: AuthenticationService) { + } + + canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { + if (!this.authService.isLoggedIn) return true; + this.router.navigate(['/']).then(); + return false; + } +} diff --git a/src/app/_modules/administration/page/administration-page.component.ts b/src/app/_modules/administration/page/administration-page.component.ts index 0949a18..1b0ce6a 100644 --- a/src/app/_modules/administration/page/administration-page.component.ts +++ b/src/app/_modules/administration/page/administration-page.component.ts @@ -23,7 +23,7 @@ export class AdministrationPageComponent { } ngOnInit() { - this.authService.user.subscribe(val => { + this.authService.userSubject.subscribe(val => { this.makeTabs(); }); } diff --git a/src/app/_modules/auth/auth.module.ts b/src/app/_modules/auth/auth.module.ts index 990bdd5..ed5eab6 100644 --- a/src/app/_modules/auth/auth.module.ts +++ b/src/app/_modules/auth/auth.module.ts @@ -1,19 +1,20 @@ import {NgModule} from '@angular/core' import {CommonModule} from '@angular/common' import {RouterModule} from "@angular/router"; -import {LoginComponent} from "@app/_modules/auth/login/login.component"; +import {AuthFormLoginComponent} from "@app/_modules/auth/forms/login/auth-form-login.component"; import {BrowserModule} from "@angular/platform-browser"; import {FormsModule, ReactiveFormsModule} from "@angular/forms"; -import {ForgetComponent} from "@app/_modules/auth/forget/forget.component"; -import {PasswordResetComponent} from "@app/_modules/auth/reset/password-reset.component"; -import {SignupComponent} from "@app/_modules/auth/signup/signup.component"; -import {AuthFormComponent} from "@app/_modules/auth/form/form.component"; +import {AuthFormPasswordForgetComponent} from "@app/_modules/auth/forms/forget/auth-form-password-forget.component"; +import {AuthFormPasswordResetComponent} from "@app/_modules/auth/forms/reset/auth-form-password-reset.component"; +import {AuthFormSignupComponent} from "@app/_modules/auth/forms/signup/auth-form-signup.component"; +import {AuthPageComponent} from "@app/_modules/auth/page/auth-page.component"; +import {NotAuthGuard} from "@app/_helpers/not-auth.guard"; const routes = [ - {path: 'login', component: AuthFormComponent, outlet: 'auth'}, - {path: 'signup', component: AuthFormComponent, outlet: 'auth'}, - {path: 'password/forget', component: AuthFormComponent, outlet: 'auth'}, - {path: 'password/reset/:token/:email', component: PasswordResetComponent} + {path: 'login', component: AuthPageComponent, canActivate: [NotAuthGuard]}, + {path: 'signup', component: AuthPageComponent, canActivate: [NotAuthGuard]}, + {path: 'password/forget', component: AuthPageComponent, canActivate: [NotAuthGuard]}, + {path: 'password/reset/:token/:email', component: AuthPageComponent, canActivate: [NotAuthGuard]} ]; @NgModule({ @@ -22,17 +23,17 @@ const routes = [ FormsModule, ReactiveFormsModule, CommonModule, - RouterModule.forRoot(routes), + RouterModule.forRoot(routes) ], exports: [ - RouterModule, + ], declarations: [ - AuthFormComponent, - LoginComponent, - SignupComponent, - ForgetComponent, - PasswordResetComponent, + AuthPageComponent, + AuthFormLoginComponent, + AuthFormSignupComponent, + AuthFormPasswordForgetComponent, + AuthFormPasswordResetComponent ], }) export class AuthModule {} diff --git a/src/app/_modules/auth/forget/forget.component.html b/src/app/_modules/auth/forget/forget.component.html deleted file mode 100644 index 8fd173f..0000000 --- a/src/app/_modules/auth/forget/forget.component.html +++ /dev/null @@ -1,24 +0,0 @@ -
-
-
-

Восстановление пароля

- -
-
-
- - -
-
{{error}}
-
Если указанный адрес зарегистрирован, то на него будет выслан новый пароль
-
-
-

Письмо с инструкциями было отправлено на указанный адрес.

-

Пожалуйста, проверьте почту и выполните указанные в письме инструкции.

-
-
- - -
-
-
diff --git a/src/app/_modules/auth/forget/forget.component.scss b/src/app/_modules/auth/forget/forget.component.scss deleted file mode 100644 index 9dc6678..0000000 --- a/src/app/_modules/auth/forget/forget.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -.success { - h3, p { - margin: 0; - } -} diff --git a/src/app/_modules/auth/form/form.component.html b/src/app/_modules/auth/form/form.component.html deleted file mode 100644 index 76fe7f8..0000000 --- a/src/app/_modules/auth/form/form.component.html +++ /dev/null @@ -1,7 +0,0 @@ -
-
- - - -
-
diff --git a/src/app/_modules/auth/form/form.component.scss b/src/app/_modules/auth/form/form.component.scss deleted file mode 100644 index 86223eb..0000000 --- a/src/app/_modules/auth/form/form.component.scss +++ /dev/null @@ -1,26 +0,0 @@ -.auth { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 24px; - background-color: rgba(62, 61, 64, 70%); - display: flex; - align-items: center; - z-index: 1000; - .form { - max-width: 520px; - width: 100%; - max-height: 632px; - height: 100%; - border-radius: 24px; - background-color: var(--white); - margin: 0 auto; - } -} -@media screen and (max-width: 600px) { - .auth { - padding: 0; - } -} diff --git a/src/app/_modules/auth/form/form.component.ts b/src/app/_modules/auth/form/form.component.ts deleted file mode 100644 index e3ee86a..0000000 --- a/src/app/_modules/auth/form/form.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import {Component, OnInit} from '@angular/core'; -import {ActivatedRoute} from '@angular/router'; -import {Subscription} from "rxjs"; -import {AuthenticationService} from "@app/_services"; - -@Component({ - templateUrl: 'form.component.html', - styleUrls: ['form.component.scss'] -}) -export class AuthFormComponent implements OnInit { - public subscription: Subscription; - - constructor(private authService: AuthenticationService, private route: ActivatedRoute) { - this.subscription = this.authService.user.subscribe(user => { - if (user) window.location.reload(); - }); - } - - ngOnInit() { - } - - - get path() { - return this.route?.snapshot?.routeConfig?.path; - } -} diff --git a/src/app/_modules/auth/forms/forget/auth-form-password-forget.component.html b/src/app/_modules/auth/forms/forget/auth-form-password-forget.component.html new file mode 100644 index 0000000..cac3db7 --- /dev/null +++ b/src/app/_modules/auth/forms/forget/auth-form-password-forget.component.html @@ -0,0 +1,20 @@ +

Восстановление пароля

+
+
+
+ + +
+
{{error}}
+
Если указанный адрес зарегистрирован, то на него будет выслан новый пароль
+
+ + +
+
+
+
+

Письмо с инструкциями было отправлено на указанный адрес.

+

Пожалуйста, проверьте почту и выполните указанные в письме инструкции.

+
+ diff --git a/src/app/_modules/auth/forms/forget/auth-form-password-forget.component.scss b/src/app/_modules/auth/forms/forget/auth-form-password-forget.component.scss new file mode 100644 index 0000000..0804a6e --- /dev/null +++ b/src/app/_modules/auth/forms/forget/auth-form-password-forget.component.scss @@ -0,0 +1,10 @@ +.success { + h3, p { + margin: 0; + } +} + +.description { + font-size: 14px; + margin: 0 0 24px; +} diff --git a/src/app/_modules/auth/forget/forget.component.ts b/src/app/_modules/auth/forms/forget/auth-form-password-forget.component.ts similarity index 73% rename from src/app/_modules/auth/forget/forget.component.ts rename to src/app/_modules/auth/forms/forget/auth-form-password-forget.component.ts index 7fbe1fe..0354137 100644 --- a/src/app/_modules/auth/forget/forget.component.ts +++ b/src/app/_modules/auth/forms/forget/auth-form-password-forget.component.ts @@ -5,18 +5,17 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import {AuthenticationService} from '@app/_services'; @Component({ - selector: 'auth-forget', - templateUrl: 'forget.component.html', - styleUrls: ['forget.component.scss', '../login/login.component.scss'] + selector: 'auth-form-password-forget', + templateUrl: 'auth-form-password-forget.component.html', + styleUrls: ['auth-form-password-forget.component.scss', '../forms.component.scss'] }) -export class ForgetComponent implements OnInit { +export class AuthFormPasswordForgetComponent implements OnInit { form: FormGroup; loading = false; success = false; error = ''; constructor(private formBuilder: FormBuilder, private route: ActivatedRoute, private router: Router, private authenticationService: AuthenticationService) { - //if (this.authenticationService.oauthTokenValue) this.router.navigate(['']).then(); } ngOnInit() { @@ -32,7 +31,7 @@ export class ForgetComponent implements OnInit { return this.f?.email?.value; } - onSubmit() { + onSubmit() {console.log(111) if (this.form.invalid) return; this.loading = true; this.authenticationService.forget(this.email).subscribe(res => { @@ -48,12 +47,4 @@ export class ForgetComponent implements OnInit { let trans = {'The given data was invalid.': 'Указанный адрес почты не найден'}; this.error = trans[error] || error; } - - login() { - this.authenticationService.popup('login'); - } - - close() { - this.authenticationService.popup(null); - } } diff --git a/src/app/_modules/auth/forms/forms.component.scss b/src/app/_modules/auth/forms/forms.component.scss new file mode 100644 index 0000000..e679a30 --- /dev/null +++ b/src/app/_modules/auth/forms/forms.component.scss @@ -0,0 +1,88 @@ +h2 { + margin: 0 0 24px; + font-size: 24px; + font-weight: normal; +} + +.field { + margin: 0 0 16px; + + label { + font-size: 14px; + color: #666666; + line-height: 20px; + } + + .checkbox { + display: flex; + flex-direction: row; + gap: 12px; + margin: 0 0 12px; + &:last-child {margin: 0;} + label { + font-size: 0.875rem; + color: #86898E; + a { + color: #F9B417; + } + } + input { + flex-shrink: 0; + width: 20px; + height: 20px; + margin: 0; + padding: 0; + } + } +} + +.error { + margin: 0 0 16px; + font-size: 14px; + color: #D91519; + text-align: center; +} + +.bar { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + flex-wrap: wrap; + row-gap: 18px; + .remember { + display: flex; + flex-direction: row; + align-items: center; + input { + width: 16px; + height: 16px; + margin-right: 8px; + border-radius: 2px; + border: 1px solid #86898E; + } + } + .forget { + margin-left: auto; + cursor: pointer; + } +} + +.bottom { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + gap: 24px; + margin: 24px 0 0; +} + + +@media screen and (max-width: 600px) { + .bottom { + flex-direction: column-reverse; + button { + width: 100%; + } + } +} diff --git a/src/app/_modules/auth/forms/login/auth-form-login.component.html b/src/app/_modules/auth/forms/login/auth-form-login.component.html new file mode 100644 index 0000000..c1ed254 --- /dev/null +++ b/src/app/_modules/auth/forms/login/auth-form-login.component.html @@ -0,0 +1,22 @@ +
+

Вход в систему

+
+ + +
+
+ + +
+
{{error}}
+
+
+ + +
+ Забыли пароль? +
+
+ +
+
diff --git a/src/app/_modules/auth/reset/password-reset.component.scss b/src/app/_modules/auth/forms/login/auth-form-login.component.scss similarity index 100% rename from src/app/_modules/auth/reset/password-reset.component.scss rename to src/app/_modules/auth/forms/login/auth-form-login.component.scss diff --git a/src/app/_modules/auth/login/login.component.ts b/src/app/_modules/auth/forms/login/auth-form-login.component.ts similarity index 53% rename from src/app/_modules/auth/login/login.component.ts rename to src/app/_modules/auth/forms/login/auth-form-login.component.ts index 0798c25..9fed5d6 100644 --- a/src/app/_modules/auth/login/login.component.ts +++ b/src/app/_modules/auth/forms/login/auth-form-login.component.ts @@ -1,26 +1,19 @@ import {Component, OnInit} from '@angular/core'; import {Router, ActivatedRoute} from '@angular/router'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; - import {AuthenticationService} from '@app/_services'; -import {Subscription} from "rxjs"; @Component({ - selector: 'auth-login', - templateUrl: 'login.component.html', - styleUrls: ['login.component.scss'] + selector: 'auth-form-login', + templateUrl: 'auth-form-login.component.html', + styleUrls: ['auth-form-login.component.scss', '../forms.component.scss'] }) -export class LoginComponent implements OnInit { +export class AuthFormLoginComponent implements OnInit { form: FormGroup; loading = false; error = ''; - subscription: Subscription; - public type: string = 'password'; - constructor(private formBuilder: FormBuilder, private router: Router, private route: ActivatedRoute, private authenticationService: AuthenticationService) { - //this.subscription = this.authenticationService.user.subscribe(user => { - // if (user) this.router.navigate([this.route.snapshot.queryParamMap.get('returnUrl')?.split('(')[0] || '']).then(); - //}); + constructor(private formBuilder: FormBuilder, private router: Router, private route: ActivatedRoute, private authService: AuthenticationService) { } ngOnInit() { @@ -30,10 +23,6 @@ export class LoginComponent implements OnInit { }); } - ngOnDestroy() { - this.subscription?.unsubscribe(); - } - get f() { return this.form.controls; } @@ -47,8 +36,9 @@ export class LoginComponent implements OnInit { onSubmit() { if (this.form.invalid) return; this.loading = true; - this.authenticationService.getToken(this.username, this.password).subscribe(res => { - this.authenticationService.saveToken(res); + this.authService.login(this.username, this.password).subscribe(res => { + this.authService.token = res; + this.router.navigate(['']).then(); }, error => { this.setError(error.message); this.loading = false; @@ -59,16 +49,4 @@ export class LoginComponent implements OnInit { let trans = {'The user credentials were incorrect.': 'Имя пользователя или пароль указаны неверно.'}; this.error = trans[error] || error; } - - forget() { - this.authenticationService.popup(['password','forget']); - } - - close() { - this.authenticationService.popup(null); - } - - signup() { - this.authenticationService.popup('signup'); - } } diff --git a/src/app/_modules/auth/forms/reset/auth-form-password-reset.component.html b/src/app/_modules/auth/forms/reset/auth-form-password-reset.component.html new file mode 100644 index 0000000..fa9df5d --- /dev/null +++ b/src/app/_modules/auth/forms/reset/auth-form-password-reset.component.html @@ -0,0 +1,17 @@ +
+

Сброс пароля

+
+ + +
+
+ + +
+
{{error}}
+
+ + +
+
+ diff --git a/src/app/_modules/auth/signup/signup.component.scss b/src/app/_modules/auth/forms/reset/auth-form-password-reset.component.scss similarity index 100% rename from src/app/_modules/auth/signup/signup.component.scss rename to src/app/_modules/auth/forms/reset/auth-form-password-reset.component.scss diff --git a/src/app/_modules/auth/reset/password-reset.component.ts b/src/app/_modules/auth/forms/reset/auth-form-password-reset.component.ts similarity index 86% rename from src/app/_modules/auth/reset/password-reset.component.ts rename to src/app/_modules/auth/forms/reset/auth-form-password-reset.component.ts index 9e52850..8a1b15a 100644 --- a/src/app/_modules/auth/reset/password-reset.component.ts +++ b/src/app/_modules/auth/forms/reset/auth-form-password-reset.component.ts @@ -5,16 +5,16 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import {AuthenticationService} from '@app/_services'; @Component({ - templateUrl: 'password-reset.component.html', - styleUrls: ['password-reset.component.scss', '../login/login.component.scss'] + selector: 'auth-form-password-reset', + templateUrl: 'auth-form-password-reset.component.html', + styleUrls: ['auth-form-password-reset.component.scss', '../forms.component.scss'] }) -export class PasswordResetComponent implements OnInit { +export class AuthFormPasswordResetComponent implements OnInit { form: FormGroup; loading = false; error = ''; constructor(private formBuilder: FormBuilder, private route: ActivatedRoute, private router: Router, private authenticationService: AuthenticationService) { - //if (this.authenticationService.oauthTokenValue) this.router.navigate(['']).then(); } ngOnInit() { diff --git a/src/app/_modules/auth/forms/signup/auth-form-signup.component.html b/src/app/_modules/auth/forms/signup/auth-form-signup.component.html new file mode 100644 index 0000000..ae91070 --- /dev/null +++ b/src/app/_modules/auth/forms/signup/auth-form-signup.component.html @@ -0,0 +1,50 @@ +
+

Регистрация

+
+
+ + + +

Адрес почты указан не корректно

+

{{err}}

+
+
+ + + +
+
+ + +
+
+ + + +

{{err}}

+
+
+ + + +
+ +
{{error}}
+
+
+ + +
+
+ diff --git a/src/app/_modules/auth/forms/signup/auth-form-signup.component.scss b/src/app/_modules/auth/forms/signup/auth-form-signup.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/_modules/auth/signup/signup.component.ts b/src/app/_modules/auth/forms/signup/auth-form-signup.component.ts similarity index 61% rename from src/app/_modules/auth/signup/signup.component.ts rename to src/app/_modules/auth/forms/signup/auth-form-signup.component.ts index 255be35..1dc3518 100644 --- a/src/app/_modules/auth/signup/signup.component.ts +++ b/src/app/_modules/auth/forms/signup/auth-form-signup.component.ts @@ -6,21 +6,18 @@ import {AuthenticationService} from '@app/_services'; import {Subscription} from "rxjs"; @Component({ - selector: 'auth-signup', - templateUrl: 'signup.component.html', - styleUrls: ['signup.component.scss', '../login/login.component.scss'] + selector: 'auth-form-signup', + templateUrl: 'auth-form-signup.component.html', + styleUrls: ['auth-form-signup.component.scss', '../forms.component.scss'] }) -export class SignupComponent implements OnInit { +export class AuthFormSignupComponent implements OnInit { form: FormGroup; loading = false; error = ''; asyncErrors: any = {}; subscription: Subscription; - constructor(private formBuilder: FormBuilder, private router: Router, private route: ActivatedRoute, private authenticationService: AuthenticationService) { - //this.subscription = this.authenticationService.user.subscribe(user => { - // if (user) this.router.navigate([this.route.snapshot.queryParamMap.get('returnUrl')?.split('(')[0] || 'applications']).then(); - //}); + constructor(private formBuilder: FormBuilder, private router: Router, private route: ActivatedRoute, private authService: AuthenticationService) { } ngOnInit() { @@ -29,12 +26,13 @@ export class SignupComponent implements OnInit { name: ['', Validators.required], phone: [''], password: ['', Validators.required], - passwordConfirmation: ['', Validators.required] + passwordConfirmation: ['', Validators.required], + //agree: [null, Validators.requiredTrue], + //read: [null, Validators.requiredTrue] }); } ngOnDestroy() { - this.subscription?.unsubscribe(); } get f() { @@ -52,15 +50,20 @@ export class SignupComponent implements OnInit { get confirmation() { return this.f.passwordConfirmation; } + get agree() { + return this.f.agree; + } + get read() { + return this.f.read; + } onSubmit() { this.form.markAllAsTouched(); if (this.form.invalid) return; this.loading = true; - this.authenticationService.signup(this.form.value).subscribe(res => { - this.authenticationService.getToken(this.email.value, this.password.value).subscribe(res => { - this.authenticationService.saveToken(res); - this.close(); + this.authService.signup(this.form.value).subscribe(res => { + this.authService.login(this.email.value, this.password.value).subscribe(res => { + this.authService.token = res; }); }, error => { this.setError(error); @@ -76,12 +79,4 @@ export class SignupComponent implements OnInit { let trans = {'The given data was invalid.': 'Проверьте правильность заполнения формы'}; this.error = trans[error.message] || error.message; } - - close() { - this.authenticationService.popup(null); - } - - login() { - this.authenticationService.popup('login'); - } } diff --git a/src/app/_modules/auth/login/login.component.html b/src/app/_modules/auth/login/login.component.html deleted file mode 100644 index 2a114a0..0000000 --- a/src/app/_modules/auth/login/login.component.html +++ /dev/null @@ -1,31 +0,0 @@ -
-
-
-

Вход

- -
-
-
- - -
-
- - -
-
-
{{error}}
-
-
- - -
-
Забыли пароль?
-
-
-
- - -
-
-
diff --git a/src/app/_modules/auth/login/login.component.scss b/src/app/_modules/auth/login/login.component.scss deleted file mode 100644 index 8ee2064..0000000 --- a/src/app/_modules/auth/login/login.component.scss +++ /dev/null @@ -1,162 +0,0 @@ -.popup { - display: flex; - flex-direction: column; - height: 100%; - background-color: #ffffff; - border-radius: 8px; - font-size: 20px; - form { - display: flex; - flex-direction: column; - height: 100%; - .header { - flex-grow: 0; - border-radius: 24px 24px 0 0; - padding: 14px 24px; - display: flex; - flex-direction: row; - align-items: center; - border-bottom: 1px solid var(--second-dis); - h2 { - margin: 0; - font-family: PT Sans Narrow; - font-size: 36px; - font-style: normal; - font-weight: 700; - line-height: 44px; /* 122.222% */ - letter-spacing: 0.36px; - color: var(--second-act); - } - .close { - width: 24px; - height: 24px; - margin-left: auto; - padding: 0; - border: none; - border-radius: 0; - background: transparent url(/assets/images/icons/close_24dp.svg) 50% 50% no-repeat; - } - } - .body { - display: flex; - flex-direction: column; - flex-grow: 1; - height: 100%; - overflow: auto; - padding: 32px 24px; - -webkit-overflow-scrolling: touch; - row-gap: 24px; - .field { - display: flex; - flex-direction: column; - row-gap: 4px; - position: relative; - label { - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: normal; - } - input{ - &:autofill { - background: #A1CAE5; - } - - &:hover{ - border-color: var(--second); - outline: none; - } - &:focus, &:focus-visible { - border-color: var(--prime); - outline: none; - - } - &:disabled{ - border-color: #EDEDED; - outline: none; - } - } - .eye { - position: absolute; - bottom: 8px; - right: 12px; - width: 24px; - height: 24px; - background-position: center; - background-repeat: no-repeat; - cursor: pointer; - &.show {background-image: url("~src/assets/images/icons/visibility_on_24dp.svg");} - &.hide {background-image: url("~src/assets/images/icons/visibility_off_24dp.svg");} - } - } - .error { - color: red; - } - .bar { - display: flex; - flex-direction: row; - align-items: center; - width: 100%; - flex-wrap: wrap; - row-gap: 18px; - .remember { - display: flex; - flex-direction: row; - align-items: center; - input { - width: 16px; - height: 16px; - margin-right: 8px; - border-radius: 2px; - border: 1px solid #86898E; - } - } - .forget { - margin-left: auto; - cursor: pointer; - } - } - } - .footer { - display: flex; - flex-grow: 0; - border-top: 1px solid var(--second-dis); - // border-radius: 0 0 24px 24px; - padding: 16px 24px; - justify-content: flex-end; - gap: 24px; - flex-wrap: wrap; - } - } -} - -@media screen and (max-width: 1330px) { - .authentication { - flex-direction: column; - justify-content: center; - .logo { - width: 100%; - height: 76px; - margin-bottom: 50px; - background-color: transparent; - background-size: contain; - } - .block { - width: 100%; - } - } -} -@media screen and (max-width: 600px) { - .popup { - form { - .header, .footer { - border-radius: 0; - } - .footer { - .btn { - width: 100%; - } - } - } - } -} diff --git a/src/app/_modules/auth/page/auth-page.component.html b/src/app/_modules/auth/page/auth-page.component.html new file mode 100644 index 0000000..29fd514 --- /dev/null +++ b/src/app/_modules/auth/page/auth-page.component.html @@ -0,0 +1,17 @@ +
+ +
+
+ + + + +

{{url}} is undefined

+
+
+
diff --git a/src/app/_modules/auth/page/auth-page.component.scss b/src/app/_modules/auth/page/auth-page.component.scss new file mode 100644 index 0000000..c2f73c9 --- /dev/null +++ b/src/app/_modules/auth/page/auth-page.component.scss @@ -0,0 +1,46 @@ +.authentication { + display: flex; + flex-direction: row; + width: 100%; + height: 100vh; + .logo { + display: flex; + width: 50%; + flex-shrink: 0; + height: 100%; + border-right: #E0E0E0 solid 1px; + text-align: center; + color: #0071BB; + } + + .form { + display: flex; + flex-grow: 1; + padding: 24px; + } + + .center { + width: 100%; + max-width: 416px; + margin: auto; + } +} + + +@media screen and (max-width: 959px) { + .authentication { + flex-direction: column; + justify-content: center; + .logo { + width: 100%; + height: auto; + border-right: none; + } + .form { + flex-grow: 0; + } + ::ng-deep h2 { + text-align: center; + } + } +} diff --git a/src/app/_modules/auth/page/auth-page.component.ts b/src/app/_modules/auth/page/auth-page.component.ts new file mode 100644 index 0000000..76ca9d4 --- /dev/null +++ b/src/app/_modules/auth/page/auth-page.component.ts @@ -0,0 +1,21 @@ +import {Component, OnInit} from '@angular/core'; +import {Router} from "@angular/router"; + +@Component({ + selector: 'auth-page', + templateUrl: 'auth-page.component.html', + styleUrls: ['auth-page.component.scss'] +}) +export class AuthPageComponent implements OnInit { + constructor(private router: Router) { + } + + get url() { + return this.router.url.split('?')[0].split('(')[0].split('/').slice(1, 3).join('/'); + } + + ngOnInit() { + } + + +} diff --git a/src/app/_modules/auth/reset/password-reset.component.html b/src/app/_modules/auth/reset/password-reset.component.html deleted file mode 100644 index 20ea0db..0000000 --- a/src/app/_modules/auth/reset/password-reset.component.html +++ /dev/null @@ -1,24 +0,0 @@ -
- -
-
-
Сброс пароля
-
- - -
-
- - -
-
{{error}}
-
-
Авторизация
-
-
- -
-
-
-
- diff --git a/src/app/_modules/auth/signup/signup.component.html b/src/app/_modules/auth/signup/signup.component.html deleted file mode 100644 index f498bca..0000000 --- a/src/app/_modules/auth/signup/signup.component.html +++ /dev/null @@ -1,43 +0,0 @@ -
-
-
-

Регистрация

- -
-
-
- - - -

Адрес почты указан не корректно

-

{{err}}

-
-
- - - -
-
- - -
-
- - - -

{{err}}

-
-
- - - -
-
{{error}}
-
-
- - -
-
-
- diff --git a/src/app/_modules/layout/footer/footer.component.html b/src/app/_modules/layout/footer/footer.component.html index 839369d..0eb531f 100644 --- a/src/app/_modules/layout/footer/footer.component.html +++ b/src/app/_modules/layout/footer/footer.component.html @@ -20,7 +20,7 @@ - +
@@ -46,7 +46,7 @@
Новости
-
+
diff --git a/src/app/_modules/layout/footer/footer.component.ts b/src/app/_modules/layout/footer/footer.component.ts index 32ee922..61a6cad 100644 --- a/src/app/_modules/layout/footer/footer.component.ts +++ b/src/app/_modules/layout/footer/footer.component.ts @@ -8,19 +8,18 @@ import {Subscription} from "rxjs"; styleUrls: ['footer.component.scss'] }) export class FooterComponent { - subscription: Subscription; - public user: any; - constructor(public authenticationService: AuthenticationService) { - this.subscription = this.authenticationService.user.subscribe(user => { - this.user = user; - }); + constructor(public authService: AuthenticationService) { + } + + get isLoggedIn() { + return this.authService.isLoggedIn; } ngOnInit() { } login() { - this.authenticationService.popup('login'); + this.authService.popup('login'); } } diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts b/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts index e31ee79..14a1c23 100644 --- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts +++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts @@ -11,20 +11,16 @@ import { PagesService } from '@app/_services/pages.service'; styleUrls: ['header-user-bar.component.scss'] }) export class HeaderUserBarComponent { - public user: any; public menuItems = []; public ddHidden = true; subscriptionUser: Subscription; - constructor( - public authService: AuthenticationService, - private router: Router, - private pagesService: PagesService) { - this.subscriptionUser = this.authService.user.subscribe(user => { - this.user = user; - }); + constructor(public authService: AuthenticationService, private router: Router, private pagesService: PagesService) { } + get user() { + return this.authService.user; + } get avatar() { return this.user?.avatar?.data; } @@ -36,10 +32,6 @@ export class HeaderUserBarComponent { } - ngOnDestroy() { - this.subscriptionUser?.unsubscribe(); - } - close() { setTimeout(() => { diff --git a/src/app/_modules/users/profile/user-profile.component.ts b/src/app/_modules/users/profile/user-profile.component.ts index a0fd108..744ed91 100644 --- a/src/app/_modules/users/profile/user-profile.component.ts +++ b/src/app/_modules/users/profile/user-profile.component.ts @@ -7,29 +7,26 @@ import {Subscription} from "rxjs"; styleUrls: ['user-profile.component.scss'] }) export class UserProfileComponent { - public user: any; inited = false; - userSubscription: Subscription; controlsSubscription: Subscription; constructor(private listsService: ListsService, private formsService: FormsService, private authService: AuthenticationService) { - this.userSubscription = this.authService.user.subscribe(user => { - this.user = user; - }); } + get user() { + return this.authService.user; + } get avatar() { return this.user?.avatar?.data; } ngOnInit() { this.controlsSubscription = this.listsService.controls().subscribe(res => { - this.inited ? this.authService.checkUser() : this.inited = true; + this.inited ? this.authService.getCurrentUser() : this.inited = true; }); } ngOnDestroy() { - this.userSubscription?.unsubscribe(); this.controlsSubscription?.unsubscribe(); } diff --git a/src/app/_services/authentication.service.ts b/src/app/_services/authentication.service.ts index 8147e7e..7443c36 100644 --- a/src/app/_services/authentication.service.ts +++ b/src/app/_services/authentication.service.ts @@ -5,22 +5,44 @@ import {Router} from "@angular/router"; import {environment} from '@environments/environment'; import {OauthToken, User} from '@app/_models'; +import {UsersService} from "@app/_services/users.service"; @Injectable({providedIn: 'root'}) export class AuthenticationService { - public token: BehaviorSubject; - public user: BehaviorSubject; + public tokenSubject = new BehaviorSubject(JSON.parse(localStorage.getItem('oauthToken'))); + public userSubject = new BehaviorSubject(null); - constructor(private http: HttpClient, private router: Router) { - this.token = new BehaviorSubject(JSON.parse(localStorage.getItem('oauthToken'))); - this.user = new BehaviorSubject(null); + constructor(private http: HttpClient, private router: Router, private usersService: UsersService) { } - get oauthTokenValue() { - return this.token.value; + get token(): OauthToken { + return this.tokenSubject.value; } + set token(value: OauthToken) { + this.tokenSubject.next(value); + if (value) { + localStorage.setItem('oauthToken', JSON.stringify(value)); + this.getCurrentUser(); + } else { + localStorage.removeItem('oauthToken'); + this.user = null; + } + } + + get user(): User { + return this.userSubject.value; + } + set user(value: User) { + this.userSubject.next(value); + } + + get isLoggedIn(): boolean { + return !!this.token?.access_token; + } + + public get privileges() { - return this.user.value?.privileges; + return this.user?.privileges; } get isSuperAdmin() { return this.privileges?.superAdmin; @@ -40,43 +62,33 @@ export class AuthenticationService { signup(data: any): Observable { return this.http.post(`${environment.apiUrl}/api/signup`, data); } - - getToken(username: string, password: string): Observable { + login(username: string, password: string): Observable { let data = {grant_type: 'password', client_id: environment.clientId, client_secret: environment.clientSecret, username: username, password: password}; return this.http.post(`${environment.apiUrl}/oauth/token`, data); } - saveToken(token: OauthToken) { - localStorage.setItem('oauthToken', JSON.stringify(token)); - this.token.next(token); - this.checkUser(); - } - - checkUser(params?: any) { - if (this.token.value) { - if (!params) params = {include: 'avatar,privileges'}; - this.http.get(`${environment.apiUrl}/api/me`, {params: params}).subscribe((res: any) => { - this.user.next(res?.data); - }); - } - } - - - logout() { - localStorage.removeItem('oauthToken'); - this.token.next(null); - this.user.next(null); - } - - forget(email: string): Observable { return this.http.post(`${environment.apiUrl}/api/passwords/reset`, {email}); } - restore(data: any): Observable { return this.http.put(`${environment.apiUrl}/api/passwords/reset`, data); } + + getCurrentUser(params?: any) { + if (this.isLoggedIn) this.usersService.me(params).subscribe(res => { + this.user = res.data; + }); + } + + + logout() { + this.token = null; + } + + + popup(path: any) { - this.router.navigate([ {outlets: {auth: path}}], {skipLocationChange: true}).then(); + this.router.navigate([path]).then(); + //this.router.navigate([ {outlets: {auth: path}}], {skipLocationChange: true}).then(); } } diff --git a/src/app/_services/index.ts b/src/app/_services/index.ts index 20b57ed..9e8c4b8 100644 --- a/src/app/_services/index.ts +++ b/src/app/_services/index.ts @@ -6,5 +6,5 @@ export * from './forms.service'; export * from './lists.service'; export * from './notification.service'; export * from './objects.service'; -export * from './user.service'; +export * from './users.service'; export * from './utility.service'; diff --git a/src/app/_services/user.service.ts b/src/app/_services/user.service.ts deleted file mode 100644 index c128c49..0000000 --- a/src/app/_services/user.service.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; - -import { environment } from '@environments/environment'; -import {Observable} from "rxjs"; - -@Injectable({ providedIn: 'root' }) -export class UserService { - constructor(private http: HttpClient) { - } - - me(params?: {}): Observable { - return this.http.get(`${environment.apiUrl}/api/me`, {params: params}); - } - -} diff --git a/src/app/_services/users.service.ts b/src/app/_services/users.service.ts new file mode 100644 index 0000000..b813bd7 --- /dev/null +++ b/src/app/_services/users.service.ts @@ -0,0 +1,16 @@ +import {Injectable} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; +import {environment} from '@environments/environment'; +import {Observable} from "rxjs"; + +@Injectable({ providedIn: 'root' }) +export class UsersService { + constructor(private http: HttpClient) { + } + + me(params: any): Observable { + if (!params) params = {include: 'avatar,membership.company,roles,privileges'}; + return this.http.get(`${environment.apiUrl}/api/me`, {params: params}); + } + +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index bd11696..0882277 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -12,7 +12,7 @@ export class AppComponent { public subscription: Subscription; constructor(private authService: AuthenticationService, private pagesService: PagesService, private titleService: Title, private metaService: Meta) { - authService.checkUser(); + authService.getCurrentUser(); this.subscription = this.pagesService.metaSubject.subscribe(data => { this.applyMetaData(data); }); diff --git a/src/environments/environment.ts b/src/environments/environment.ts index b263348..7fb86bf 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -6,7 +6,7 @@ export const environment = { production: false, apiUrl: 'http://api.nircms.lc', clientId: 2, - clientSecret: 'v49Z7dwUb1cobcTIJ5JQVJBzOFcNyJMzMmiDspUm', + clientSecret: 'gVk3jjKq6rWWM52025xgXlw2XGW1UACowyMIyhRR', project: null, defaultLocale: 'ru' };