fix forgotten/reset password UI (#3351)

Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <par@rigelk.eu>

2 files changed, 34 insertions, 1 deletions

diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 599b203ae..7ceae9311 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -91,6 +91,10 @@
       We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system.
     </div>
 
+    <div *ngIf="!isEmailDisabled()" class="forgot-password-instructions" i18n>
+      Enter your email address and we will send you a link to reset your password.
+    </div>
+
     <div class="form-group" [hidden]="isEmailDisabled()">
       <label i18n for="forgot-password-email">Email</label>
       <input
@@ -107,7 +111,7 @@
     >
 
     <input
-      type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"
+      type="submit" i18n-value="Password reset button" value="Reset" class="action-button-submit"
       (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
     >
   </div>
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index fde6cc15e..9ba09e9e4 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -17,6 +17,35 @@ input[type=submit] {
   @include orange-button;
 }
 
+.modal-body {
+  text-align: left;
+
+  .forgot-password-instructions {
+    margin-bottom: 20px;
+  }
+}
+
+.modal-footer.inputs {
+  .action-button.action-button-cancel {
+    width: auto !important;
+    display: inline-block;
+  }
+}
+
+@media screen and (max-width: #{map-get($container-max-widths, sm)}) {
+  .modal-body {
+    #forgot-password-email {
+      width: 100%;
+    }
+  }
+
+  .modal-footer.inputs {
+    .action-button.action-button-cancel {
+      display: none;
+    }
+  }
+}
+
 .create-an-account, .forgot-password-button {
   color: pvar(--mainForegroundColor);
   cursor: pointer;