Merge branch 'AccountDetailsNew' into 'AqueductBranch'

Account details new

See merge request !31

frontend/lib/src/view/components/account_component.css

+@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');
+
+.form-control {
+    margin:5px;
+    width: 97%;
+    float: left;
+}
+
+#noteplain{
+     resize: none;
+     background-color: #C9D1C8;
+     border: none;
+ }
+#note{
+    resize: none;
+}
+
+#stern{
+    margin:6px;
+    font-size: 12px;
+}
+
+#delete {
+    color: red;
+}
+
+.invalid-feedback {
+    margin:6px;
+}
+
+label {
+    width: 100%;
+}

frontend/lib/src/view/components/account_component.dart

+import 'package:angular/angular.dart';
+import 'package:angular_forms/angular_forms.dart';
+import 'package:angular_router/angular_router.dart';
+
+
+import 'package:demo/src/model/person.dart';
+import 'package:demo/src/view/routes/route_paths.dart';
+import 'package:demo/src/view/services/person_service.dart';
+
+import 'package:demo/src/view/components/login_component.dart';
+import '../main_component.dart';
+
+
+@Component(
+  selector: 'account',
+  templateUrl: 'account_component.html',
+  styleUrls: ['account_component.css'],
+  directives: [coreDirectives, routerDirectives, formDirectives],
+)
+/// Klasse zur verwaltung der Termine
+class AccountComponent implements OnActivate {
+
+  AccountComponent(this._userService, this._location, this._router);
+
+  User user;
+  final Location _location;
+  bool deleteControl = false;
+  final Router _router;
+  final UserService _userService;
+  bool editSurname = false;
+  bool editName = false;
+  bool editEmail = false;
+  bool editMobileNo = false;
+  bool editPassword = false;
+  bool deleteAccount = false;
+  String newPassword = "";
+  String passwordWh = "";
+
+  /// Folgender Code wird immer bei der Aktivierung der Klasse aufgerufen
+  @override
+  void onActivate(_, RouterState current) async {
+    if (!LoginComponent.loggedIn) {
+      await _router.navigate('/login');
+    } else {
+      final id = 4;
+      if (id != null) {
+        user = await _userService.getById(id);
+      }
+    }
+  }
+
+  /// Methode zum speichern der Änderungen, die man am User vorgenommen hat
+  Future<void> save() async {
+    editSurname = false;
+    editName = false;
+    editEmail = false;
+    editMobileNo = false;
+    await _userService.update(user);
+  }
+
+  /// Methode zum Speichern des neuen Passworts
+  Future<void> savePassword() async {
+    editPassword = false;
+    user.password = newPassword;
+    await _userService.update(user);
+  }
+
+  ///Methode zum Löschen des Accounts
+  Future<void> delete() async {
+    if (deleteControl==true) {
+      await _userService.deleteUser(user.username);
+      LoginComponent.loggedIn = false;
+      AppComponent.showButtons = false;
+      await _router.navigate('/login');
+    } else {
+      deleteControl = true;
+    }
+  }
+
+  ///Methode, die die übergeordnete Ansicht anzeigt
+  void goBack() => _location.back();
+
+  void surnameEdit() {
+    editSurname = true;
+  }
+
+  void nameEdit() {
+    editName = true;
+  }
+
+  void emailEdit() {
+    editEmail = true;
+  }
+
+  void mobileNoEdit() {
+    editMobileNo = true;
+  }
+
+  void passwordEdit() {
+    editPassword = true;
+  }
+
+  void accountDelete() {
+    deleteAccount = true;
+  }
+}
\ No newline at end of file

frontend/lib/src/view/components/account_component.html

