fix: ux to set max read count

If max read count was empty, the input was hidden so user can not set a correct count Fix si to make checkbox independent from the max read count number
Ajnasz · Jan 7, 2025 · 437bdba · 437bdba
1 parent 4741e82
commit 437bdba
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/app/secret-writer/secret-writer.component.html b/src/app/secret-writer/secret-writer.component.html
@@ -20,7 +20,7 @@ <h2 class="text-2xl font-bold mb-6">New secret</h2>
             type="checkbox"
             id="toggleShareWithGroup"
             name="toggleShareWithGroup"
-            value="shareWithGroup"
+            [(ngModel)]="shareWithTeam"
             [checked]="shareWithTeam"
             (change)="toggleShareWithGroup()" />
           Share with a group
@@ -38,7 +38,7 @@ <h2 class="text-2xl font-bold mb-6">New secret</h2>
               [disabled]="!shareWithTeam"
               [(ngModel)]="maxReads" />
           </div>
-          <p class="text-xs mt-2" *ngIf="shareWithTeam">
+          <p class="text-xs mt-2" *ngIf="shareWithTeam && maxReads !== null">
             The secret can be read by {{ maxReads }} people.
           </p>
         </ng-container>

diff --git a/src/app/secret-writer/secret-writer.component.ts b/src/app/secret-writer/secret-writer.component.ts
@@ -36,9 +36,7 @@ export class SecretWriterComponent implements OnInit {
   selectedExpiration: EXPIRE_DURATIONS = '24h';
   maxReads = 1;
 
-  get shareWithTeam(): boolean {
-    return this.maxReads > 1;
-  }
+  shareWithTeam: false;
 
   constructor(
     private secretService: SecretService,
@@ -55,6 +53,11 @@ export class SecretWriterComponent implements OnInit {
       return false;
     }
 
+    if (this.maxReads === null) {
+      this.errorMessage = 'Please set how many users can read the message';
+      return false;
+    }
+
     this.errorMessage = '';
 
     return true;
@@ -97,7 +100,7 @@ export class SecretWriterComponent implements OnInit {
   }
 
   toggleShareWithGroup(): void {
-    if (this.shareWithTeam) {
+    if (!this.shareWithTeam) {
       this.maxReads = 1;
       return;
     }