Skip to content

Commit

Permalink
Improve sharing list design and prevent accidental shares #607
Browse files Browse the repository at this point in the history
  • Loading branch information
@bpatrik
bpatrik committed Aug 12, 2023
1 parent 4c10f9d commit ca51e70
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 40 deletions.
9 changes: 9 additions & 0 deletions src/frontend/app/ui/gallery/share/share.gallery.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
84 changes: 50 additions & 34 deletions src/frontend/app/ui/gallery/share/share.gallery.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,25 @@ <h5 class="modal-title" i18n>Share</h5>
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>
Expand Down Expand Up @@ -117,32 +126,39 @@ <h5 class="modal-title" i18n>Share</h5>
</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>
39 changes: 33 additions & 6 deletions src/frontend/app/ui/gallery/share/share.gallery.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -19,6 +22,8 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
enabled = true;
@Input() dropDownItem = false;
url = '';
urlValid = false;
showSharingList = false;

input = {
includeSubfolders: true,
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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,
Expand All @@ -120,39 +132,54 @@ 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 {
this.modalRef.hide();
this.modalRef = null;
this.sharing = null;
}

async share() {
await this.get();
if (this.clipboardService.isSupported) {
this.clipboardService.copy(this.url);
this.onCopy();
}

}

}


Expand Down
2 changes: 2 additions & 0 deletions src/frontend/app/ui/settings/sharings-list/sharings-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down

0 comments on commit ca51e70

Please sign in to comment.