Merge pull request #102 from SeaweedbrainCY/dev

Improve homepage privacy and totp edit UX

frontend/src/app/edit-totp/edit-totp.component.html

@@ -138,15 +138,15 @@
         </div>
         <div class="field is-grouped is-flex is-justify-content-center">
           <div class="control">
-            <button class="button is-info is-light block" (click)="cancel()">{{"cancel" | translate }}</button>
+            <button class="button is-info is-light block" [disabled]="isSaving" (click)="cancel()">{{"cancel" | translate }}</button>
           </div>
           <div class="control" *ngIf="secret_uuid != '' && secret_uuid != null ">
-            <button class="button is-danger block" (click)="modal()" data-target="confirmation"
-              [disabled]="this.userService.getIsVaultLocal()!">{{ 'delete' | translate }}</button>
+            <button class="button is-danger block" (click)="modal()" data-target="confirmation" [ngClass]="{'is-loading': isDestroying}"
+              [disabled]="this.userService.getIsVaultLocal()! || isSaving">{{ 'delete' | translate }}</button>
           </div>
           <div class="control">
-            <button class="button is-info block" (click)="save()"
-              [disabled]="this.userService.getIsVaultLocal()! || secretError !='' || nameError != '' || uriError != ''">{{ 'save' | translate }}</button>
+            <button class="button is-info block" (click)="save()" [ngClass]="{'is-loading': isSaving}"
+              [disabled]="this.userService.getIsVaultLocal()! || secretError !='' || nameError != '' || uriError != '' || isDestroying">{{ 'save' | translate }}</button>
           </div>
         </div>
       </div>

frontend/src/app/edit-totp/edit-totp.component.ts

@@ -51,6 +51,7 @@ export class EditTOTPComponent implements OnInit{
   isTagModalActive = false;
   addTagName="";
   isEditing = false; // true if editing, false if adding
+  isSaving = false;
   remainingTags:string[] = [];
   constructor(
     private router: Router,
@@ -339,6 +340,7 @@ export class EditTOTPComponent implements OnInit{
   }
 
   save(){
+    this.isSaving = true;
     if(this.userService.getId() == null){
       this.router.navigate(["/login/sessionKilled"], {relativeTo:this.route.root});
     }
@@ -347,10 +349,12 @@ export class EditTOTPComponent implements OnInit{
     this.checkSecret();
     this.checkURI();
     if(this.nameError != "" || this.secretError != "" || this.uriError != ""){
+      this.isSaving = false;
       return;
     }
     if(this.code == this.translate.instant("totp.error.code")){
       this.utils.toastError(this.toastr, this.translate.instant("totp.error.code"),"");
+      this.isSaving = false;
       return;
     }
 
@@ -378,12 +382,15 @@ export class EditTOTPComponent implements OnInit{
         } else { 
           this.addNewSecret(enc_jsonProperty, property);
         }
+        this.isSaving = false;
       });
     } catch {
       this.translate.get("totp.error.encryption").subscribe((translation: string) => {
         this.utils.toastWarning(this.toastr,  translation ,"");
+        this.isSaving = false;
     });
     }
+    this.isSaving = false;
   }
 
   addNewSecret(enc_property:string, property: Map<string,string>){

frontend/src/app/home/home.component.html

@@ -50,7 +50,7 @@ <h1 class="is-size-1 has-text-centered has-text-weight-bold mt-6 has-text-dark m
       <div class="column  is-one-third-fullhd is-one-third-widescreen is-one-third-desktop is-two-thirds-tablet is-two-thirds-mobile is-flex is-flex-direction-column is-justify-content-center">
         <div class="card has-background-{{example_color}} has-text-white">
           <header class="card-header">
-              <p class="card-header-title  has-text-white"><img src="https://icons.duckduckgo.com/ip3/{{example_domain}}.ico" alt="{{example_domain}} logo"  width="25px" height="25px" style="margin-right: 6px;">
+              <p class="card-header-title  has-text-white"><img src="assets/example-icons/{{example_ico}}" alt="{{example_domain}} logo"  width="25px" height="25px" style="margin-right: 6px;">
                   {{example_title}}</p>
               <button class="card-header-icon" aria-label="edit">
                   <span class="icon">

frontend/src/app/home/home.component.ts

@@ -43,6 +43,7 @@ export class HomeComponent implements OnInit {
   example_title=""
   remainingTime=0;
   example_color=""
+  example_ico=""
   last_random_i = 0;
   current_color_index = 0;
 
@@ -64,6 +65,7 @@ export class HomeComponent implements OnInit {
   }
 
   generateExample(){
+    const icos = ["facebook.ico", "github.ico", "google.ico", "apple.ico", "google.ico", "amazon.ico", "aws.ico", "microsoft.ico", "onedrive.ico", "gitlab.ico"]
     const domains = ["facebook.com", "github.com", "google.com", "apple.com", "google.com", "amazon.com", "aws.com", "microsoft.com", "onedrive.com", "gitlab.com"]
     const titles = ["Facebook", "Github", "Gmail", "Apple", "Google", "Amazon", "AWS", "Microsoft", "OneDrive", "Gitlab"]
     const colors = [ "info", "success", "danger"]
@@ -75,6 +77,7 @@ export class HomeComponent implements OnInit {
     this.example_domain = domains[random_i];
     this.example_title = titles[random_i];
     this.example_code = (Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000).toString();
+    this.example_ico = icos[random_i];
     this.current_color_index = (this.current_color_index+1)%colors.length;
     this.example_color = colors[this.current_color_index];
   }