@kuzntsv/uikit 0.0.4 → 0.0.5

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/uikit",
+  "assets": ["./assets"],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,23 +1,12 @@
-{
-  "name": "@kuzntsv/uikit",
-  "version": "0.0.4",
-  "peerDependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/core": "^19.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/kuzntsv-uikit.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/kuzntsv-uikit.mjs"
-    }
-  }
-}
+{
+  "name": "@kuzntsv/uikit",
+  "version": "0.0.5",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
+  "sideEffects": false
+}

package/{auth/auth.types.d.ts → src/auth/auth.types.ts}

@@ -1 +1,2 @@
-export type AuthPermission = 'VIEW' | 'EDIT' | 'CREATE' | 'DELETE';
+// Типы доступа в приложении
+export type AuthPermission = 'VIEW' | 'EDIT' | 'CREATE' | 'DELETE';

package/{auth/components/index.d.ts → src/auth/components/index.ts}

@@ -1 +1 @@
-export * from './login-page/login-page.component';
+export * from './login-page/login-page.component';

package/src/auth/components/login-form/login-form.component.html

@@ -0,0 +1,57 @@
+<mat-card appearance="outlined">
+  <mat-card-header>
+    <mat-card-title>
+      Авторизация
+    </mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      <p>
+        <mat-form-field>
+          <mat-label>Имя пользователя</mat-label>
+          <input type="text" pattern="[A-Za-z]{1,}.[A-Za-z]{1,}.[A-Za-z]*"
+            matInput
+            autocomplete="on"
+            name="login-form-username"
+            placeholder="Имя пользователя"
+            formControlName="username">
+            @if (form.controls['username'].hasError('pattern')) {
+              <mat-error>
+                Пожалуйста, используйте требуемый формат (Пример: a.p.petrov)
+              </mat-error>
+            }
+            @if (form.controls['username'].hasError('required')) {
+              <mat-error>
+                Пожалуйста, заполните это поле
+              </mat-error>
+            }
+          </mat-form-field>
+        </p>
+
+        <p>
+          <mat-form-field>
+            <mat-label>Пароль</mat-label>
+            <input [type]="hide ? 'password' : 'text'" matInput placeholder="Пароль" formControlName="password">
+            <mat-icon class="watcher" matSuffix (mousedown)="hide=false" (mouseup)="hide=true"
+            >{{ hide ? 'visibility_off' : 'visibility'}}</mat-icon>
+            @if (form.controls['password'].hasError('required')) {
+              <mat-error>
+                Пожалуйста, заполните это поле
+              </mat-error>
+            }
+          </mat-form-field>
+        </p>
+
+        @if (errorMessage) {
+          <p class="loginError">
+            {{ errorMessage }}
+          </p>
+        }
+
+        <p class="loginButtons">
+          <button type="submit" mat-button mat-stroked-button color="primary" [disabled]="isDisabled">Войти</button>
+        </p>
+
+      </form>
+    </mat-card-content>
+  </mat-card>

package/src/auth/components/login-form/login-form.component.scss

