Guards

angular.json

@@ -30,6 +30,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -90,12 +91,16 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package.json

@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^17.3.0",
+    "@angular/cdk": "^17.3.10",
     "@angular/common": "^17.3.0",
     "@angular/compiler": "^17.3.0",
     "@angular/core": "^17.3.0",
     "@angular/forms": "^17.3.0",
+    "@angular/material": "^17.3.10",
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
@@ -35,4 +37,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.4.2"
   }
-}
+}

src/app/Material.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatTooltipModule} from '@angular/material/tooltip';
+
+
+@NgModule({
+  exports: [
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatTooltipModule
+  ],
+})
+export class MaterialModule {}

src/app/admin/admin.component.html

@@ -0,0 +1 @@
+<h1>Только для админов!</h1>

src/app/admin/admin.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-admin',
+  standalone: true,
+  imports: [],
+  templateUrl: './admin.component.html',
+  styleUrl: './admin.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdminComponent {}

src/app/app.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './header/header.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, HeaderComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

src/app/app.config.ts

@@ -2,7 +2,12 @@ import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { HttpClientModule, provideHttpClient } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [
+    provideRouter(routes), 
+    provideHttpClient(), provideAnimationsAsync()
+  ]
 };

src/app/app.routes.ts

@@ -1,3 +1,11 @@
 import { Routes } from '@angular/router';
+import { UserListComponent } from './user-list/user-list.component';
+import { TodosListComponent } from './todos-list/todos-list.component';
+import { AdminComponent } from './admin/admin.component';
+import { authAdminGuard } from './auth-admin.guard';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: 'users', component: UserListComponent },
+  { path: 'todos', component: TodosListComponent },
+  { path: 'admin', component: AdminComponent, canMatch: [authAdminGuard] },
+];

src/app/auth-admin.guard.ts

@@ -0,0 +1,14 @@
+import { inject } from '@angular/core';
+import { CanMatchFn, Router } from '@angular/router';
+import { UserService } from './user.service';
+
+export const authAdminGuard: CanMatchFn = () => {
+  const userService = inject(UserService);
+  const router = inject(Router);
+
+  if (userService.isAdmin) {
+    return true;
+  } else {
+    return false
+  }
+};

src/app/auth/auth.component.html

@@ -0,0 +1,9 @@
+<mat-card class="container">
+  <mat-card-header>
+    <h1>Войти как:</h1>
+  </mat-card-header>
+  <mat-card-content class="buttons-wrapper">
+    <button mat-button type="button" mat-dialog-close="admin">Админ</button>
+    <button mat-button type="button" mat-dialog-close="user">Юзер</button>
+  </mat-card-content>
+</mat-card>

src/app/auth/auth.component.scss

@@ -0,0 +1,46 @@
+.container {
+  width: 400px;
+  padding: 20px;
+  text-align: center;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+mat-card-header h1 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #333;
+}
+
+.buttons-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 8px;
+  transition: all 0.3s ease-in-out;
+}
+
+button[mat-button] {
+  background: #3f51b5;
+  color: white;
+}
+
+button[mat-button]:hover {
+  background: #303f9f;
+}
+
+button[mat-button]:nth-child(2) {
+  background: #e91e63;
+}
+
+button[mat-button]:nth-child(2):hover {
+  background: #c2185b;
+}

src/app/auth/auth.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MaterialModule } from '../Material.module';
+
+@Component({
+  selector: 'app-auth',
+  standalone: true,
+  imports: [MaterialModule],
+  templateUrl: './auth.component.html',
+  styleUrl: './auth.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AuthComponent {}

src/app/confirm-deletion/confirm-deletion.component.html

@@ -0,0 +1,5 @@
+<h2 mat-dialog-title>Вы точно хотите удалить?</h2>
+<mat-dialog-actions>
+    <button  mat-button mat-dialog-close type="button">Нет</button>
+    <button  mat-button [mat-dialog-close]="true" type="button">Да</button>
+</mat-dialog-actions>

src/app/confirm-deletion/confirm-deletion.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MaterialModule } from '../Material.module';
+import { MatDialog } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-confirm-deletion',
+  standalone: true,
+  imports: [MaterialModule],
+  templateUrl: './confirm-deletion.component.html',
+  styleUrl: './confirm-deletion.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfirmDeletionComponent {
+  readonly dialog = inject(MatDialog);
+
+  openDialog() {
+    const dialogRef = this.dialog.open(ConfirmDeletionComponent);
+  }
+}

src/app/create-edit-todo-form/create-edit-todo-form.component.html

@@ -0,0 +1,37 @@
+<form class="form" [formGroup]="createEditTodoForm">
+    <mat-card>
+      <mat-card-header>
+        <h2>Добавить задачу</h2>
+      </mat-card-header>
+      <mat-card-content class="form-content-wrapper">
+        <mat-form-field>
+          <mat-label>Название задачи</mat-label>
+          <input formControlName="title" matInput />
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>Автор задачи</mat-label>
+          <input formControlName="userId" matInput />
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label for="completed">Задача завершена?</mat-label>
+          <mat-select formControlName="completed">
+            <mat-option [value]="true">Да</mat-option>
+            <mat-option [value]="false">Нет</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </mat-card-content>
+
+      <mat-card-actions>
+        <button
+          mat-raised-button
+          color="primary"
+          type="submit"
+          (click)="submitForm()"
+          [disabled]="createEditTodoForm.invalid"
+        >
+          Добавить
+        </button>
+      </mat-card-actions>
+    </mat-card>
+  </form>
+

src/app/create-edit-todo-form/create-edit-todo-form.component.scss

@@ -0,0 +1,9 @@
+.form {
+    width: 300px;
+}
+
+.form-content-wrapper{
+    padding: 20px;
+    display: grid;
+    gap: 20px;
+}

src/app/create-edit-todo-form/create-edit-todo-form.component.ts

@@ -0,0 +1,51 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  OnInit,
+  Output,
+} from '@angular/core';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { MaterialModule } from '../Material.module';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Todo } from '../interfaces/todos.interface';
+
+@Component({
+  selector: 'app-create-edit-todo-form',
+  standalone: true,
+  imports: [ReactiveFormsModule, MaterialModule],
+  templateUrl: './create-edit-todo-form.component.html',
+  styleUrl: './create-edit-todo-form.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreateEditTodoFormComponent implements OnInit {
+  readonly dialogRef = inject(MatDialogRef<CreateEditTodoFormComponent>);
+  readonly data = inject<Todo>(MAT_DIALOG_DATA);
+  @Output() createTodo = new EventEmitter();
+
+  ngOnInit(): void {
+    if (this.data) {
+      this.createEditTodoForm.patchValue(this.data);
+    }
+  }
+
+  createEditTodoForm = new FormGroup({
+    id: new FormControl(this.data?.id || null),
+    title: new FormControl('', [Validators.required, Validators.minLength(2)]),
+    userId: new FormControl('', [Validators.required, Validators.minLength(2)]),
+    completed: new FormControl(true, [Validators.required]),
+  });
+
+  submitForm() {
+    const userId = Date.now();
+    const userData = { ...this.createEditTodoForm.value, id: userId };
+    this.createTodo.emit(userData);
+    this.dialogRef.close(this.createEditTodoForm.value);
+  }
+}