From d235f6b0d1054a2a3451dacade927caefce8f30c Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Tue, 5 Dec 2017 16:48:26 +0100
Subject: [PATCH] Design signup and login pages

---
 client/config/webpack.common.js               |  1 +
 .../account-change-password.component.html    |  2 +
 client/src/app/login/login.component.html     | 53 +++++++++----------
 client/src/app/login/login.component.scss     |  8 +++
 client/src/app/login/login.component.ts       |  3 +-
 client/src/app/shared/users/user.model.ts     |  2 +-
 client/src/app/signup/signup.component.html   | 10 ++--
 client/src/app/signup/signup.component.scss   |  8 +++
 client/src/app/signup/signup.component.ts     |  3 +-
 client/src/sass/application.scss              |  9 ++--
 10 files changed, 58 insertions(+), 41 deletions(-)
 create mode 100644 client/src/app/login/login.component.scss
 create mode 100644 client/src/app/signup/signup.component.scss

diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index c37516271..f387b44f9 100644
--- a/client/config/webpack.common.js
+++ b/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') ]
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 bfb55218f..c57e705f9 100644
--- 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
@@ -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"
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index bcea0a27a..82b70c98c 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -1,34 +1,33 @@
-<div class="row">
-  <div class="content-padding">
-
-    <h3>Login</h3>
+<div class="margin-content">
+  <div class="title-page title-page-single">
+    Login
+  </div>
 
-    <div *ngIf="error" class="alert alert-danger">{{ error }}</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" class="form-control" id="username" placeholder="Username" required
-          formControlName="username"
-        >
-        <div *ngIf="formErrors.username" class="alert alert-danger">
-          {{ formErrors.username }}
-        </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" class="form-control" name="password" id="password" placeholder="Password" required
-          formControlName="password"
-        >
-        <div *ngIf="formErrors.password" class="alert alert-danger">
-          {{ formErrors.password }}
-        </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" class="btn btn-default" [disabled]="!form.valid">
-    </form>
-  </div>
+    <input type="submit" value="Login" [disabled]="!form.valid">
+  </form>
 </div>
diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss
new file mode 100644
index 000000000..fd6981c59
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 32dc9e36f..dfede5924 100644
--- a/client/src/app/login/login.component.ts
+++ b/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 {
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 9364ae721..b1c323114 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/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'
   }
 }
diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html
index b8b7826eb..1e9f7f949 100644
--- a/client/src/app/signup/signup.component.html
+++ b/client/src/app/signup/signup.component.html
@@ -1,7 +1,8 @@
-<div class="row">
-  <div class="content-padding">
+<div class="margin-content">
 
-  <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>
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss
new file mode 100644
index 000000000..fd6981c59
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts
index 28e1ed0a8..13390a32a 100644
--- a/client/src/app/signup/signup.component.ts
+++ b/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
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 5e401f93b..4c5c0202c 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -20,12 +20,9 @@ input.readonly {
   background-color: #fff !important;
 }
 
-.form-control, .btn {
-  border-radius: 0;
-}
-
-.dropdown-menu {
-  border-radius: 0;
+label {
+  font-weight: $font-bold;
+  font-size: 15px;
 }
 
 .glyphicon-black {
-- 
2.41.0