Merge branch 'feature/design' into develop

3 files changed, 37 insertions, 28 deletions

diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index bcea0a27a..24807987c 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" [ngClass]="{ 'input-error': formErrors['username'] }"
+      >
+      <div *ngIf="formErrors.username" class="form-error">
+        {{ 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" [ngClass]="{ 'input-error': formErrors['password'] }"
+      >
+      <div *ngIf="formErrors.password" class="form-error">
+        {{ 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..3b4326de4
--- /dev/null
+++ b/client/src/app/login/login.component.scss
@@ -0,0 +1,9 @@
+input:not([type=submit]) {
+  @include peertube-input-text(340px);
+  display: block;
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-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 {