+<h3>Accountdetails</h3>
+<div *ngIf="user != null">
+    <table class="table">
+        <tr>
+            <th>Username</th>
+            <td>{{user.username}}</td>
+        </tr>
+        <tr [hidden]="editSurname">
+            <th>Surname</th>
+            <td>{{user.surname}}</td>
+            <td><button (click)="surnameEdit()" class="btn">Edit</button></td>
+        </tr>
+        <tr [hidden]="!editSurname" id="editSurname">
+                <div class="form-group">
+                    <label for="surname">Surname&nbsp;*</label>
+                    <input type="text" class="form-control" id="surname" required
+                           placeholder="Max"
+                           [(ngModel)]="user.surname"
+                           #name="ngForm">
+                </div>
+                <button type="button" class="btn btn-success" (click)="save()">Save</button>
+            </tr>
+        <tr [hidden]="editName">
+            <th>Name</th>
+            <td>{{user.name}}</td>
+            <td><button (click)="nameEdit()" class="btn">Edit</button></td>
+        </tr>
+        <tr [hidden]="!editName" id="editName">
+                <div class="form-group">
+                    <label for="name">Name&nbsp;*</label>
+                    <input type="text" class="form-control" id="name" required
+                           placeholder="Mustermann"
+                           [(ngModel)]="user.name"
+                           #name="ngForm">
+                </div>
+                <button type="button" class="btn btn-success" (click)="save()">Save</button>
+            </tr>
+        <tr [hidden]="editEmail">
+            <th>Email</th>
+            <td>{{user.email}}</td>
+            <td><button (click)="emailEdit()" class="btn">Edit</button></td>
+        </tr>
+        <tr [hidden]="!editEmail" id="editEmail">
+                <div class="form-group">
+                    <label for="email">Email&nbsp;*</label>
+                    <input type="email" class="form-control" id="email" required
+                           placeholder="max@mustermann.de"
+                           [(ngModel)]="user.email"
+                           #name="ngForm">
+                </div>
+                <button type="button" class="btn btn-success" (click)="save()">Save</button>
+            </tr>
+        <tr [hidden]="editMobileNo">
+            <th>Mobile Number</th>
+            <td>{{user.mobileNo}}</td>
+            <td><button (click)="mobileNoEdit()" class="btn">Edit</button></td>
+        </tr>
+        <tr [hidden]="!editMobileNo" id="editMobileNo">
+                <div class="form-group">
+                    <label for="mobileNo">Mobile Number&nbsp;*</label>
+                    <input type="text" class="form-control" id="mobileNo" required
+                           placeholder="0152 123456"
+                           [(ngModel)]="user.mobileNo"
+                           #name="ngForm">
+                </div>
+                <button type="button" class="btn btn-success" (click)="save()">Save</button>
+        </tr>
+        <tr [hidden]="editPassword">
+                <th>Password</th>
+                <td></td>
+                <td><button (click)="passwordEdit()" class="btn">Edit</button></td>
+            </tr>
+            <tr [hidden]="!editPassword" id="editPassword">
+                    <div class="form-group">
+                        <label for="password">Current Password&nbsp;*</label>
+                        <input type="password" class="form-control" id="password" required
+                               [(ngModel)]="user.password"
+                               #name="ngForm">
+                    </div>
+                    <div class="form-group">
+                            <label for="newPassword">New Password&nbsp;*</label>
+                            <input type="password" class="form-control" id="newPassword" required
+                                    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+                                   [(ngModel)]="newPassword"
+                                   #name="ngForm">
+                    </div>
+                    <div class="form-group">
+                            <label for="passwordWh">Repeat New Password&nbsp;*</label>
+                            <input type="password" class="form-control" id="passwordWh" required
+                                    pattern="{{newPassword}}"
+                                   [(ngModel)]="passwordWh"
+                                   #name="ngForm">
+                    </div>
+                    <button type="button" class="btn btn-success" (click)="savePassword()">Save</button>
+            </tr>
+            <tr [hidden]="deleteAccount">
+                    <th>Delete Account</th>
+                    <td></td>
+                    <td><button (click)="accountDelete()" class="btn">Edit</button></td>
+            </tr>
+            <tr [hidden]="!deleteAccount" id="deleteAccount">
+                    <div class="form-group">
+                            <label for="password">Password&nbsp;*</label>
+                            <input type="password" class="form-control" id="passwordDelete" required
+                                   [(ngModel)]="user.password"
+                                   #name="ngForm">
+                    </div>
+                    <div class="form-group">
+                            <label for="passwordWh">Repeat Password&nbsp;*</label>
+                            <input type="password" class="form-control" id="passwordWhDelete" required
+                                    pattern="{{user.password}}"
+                                   [(ngModel)]="passwordWh"
+                                   #name="ngForm">
+                    </div>
+                    <button type="button" class="btn btn-danger" (click)="delete()">Delete</button>
+                    <div [hidden]="!deleteControl" id="delete">
+                        If you really want to delete your account click "Delete" again.
+                    </div>
+            </tr>
+    </table>
+    <button (click)="goBack()" class="btn">GoBack</button>
+</div>
\ No newline at end of file

