Improve notification settings UI

[github/Chocobozzz/PeerTube.git] / client / src / app / +my-account / my-account-settings / my-account-profile / my-account-profile.component.html

diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index 14e51f57cf65fbc8d871c47821a91d67c495534c..eb2a48e154d9b97aa0dd333a472dc424f88e6343 100644 (file)
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -2,10 +2,21 @@
 
 <form role="form" (ngSubmit)="updateMyProfile()" [formGroup]="form">
 
+  <div class="form-group">
+    <label i18n for="username">Username</label>
+    <input
+      type="text" id="username" class="form-control"
+      formControlName="username" readonly
+    >
+    <div class="text-muted" i18n>
+      People can find you using @{{ user.username }}@{{ instanceHost }}
+    </div>
+  </div>
+
   <div class="form-group">
     <label i18n for="display-name">Display name</label>
     <input
-      type="text" id="display-name"
+      type="text" id="display-name" class="form-control"
       formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
     >
     <div *ngIf="formErrors['display-name']" class="form-error">
@@ -16,7 +27,7 @@
   <div class="form-group">
     <label i18n for="description">Description</label>
     <textarea
-      id="description" formControlName="description"
+      id="description" formControlName="description" class="form-control"
       [ngClass]="{ 'input-error': formErrors['description'] }"
     ></textarea>
     <div *ngIf="formErrors.description" class="form-error">