@@ -0,0 +1,37 @@
+:host {
+  display: flex;
+  justify-content: center;
+  margin: 32px 0;
+}
+
+.mat-mdc-form-field {
+  width: 100%;
+  min-width: 300px;
+}
+
+mat-card-header {
+  justify-content: center;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+mat-card-content {
+  font-size: 16px;
+}
+
+.loginError {
+  padding: 16px;
+  width: 300px;
+  color: white;
+  background-color: red;
+}
+
+.loginButtons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.watcher {
+  cursor: default;
+}
+

package/src/auth/components/login-form/login-form.component.ts

@@ -0,0 +1,48 @@
+
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
+import { MatError, MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
+
+import { Authenticate } from '../../models/user';
+
+@Component({
+  selector: 'ngx-uik-login-form',
+  templateUrl: 'login-form.component.html',
+  styleUrls: ['login-form.component.scss'],
+  imports: [MatCard, MatCardHeader, MatCardTitle, MatCardContent, FormsModule, ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatError, MatIcon, MatSuffix, MatButton]
+})
+export class LoginFormComponent {
+  @Input() errorMessage: string = '';
+
+  @Output() submitted = new EventEmitter<Authenticate>();
+  hide = true;
+
+  form: FormGroup = new FormGroup({
+    username: new FormControl('', [Validators.required]),
+    password: new FormControl('', [Validators.required]),
+  });
+
+  isDisabled = false;
+
+  constructor() { }
+
+  @Input()
+  set pending(isPending: boolean) {
+    this.isDisabled = isPending;
+    if (isPending) {
+      this.form.disable();
+    } else {
+      this.form.enable();
+    }
+  }
+
+  submit() {
+    if (this.form.valid) {
+      this.submitted.emit(this.form.value);
+    }
+  }
+}

package/src/auth/components/login-page/login-page.component.html

@@ -0,0 +1,13 @@
+@if (!isKiosk) {
+    <ngx-uik-login-form
+      (submitted)="onSubmit($event)"
+      [pending]="pending"
+      [errorMessage]="error">
+    </ngx-uik-login-form>
+  }
+  @if (isKiosk) {
+    <ngx-uik-permit-form
+      (submitted)="onSubmitPermit($event)"
+      >
+    </ngx-uik-permit-form>
+  }

package/src/auth/components/login-page/login-page.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+import { LoaderService } from '../../../loader';
+import { Authenticate } from '../../models/user';
+import { AuthService } from '../../services/auth.service';
+import { PermitFormComponent } from '../permit-form/permit-form.component';
+import { LoginFormComponent } from '../login-form/login-form.component';
+
+@Component({
+  selector: 'ngx-uik-login-page',
+  templateUrl: 'login-page.component.html',
+  styleUrls: ['login-page.component.scss'],
+  imports: [LoginFormComponent, PermitFormComponent]
+})
+export class LoginPageComponent implements OnInit, OnDestroy {
+  pending: boolean = false;
+  error: string = '';
+  isKiosk: boolean = false;
+  /** Идентификатор АС */
+  idCas: number = 0;
+  /** Подписка на Идентификатор АС */
+  sub: Subscription;
+  /** Url страницы, с которой был переход (после входа вернет на неё) */
+  returnUrl: string = '';
+
+  constructor(private authService: AuthService,
+    private route: ActivatedRoute,
+    private loaderService: LoaderService
+  ) {
+    this.sub = this.route.data.subscribe(data => {
+      this.idCas = data['idCas'];
+    });
+  }
+
+  ngOnInit() {
+    if (localStorage.getItem('id_human') || localStorage.getItem('kiosk-keyboard-layout')) {
+      // this.isKiosk = true;
+    }
+    this.route.queryParams.subscribe(params => {
+      this.returnUrl = params['returnUrl'];
+      //console.log('constructor this.returnUrl = ', this.returnUrl);
+      //this.returnUrl = this.returnUrl.slice(this.returnUrl.lastIndexOf('returnUrl=') + 'returnUrl='.length);
+      //console.log('constructor  NEW this.returnUrl = ', this.returnUrl);
+    });
+
+  }
+
+  ngOnDestroy(): void {
+    this.sub.unsubscribe();
+  }
+
+  onSubmitError() {
+    return () => {
+      this.pending = false;
+      this.loaderService.hide();
+    };
+  }
+
+  onSubmit($event: Authenticate) {
+    this.loaderService.show();
+    this.pending = true;
+    this.authService.login($event.username, $event.password, this.idCas, this.returnUrl, this.onSubmitError());
+  }
+
+  onSubmitPermit($event: string) {
+    const permit = $event;
+    this.authService.loginByPermit(permit, this.idCas, this.returnUrl);
+  }
+}

package/src/auth/components/permit-form/permit-form.component.html

@@ -0,0 +1,11 @@
+<mat-card appearance="outlined">
+    <mat-card-header>
+        <mat-card-title>
+        Приложите пропуск
+        </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <div class="permit"></div>
+    </mat-card-content>
+</mat-card>
+<input #hidy class="hidy" type="text" (keydown)="onKeydown($event)"/>

package/src/auth/components/permit-form/permit-form.component.scss

@@ -0,0 +1,44 @@
+$asset-path: '../../assets/images';
+
+:host {
+  display: flex;
+  justify-content: center;
+  margin: 32px 0;
+}
+
+.mat-mdc-form-field {
+  width: 100%;
+  min-width: 300px;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+mat-card-title,
+mat-card-content {
+  display: flex;
+  justify-content: center;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+mat-card-content {
+  font-size: 16px;
+}
+
+div.permit {
+  border: none;
+  width: 300px;
+  background-size: 300px;
+  height: 180px;
+}
+
+div.permit button div{
+  margin-bottom: 200px;
+  color: black;
+  font-size: 34px;
+}
+
+input.hidy {
+  opacity: 0;
+  position: absolute;
+  left: -200px;
+  top: -200px;
+}

package/src/auth/components/permit-form/permit-form.component.ts

@@ -0,0 +1,47 @@
+import { Component, ElementRef, EventEmitter, HostListener, OnInit, Output, ViewChild } from '@angular/core';
+import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
+
+@Component({
+  selector: 'ngx-uik-permit-form',
+  templateUrl: 'permit-form.component.html',
+  styleUrls: ['permit-form.component.scss'],
+  imports: [MatCard, MatCardHeader, MatCardTitle, MatCardContent]
+})
+export class PermitFormComponent implements OnInit {
+  @ViewChild('hidy') hidy: ElementRef | undefined;
+
+  @Output() submitted = new EventEmitter<string>();
+
+  private mouseEvent = MouseEvent;
+
+  constructor() {
+  }
+
+  @HostListener('document:mouseup', ['$event'])
+  mouseHandling() {
+    this.hidy?.nativeElement.focus();
+  }
+
+  ngOnInit() {
+    // Обнуляем значение Input
+    if (this.hidy) {
+      this.hidy.nativeElement.value = null;
+      this.hidy.nativeElement.focus();
+    }
+  }
+
+  /**
+   * Поле ввода
+   *
+   * @param событие нажатия на клавишу
+   */
+  onKeydown(event: any): void {
+    if (event.key === 'Enter') {
+      const permit = this.hidy?.nativeElement.value;
+      if (permit) {
+        this.submitted.emit(permit);
+      }
+    }
+  }
+
+}

package/src/auth/directives/disable-if-role.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, Input, OnInit, ElementRef } from '@angular/core';
+import { AuthService } from '../services/auth.service';
+
+@Directive({
+  selector: '[ngxUikDisableIfRole]',
+  standalone: true
+})
+export class DisableIfRoleDirective implements OnInit {
+  @Input('ngxUikDisableIfRole') role: string = '';
+
+  constructor(private el: ElementRef, private authService: AuthService) { }
+
+  ngOnInit() {
+    this.authService.roles$.subscribe((userRoles) => {
+      if (this.role) {
+        if (!this.authService.hasRole(userRoles, this.role)) {
+          this.el.nativeElement.disabled = true;
+        } else {
+          this.el.nativeElement.disabled = false;
+        }
+      }
+    });
+  }
+}

package/src/auth/directives/disable-if-unauthorized.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, Input, OnInit, ElementRef } from '@angular/core';
+import { AuthPermission } from '../auth.types';
+import { AuthService } from '../services/auth.service';
+
+@Directive({
+    selector: '[ngxUikDisableIfUnauthorized]',
+    standalone: true
+})
+export class DisableIfUnauthorizedDirective implements OnInit {
+  @Input('ngxUikDisableIfUnauthorized') permission: AuthPermission | undefined;
+
+  constructor(private el: ElementRef, private authservice: AuthService) { }
+
+  ngOnInit() {
+    if (this.permission && !this.authservice.hasPermission(this.permission)) {
+      this.el.nativeElement.disabled = true;
+    }
+  }
+}

package/src/auth/directives/hide-if-role-not.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, OnInit, ElementRef, Input } from '@angular/core';
+import { AuthService } from '../services/auth.service';
+
+@Directive({
+  selector: '[ngxUikHideIfRoleNot]',
+  standalone: true
+})
+export class HideIfRoleNotDirective implements OnInit {
+  @Input('ngxUikHideIfRoleNot') roles: string[] = [];
+
+  constructor(private el: ElementRef, private authService: AuthService) { }
+
+  // Элемент скрывается, если у пользователя нет ни одной роли из перереданных в "roles"
+  // или в списке "roles" есть роль "hideRole".
+  ngOnInit() {
+    if (this.roles) {
+      this.authService.roles$.subscribe((userRoles) => {
+        const isHide = this.authService.isHideElement(this.roles, userRoles);
+
+        if (isHide) {
+          this.el.nativeElement.style.display = 'none';
+        } else {
+          this.el.nativeElement.style.display = 'inherit';
+        }
+      });
+    }
+  }
+}

package/src/auth/directives/hide-if-unauthorized.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, OnInit, ElementRef, Input } from '@angular/core';
+import { AuthService } from '../services/auth.service';
+import { AuthPermission } from '../auth.types';
+
+@Directive({
+    selector: '[ngxUikHideIfUnauthorized]',
+    standalone: true
+})
+export class HideIfUnauthorizedDirective implements OnInit {
+  @Input('ngxUikHideIfUnauthorized') permission: AuthPermission | undefined;
+
+  constructor(private el: ElementRef, private authService: AuthService) { }
+
+  ngOnInit() {
+    if (this.permission && !this.authService.hasPermission(this.permission)) {
+      this.el.nativeElement.style.display = 'none';
+    }
+  }
+}

