Better error messages

diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.html b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html
index c57e705f9b536e036554c02de9bf9d0e20a55418..b0e3cada4390865ccf33fa40ea77a73c046df8f2 100644 (file)
--- a/client/src/app/account/account-settings/account-change-password/account-change-password.component.html
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html
@@ -4,15 +4,15 @@
 
   <label for="new-password">Change password</label>
   <input
-    type="password" class="form-control" id="new-password" placeholder="Old password"
-    formControlName="new-password"
+    type="password" id="new-password" placeholder="New password"
+    formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
   >
-  <div *ngIf="formErrors['new-password']" class="alert alert-danger">
+  <div *ngIf="formErrors['new-password']" class="form-error">
     {{ formErrors['new-password'] }}
   </div>
 
   <input
-    type="password" id="new-confirmed-password" placeholder="New password"
+    type="password" id="new-confirmed-password" placeholder="Confirm new password"
     formControlName="new-confirmed-password"
   >
 

diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
index 593355b70547388002216cd859ce4cc267c4e5a9..75827abbfa2ca01434a449f79f09fb1334576e3e 100644 (file)
--- a/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
@@ -1,9 +1,14 @@
 input[type=password] {
   @include peertube-input-text(340px);
   display: block;
-  margin-bottom: 10px;
+
+  &#new-confirmed-password {
+    margin-top: 15px;
+  }
 }
 
 input[type=submit] {
   @include peertube-button;
+  margin-top: 15px;
 }
+

diff --git a/client/src/app/account/account-settings/account-details/account-details.component.html b/client/src/app/account/account-settings/account-details/account-details.component.html
index c3cf6b629e135c89499b52674b02bf047891c821..bc18b39b4023e6c64f2edb4cb220701b512e7ae6 100644 (file)
--- a/client/src/app/account/account-settings/account-details/account-details.component.html
+++ b/client/src/app/account/account-settings/account-details/account-details.component.html
@@ -10,5 +10,5 @@
     {{ formErrors['displayNSFW'] }}
   </div>
 
-  <input type="submit" value="Update" [disabled]="!form.valid">
+  <input type="submit" value="Save" [disabled]="!form.valid">
 </form>

diff --git a/client/src/app/account/account-settings/account-details/account-details.component.scss b/client/src/app/account/account-settings/account-details/account-details.component.scss
index b1810d4f99fa3a24bdbf8e0f2f0b79758c904fd9..687166d9efb9bfeff53a84ed579c6da169286b43 100644 (file)
--- a/client/src/app/account/account-settings/account-details/account-details.component.scss
+++ b/client/src/app/account/account-settings/account-details/account-details.component.scss
@@ -8,4 +8,5 @@ input[type=submit] {
   @include peertube-button;
 
   display: block;
+  margin-top: 15px;
 }

diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html
index eb0a32fd36bcc8d4dc787d190a93479ee9bae9ca..81bda9477480b36af7e393bb6bc0b0d1eb6cae75 100644 (file)
--- a/client/src/app/account/account-videos/account-videos.component.html
+++ b/client/src/app/account/account-videos/account-videos.component.html
@@ -1,7 +1,9 @@
 <div
   infiniteScroll
   [infiniteScrollDistance]="0.5"
+  [infiniteScrollUpDistance]="1.5"
   (scrolled)="onNearOfBottom()"
+  (scrolledUp)="onNearOfTop()"
 >
   <div class="video" *ngFor="let video of videos">
     <my-video-thumbnail [video]="video"></my-video-thumbnail>

diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss
index b26933d223b678285dfa60a0a65281ca2a7362dd..c31497350a7e0da93deaa046ad805b95ab72dbac 100644 (file)
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -2,8 +2,11 @@
   display: flex;
   height: 130px;
   padding-bottom: 20px;
