Design signup and login pages

client/config/webpack.common.js

@@ -302,6 +302,7 @@ module.exports = function (options) {
       */
       new LoaderOptionsPlugin({
         options: {
+          context: '',
           sassLoader: {
             precision: 10,
             includePaths: [ helpers.root('src/sass') ]

client/src/app/account/account-settings/account-change-password/account-change-password.component.html

@@ -1,6 +1,8 @@
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
 <form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
+
+  <label for="new-password">Change password</label>
   <input
     type="password" class="form-control" id="new-password" placeholder="Old password"
     formControlName="new-password"

client/src/app/login/login.component.html

@@ -1,34 +1,33 @@
-<div class="row">
+<div class="margin-content">
-  <div class="content-padding">
+  <div class="title-page title-page-single">
-
+    Login
-    <h3>Login</h3>
-
-    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-
-    <form role="form" (ngSubmit)="login()" [formGroup]="form">
-      <div class="form-group">
-        <label for="username">Username</label>
-        <input
-          type="text" class="form-control" id="username" placeholder="Username" required
-          formControlName="username"
-        >
-        <div *ngIf="formErrors.username" class="alert alert-danger">
-          {{ formErrors.username }}
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="password">Password</label>
-        <input
-          type="password" class="form-control" name="password" id="password" placeholder="Password" required
-          formControlName="password"
-        >
-        <div *ngIf="formErrors.password" class="alert alert-danger">
-          {{ formErrors.password }}
-        </div>
-      </div>
-
-      <input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid">
-    </form>
   </div>
+
+  <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+  <form role="form" (ngSubmit)="login()" [formGroup]="form">
+    <div class="form-group">
+      <label for="username">Username</label>
+      <input
+        type="text" id="username" placeholder="Username" required
+        formControlName="username"
+      >
+      <div *ngIf="formErrors.username" class="alert alert-danger">
+        {{ formErrors.username }}
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="password">Password</label>
+      <input
+        type="password" name="password" id="password" placeholder="Password" required
+        formControlName="password"
+      >
+      <div *ngIf="formErrors.password" class="alert alert-danger">
+        {{ formErrors.password }}
+      </div>
+    </div>
+
+    <input type="submit" value="Login" [disabled]="!form.valid">
+  </form>
 </div>

client/src/app/login/login.component.scss

@@ -0,0 +1,8 @@
+input:not([type=submit]) {
+  @include peertube-input-text(340px);
+  display: block;
+}
+
+input[type=submit] {
+  @include peertube-button;
+}

client/src/app/login/login.component.ts

@@ -7,7 +7,8 @@ import { FormReactive } from '../shared'
 
 @Component({
   selector: 'my-login',
-  templateUrl: './login.component.html'
+  templateUrl: './login.component.html',
+  styleUrls: [ './login.component.scss' ]
 })
 
 export class LoginComponent extends FormReactive implements OnInit {

client/src/app/shared/users/user.model.ts

@@ -54,6 +54,6 @@ export class User implements UserServerModel {
   getAvatarPath () {
     if (this.account && this.account.avatar) return this.account.avatar.path
 
-    return '/client/assets/images/default-avatar.png'
+    return API_URL + '/client/assets/images/default-avatar.png'
   }
 }

client/src/app/signup/signup.component.html

@@ -1,7 +1,8 @@
-<div class="row">
+<div class="margin-content">
-  <div class="content-padding">
 
-  <h3>Signup</h3>
+  <div class="title-page title-page-single">
+    Signup
+  </div>
 
   <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
@@ -39,8 +40,7 @@
       </div>
     </div>
 
-    <input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid">
+    <input type="submit" value="Signup" [disabled]="!form.valid">
   </form>
 
-  </div>
 </div>

client/src/app/signup/signup.component.scss

@@ -0,0 +1,8 @@
+input:not([type=submit]) {
+  @include peertube-input-text(340px);
+  display: block;
+}
+
+input[type=submit] {
+  @include peertube-button;
+}

client/src/app/signup/signup.component.ts

@@ -16,7 +16,8 @@ import { UserCreate } from '../../../../shared'
 
 @Component({
   selector: 'my-signup',
-  templateUrl: './signup.component.html'
+  templateUrl: './signup.component.html',
+  styleUrls: [ './signup.component.scss' ]
 })
 export class SignupComponent extends FormReactive implements OnInit {
   error: string = null

client/src/sass/application.scss

@@ -20,12 +20,9 @@ input.readonly {
   background-color: #fff !important;
 }
 
-.form-control, .btn {
+label {
-  border-radius: 0;
+  font-weight: $font-bold;
-}
+  font-size: 15px;
-
-.dropdown-menu {
-  border-radius: 0;
 }
 
 .glyphicon-black {