package/{auth/directives/index.d.ts → src/auth/directives/index.ts}

@@ -1,4 +1,4 @@
-export * from './disable-if-unauthorized.directive';
-export * from './hide-if-unauthorized.directive';
-export * from './disable-if-role.directive';
-export * from './hide-if-role-not.directive';
+export * from './disable-if-unauthorized.directive';
+export * from './hide-if-unauthorized.directive';
+export * from './disable-if-role.directive';
+export * from './hide-if-role-not.directive';

package/{auth/index.d.ts → src/auth/index.ts}

@@ -1,4 +1,4 @@
-export * from './components';
-export * from './auth.types';
-export * from './directives';
-export * from './services';
+export * from './components';
+export * from './auth.types';
+export * from './directives';
+export * from './services';

package/src/auth/models/user.ts

@@ -0,0 +1,8 @@
+export interface Authenticate {
+  username: string;
+  password: string;
+}
+
+export interface User {
+  name: string;
+}

package/src/auth/services/auth-guard.service.ts

@@ -0,0 +1,33 @@
+import { inject, Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot } from '@angular/router';
+
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+class AuthGuardService {
+
+  constructor(private auth: AuthService,
+    private router: Router) {
+  }
+
+  canActivate(route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ) {
+    const isLogin = this.auth.loggedIn$.value;
+    if (!isLogin) {
+      console.log('state.url =', state.url);
+
+      // Если не зарегистрирован вернуть в форму авторизации
+      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
+    }
+
+    return isLogin;
+  }
+}
+
+export const authGuard: CanActivateFn = (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot
+) => inject(AuthGuardService).canActivate(route, state);

