html

src/app/components/header/header.component.html

@@ -0,0 +1,36 @@
+@if (user !== undefined && user.logged) {
+  <div [ngClass]="['header', opened ? 'show' : '']">
+    <div [class]="'header-content'">
+      <h2
+        routerLink="/list"
+        (click)="opened = false;">
+          Список всех заказов
+      </h2>
+      <h2
+        routerLink="/create"
+        (click)="opened = false;"
+        [class]="user.role !== UserRole.Worker ? 'hidden' : ''">
+          Создать заказ
+      </h2>
+      <h2
+        routerLink="/current"
+        (click)="opened = false;"
+        [class]="user.role !== UserRole.Deliver ? 'hidden' : ''">
+          Взятые заказы
+      </h2>
+      <h2
+        routerLink="/admin"
+        (click)="opened = false;"
+        [class]="user.role !== UserRole.Admin ? 'hidden' : ''">
+          Админ-панель
+      </h2>
+      <h2
+        (click)="logout();">
+        Выйти из аккаунта
+      </h2>
+    </div>
+    <div [ngClass]="['header-bg', opened ? 'show' : '']"></div>
+  </div>
+  <img (click)="switchMenu();" [ngClass]="['header-switcher', opened ? 'opened' : '']" [height]="40" [width]="25">
+}
+

src/app/pages/admin/admin.component.html

@@ -1 +1,38 @@
-<p>admin works!</p>
+<div class="admin">
+  <a routerLink="/create-user">Создать пользователя</a>
+  <hr [style]="{
+      borderColor: 'var(--tg-theme-text-color)',
+      marginTop: 'var(--main-padding);',
+      marginBotton: '',
+   }">
+  <h3>Список пользователей</h3>
+  <hr>
+  <div class="users">
+    @if (users === undefined) {
+      <div class="loader-div">
+        <img src="/assets/img/loading.gif" alt="Загрузка..." height="128" width="128" />
+      </div>
+    } @else if (users.length === 0) {
+      <h3 [class]="'hint'">Нет созданных пользователей.</h3>
+    } @else {
+      @for (user of users; track user) {
+        @if (!user?.deletedAt) {
+          <div class="user">
+            <p>{{ user?.firstname }} {{ user?.lastname }}</p>
+            <div class="wrapper-row"></div>
+            <p [style]="{ width: '100%' }">Роль: {{ user?.role }}</p>
+            <button>Изменить пароль</button>
+            <button class="red" (click)="deleteUser(user?.id || -1)">Удалить аккаунт</button>
+          </div>
+
+        }
+        @if (
+          !$last && !user?.deletedAt &&
+          !(users.length - 2 === $index && users[$index + 1]?.deletedAt)
+          ) {
+          <hr>
+        }
+      }
+    }
+  </div>
+</div>

src/app/pages/auth/auth.component.html

@@ -2,7 +2,7 @@
   <div class="loader-div">
     <img src="/assets/img/loading.gif" alt="Загрузка..." height="128" width="128" />
   </div>
-} @else if (user?.logged) {
+} @else if (user.logged) {
 
 } @else {
   <form [formGroup]="authForm">

src/app/pages/create-user/create-user.component.html

@@ -0,0 +1,38 @@
+<div class="create-user">
+  <h2>Создание пользователя</h2>
+  <hr>
+  <a routerLink="/admin"><- Назад</a>
+  <form [formGroup]="createUserForm">
+    <div class="create-user-form">
+      <label for="firstname">
+        Имя
+      </label>
+      <input id="firstname"
+             [class]="firstnameValid ? null : 'invalid'"
+             type="text" formControlName="firstname"/>
+      <div class="wrapper-row form-wrap"></div>
+      <label for="lastname">
+        Фамилия
+      </label>
+      <input id="lastname"
+             [class]="lastnameValid ? null : 'invalid'"
+             type="text" formControlName="lastname"/>
+      <div class="wrapper-row form-wrap"></div>
+      <label for="password">
+        Пароль
+      </label>
+      <input id="password"
+             [class]="passwordValid ? null : 'invalid'"
+             type="password" formControlName="password"/>
+      <div class="wrapper-row form-wrap"></div>
+      <label for="role">Роль пользователя</label>
+      <select [class]="roleValid ? null : 'invalid'" formControlName="role" id="role">
+        <option value="">Выберите роль</option>
+        <option value="{{ UserRole.Deliver }}">{{ UserRole.Deliver }}</option>
+        <option value="{{ UserRole.Worker }}">{{ UserRole.Worker }}</option>
+        <option value="{{ UserRole.Admin }}">{{ UserRole.Admin }}</option>
+      </select>
+    </div>
+  </form>
+</div>
+