Display last login date and registered date (#195)

hobbyfarm · Feb 16, 2024 · b228aef · b228aef
1 parent 559b6df
commit b228aef
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 64 deletions.
diff --git a/src/app/data/user.ts b/src/app/data/user.ts
@@ -1,6 +1,8 @@
 export class User {
-    id: string;
-    email: string;
-    password: string;
-    access_codes: string[];
-}
+  id: string;
+  email: string;
+  password: string;
+  access_codes: string[];
+  last_login_timestamp: string;
+  registered_timestamp: string;
+}
diff --git a/src/app/user/edit-user/edit-user.component.html b/src/app/user/edit-user/edit-user.component.html
@@ -14,7 +14,7 @@
     <form clrForm [formGroup]="userDetailsForm">
       <clr-input-container>
         <label for="email">ID</label>
-        <input clrInput name="id" value="{{this.user.id}}" disabled />
+        <input clrInput name="id" value="{{ this.user.id }}" disabled />
       </clr-input-container>
       <clr-input-container>
         <label for="email">Email</label>
@@ -38,6 +38,38 @@
           >Blank leaves password unchanged.</clr-control-helper
         >
       </clr-input-container>
+      <clr-input-container>
+        <label for="email">Last Login</label>
+        <input
+          clrInput
+          *ngIf="this.user.last_login_timestamp"
+          name="last_login_timestamp"
+          value="{{
+            getFormattedDate(this.user.last_login_timestamp)
+              | date : 'MMMM d, y, HH:mm:ss z'
+          }}"
+          disabled
+        />
+        <input
+          clrInput
+          *ngIf="!this.user.last_login_timestamp"
+          name="last_login_timestamp"
+          value="-"
+          disabled
+        />
+      </clr-input-container>
+      <clr-input-container>
+        <label for="email">Registered</label>
+        <input
+          clrInput
+          name="registered_timestamp"
+          value="{{
+            getFormattedDate(this.user.registered_timestamp)
+              | date : 'MMMM d, y, HH:mm:ss z'
+          }}"
+          disabled
+        />
+      </clr-input-container>
     </form>
   </div>
 </div>

diff --git a/src/app/user/edit-user/edit-user.component.ts b/src/app/user/edit-user/edit-user.component.ts
@@ -1,4 +1,13 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ServerResponse } from 'src/app/data/serverresponse';
 import { User } from 'src/app/data/user';
@@ -14,8 +23,8 @@ export class EditUserComponent implements OnChanges {
   public user: User = new User();
 
   public alertClosed: boolean = true;
-  public alertType: string = "danger";
-  public alertText: string = "";
+  public alertType: string = 'danger';
+  public alertText: string = '';
 
   @Output()
   public deleted: EventEmitter<boolean> = new EventEmitter(false);
@@ -25,96 +34,103 @@ export class EditUserComponent implements OnChanges {
   @ViewChild('deleteconfirm') deleteConfirmModal: DeleteConfirmationComponent;
   @ViewChild('userDetails') userDetails: ElementRef;
 
-  constructor(
-    public userService: UserService
-  ) { }
+  constructor(public userService: UserService) {}
 
   ngOnInit(): void {
-    this.userDetailsForm.valueChanges.subscribe(event => {
+    this.userDetailsForm.valueChanges.subscribe((event) => {
       if (!this.userDetailsForm.dirty) {
-        this.userDetails.nativeElement.animate([ { opacity: 1, easing: 'ease-out' },
-      { opacity: 0.1, easing: 'ease-in' },
-      { opacity: 0 } ],
-    200);
-      }      
-    })
+        this.userDetails.nativeElement.animate(
+          [
+            { opacity: 1, easing: 'ease-out' },
+            { opacity: 0.1, easing: 'ease-in' },
+            { opacity: 0 },
+          ],
+          200
+        );
+      }
+    });
   }
 
   ngOnChanges(): void {
     this.reset();
   }
 
   public userDetailsForm: FormGroup = new FormGroup({
-    'email': new FormControl(this.user.email, [
+    email: new FormControl(this.user.email, [
       Validators.required,
-      Validators.email
+      Validators.email,
     ]),
-    'password': new FormControl(""),
+    password: new FormControl(''),
   });
 
   public reset(): void {
     this.userDetailsForm.reset({
-      'email': this.user.email,
-      'password': "",
+      email: this.user.email,
+      password: '',
     });
-    this.alertText = "";
+    this.alertText = '';
     this.alertClosed = true;
   }
 
   saveDetails() {
     this.saving = true;
-    var email = this.userDetailsForm.get("email").value;
-    var password = this.userDetailsForm.get("password").value;
+    var email = this.userDetailsForm.get('email').value;
+    var password = this.userDetailsForm.get('password').value;
 
     if (email == null) {
-      email = "";
+      email = '';
     }
 
     if (password == null) {
-      password = "";
+      password = '';
     }
 
-    this.userService.saveUser(this.user.id, email, password)
-      .subscribe(
-        (s: ServerResponse) => {
-          this.alertText = "User updated";
-          this.alertType = "success";
-          this.alertClosed = false;
-          this.saving = false;
-          setTimeout(() => {
-            this.alertClosed = true;
-          }, 2000);
-        },
-        (s: ServerResponse) => {
-          this.alertText = "Error updating user: " + s.message;
-          this.alertType = "danger";
-          this.alertClosed = false;
-          this.saving = false;
-          setTimeout(() => {
-            this.alertClosed = true;
-          }, 2000);
-        }
-      )
+    this.userService.saveUser(this.user.id, email, password).subscribe(
+      (s: ServerResponse) => {
+        this.alertText = 'User updated';
+        this.alertType = 'success';
+        this.alertClosed = false;
+        this.saving = false;
+        setTimeout(() => {
+          this.alertClosed = true;
+        }, 2000);
+      },
+      (s: ServerResponse) => {
+        this.alertText = 'Error updating user: ' + s.message;
+        this.alertType = 'danger';
+        this.alertClosed = false;
+        this.saving = false;
+        setTimeout(() => {
+          this.alertClosed = true;
+        }, 2000);
+      }
+    );
   }
 
   delete() {
     this.deleteConfirmModal.open();
   }
 
   doDelete() {
-    this.userService.deleteUser(this.user.id)
-      .subscribe(
-        (s: ServerResponse) => {
-          this.deleted.next(true);
-        },
-        (s: ServerResponse) => {
-          this.alertText = s.message;
-          this.alertType = "danger";
-          this.alertClosed = false;
-          setTimeout(() => {
-            this.alertClosed = true;
-          }, 2000);
-        }
-      )
+    this.userService.deleteUser(this.user.id).subscribe(
+      (s: ServerResponse) => {
+        this.deleted.next(true);
+      },
+      (s: ServerResponse) => {
+        this.alertText = s.message;
+        this.alertType = 'danger';
+        this.alertClosed = false;
+        setTimeout(() => {
+          this.alertClosed = true;
+        }, 2000);
+      }
+    );
+  }
+
+  getFormattedDate(timestamp: string) {
+    if (!timestamp || timestamp == '') {
+      return '';
     }
+    return new Date(timestamp);
+  }
 }