Improve account username copy button

client/src/app/+accounts/accounts.component.html

@@ -8,9 +8,13 @@
         <div class="actor-names">
           <div class="actor-display-name">{{ account.displayName }}</div>
           <div class="actor-name">{{ account.nameWithHost }}
-          <button ngxClipboard [cbContent]="account.nameWithHostForced" type="button" class="btn btn-outline-secondary btn-sm">
+
+          <button ngxClipboard [cbContent]="account.nameWithHostForced" (click)="activateCopiedMessage()"
+                  class="btn btn-outline-secondary btn-sm copy-button"
+          >
             <span class="glyphicon glyphicon-copy"></span>
           </button>
+
           </div>
           <span *ngIf="user?.blocked" [ngbTooltip]="user.blockedReason" class="badge badge-danger" i18n>Banned</span>
           <span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span>

client/src/app/+accounts/accounts.component.scss

@@ -16,3 +16,9 @@ my-user-moderation-dropdown,
 .badge {
   font-size: 13px;
 }
+
+.copy-button {
+  border: none;
+  padding: 5px;
+  margin-top: -2px;
+}

client/src/app/+accounts/accounts.component.ts

@@ -7,6 +7,7 @@ import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/oper
 import { Subscription } from 'rxjs'
 import { AuthService, Notifier, RedirectService } from '@app/core'
 import { User, UserRight } from '../../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   templateUrl: './accounts.component.html',
@@ -25,7 +26,8 @@ export class AccountsComponent implements OnInit, OnDestroy {
     private notifier: Notifier,
     private restExtractor: RestExtractor,
     private redirectService: RedirectService,
-    private authService: AuthService
+    private authService: AuthService,
+    private i18n: I18n
   ) {}
 
   ngOnInit () {
@@ -56,6 +58,10 @@ export class AccountsComponent implements OnInit, OnDestroy {
     this.redirectService.redirectToHomepage()
   }
 
+  activateCopiedMessage () {
+    this.notifier.success(this.i18n('Username copied'))
+  }
+
   private getUserIfNeeded (account: Account) {
     if (!account.userId) return
     if (!this.authService.isLoggedIn()) return