Better error messages

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"
+    type="password" id="new-password" placeholder="New password"
-    formControlName="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"
   >
 

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;
 }
+

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>

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;
 }

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>

client/src/app/account/account-videos/account-videos.component.scss

@@ -2,8 +2,11 @@
   display: flex;
   height: 130px;
   padding-bottom: 20px;
+
+  &:not(:last-child) {
     margin-bottom: 20px;
     border-bottom: 1px solid #C6C6C6;
+  }
 
   my-video-thumbnail {
     margin-right: 10px;

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>

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
 

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>

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;

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;
 }