modal login

src/app/_modules/auth/auth-modal/auth-modal.component.html

@@ -0,0 +1,19 @@
+<modal (close)="close()">
+  <div [ngSwitch]="url"header>
+    <h3 *ngSwitchCase="'login'">Вход в систему</h3>
+    <h3 *ngSwitchCase="'password/forget'">Восстановление пароля</h3>
+  </div>
+    <div class="authentication">
+        
+        <div class="form">
+          <div class="center" [ngSwitch]="url">
+            <auth-form-login *ngSwitchCase="'login'"></auth-form-login>
+            <auth-form-signup *ngSwitchCase="'signup'"></auth-form-signup>
+            <auth-form-password-forget *ngSwitchCase="'password/forget'"></auth-form-password-forget>
+            <auth-form-password-reset *ngSwitchCase="'password/reset'"></auth-form-password-reset>
+            <p *ngSwitchDefault>{{url}} is undefined</p>
+          </div>
+        </div>
+      </div>
+</modal>
+

src/app/_modules/auth/auth-modal/auth-modal.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthModalComponent } from './auth-modal.component';
+
+describe('AuthModalComponent', () => {
+  let component: AuthModalComponent;
+  let fixture: ComponentFixture<AuthModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AuthModalComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AuthModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_modules/auth/auth-modal/auth-modal.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'auth-modal',
+  templateUrl: './auth-modal.component.html',
+  styleUrls: ['./auth-modal.component.scss']
+})
+export class AuthModalComponent {
+  constructor(private router: Router) {
+  }
+
+  get url() {
+    let str = this.router.url
+    return str.substring(
+      str.indexOf(':') + 1, 
+      str.lastIndexOf(')')
+    );
+  }
+
+  close() {
+    console.log('CLS')
+    this.router.navigate([{outlets: {auth: null}}]).then();
+  }
+}

src/app/_modules/auth/auth.module.ts

@@ -9,11 +9,15 @@ import {AuthFormPasswordResetComponent} from "@app/_modules/auth/forms/reset/aut
 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";
+import { AuthModalComponent } from './auth-modal/auth-modal.component';
+import { WidjetModule } from '../widjet/widjet.module';
 
 const routes = [
   {path: 'login', component: AuthPageComponent, canActivate: [NotAuthGuard]},
+  {path: 'login', component: AuthModalComponent, canActivate: [NotAuthGuard],  outlet: 'auth'},
   {path: 'signup', component: AuthPageComponent, canActivate: [NotAuthGuard]},
-  {path: 'password/forget', component: AuthPageComponent, canActivate: [NotAuthGuard]},
+  {path: 'signup', component: AuthModalComponent, canActivate: [NotAuthGuard], outlet: 'auth'},
+  {path: 'password/forget', component: AuthModalComponent, canActivate: [NotAuthGuard], outlet: 'auth'},
   {path: 'password/reset/:token/:email', component: AuthPageComponent, canActivate: [NotAuthGuard]}
 ];
 
@@ -23,17 +27,20 @@ const routes = [
     FormsModule,
     ReactiveFormsModule,
     CommonModule,
+    WidjetModule,
     RouterModule.forRoot(routes)
   ],
   exports: [
 
   ],
   declarations: [
+    AuthModalComponent,
     AuthPageComponent,
     AuthFormLoginComponent,
     AuthFormSignupComponent,
     AuthFormPasswordForgetComponent,
-    AuthFormPasswordResetComponent
+    AuthFormPasswordResetComponent,
+    AuthModalComponent
   ],
 })
 export class AuthModule {}

src/app/_modules/auth/forms/forget/auth-form-password-forget.component.html

@@ -1,4 +1,3 @@
-<h2>Восстановление пароля</h2>
 <div class="body" *ngIf="!success">
   <form [formGroup]="form" (submit)="onSubmit()">
     <div class="field" [class.invalid]="email.invalid && email.touched">
@@ -8,7 +7,7 @@
     <div *ngIf="error" class="error">{{error}}</div>
     <div class="description">Если указанный адрес зарегистрирован, то на него будет выслан новый пароль</div>
     <div class="bottom">
-      <button type="button" class="btn secondary" routerLink="/login">Авторизоваться</button>
+      <button type="button" class="btn secondary" (click)="login()">Авторизоваться</button>
       <button *ngIf="!success" [disabled]="loading" type="submit" class="btn">Запросить</button>
     </div>
   </form>

src/app/_modules/auth/forms/forget/auth-form-password-forget.component.ts

@@ -47,4 +47,11 @@ export class AuthFormPasswordForgetComponent implements OnInit {
     let trans = {'The given data was invalid.': 'Указанный адрес почты не найден'};
     this.error = trans[error] || error;
   }
+
+  login(){
+    this.router.navigate(
+      [ {outlets: {auth: 'login'}}], 
+      {skipLocationChange: true}
+    ).then();
+  }
 }

src/app/_modules/auth/forms/login/auth-form-login.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="form" (submit)="onSubmit()">
-  <h2>Вход в систему</h2>
+  
   <div class="field" [class.invalid]="username.invalid && username.touched">
     <label for="username">Логин</label>
     <input id="username" formControlName="username" type="email" />
