unify inputs requiring buttons like password inputs

2 files changed, 15 insertions, 9 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index ce176d682..29823bdec 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -12,9 +12,8 @@
 <form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null">
 
   <div class="form-group">
-    <label i18n for="new-email">New email</label>
     <input
-      type="email" id="new-email" i18n-placeholder placeholder="Your new email" class="form-control"
+      type="email" id="new-email" i18n-placeholder placeholder="New email" class="form-control"
       formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
     >
     <div *ngIf="formErrors['new-email']" class="form-error">
@@ -23,11 +22,11 @@
   </div>
 
   <div class="form-group">
-    <label i18n for="new-email">Your current password</label>
-    <input
-      type="password" id="password" i18n-placeholder placeholder="Your password" autocomplete="off"
-      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" class="form-control"
-    >
+    <my-input-toggle-hidden formControlName="password"
+                            id="password"
+                            i18n-placeholder placeholder="Current password"
+                            [ngClass]="{ 'input-error': formErrors['password'] }"
+                            autocomplete="current-password"></my-input-toggle-hidden>
     <div *ngIf="formErrors['password']" class="form-error">
       {{ formErrors['password'] }}
     </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
index aec709ea0..a8b9be0d1 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -6,7 +6,11 @@ label {
   font-size: 100%;
 }
 
-input[type=password],
+my-input-toggle-hidden {
+  width: 340px;
+  display: block;
+}
+
 input[type=email] {
   @include peertube-input-text(340px);
 
@@ -20,10 +24,13 @@ input[type=submit] {
 
 .current-email,
 .pending-email {
-  font-size: 16px;
   margin-bottom: 15px;
 
   .email {
     font-weight: $font-semibold;
   }
 }
+
+.form-group {
+  width: max-content;
+}