Login finished

BetterIServ.Mobile/package.json

@@ -9,7 +9,8 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "lint": "ng lint"
+    "lint": "ng lint",
+    "serve": "ionic serve"
   },
   "private": true,
   "dependencies": {

BetterIServ.Mobile/src/app/Api/iserv.service.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Userdata} from "../entities/userdata";
+import {firstValueFrom} from "rxjs";
+
+@Injectable({
+  providedIn: 'root',
+})
+export class IServService {
+
+  public userdata?: Userdata;
+  private backend: string = "http://localhost:5273";
+
+  constructor(private client: HttpClient) {
+    const data = localStorage.getItem("userdata");
+    if (data != null) {
+      this.userdata = JSON.parse(data);
+    }
+  }
+
+  public async login(email: string, password: string): Promise<boolean> {
+    const split = email.split('@');
+    this.userdata = {};
+    this.userdata.username = split[0];
+    this.userdata.domain = split[1];
+    this.userdata.password = password;
+
+    const data = new FormData();
+    data.append("email", email);
+    data.append("password", password);
+
+    try {
+      this.userdata.token = await firstValueFrom(this.client.post(`${this.backend}/login`, data, {responseType: "text"}));
+      localStorage.setItem("userdata", JSON.stringify(this.userdata));
+      return true;
+    }catch (error) {
+      return false;
+    }
+  }
+
+}

BetterIServ.Mobile/src/app/app.component.html

@@ -2,9 +2,9 @@
   <ion-split-pane contentId="main-content">
     <ion-menu contentId="main-content" type="overlay">
       <ion-content>
-        <ion-list id="inbox-list">
-          <ion-list-header>Inbox</ion-list-header>
-          <ion-note>hi@ionicframework.com</ion-note>
+        <ion-list>
+          <ion-list-header>BetterIServ</ion-list-header>
+          <ion-note>{{iserv.userdata?.username}}@{{iserv.userdata?.domain}}</ion-note>
 
           <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
             <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
@@ -12,15 +12,13 @@
               <ion-label>{{ p.title }}</ion-label>
             </ion-item>
           </ion-menu-toggle>
-        </ion-list>
 
-        <ion-list id="labels-list">
-          <ion-list-header>Labels</ion-list-header>
-
-          <ion-item *ngFor="let label of labels" lines="none">
-            <ion-icon aria-hidden="true" slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
-            <ion-label>{{ label }}</ion-label>
-          </ion-item>
+          <ion-menu-toggle auto-hide="false">
+            <ion-item lines="none" detail="false" (click)="logout()">
+              <ion-icon aria-hidden="true" slot="start" ios="log-out-outline" md="log-out-sharp"></ion-icon>
+              <ion-label>Ausloggen</ion-label>
+            </ion-item>
+          </ion-menu-toggle>
         </ion-list>
       </ion-content>
     </ion-menu>

BetterIServ.Mobile/src/app/app.component.scss

@@ -22,27 +22,17 @@ ion-menu.md ion-note {
   padding-left: 10px;
 }
 
-ion-menu.md ion-list#inbox-list {
+ion-menu.md ion-list {
   border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
 }
 
-ion-menu.md ion-list#inbox-list ion-list-header {
+ion-menu.md ion-list ion-list-header {
   font-size: 22px;
   font-weight: 600;
 
   min-height: 20px;
 }
 
-ion-menu.md ion-list#labels-list ion-list-header {
-  font-size: 16px;
-
-  margin-bottom: 18px;
-
-  color: #757575;
-
-  min-height: 26px;
-}
-
 ion-menu.md ion-item {
   --padding-start: 10px;
   --padding-end: 10px;
@@ -116,4 +106,4 @@ ion-note {
 
 ion-item.selected {
   --color: var(--ion-color-primary);
-}
+}

BetterIServ.Mobile/src/app/app.component.ts

@@ -1,7 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import {Router, RouterLink, RouterLinkActive} from '@angular/router';
 import { IonicModule } from '@ionic/angular';
+import {IServService} from "./Api/iserv.service";
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
@@ -10,14 +11,26 @@ import { IonicModule } from '@ionic/angular';
   imports: [IonicModule, RouterLink, RouterLinkActive, CommonModule],
 })
 export class AppComponent {
+
   public appPages = [
-    { title: 'Inbox', url: '/folder/inbox', icon: 'mail' },
-    { title: 'Outbox', url: '/folder/outbox', icon: 'paper-plane' },
-    { title: 'Favorites', url: '/folder/favorites', icon: 'heart' },
-    { title: 'Archived', url: '/folder/archived', icon: 'archive' },
-    { title: 'Trash', url: '/folder/trash', icon: 'trash' },
-    { title: 'Spam', url: '/folder/spam', icon: 'warning' },
+    { title: 'Übersicht', url: '/home', icon: 'home' },
+    { title: 'E-Mail', url: '/email', icon: 'mail' },
+    { title: 'Dateien', url: '/files', icon: 'folder' },
+    { title: 'Aufgaben', url: '/tasks', icon: 'clipboard' },
+    { title: 'Stundenplan', url: '/schedule', icon: 'grid' },
+    { title: 'Vertretungsplan', url: '/substitution', icon: 'list' },
   ];
-  public labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
-  constructor() {}
+  public email = "leon.hoppe@hgbp.de";
+
+  constructor(private router: Router, public iserv: IServService) {
+    if (localStorage.getItem("userdata") == null) {
+      this.router.navigate(["login"]);
+    }
+  }
+
+  public logout() {
+    localStorage.removeItem("userdata");
+    this.router.navigate(["login"]);
+  }
+
 }

