Revize 464309d9

#8364 - Implementace loginu

+ first version of login form
+ requesting API and setting user to state

angular.json

@@ -28 +28 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css",
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "src/styles.scss"
             ],

src/app/index/components/index.component.html

@@ +1 @@
+<app-nav-bar></app-nav-bar>
+
+<button (click)="getGroups()">GetGroups</button>
+
+
+{{ groups | json}}

src/app/index/components/index.component.ts

@@ +1 @@
+import {Component, OnInit} from '@angular/core';
+import {GroupService} from '../../shared/api/endpoints/services/group.service';
+import {tap} from 'rxjs/operators';
+import {Group} from '../../shared/api/endpoints/models/group';
+
+@Component({
+  selector: 'app-index',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss']
+})
+export class IndexComponent implements OnInit {
+
+  groups: Group[];
+
+  constructor(
+    private groupService: GroupService
+  ) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  getGroups() {
+    this.groupService.getGroups({Operation: 'GetGroups'}).pipe(
+      tap(data => this.groups = data)
+    ).toPromise();
+  }
+
+}

src/app/index/index.module.ts

@@ +1 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {IndexComponent} from './components/index.component';
+import {NavBarModule} from '../shared/nav-bar/nav-bar.module';
+
+
+@NgModule({
+  declarations: [IndexComponent],
+  imports: [
+    CommonModule,
+    NavBarModule
+  ]
+})
+export class IndexModule {
+}

src/app/shared/nav-bar/components/login/login.component.html

@@ +1 @@
+<p-dialog [(visible)]="showLogin" (onHide)="hideLoginForm()" [draggable]="false">
+  <ng-template pTemplate="header">
+    Login!
+  </ng-template>
+
+  <div class="card-body">
+    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+      <div class="form-group">
+        <label for="username">Login</label>
+        <input type="text" formControlName="username" class="form-control" id="username" autocomplete="username"/>
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input type="password" formControlName="password" class="form-control" id="password"
+               autocomplete="current-password"/>
+      </div>
+      <div class="form-group">
+        <button class="btn btn-primary">
+          Log in
+        </button>
+      </div>
+    </form>
+  </div>
+
+
+  <p-footer>
+
+  </p-footer>
+</p-dialog>

src/app/shared/nav-bar/components/login/login.component.ts

@@ +1 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {LoginForm} from '../../models/login-form';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  @Input() showLogin;
+  @Output() showLoginChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() emitLoginForm: EventEmitter<LoginForm> = new EventEmitter<LoginForm>();
+
+  submitted: boolean;
+  loginForm: FormGroup;
+  showError = false;
+
+  constructor(
+    private formBuilder: FormBuilder
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.loginForm = this.formBuilder.group({
+      username: ['', [Validators.required]],
+      password: ['', Validators.required]
+    });
+  }
+
+  hideLoginForm(): void {
+    this.showLoginChange.emit(false);
+  }
+
+  onSubmit(): void {
+    if (this.loginForm.valid) {
+      this.emitLoginForm.emit({
+        username: this.loginForm.controls.username.value,
+        password: this.loginForm.controls.password.value
+      });
+    }
+  }
+}

src/app/shared/nav-bar/components/nav-bar.component.html

@@ +1 @@
+<nav class="navbar navbar-expand-md navbar-light bg-light">
+  <a class="navbar-brand" href="" target="_blank">
+    <img class="logo" src="/assets/images/SensLog.png" alt="SensLog">
+  </a>
+
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
+      <ul class="navbar-nav me-auto">
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+      </ul>
+    </div>
+    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
+      <ul class="navbar-nav ms-auto">
+        <li class="divider-vertical"></li>
+        <li class="nav-item">
+          <a *ngIf="!loggedIn" class='nav-link' (click)="showLoginFunction()">Login</a>
+          <a *ngIf="loggedIn" class='nav-link' (click)="logOut()">Log out</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+
+<app-login [(showLogin)]="showLogin" (emitLoginForm)="completeLogin($event)"></app-login>

src/app/shared/nav-bar/components/nav-bar.component.scss

@@ +1 @@
+.logo {
+  height: 3rem;
+}
+
+.navbar-text {
+  color: black;
+  font-weight: bold;
+}
+
+.divider-vertical {
+  height: 50px;
+  margin: 0 9px;
+  border-left: 1px solid #F2F2F2;
+  border-right: 1px solid #FFF;
+}

src/app/shared/nav-bar/components/nav-bar.component.ts

@@ +1 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {LoginForm} from '../models/login-form';
+import {AuthService} from '../../../auth/services/auth.service';
+import {Router} from '@angular/router';
+import {of, Subscription} from 'rxjs';
+import {switchMap} from 'rxjs/operators';
+import {UserState} from '../../../auth/states/user.state';
+
+@Component({
+  selector: 'app-nav-bar',
+  templateUrl: './nav-bar.component.html',
+  styleUrls: ['./nav-bar.component.scss']
+})
+export class NavBarComponent implements OnInit, OnDestroy {
+
+  showLogin = false;
+  subscription: Subscription[] = [];
+  loggedIn = false;
+
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+    private userState: UserState
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.userState.getLoggedIn$().subscribe(res => {
+      this.loggedIn = res;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.forEach(subs => subs.unsubscribe());
+  }
+
+  showLoginFunction(): void {
+    this.showLogin = true;
+  }
+
+  completeLogin(loginForm: LoginForm): void {
+    this.subscription[2] = this.authService.doLogin({
+      username: loginForm.username,
+      password: loginForm.password
+    })
+      .pipe(
+        switchMap(res => {
+          if (res) {
+            return this.authService.getUserState();
+          } else {
+            return of(false);
+          }
+        })
+      ).subscribe(
+        res => {
+          if (res) {
+            console.log(res);
+            this.showLogin = false;
+            this.userState.setLoggedIn(true);
+            this.subscription[2].unsubscribe();
+          }
+        }
+      );
+  }
+
+  logOut(): void {
+    this.userState.setLoggedIn(false);
+    this.authService.doLogout();
+  }
+}

src/app/shared/nav-bar/models/login-form.ts

@@ +1 @@
+export interface LoginForm {
+  username?: string;
+  password?: string;
+}

src/app/shared/nav-bar/nav-bar.module.ts

@@ +1 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NavBarComponent} from './components/nav-bar.component';
+import {RouterModule} from '@angular/router';
+import {LoginComponent} from './components/login/login.component';
+import {DialogModule} from 'primeng/dialog';
+import {ButtonModule} from 'primeng/button';
+import {ReactiveFormsModule} from '@angular/forms';
+
+
+@NgModule({
+  declarations: [NavBarComponent, LoginComponent],
+  exports: [
+    NavBarComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    RouterModule,
+    DialogModule,
+    ButtonModule,
+    ReactiveFormsModule
+  ]
+})
+export class NavBarModule {
+}