creating login screen design

README.md

@@ -1,7 +1,7 @@
 # PiGallery2
 [![npm version](https://badge.fury.io/js/pigallery2.svg)](https://badge.fury.io/js/pigallery2)
 [![Build Status](https://travis-ci.org/bpatrik/pigallery2.svg?branch=master)](https://travis-ci.org/bpatrik/pigallery2)
-[![Coverage Status](https://coveralls.io/repos/github/bpatrik/pigallery2/badge.svg?branch=master)](https://coveralls.io/github/bpatrik/pigallery2?branch=master)
+[![Coverage Status](https://coveralls.io/repos/github/bpatrik/PiGallery2/badge.svg?branch=master)](https://coveralls.io/github/bpatrik/PiGallery2?branch=master)
 [![Heroku](https://heroku-badge.herokuapp.com/?app=pigallery2&style=flat)](https://pigallery2.herokuapp.com)
 [![Code Climate](https://codeclimate.com/github/bpatrik/pigallery2/badges/gpa.svg)](https://codeclimate.com/github/bpatrik/pigallery2)
 [![Dependency Status](https://david-dm.org/bpatrik/pigallery2.svg)](https://david-dm.org/bpatrik/pigallery2)

backend/middlewares/user/AuthenticationMWs.ts

@@ -8,7 +8,6 @@ import {Config} from "../../../common/config/private/Config";
 export class AuthenticationMWs {
 
   private static async getSharingUser(req: Request) {
-    console.log(req);
     if (Config.Client.Sharing.enabled === true &&
       Config.Client.Sharing.passwordProtected === false &&
       (!!req.query.sk || !!req.params.sharingKey)) {

common/config/public/ConfigClass.ts

@@ -10,6 +10,7 @@ interface SharingConfig {
 }
 
 interface ClientConfig {
+  applicationTitle: string;
   iconSize: number;
   thumbnailSizes: Array<number>;
   Search: SearchConfig;
@@ -28,6 +29,7 @@ interface ClientConfig {
 export class PublicConfigClass {
 
   public Client: ClientConfig = {
+    applicationTitle: "PiGallery 2",
     thumbnailSizes: [200, 400, 600],
     iconSize: 30,
     Search: {

common/entities/LoginCredential.ts

@@ -1,5 +1,5 @@
 export class LoginCredential {
-  constructor(public username: string = "", public password: string = "") {
+  constructor(public username: string = "", public password: string = "", public rememberMe: boolean = false) {
 
   }
 }

frontend/app/app.module.ts

@@ -36,7 +36,7 @@ import {SlimLoadingBarModule} from "ng2-slim-loading-bar";
 import {GalleryShareComponent} from "./gallery/share/share.gallery.component";
 import {ShareLoginComponent} from "./sharelogin/share-login.component";
 import {ShareService} from "./gallery/share.service";
-
+import "hammerjs";
 
 @Injectable()
 export class GoogleMapsConfig {

frontend/app/frame/frame.component.html

@@ -9,7 +9,7 @@
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#"><img src="assets/icon_inv.png" style="max-height: 26px; display: inline;"/>
-        PiGallery2</a>
+        {{title}}</a>
     </div>
     <div id="navbar" class="collapse navbar-collapse">
       <ul class="nav navbar-nav">

frontend/app/frame/frame.component.ts

@@ -16,10 +16,12 @@ export class FrameComponent {
 
   user: BehaviorSubject<UserDTO>;
   authenticationRequired: boolean = false;
+  public title: string;
 
   constructor(private _authService: AuthenticationService) {
     this.user = this._authService.user;
     this.authenticationRequired = Config.Client.authenticationRequired;
+    this.title = Config.Client.applicationTitle;
   }
 
 

frontend/app/gallery/share.service.ts

@@ -30,7 +30,6 @@ export class ShareService {
         this.sharingKey = this.param || this.queryParam;
         if (this.resolve) {
           this.resolve();
-          console.log("resolving", this.sharingKey);
           this.inited = true;
         }
 

frontend/app/login/login.component.css

@@ -1,3 +1,57 @@
-body {
-    background: #eee;
-}
+.container {
+}
+
+.title h1 {
+  font-size: 80px;
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.title img {
+  height: 80px;
+}
+
+.title {
+  margin-top: 40px;
+  width: 100%;
+  text-align: center;
+}
+
+.card {
+  padding: 15px;
+  max-width: 350px;
+  width: 100% !important;
+  background-color: #F7F7F7;
+  margin: 0 auto;
+  border-radius: 2px;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  height: 295px;
+  margin-top: 0px;
+}
+
+/*Margin by pixel:*/
+@media screen and ( min-height: 600px ) {
+  .card {
+    margin-top: calc((100vh - 120px - 295px) / 2 - 60px)
+  }
+}
+
+.has-margin {
+  margin-bottom: 10px;
+}
+
+.input-group .form-control, .checkbox {
+  padding: 10px;
+  font-size: 16px;
+
+}
+
+.error-message {
+  color: #d9534f;
+}
+
+button {
+  width: 100%;
+  font-size: 18px;
+}

frontend/app/login/login.component.html

@@ -1,16 +1,94 @@
 <div class="container">
-    <div class="col-sm-offset-3  col-sm-6 col-lg-4 col-lg-offset-4">
-    <form class="form-signin"  #LoginForm="ngForm">
-        <h2 class="form-signin-heading">Please sign in</h2>
-        <div *ngIf="loginError">
-            {{loginError}}
+
+  <div class="row title">
+    <h1><img src="assets/icon.png"/>{{title}}</h1>
+  </div>
+
+  <div class="row card">
+    <div class="col-md-12">
+      <h1>Please log in</h1>
+      <form name="form" id="form" class="form-horizontal" #LoginForm="ngForm" (submit)="onLogin()">
+        <div class="error-message">
+          {{loginError}}&nbsp;
         </div>
-        <input type="text" class="form-control" placeholder="Username" autofocus
-               [(ngModel)]="loginCredential.username" name="name" required>
-        <input type="password" class="form-control" placeholder="Password"
-               [(ngModel)]="loginCredential.password" name="password" required>
-        <br/>
-        <button class="btn btn-lg btn-primary btn-block"  [disabled]="!LoginForm.form.valid" (click)="onLogin()">Sign in</button>
-    </form>
+        <div class="input-group has-margin">
+          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
+          <input id="username"
+                 type="text"
+                 class="form-control"
+                 placeholder="Username"
+                 autofocus
+                 [(ngModel)]="loginCredential.username"
+                 name="username" required>
+        </div>
+
+        <div class="input-group">
+          <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
+          <input id="password"
+                 class="form-control"
+                 type="password"
+                 [(ngModel)]="loginCredential.password"
+                 name="password"
+                 placeholder="Password"
+                 required>
+        </div>
+
+        <div class="checkbox">
+          <label><input type="checkbox" name="rememberMe" [(ngModel)]="loginCredential.rememberMe" value="">Remember me</label>
+        </div>
+
+        <div class="form-group">
+          <!-- Button -->
+          <div class="col-sm-12 controls">
+            <button class="btn btn-primary pull-right"
+                    [disabled]="!LoginForm.form.valid"
+                    type="submit"
+                    name="action">Login
+            </button>
+          </div>
+        </div>
+      </form>
+
     </div>
-</div> <!-- /container -->
+  </div>
+</div>
+
+<!--
+<div class="login mat-typography" fxLayoutGap="80px" fxLayoutAlign="start center" fxFlexFill fxLayout="column">
+  <h1><img src="assets/icon.png">PiGallery 2</h1>
+  <form class="form-signin" #LoginForm="ngForm" (submit)="onLogin()" fxLayout="row">
+    <md-card fxFlex="400px">
+      <md-card-header>
+        <md-card-title>Please sign in</md-card-title>
+      </md-card-header>
+      <md-card-content fxFlexFill fxLayoutAlign="center center" fxLayout="column">
+        <div *ngIf="loginError">
+          {{loginError}}
+        </div>
+        <md-input-container>
+          <input fxFlexFill mdInput autofocus [(ngModel)]="loginCredential.username" name="name" required>
+          <md-placeholder>
+            <i class="material-icons app-input-icon">face</i> Username
+          </md-placeholder>
+        </md-input-container>
+        <md-input-container>
+          <input fxFlexFill mdInput type="password" [(ngModel)]="loginCredential.password" name="password" required>
+          <md-placeholder>
+            <i class="material-icons app-input-icon">lock_open</i> Password
+          </md-placeholder>
+        </md-input-container>
+        <div fxLayout="row" fxLayoutAlign="start center">
+          <md-checkbox [(ngModel)]="loginCredential.rememberM">Remember me</md-checkbox>
+        </div>
+      </md-card-content>
+      <md-card-actions fxLayout="row" fxLayoutAlign="end center">
+        <button md-raised-button color="primary"
+                [disabled]="!LoginForm.form.valid"
+                type="submit"
+                name="action">Login
+        </button>
+      </md-card-actions>
+    </md-card>
+  </form>
+</div>
+-->

frontend/app/login/login.component.ts

@@ -3,6 +3,7 @@ import {LoginCredential} from "../../../common/entities/LoginCredential";
 import {AuthenticationService} from "../model/network/authentication.service";
 import {Router} from "@angular/router";
 import {ErrorCodes} from "../../../common/entities/Error";
+import {Config} from "../../../common/config/public/Config";
 
 @Component({
   selector: 'login',
@@ -12,9 +13,11 @@ import {ErrorCodes} from "../../../common/entities/Error";
 export class LoginComponent implements OnInit {
   loginCredential: LoginCredential;
   loginError: any = null;
+  title: string;
 
   constructor(private _authService: AuthenticationService, private _router: Router) {
     this.loginCredential = new LoginCredential();
+    this.title = Config.Client.applicationTitle;
   }
 
   ngOnInit() {
@@ -27,9 +30,9 @@ export class LoginComponent implements OnInit {
     this.loginError = null;
 
     try {
-      await this._authService.login(this.loginCredential);
-
+      console.log(await this._authService.login(this.loginCredential));
     } catch (error) {
+      console.log(error);
       if (error && error.code === ErrorCodes.CREDENTIAL_NOT_FOUND) {
         this.loginError = "Wrong username or password";
       }

frontend/app/model/network/authentication.service.ts

@@ -4,7 +4,6 @@ import {BehaviorSubject} from "rxjs/BehaviorSubject";
 import {UserService} from "./user.service";
 import {LoginCredential} from "../../../../common/entities/LoginCredential";
 import {Cookie} from "ng2-cookies";
-import {ErrorCodes} from "../../../../common/entities/Error";
 import {Config} from "../../../../common/config/public/Config";
 
 declare module ServerInject {
@@ -44,15 +43,9 @@ export class AuthenticationService {
 
 
   public async login(credential: LoginCredential): Promise<UserDTO> {
-    try {
       const user = await this._userService.login(credential);
       this.user.next(user);
       return user;
-    } catch (error) {
-      if (typeof error.code !== "undefined") {
-        console.log(ErrorCodes[error.code] + ", message: ", error.message);
-      }
-    }
   }
 
 

frontend/index.html

@@ -6,11 +6,7 @@
   <title>PiGallery2</title>
   <link rel="shortcut icon" href="assets/icon.png">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
-        crossorigin="anonymous">
-
-
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <script type="text/javascript"  src="config_inject.js"></script>
 </head>
 

frontend/styles.css

@@ -1 +1,11 @@
-/* You can add global styles to this file, and also import other style files */
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+}
+
+* {
+  border-radius: 0 !important;
+}

package.json

@@ -82,6 +82,7 @@
     "mocha": "^3.4.2",
     "ng2-cookies": "^1.0.12",
     "ng2-slim-loading-bar": "^4.0.0",
+    "ngx-bootstrap": "^1.7.1",
     "phantomjs-prebuilt": "^2.1.14",
     "protractor": "^5.1.2",
     "remap-istanbul": "^0.9.5",