@@ -14,7 +14,8 @@
       <input id="remember" type="checkbox" />
       <label for="remember">Запомнить меня</label>
     </div>
-    <a class="forget" routerLink="/password/forget">Забыли пароль?</a>
+    <a class="forget" (click)="forget()">Забыли пароль?</a>
+    <a class="forget" (click)="signup()">Регистрация</a>
   </div>
   <div class="bottom">
     <button [disabled]="loading" type="submit" class="btn">Войти</button>

src/app/_modules/auth/forms/login/auth-form-login.component.ts

@@ -49,4 +49,18 @@ export class AuthFormLoginComponent implements OnInit {
     let trans = {'The user credentials were incorrect.': 'Имя пользователя или пароль указаны неверно.'};
     this.error = trans[error] || error;
   }
+
+  forget(){
+    this.router.navigate(
+      [ {outlets: {auth: 'password/forget'}}], 
+      {skipLocationChange: true}
+    ).then();
+  }
+
+  signup(){
+    this.router.navigate(
+      [ {outlets: {auth: 'signup'}}], 
+      {skipLocationChange: true}
+    ).then();
+  }
 }

src/app/_modules/auth/page/auth-page.component.ts

@@ -6,7 +6,7 @@ import {Router} from "@angular/router";
   templateUrl: 'auth-page.component.html',
   styleUrls: ['auth-page.component.scss']
 })
-export class AuthPageComponent implements OnInit {
+export class AuthPageComponent {
   constructor(private router: Router) {
   }
 
@@ -14,8 +14,5 @@ export class AuthPageComponent implements OnInit {
     return this.router.url.split('?')[0].split('(')[0].split('/').slice(1, 3).join('/');
   }
 
-  ngOnInit() {
-  }
-
 
 }

src/app/_modules/layout/footer/footer.component.ts

@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {AuthenticationService} from "@app/_services";
-import {Subscription} from "rxjs";
 
 @Component({
   selector: 'footer',

src/app/_modules/layout/header/user-bar/header-user-bar.component.ts

@@ -1,7 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {AuthenticationService} from "@app/_services";
 import {Router} from "@angular/router";
-import {Subscription} from "rxjs";
 import { PagesService } from '@app/_services/pages.service';
 
 
@@ -13,7 +12,6 @@ import { PagesService } from '@app/_services/pages.service';
 export class HeaderUserBarComponent {
   public menuItems = <any>[];
   public ddHidden = true;
-  subscriptionUser: Subscription;
 
   constructor(public authService: AuthenticationService, private router: Router, private pagesService: PagesService) {
   }

src/app/_services/authentication.service.ts

@@ -88,7 +88,9 @@ export class AuthenticationService {
 
 
   popup(path: any) {
-    this.router.navigate([path]).then();
-    //this.router.navigate([ {outlets: {auth: path}}], {skipLocationChange: true}).then();
+    this.router.navigate(
+      [ {outlets: {auth: path}}], 
+      {skipLocationChange: true}
+    ).then();
   }
 }

src/environments/environment.ts

@@ -6,7 +6,7 @@ export const environment = {
   production: false,
   apiUrl: 'http://api.nircms.lc',
   clientId: 2,
-  clientSecret: 'gVk3jjKq6rWWM52025xgXlw2XGW1UACowyMIyhRR',
+  clientSecret: 'E4BoAclC9X3gre4Wr4XXmU3Y7sXTEtFSk3iCSkIm',
   project: null,
   defaultLocale: 'ru'
 };

src/environments/vniigaz-v2.env.dev.ts

@@ -6,7 +6,7 @@ export const environment = {
   production: false,
   apiUrl: 'http://api.nircms.lc',
   clientId: 2,
-  clientSecret: 'v49Z7dwUb1cobcTIJ5JQVJBzOFcNyJMzMmiDspUm',
+  clientSecret: 'E4BoAclC9X3gre4Wr4XXmU3Y7sXTEtFSk3iCSkIm',
   project: 'vniigaz-v2',
   defaultLocale: 'ru'
 };

src/vniigaz-v2/component/layout/footer/footer.component.html

@@ -2,7 +2,7 @@
   <div class="block">
     <div class="logo">
       <img src="assets/images/logo_vniigaz_wt_280x110.svg" alt="">
-      <div *ngIf="!user">
+      <div  *ngIf="!isLoggedIn">
         <a (click)="login()">Вход в личный кабинет</a>
       </div>
     </div>

src/vniigaz-v2/component/layout/footer/footer.component.ts

@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {AuthenticationService} from "@app/_services";
-import {Subscription} from "rxjs";
 
 @Component({
   selector: 'footer',
@@ -8,19 +7,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');
   }
 
 }

src/vniigaz-v2/css/_basics.scss

@@ -419,6 +419,7 @@ modal{
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 10000;
   .modal-overlay{
     position: fixed;
     width: 100vw;
@@ -449,6 +450,9 @@ modal{
       h4{
         margin: 0;
       }
+      ico{
+        cursor: pointer;
+      }
     }
     .modal-body{
       padding: 36px 24px;