Merge branch 'main' into feature/eatdrink

Sybit-Education · Aug 3, 2023 · 0a3cbda · 0a3cbda
2 parents 2ab8296 + 986e366
commit 0a3cbda
Show file tree

Hide file tree

Showing 42 changed files with 475 additions and 169 deletions.
diff --git a/angular.json b/angular.json
@@ -41,17 +41,18 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
-              "src/styles.scss",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+              "src/styles.scss"
             ],
             "scripts": [
               "node_modules/paper/dist/paper-full.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
-            ]
+            ],
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "production": {
@@ -121,7 +122,8 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.scss"

diff --git a/ngsw-config.json b/ngsw-config.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "@angular/service-worker": "^15.2.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@ng-bootstrap/ng-bootstrap": "^14.0.1",
     "@ngrx/store": "^15.4.0",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,2 +1,5 @@
 <app-header></app-header>
+<main>
 <router-outlet></router-outlet>
+</main>
+<app-footer></app-footer>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -0,0 +1,4 @@
+main {
+  margin-top: 5rem;
+  min-height: calc(100vh - 45px - 275px);
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,16 +1,16 @@
-import { NgModule } from '@angular/core';
+import { NgModule, isDevMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
-import {AuthInterceptor} from "./misc/auth.interceptor";
+import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
+import { AuthInterceptor} from "./misc/auth.interceptor";
 import { AuthPageComponent } from './auth-page/auth-page.component';
-import {RouterModule, RouterOutlet} from "@angular/router";
-import {ReactiveFormsModule} from "@angular/forms";
-import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
-import {APP_ROUTES} from "./misc/app.routes";
-import {StoreModule} from "@ngrx/store";
-import {sygotchiReducer} from "./store/sygotchi.reducer";
+import { RouterModule, RouterOutlet } from "@angular/router";
+import { ReactiveFormsModule } from "@angular/forms";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { APP_ROUTES } from "./misc/app.routes";
+import { StoreModule } from "@ngrx/store";
+import { sygotchiReducer } from "./store/sygotchi.reducer";
 import { LogoComponent } from './logo/logo.component';
 import { TeamSComponent } from './team-s/team-s.component';
 import { DsgvoPageComponent } from './dsgvo-page/dsgvo-page.component';
@@ -19,8 +19,12 @@ import { NeedsComponent } from './needs/needs.component';
 import { ShowSygotchiComponent } from './show-sygotchi/show-sygotchi.component';
 import { SygotchiErstellenComponent } from './sygotchi-erstellen/sygotchi-erstellen.component';
 import { HeaderComponent } from './header/header.component';
+import { SygotchiCleanComponent } from './sygotchi-clean/sygotchi-clean.component';
 import { SleepSceneComponent } from './sleep-scene/sleep-scene.component';
 import { KitchenComponent } from './kitchen/kitchen.component';
+import { FooterComponent } from './footer/footer.component';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { ErrorPageComponent } from './error-page/error-page.component';
 
 @NgModule({
   declarations: [
@@ -29,13 +33,18 @@ import { KitchenComponent } from './kitchen/kitchen.component';
     LogoComponent,
     TeamSComponent,
     DsgvoPageComponent,
+    ImpressumComponent,
     ShowSygotchiComponent,
     SygotchiErstellenComponent,
     HeaderComponent,
     SleepSceneComponent,
     ImpressumComponent,
     NeedsComponent,
-    KitchenComponent
+    KitchenComponent,
+    NeedsComponent,
+    SygotchiCleanComponent,
+    FooterComponent,
+    ErrorPageComponent
   ],
   imports: [
     BrowserModule,
@@ -44,7 +53,13 @@ import { KitchenComponent } from './kitchen/kitchen.component';
     HttpClientModule,
     RouterModule.forRoot(APP_ROUTES),
     NgbModule,
-    StoreModule.forRoot({ sygotchi: sygotchiReducer })
+    StoreModule.forRoot({ sygotchi: sygotchiReducer }),
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: 'registerWhenStable:30000'
+    })
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }

diff --git a/src/app/auth-page/auth-page.component.html b/src/app/auth-page/auth-page.component.html
@@ -1,58 +1,44 @@
-<div class="container"> 
+<div class="container">
     <div class="row justify-content-center">
         <div class="col-sm-8 col-md-6 col-lg-4">
             <div class="auth-form">
                 <app-logo class="logo"></app-logo>
                 <div class="form-content">
-                    <form [formGroup]="authForm">
-                        <div class="form-group">
+                    <form [formGroup]="authForm" class="row g-3">
+                        <div class="form-group col-12">
                             <label for="username">Benutzername: </label>
-                            <input id="username" type="text" class="form-control" formControlName="username" pattern="[A-Za-z0-9-_]{3,}">
+                            <input id="username" type="text" class="form-control" formControlName="username">
                         </div>
-                        <div class="form-group pw-field">
+                        <div class="form-group col-12">
                             <label for="password">Passwort: </label>
-                            <input id="password" type="password" class="form-control" minlength="8" formControlName="password">
+                            <input id="password" type="password" class="form-control" formControlName="password">
                         </div>
-                        <div *ngIf="isRegistration" class="form-group pw-field">
+                        <div *ngIf="isRegistration" class="form-group col-12">
                             <label for="confirmPassword">Passwort wiederholen: </label>
-                            <input id="confirmPassword" type="password" minlength="8" class="form-control" formControlName="confirmPassword">
-                        </div>      
-                    </form>
-
-                    <div *ngIf="isRegistration; else isLogin" class="text-center">
-                        <p class="password-error-message" *ngIf="showError">{{ errorMessage }}</p>
-                        <button (click)="register()" class="btn btn-primary submit-button" [disabled]="authForm.invalid">Account erstellen</button>
-                        <div class="change">
-                            <p>Du hast schon einen Sygotchi-Account?
-                                <button (click)="changeView()" class="btn btn-link">Zurück zum Login</button>        
-                            </p>
-                            <a style="margin-right: 5px;" routerLink="/impressum">
-                                <span>Impressum</span>
-                            </a>
-                            <a style="margin-right: 5px;" routerLink="/dsgvo">
-                                <span>Datenschutz</span>
-                            </a>       
+                            <input id="confirmPassword" type="password" class="form-control" formControlName="confirmPassword">
                         </div>
-                    </div>
-                    <ng-template #isLogin>
-                        <div class="text-center">
-                           <p class="password-error-message" *ngIf="showError">{{ errorMessage }}</p> 
-                           <button (click)="login()" class="btn btn-primary submit-button">Login</button>
-                           <div class="change">
-                            <p>Noch keinen Sygotchi-Account?
-                                <button (click)="changeView()" class="btn btn-link">Account erstellen</button>
-                            </p>
-                            <a style="margin-right: 5px;" routerLink="/impressum">
-                                <span>Impressum</span>
-                            </a>
-                            <a style="margin-right: 5px;" routerLink="/dsgvo">
-                                <span>Datenschutz</span>
-                            </a>       
-                           </div>
+
+                        <div *ngIf="isRegistration; else isLogin" class="text-center col-12">
+                            <p class="text-danger" *ngIf="showError">{{ errorMessage }}</p>
+                            <button (click)="register()" class="btn btn-primary submit-button " type="submit" [disabled]="authForm.invalid">Account erstellen</button>
+                            <div class="change">
+                                <span>Du hast schon einen Sygotchi-Account?</span><br>
+                                <button (click)="changeView()" class="btn btn-link">Zurück zum Login</button>
+                            </div>
                         </div>
-                    </ng-template>
+                        <ng-template #isLogin>
+                            <div class="text-center col-12">
+                                <p class="text-danger" *ngIf="showError">{{ errorMessage }}</p>
+                                <button (click)="login()" class="btn btn-primary submit-button " type="submit">Login</button>
+                                <div class="change">
+                                    <span>Noch keinen Sygotchi-Account?</span><br>
+                                    <button (click)="changeView()" class="btn btn-link">Account erstellen</button>
+                                </div>
+                            </div>
+                        </ng-template>
+                    </form>
                 </div>
             </div>
         </div>
     </div>
-</div>
+</div>
diff --git a/src/app/auth-page/auth-page.component.scss b/src/app/auth-page/auth-page.component.scss
@@ -1,32 +1,3 @@
-.auth-form {
-    margin-top: 50px;
-}
-
-.form-content {
-    margin-top: 30px;
-}
-
-input {
-    width: 100%;
-}
-
-.pw-field {
-    margin-top: 15px;
-}
-
-.submit-button {
-    margin-top: 15px;
-}
-
 .change {
-    bottom: 0;
-    position: absolute;
-
-    & button {
-        width: 100%;
-    }
-}
-
-.password-error-message {
-    color: red;
+    padding-top: 20px;
 }
diff --git a/src/app/auth-page/auth-page.component.ts b/src/app/auth-page/auth-page.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AuthService } from '../services/auth.service';
-import { Store, resultMemoize } from '@ngrx/store';
+import { Store } from '@ngrx/store';
 import { WebsocketService } from '../services/websocket.service';
 import { HttpStatusCode } from '@angular/common/http';
 import { setSygotchi } from '../store/sygotchi.actions';
@@ -31,27 +31,36 @@ export class AuthPageComponent implements OnInit {
   }
 
   register() {
-    if(this.authForm.value.password === this.authForm.get('confirmPassword')?.value) {
-      this.authService.register(this.authForm.value.username, this.authForm.value.password)
-      .subscribe(
+    if (!this.authForm.value.username.match(/^[A-Za-z0-9-_]*$/gm)) {
+      this.errorMessage = 'Benutzername darf nur Buchstaben, Zahlen und Bindestriche sowie Unterstriche enthalten.'
+      this.showError = true;
+    } else if (this.authForm.value.username.length < 3) {
+      this.errorMessage = 'Benutzername muss mindestens 3 Zeichen lang sein.'
+      this.showError = true;
+    } else if (this.authForm.value.password.length < 8) {
+      this.errorMessage = 'Passwort muss mindestens 8 Zeichen lang sein.'
+      this.showError = true;
+    } else if (this.authForm.value.password !== this.authForm.get('confirmPassword')?.value) {
+      this.errorMessage = 'Passwörter stimmen nicht überein.'
+      this.showError = true;
+    } else {
+      this.authService.register(this.authForm.value.username, this.authForm.value.password).subscribe(
         result => {
           localStorage.setItem('token', result["token"])
           localStorage.setItem('id', result["id"])
           this.router.navigate(['/create']);
         },
-      err => {
-        if (err.status === HttpStatusCode.Unauthorized) {
-          this.errorMessage = 'Benutzername wird bereits verwendet.'
-          this.showError = true;
-        } else {
-          this.errorMessage = 'Unerwarteter Fehler'
+        error => {
+          if (error.status === HttpStatusCode.Unauthorized) {
+            this.errorMessage = 'Benutzername wird bereits verwendet.'
+          } else if (error.error && error.error.status && error.error.title && error.error.detail) {
+            this.errorMessage = 'Unerwarteter Fehler: ' + error.error.status + ' ' + error.error.title + ' ' + error.error.detail;
+          } else {
+            this.errorMessage = 'Unerwarteter Fehler'
+          }
           this.showError = true;
         }
-      }
       );
-    } else {
-    this.errorMessage = 'Passwörter stimmen nicht überein.'
-    this.showError = true;
     }
   }
 
@@ -72,14 +81,15 @@ export class AuthPageComponent implements OnInit {
             this.router.navigate(['/create'])
           })
       },
-      err => {
-        if (err.status === HttpStatusCode.BadRequest) {
+      error => {
+        if (error.status === HttpStatusCode.BadRequest) {
           this.errorMessage = 'Benutzername / Passwort ist falsch.'
-          this.showError = true
+        } else if (error.error && error.error.status && error.error.title && error.error.detail) {
+          this.errorMessage = 'Unerwarteter Fehler: ' + error.error.status + ' ' + error.error.title + ' ' + error.error.detail;
         } else {
           this.errorMessage = 'Unerwarteter Fehler'
-          this.showError = true
         }
+        this.showError = true
       }
     )
   }
@@ -95,6 +105,4 @@ export class AuthPageComponent implements OnInit {
     this.authForm.reset()
   }
 
-
-
 }