Design signup and login pages

diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index c37516271ff007b0de264ac62646d388847524c8..f387b44f9727f2d489d75f18ac135915c6c0cc5f 100644 (file)
--- 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 bfb55218fab34084fa45b915521fdc130feabb21..c57e705f9b536e036554c02de9bf9d0e20a55418 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
@@ -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 bcea0a27a99415d5d0b67c3283af8ec9e5cfa3f4..82b70c98c81bfc209c5de1983f44829b0096a153 100644 (file)
--- 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 (file)
index 0000000..fd6981c
--- /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 32dc9e36fed6769cef52db6006906e0ac0079981..dfede592478046d01872248491f53d74cd28de5f 100644 (file)
--- 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 9364ae721bfb202ac9bc2c391fa7e5d1b42acadc..b1c323114bf8b55fdc48f449ccb6f0a71f3466fb 100644 (file)
--- 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 b8b7826eb54a9b8402f7676615858b0ccf424da0..1e9f7f949134520b9f191d75ff4e6d3ed38f298c 100644 (file)
--- 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 (file)
index 0000000..fd6981c
--- /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 28e1ed0a86762b60c9cb5289706c8dfc4b641dbe..13390a32afc8d25eff5e764bd9d1474ee4a04188 100644 (file)
--- 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 5e401f93b204fe1af3860b4b73f1425c6e561487..4c5c0202c4a6250647d3254dc497ec74a0164500 100644 (file)
--- 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 {