Copy to clipboard button on invite-link component

Author: DiegoMzmn

frontend/src/app/invite/invite-link/invite-link.component.css

@@ -0,0 +1,3 @@
+::ng-deep .mat-snack-bar-container {
+   max-width: none;
+}

frontend/src/app/invite/invite-link/invite-link.component.html

@@ -1,4 +1,9 @@
-<span>{{url}}</span>
-<button mat-icon-button color="warn" (click)="dismiss()">
-    <mat-icon>close</mat-icon>
-</button>
+<div>
+    <span>{{url}}</span>
+    <button mat-icon-button color="accent" (click)="copyToClipboard()">
+        <mat-icon matTooltip="Copy to clipboard">file_copy</mat-icon>
+    </button>
+    <button mat-icon-button color="warn" (click)="dismiss()">
+        <mat-icon matTooltip="Close">close</mat-icon>
+    </button>
+</div>

frontend/src/app/invite/invite-link/invite-link.component.ts

@@ -33,4 +33,18 @@ export class InviteLinkComponent implements OnInit {
     this.data.dismiss();
   }
 
+  private copyToClipboard() {
+    let selBox = document.createElement('textarea');
+    selBox.style.position = 'fixed';
+    selBox.style.left = '0';
+    selBox.style.top = '0';
+    selBox.style.opacity = '0';
+    selBox.value = this.url;
+    document.body.appendChild(selBox);
+    selBox.focus();
+    selBox.select();
+    document.execCommand('copy');
+    document.body.removeChild(selBox);
+  }
+
 }

frontend/src/app/invite/invite.component.html

@@ -22,7 +22,9 @@
                 </mat-form-field>
                 <div></div>
             </div>
-            <button mat-flat-button *ngIf="!loading" color="accent" (click)="enterRoom()" [disabled]="!userSrv.isLogged && (!userName || !password)" id="accessButton">Access room</button>
+            <ng-container *ngIf="!loading">
+                <button mat-flat-button  color="accent" (click)="enterRoom()" [disabled]="!userSrv.isLogged && (!userName || !password)" id="accessButton">Access room</button>
+            </ng-container>
             <mat-spinner color="accent" *ngIf="loading" id="loadingSpinner"></mat-spinner>
         </div>
     </div>