package/src/auth/services/auth-role.service.ts

@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+// Вычисление разрешений на модули по ролям
+export class RoleService {
+  // Указываем какой сервер использовать
+  baseRoute = 'mainApi/';
+
+  constructor(private http: HttpClient) { }
+
+    // Получить роли пользователя
+    getRoles() {
+      return this.http.get(this.baseRoute + 'jwt/webroles');
+    }
+}

package/src/auth/services/auth-user.service.ts

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+/**
+ * Сущность пользователя из API
+ */
+export class User {
+  id: number = 0;
+  username: string = '';
+  firstName: string = '';
+  lastName: string = '';
+  prof: string = '';
+  depart: number = 0;
+  area: string = '';
+  tabnum: string = '';
+  mail: string = '';
+  phone: string = '';
+  roles: string = '';
+  rolesArray: string[] = [];
+  roleList: string[] = [];
+  idHuman: string = '';
+  token: string = '';
+  // Время действия токена
+  expires_in: number = 0;
+}
+@Injectable({
+  providedIn: 'root'
+})
+/**
+ * Сервис для работы с объектом в local Storage
+ */
+export class UserService {
+  private user: User;
+  constructor() {
+    if (localStorage.getItem('sed_currentUser')) {
+      this.user = JSON.parse(localStorage.getItem('sed_currentUser') || '');
+    } else {
+      this.user = new User();
+    }
+  }
+
+  get dept(): number {
+    return this.user?.depart;
+  }
+
+  /** Получить данные о пользователе */
+  get userData(): User {
+    return this.user;
+  }
+
+  /** Изменить данные пользователя в localStorage */
+  set userData(user: User) {
+    localStorage.setItem('sed_currentUser', JSON.stringify(user));
+    this.user = JSON.parse(localStorage.getItem('sed_currentUser') || '');
+  }
+
+  /** Удаляет данные о пользователе из localStorage. */
+  removeUser() {
+    localStorage.removeItem('sed_currentUser');
+  }
+}