frontend/lib/src/view/main_component.html

@@ -18,6 +18,9 @@
                 <li [routerLink]="RoutePaths.contacts.toUrl()"
                     [routerLinkActive]="'active'">Contacts
                 </li>
+                <li [routerLink]="RoutePaths.account.toUrl()"
+                    [routerLinkActive]="'active'">Account
+                </li>
                 <li (click)="logout()" [routerLink]="RoutePaths.login.toUrl()">Logout</li>
             </nav>
 

frontend/lib/src/view/routes/route_paths.dart

@@ -17,6 +17,7 @@ class RoutePaths {
   static final RoutePath dayview = RoutePath(path: '${calendarMain.path}/:$yParam/:$mParam/:$dParam');
   static final RoutePath register = RoutePath(path: 'register');
   static final RoutePath login = RoutePath(path: 'login');
+  static final RoutePath account = RoutePath(path: 'account');
 
   static final RoutePath contacts = RoutePath(path: 'contacts');
   static final RoutePath contact = RoutePath(path: '${contacts.path}/:$conParam');

frontend/lib/src/view/routes/routes.dart

 import 'package:angular/angular.dart';
 import 'package:angular/core.dart';
 import 'package:angular_router/angular_router.dart';
+import '../components/account_component.template.dart' as account_template;
 import '../components/appointment_component.template.dart' as appointment_template;
 import '../components/appointment_list_component.template.dart' as appointment_list_template;
 import '../components/appointment_new_component.template.dart' as appointment_new_template;
@@ -65,6 +66,10 @@ class Routes {
     routePath: RoutePaths.contact,
     component: contact_template.ContactComponentNgFactory as ComponentFactory,
   );
+  static final RouteDefinition account = RouteDefinition(
+    routePath: RoutePaths.account,
+    component: account_template.AccountComponentNgFactory as ComponentFactory,
+  );
   // routing auf diese Component
   static final List<RouteDefinition> all = <RouteDefinition>[
     dashboard,
@@ -78,6 +83,7 @@ class Routes {
     contact,
     register,
     login,
+    account,
     RouteDefinition.redirect(
       path: '',
       redirectTo: RoutePaths.login.toUrl(),

frontend/lib/src/view/services/person_service.dart

 import 'dart:async';
 import 'dart:convert';
+import 'dart:html';
 import 'package:demo/src/view/main_component.dart';
 import 'package:http/http.dart';
 import 'package:demo/src/model/person.dart';
@@ -8,19 +9,25 @@ class UserService {
   // request to middlemand
   UserService(this._http);
 
-  static final _headers = {'Content-Type': 'application/json'};
+  //static final _headers = {'Content-Type': 'application/json'};
   static const _userUrl = host + '/user'; // URL to web API
   final Client _http;
 
+  static const _type = MapEntry('Content-Type', 'application/json');
+
+  // getter for the Authorization
+  Map<String,String> get _headers => Map.fromEntries(
+      [MapEntry("Authorization", "$_tokenType $_tokenAuth"), _type]);
+  String get _tokenType => window.localStorage["token_type"];
+  String get _tokenAuth => window.localStorage["access_token"];
+
   ///Liest die Daten aus einer Response
   dynamic _extractData(Response resp) => json.decode(resp.body);
-
   Exception _handleError(dynamic e) {
-    print(e); // for demo purposes only
     return Exception('Server error; cause: $e');
   }
 
-  ///Erstellt einen neuen User mit gegebenem Namen, Email und Passwort
+  ///Erstellt einen neuen User
   Future<User> create(User user) async {
     try {
       final response = await _http.post(_userUrl,
@@ -32,6 +39,29 @@ class UserService {
     }
   }
 
+  ///Updatet einen bereits existierenden User
+  Future<User> update(User user) async {
+    // Add security Header
+    final Response response = await _http.put(_userUrl,
+        headers: _headers, body: json.encode(user.toJson())) as Response;
+      return User.fromJson(
+          _extractData(response as Response) as Map<String, dynamic>);
+  }
+
+  ///Löscht den User mit gegebenem contactCode
+  Future<void> delete(String contactCode) async {
+    // Add security Header
+    final url = '$_userUrl/$contactCode';
+    await _http.delete(url, headers: _headers);
+  }
+
+  ///Löscht den User mit gegebenem contactCode
+  Future<void> deleteUser(String username) async {
+    // Add security Header
+    final url = '$_userUrl/look/$username';
+    await _http.delete(url, headers: _headers);
+  }
+
   Future<List<User>> getAll() async {
     final Response response = await _http.get('$_userUrl') as Response;
     return (_extractData(response) as List)
@@ -45,4 +75,15 @@ class UserService {
     return User.fromJson(_extractData(response) as Map<String, dynamic>);
   }
 
+  Future<User> getById(int id) async {
+    final Response response =
+        await _http.get('$_userUrl/lookup/$id') as Response;
+    return User.fromJson(_extractData(response) as Map<String, dynamic>);
+  }
+
+  Future<User> getByUsername(String username) async {
+    final Response response =
+        await _http.get('$_userUrl/look/$username') as Response;
+    return User.fromJson(_extractData(response) as Map<String, dynamic>);
+  }
 }

middleman/lib/channel.dart

@@ -72,6 +72,12 @@ class CalenderChannel extends ApplicationChannel {
     router
         .route('/user/[:number]')
         .link(() => UserController(context));
+    router
+        .route('/user/lookup/[:id]')
+        .link(() => UserController(context));
+    router
+        .route('/user/look/[:username]')
+        .link(() => UserController(context));
     router
         .route('/contacts/[:number]')
         .link(() => ContactController(context));

middleman/lib/controller/register_controller.dart

@@ -24,4 +24,15 @@ class RegisterController extends ResourceController {
     user.hashedPassword = authServer.hashPassword(user.password, user.salt);
     return Response.ok(await Query(context, values: user).insert());
   }
+
+  @Operation.get('number')
+  Future<Response> getUserById(@Bind.path('number') String id) async {
+    final userQuery = Query<User>(context)
+      ..where((con) => con.id).equalTo(id as int);
+    final user = await userQuery.fetchOne();
+    if (user == null) {
+      return Response.notFound();
+    }
+    return Response.ok(user);
+  }
 }

middleman/lib/controller/user_controller.dart

@@ -31,6 +31,28 @@ class UserController extends ResourceController {
     return Response.ok(user);
   }
 
+  @Operation.get('username')
+  Future<Response> getUserByUsername(@Bind.path('username') String username) async {
+    final userQuery = Query<User>(context)
+      ..where((user) => user.username).equalTo(username);
+    final user = await userQuery.fetchOne();
+    if (user == null) {
+      return Response.notFound();
+    }
+    return Response.ok(user);
+  }
+
+  @Operation.get('id')
+  Future<Response> getUserID(@Bind.path('id') int id) async {
+    final userQuery = Query<User>(context)
+      ..where((user) => user.id).equalTo(id);
+    final user = await userQuery.fetchOne();
+    if (user == null) {
+      return Response.notFound();
+    }
+    return Response.ok(user);
+  }
+
   @Operation.post()
   Future<Response> newUser() async {
     final Map<String, dynamic> body = await request.body.decode();
@@ -52,6 +74,17 @@ class UserController extends ResourceController {
     return Response.ok(updatedUser);
   }
 
+  @Operation.put()
+  Future<Response> updateUserNew(@Bind.body() User user) async {
+    final Map<String, dynamic> body = await request.body.decode();
+    print(body.toString());
+    final query = Query<User>(context)
+      ..values.read(body,ignore: ["id"])
+      ..where((user) => user.id).equalTo(body["id"] as int);
+    final updatedUser = await query.updateOne();
+    return Response.ok(updatedUser);
+  }
+
   @Operation.delete("number")
   Future<Response> deleteUser(@Bind.path('number') String con) async {
     final query = Query<User>(context)
@@ -59,4 +92,12 @@ class UserController extends ResourceController {
     int userdelete = await query.delete();
     return Response.ok(userdelete);
   }
+
+  @Operation.delete("username")
+  Future<Response> deleteByUsername(@Bind.path('username') String username) async {
+    final query = Query<User>(context)
+      ..where((app) => app.username).equalTo(username);
+    int userdelete = await query.delete();
+    return Response.ok(userdelete);
+  }
 }
\ No newline at end of file