BetterIServ.Mobile/src/app/app.routes.ts

@@ -3,12 +3,15 @@ import { Routes } from '@angular/router';
 export const routes: Routes = [
   {
     path: '',
-    redirectTo: 'folder/inbox',
+    redirectTo: 'home',
     pathMatch: 'full',
   },
   {
-    path: 'folder/:id',
-    loadComponent: () =>
-      import('./folder/folder.page').then((m) => m.FolderPage),
+    path: 'home',
+    loadComponent: () => import('./home/home.page').then( m => m.HomePage)
+  },
+  {
+    path: 'login',
+    loadComponent: () => import('./login/login.page').then( m => m.LoginPage)
   },
 ];

BetterIServ.Mobile/src/app/entities/userdata.ts

@@ -0,0 +1,6 @@
+export interface Userdata {
+  domain?: string,
+  username?: string,
+  password?: string,
+  token?: string
+}

BetterIServ.Mobile/src/app/folder/folder.page.ts

@@ -1,20 +0,0 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { IonicModule } from '@ionic/angular';
-
-@Component({
-  selector: 'app-folder',
-  templateUrl: './folder.page.html',
-  styleUrls: ['./folder.page.scss'],
-  standalone: true,
-  imports: [IonicModule],
-})
-export class FolderPage implements OnInit {
-  public folder!: string;
-  private activatedRoute = inject(ActivatedRoute);
-  constructor() {}
-
-  ngOnInit() {
-    this.folder = this.activatedRoute.snapshot.paramMap.get('id') as string;
-  }
-}

BetterIServ.Mobile/src/app/home/home.page.html

@@ -3,19 +3,19 @@
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
-    <ion-title>{{ folder }}</ion-title>
+    <ion-title>Übersicht</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">{{ folder }}</ion-title>
+      <ion-title size="large">Übersicht</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <div id="container">
-    <strong class="capitalize">{{ folder }}</strong>
+    <strong class="capitalize">Übersicht</strong>
     <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
   </div>
 </ion-content>

BetterIServ.Mobile/src/app/home/home.page.scss

@@ -25,4 +25,4 @@ ion-menu-button {
 
 #container a {
   text-decoration: none;
-}
+}

BetterIServ.Mobile/src/app/home/home.page.ts

@@ -0,0 +1,19 @@
+import {Component, OnInit} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.page.html',
+  styleUrls: ['./home.page.scss'],
+  standalone: true,
+  imports: [IonicModule, CommonModule, FormsModule]
+})
+export class HomePage implements OnInit {
+
+  ngOnInit() {
+
+  }
+
+}

BetterIServ.Mobile/src/app/login/login.page.html

@@ -0,0 +1,20 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>BetterIServ</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <div class="card-container">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>IServ Anmeldedaten</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-input label="E-Mail" type="email" #email/>
+        <ion-input label="Passwort" type="password" #password/>
+        <ion-button (click)="onLogin(email.value?.toString(), password.value?.toString())">Einloggen</ion-button>
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>

BetterIServ.Mobile/src/app/login/login.page.scss

@@ -0,0 +1,24 @@
+.card-container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  ion-card {
+    width: 90%;
+
+    ion-card-content {
+      display: flex;
+      flex-direction: column;
+
+      ion-input {
+        margin-block: 15px;
+      }
+
+      ion-button {
+        flex-grow: 0;
+        margin-inline: auto;
+      }
+    }
+  }
+}

BetterIServ.Mobile/src/app/login/login.page.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {AlertController, IonicModule} from '@ionic/angular';
+import {IServService} from "../Api/iserv.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.page.html',
+  styleUrls: ['./login.page.scss'],
+  standalone: true,
+  imports: [IonicModule, CommonModule, FormsModule]
+})
+export class LoginPage implements OnInit {
+
+  constructor(private iservApi: IServService, private router: Router, private alerts: AlertController) { }
+
+  ngOnInit() {
+  }
+
+  public async onLogin(email?: string, password?: string) {
+    if (email == undefined || password == undefined) return;
+
+    if (await this.iservApi.login(email, password)) {
+      await this.router.navigate(['home']);
+    }else {
+      const alert = await this.alerts.create({
+        header: "Fehler",
+        message: "Die angegebenen Logindaten sind nicht korrekt!",
+        buttons: ['Ok']
+      });
+
+      await alert.present();
+    }
+
+    console.log(this.iservApi.userdata);
+  }
+
+}

BetterIServ.Mobile/src/main.ts

@@ -6,6 +6,7 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
+import {HttpClientModule} from "@angular/common/http";
 
 if (environment.production) {
   enableProdMode();
@@ -15,6 +16,7 @@ bootstrapApplication(AppComponent, {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     importProvidersFrom(IonicModule.forRoot({})),
+    importProvidersFrom(HttpClientModule),
     provideRouter(routes),
   ],
 });