Improve account username copy button

3 files changed, 19 insertions, 3 deletions

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 1172f7ba7..0e9719dcf 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/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>
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 3cedda889..273e5c43a 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -15,4 +15,10 @@ my-user-moderation-dropdown,
 
 .badge {
   font-size: 13px;
-}
\ No newline at end of file
+}
+
+.copy-button {
+  border: none;
+  padding: 5px;
+  margin-top: -2px;
+}
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index d9786fb5c..3118d7562 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/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