-  margin-bottom: 20px;
-  border-bottom: 1px solid #C6C6C6;
+
+  &:not(:last-child) {
+    margin-bottom: 20px;
+    border-bottom: 1px solid #C6C6C6;
+  }
 
   my-video-thumbnail {
     margin-right: 10px;

diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 82b70c98c81bfc209c5de1983f44829b0096a153..24807987c63f25b59de67002bdeac7db7f574283 100644 (file)
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -10,9 +10,9 @@
       <label for="username">Username</label>
       <input
         type="text" id="username" placeholder="Username" required
-        formControlName="username"
+        formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
       >
-      <div *ngIf="formErrors.username" class="alert alert-danger">
+      <div *ngIf="formErrors.username" class="form-error">
         {{ formErrors.username }}
       </div>
     </div>
@@ -21,9 +21,9 @@
       <label for="password">Password</label>
       <input
         type="password" name="password" id="password" placeholder="Password" required
-        formControlName="password"
+        formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
       >
-      <div *ngIf="formErrors.password" class="alert alert-danger">
+      <div *ngIf="formErrors.password" class="form-error">
         {{ formErrors.password }}
       </div>
     </div>

diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 84ca5cbe4081cb367a8db7692fcf6121cfb108b1..ee1ed2cb27fd28d425a8ce79ea7b897a70d63866 100644 (file)
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -32,6 +32,7 @@ export abstract class AbstractVideoList implements OnInit {
     // Subscribe to route changes
     const routeParams = this.route.snapshot.params
     this.loadRouteParams(routeParams)
+
     if (this.loadOnInit === true) this.loadMoreVideos('after')
   }
 
@@ -60,6 +61,13 @@ export abstract class AbstractVideoList implements OnInit {
 
     observable.subscribe(
       ({ videos, totalVideos }) => {
+        // Paging is too high, return to the first one
+        if (totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
+          this.pagination.currentPage = 1
+          this.setNewRouteParams()
+          return this.reloadVideos()
+        }
+
         this.loadedPages[this.pagination.currentPage] = true
         this.pagination.totalItems = totalVideos
 

diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html
index 8a30ab512daaf327b38421af8211d2c06d36bb12..eb36b29f6c8022e7c038c589f177a0fc38590688 100644 (file)
--- a/client/src/app/signup/signup.component.html
+++ b/client/src/app/signup/signup.component.html
@@ -11,9 +11,9 @@
       <label for="username">Username</label>
       <input
         type="text" class="form-control" id="username" placeholder="Username"
-        formControlName="username"
+        formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
       >
-      <div *ngIf="formErrors.username" class="alert alert-danger">
+      <div *ngIf="formErrors.username" class="form-error">
         {{ formErrors.username }}
       </div>
     </div>
@@ -22,9 +22,9 @@
       <label for="email">Email</label>
       <input
         type="text" class="form-control" id="email" placeholder="Email"
-        formControlName="email"
+        formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
       >
-      <div *ngIf="formErrors.email" class="alert alert-danger">
+      <div *ngIf="formErrors.email" class="form-error">
         {{ formErrors.email }}
       </div>
     </div>
@@ -33,9 +33,9 @@
       <label for="password">Password</label>
       <input
         type="password" class="form-control" id="password" placeholder="Password"
-        formControlName="password"
+        formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
       >
-      <div *ngIf="formErrors.password" class="alert alert-danger">
+      <div *ngIf="formErrors.password" class="form-error">
         {{ formErrors.password }}
       </div>
     </div>

diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index 0d655e85c17c18fbcf67c6328c2fc1cd19022eb3..81dafdc196145f9bde514f55d1d01cbe7dee2e7f 100644 (file)
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -7,6 +7,7 @@ $orange-color: #F1680D;
 
 $black-background: #000;
 $grey-background: #f6f2f2;
+$red-error: #FF0000;
 
 $expanded-horizontal-margins: 150px;
 $not-expanded-horizontal-margins: 30px;

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 4c5c0202c4a6250647d3254dc497ec74a0164500..b860e1bf2b4ede5f560dd51fea6968a385c6c354 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -25,6 +25,16 @@ label {
   font-size: 15px;
 }
 
+.form-error {
+  display: block;
+  color: $red-error;
+  margin-top: 5px;
+}
+
+.input-error {
+  border-color: $red-error !important;
+}
+
 .glyphicon-black {
   color: black;
 }