Improve sharing list design and prevent accidental shares #607

src/frontend/app/ui/gallery/share/share.gallery.component.css

@@ -24,3 +24,12 @@ a.dropdown-item, button.dropdown-item, div.dropdown-item {
 a.dropdown-item span, button.dropdown-item span, div.dropdown-item span {
   padding-right: 0.8rem;
 }
+
+a.list-shares-button {
+  cursor: pointer;
+  color: inherit;
+}
+
+a.list-shares-button:hover {
+  text-decoration: underline;
+}

src/frontend/app/ui/gallery/share/share.gallery.component.html

@@ -28,16 +28,25 @@
                  class="form-control input-md"
                  type="text"
                  readonly
-                 [disabled]="!shareForm.form.valid"
+                 [disabled]="!shareForm.form.valid || !urlValid"
                  [ngModel]="shareForm.form.valid ? url: invalidSettings">
         </div>
         <div class="col-5 col-sm-3">
-          <button id="copyButton" name="copyButton"
-                  ngxClipboard
-                  [cbContent]="url"
-                  (cbOnSuccess)="onCopy()"
-                  [disabled]="!shareForm.form.valid"
-                  class="btn btn-primary btn-block" i18n>Copy
+          <button
+            *ngIf="!sharing"
+            id="getShareButton" name="getShareButton"
+            (click)="share()"
+            [disabled]="!shareForm.form.valid"
+            class="btn btn-primary btn-block float-end" i18n>Share
+          </button>
+          <button
+            *ngIf="sharing"
+            id="copyButton" name="copyButton"
+            ngxClipboard
+            [cbContent]="url"
+            (cbOnSuccess)="onCopy()"
+            [disabled]="!shareForm.form.valid"
+            class="btn btn-primary btn-block float-end" i18n>Copy
           </button>
         </div>
       </div>
@@ -117,32 +126,39 @@
         </div>
       </div>
     </form>
-    <ng-container *ngIf="activeShares && activeShares.length>0">
-      <hr/>
-        <table class="table table-hover">
-          <thead>
-          <tr>
-            <th i18n>Key</th>
-            <th i18n>Creator</th>
-            <th i18n>Expires</th>
-            <th></th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr *ngFor="let share of activeShares">
-            <td><a [href]="sharingService.getUrl(share)">{{share.sharingKey}}</a></td>
-            <td>{{share.creator.name}}</td>
-            <td>{{share.expires | date}}</td>
-            <td>
-              <button (click)="deleteSharing(share)"
-                      [disabled]="share.sharingKey == sharing?.sharingKey"
-                      class="btn btn-danger float-end">
-                <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
-              </button>
-            </td>
-          </tr>
-          </tbody>
-        </table>
-    </ng-container>
+  </div>
+  <div class="modal-footer" *ngIf="activeShares && activeShares.length>0">
+    <a *ngIf="!showSharingList"
+       (click)="showSharingList = true"
+       class="list-shares-button m-0">
+      <span class="badge text-bg-secondary me-1">{{activeShares.length}}</span>
+      <ng-container i18n>active share(s) for this folder.
+      </ng-container>
+      <span class="oi oi-chevron-right ms-1"></span>
+    </a>
+    <table class="table table-hover table-sm" *ngIf="showSharingList">
+      <thead>
+      <tr>
+        <th i18n>Sharing</th>
+        <th *ngIf="IsAdmin" i18n>Creator</th>
+        <th i18n>Expires</th>
+        <th></th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let share of activeShares">
+        <td><a [href]="sharingService.getUrl(share)">{{share.sharingKey}}</a></td>
+        <td *ngIf="IsAdmin">{{share.creator.name}}</td>
+        <td>{{share.expires | date}}</td>
+        <td>
+          <button (click)="deleteSharing(share)"
+                  [disabled]="share.sharingKey == sharing?.sharingKey"
+                  class="btn btn-danger float-end">
+            <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+          </button>
+        </td>
+      </tr>
+      </tbody>
+    </table>
   </div>
 </ng-template>

src/frontend/app/ui/gallery/share/share.gallery.component.ts

@@ -9,6 +9,9 @@ import {NotificationService} from '../../../model/notification.service';
 import {BsModalService} from 'ngx-bootstrap/modal';
 import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';
 import {Subscription} from 'rxjs';
+import {UserRoles} from '../../../../../common/entities/UserDTO';
+import {AuthenticationService} from '../../../model/network/authentication.service';
+import {ClipboardService} from 'ngx-clipboard';
 
 @Component({
   selector: 'app-gallery-share',
@@ -19,6 +22,8 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
   enabled = true;
   @Input() dropDownItem = false;
   url = '';
+  urlValid = false;
+  showSharingList = false;
 
   input = {
     includeSubfolders: true,
@@ -48,12 +53,18 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
     public sharingService: ShareService,
     public galleryService: ContentService,
     private notification: NotificationService,
-    private modalService: BsModalService
+    private modalService: BsModalService,
+    public authService: AuthenticationService,
+    private clipboardService: ClipboardService
   ) {
     this.text.Yes = $localize`Yes`;
     this.text.No = $localize`No`;
   }
 
+  public get IsAdmin() {
+    return this.authService.user.value.role > UserRoles.Admin;
+  }
+
   ngOnInit(): void {
     this.contentSubscription = this.galleryService.content.subscribe(
       async (content: ContentWrapper) => {
@@ -112,6 +123,7 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
     if (this.sharing == null) {
       return;
     }
+    this.urlValid = false;
     this.url = $localize`loading..`;
     this.sharing = await this.sharingService.updateSharing(
       this.currentDir,
@@ -120,32 +132,37 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
       this.input.password,
       this.calcValidity()
     );
-    this.url = Utils.concatUrls(Config.Server.publicUrl, '/share/', this.sharing.sharingKey);
+    this.urlValid = true;
+    this.url = this.sharingService.getUrl(this.sharing);
+    await this.updateActiveSharesList();
   }
 
   async get(): Promise<void> {
+    this.urlValid = false;
     this.url = $localize`loading..`;
     this.sharing = await this.sharingService.createSharing(
       this.currentDir,
       this.input.includeSubfolders,
       this.calcValidity()
     );
-    this.url = Utils.concatUrls(Config.Server.publicUrl, '/share/', this.sharing.sharingKey);
+    this.url = this.sharingService.getUrl(this.sharing);
+    this.urlValid = true;
     await this.updateActiveSharesList();
   }
 
   async openModal(template: TemplateRef<unknown>): Promise<void> {
-    await this.get();
+    this.url = $localize`Click share to get a link.`;
+    this.urlValid = false;
+    this.sharing = null;
     this.input.password = '';
     if (this.modalRef) {
       this.modalRef.hide();
     }
     this.modalRef = this.modalService.show(template);
-    document.body.style.paddingRight = '0px';
   }
 
   onCopy(): void {
-    this.notification.success($localize`Url has been copied to clipboard`);
+    this.notification.success($localize`Sharing link has been copied to clipboard`);
   }
 
   public hideModal(): void {
@@ -153,6 +170,16 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
     this.modalRef = null;
     this.sharing = null;
   }
+
+  async share() {
+    await this.get();
+    if (this.clipboardService.isSupported) {
+      this.clipboardService.copy(this.url);
+      this.onCopy();
+    }
+
+  }
+
 }
 
 

src/frontend/app/ui/settings/sharings-list/sharings-list.component.ts

@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {SharingDTO} from '../../../../../common/entities/SharingDTO';
 import {SettingsService} from '../settings.service';
 import {ShareService} from '../../gallery/share.service';
+import {AuthenticationService} from '../../../model/network/authentication.service';
+import {UserRoles} from '../../../../../common/entities/UserDTO';
 
 @Component({
   selector: 'app-settigns-sharings-list',