Login Screen changes

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174367 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.css

@@ -175,8 +175,10 @@
 	height: 100%;
 }
 .overlayPanel {
-    width: 400px;
-    height: 509px;
+/*     width: 400px; */
+/*     height: 509px; */
+    width : 375px;
+    height : 500px;
     position: fixed;
     top: calc( 50% - 500px / 2 );
     left: calc( 50% - 375px / 2 );
@@ -248,6 +250,7 @@
 	border-radius: 100%;
 	transition: 0.6s;
 	-webkit-transition: 0.6s;
+	z-index: 4;
 }
 .hide-button:hover {
 	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.html

@@ -4,7 +4,7 @@
 <div #bgGlass class="ecm-bgGlass"></div>
 <div #overlayPanel class="overlayPanel" >
 	<span (click)="hideOverlayPanel();" class="hide-button"></span>
-	<ecm-user-option *ngIf="sideOption=='USER_OPT'" (closePanel)="hideOverlayPanel(); createUserData();"  ></ecm-user-option>
+	<ecm-signin *ngIf="sideOption=='USER_OPT'" (closePanel)="hideOverlayPanel(); createUserData();" ></ecm-signin>
 	<div *ngIf="sideOption=='CART_OPT'" style="margin: 5rem;" > 
 		Show Cart option will be display here
 		<button md-raised-button class="button medium-btn">Checkout</button>

ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.component.css

@@ -22,7 +22,7 @@ h6
 	position: relative;
 	left: calc( ( 100% / 2 ) - 100px );
 	padding: 50px;
-	padding-top: 75px;
+	padding-top: 60px;
 	margin: 0;
 	padding-bottom: 1px;
 }
@@ -30,11 +30,13 @@ h6
 .signin-form
 {
     position: relative;
-    left: calc( ( 100% / 2 ) - 200px );
+/*     left: calc( ( 100% / 2 ) - 200px ); */
+	left: calc( ( 100% / 2 ) - 187.5px );
     margin: 0;
-    width: 400px;
-    padding: 20px 40px 0 40px;
-    color: rgb(199, 21, 133);
+/*     width: 400px; */
+	width: 375px;
+    padding: 0 40px 0 40px;
+/*     color: rgb(199, 21, 133); */
 /*     top: -110px; */
 }
 .signin-form-adj
@@ -48,16 +50,23 @@ h6
 
 @media screen and (max-width:30em) {
 
+	h4 {
+		top: -35px;
+    	position: relative;
+	}
+	
 	.signin-form {
 		/*
 		bottom: 0px;
 		top:0px;
-		*/
 		position: absolute;
    		bottom: 5%;
+		*/
+   		padding-bottom: 40px;
 	}
 	
 	.logo-adj {
+		padding: 25px;	
 		padding-top: 100px;	
 	}
 
@@ -77,12 +86,12 @@ h6
 .signin-button,
 .register-button
 {
-    width: 320px;
+/*     width: 320px; */
+	width: 295px;
     height: 50px;
     font-size: 15px;
     line-height: 15px;
     text-align: center;
-    background: transparent;
     border-radius: 2px;
     position: relative;
     padding: 0;
@@ -93,32 +102,47 @@ h6
 	background: mediumvioletred;
 	color: #fff;
 }
-.signin-button:hover,
-.register-button:hover
+.signin-button[disabled]
 {
-	background: mediumvioletred;
+	background: #e0e0e0;
     color: #fff;
 }
+.register-button
+{
+    background: transparent;
+    color: mediumvioletred;
+}
 
 .forgot-password{
-    top: 0;
-    right: 0;
+    color: mediumvioletred;
     display: inline-block;
     font-weight: normal;
-    font-size: 15px;
+    font-size: 12px;
+    line-height: 15px;
     cursor: pointer;
     color: mediumvioletred;
+    position: relative;
+    margin: -10px 0 10px 0;
+    padding: 5px;
+    float: right;
+    bottom: 0;
 }
 
-.username-input,
-.password-input {
-    width: 320px;
+.username-input-container,
+.password-input-container {
+/*     width: 320px; */
+	width: 295px;
     font-size: 15px;
     line-height: 15px;
     margin: 0 0 10px 0;
     padding: 0;
 }
 
+.username-input,
+.password-input {
+	height:20px;
+}
+
 .signin-progress-bar {
  
 }

ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.component.html

 <div class="row">
-    <div class="small-12 medium-5 large-4 medium-centered column signin-form-adj" >
+    <div class="small-12 medium-5 large-4 medium-centered column">
+	    <div class="signin-form-adj" >
 			<img class="img-logo logo-adj" />
 	    </div>
-    <h4>Login to continue</h4>   
-    <div class="small-12 medium-5 large-4 medium-centered column">
 		<div class="signin-form">
+		    <h4>Login to continue</h4>   
 		    <form #signin="ngForm"  (ngSubmit)="login();" novalidate autocomplete="off">
-				<md-input-container class="username-input" [hideRequiredMarker] = "true">
-			 	     <input mdInput [style.height]="'20px'" placeholder="User Name" required name="username" [(ngModel)]="_username" #username="ngModel"/>
+				<md-input-container class="username-input-container" [hideRequiredMarker] = "true">
+			 	     <input mdInput class="username-input" placeholder="User Name" required name="username" [(ngModel)]="_username" #username="ngModel" (keydown)=" loginErrorMsg = null;" />
 				     <md-error *ngIf="username.errors && username.dirty" class="">User Name required</md-error> 
 	    		</md-input-container>
-	    		<md-input-container class="password-input" [hideRequiredMarker] = "true">
-				     <input mdInput [style.height]="'20px'" placeholder="Password" required name="password" [(ngModel)]="_password" #password="ngModel"
+	    		<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
+				     <input mdInput class="username-input" placeholder="Password" required name="password" [(ngModel)]="_password" #password="ngModel" (keydown)=" loginErrorMsg = null;"
 				     	[type]="showPass ? 'text' : 'password'"  /> 
-				     <a mdSuffix class="forgot-password" (click)="forgot();">Forgot</a>
 				     <md-error *ngIf="password.errors && password.dirty" class="">Password required</md-error> 
+				     <md-error *ngIf="loginErrorMsg">{{loginErrorMsg}}</md-error> 
 					<!--
 					    <button md-icon-button mdSuffix (click)= "showPass= !showPass;" >
 						<md-icon class="material-icons">mode_edit</md-icon> 
 					    </button> 
 					-->
 	    		</md-input-container>
-				<button type="submit" md-button class="signin-button" [disabled]="!signin.form.valid">Login</button>
-				<button md-button class="register-button" (click)="register();">Register</button>
-				
+			    <a md-button class="forgot-password" (click)="forgot();">Forgot Password? </a>
+				<button md-button class="signin-button" type="submit"  [disabled]="!signin.form.valid">Login</button>
+	    	</form>
+			<button md-button class="register-button" (click)="register();">Don't have an account ? Register here</button>
 			 <!-- 
 			 <md-progress-spinner  
 			 	  class="example-margin" 
@@ -39,7 +40,7 @@
 		          [value]="value"
 		          [bufferValue]="bufferValue">
 		     </md-progress-bar>
-		    </form>
+
         </div>
     </div>
 </div>

ecm/Angular/ProteusECM/trunk/src/app/ecm-signin/ecm-signin.component.ts

-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { FormGroupDirective, NgControl, NgForm, NgModel } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
@@ -16,12 +16,15 @@ declare var encPwd: any;
 })
 export class EcmSigninComponent implements OnInit {
 
+    @ViewChild('signin') signinFrom: NgForm;
+    @ViewChild('password') passwordRef: NgModel;
     userData : any;
     showPass : boolean = false;
     _username : string;
     _password : string;
     loginPending: boolean = false;
-    @Output() parent = new EventEmitter();
+    loginErrorMsg: string;
+    @Output() closePanel = new EventEmitter();
     
     constructor(public signinService: ECMSigninService) { }
 
@@ -61,6 +64,7 @@ export class EcmSigninComponent implements OnInit {
                 console.log( 'comp results[' + result.Response.results + ']status[' + result.Response.status + ']' );
                 console.log( 'comp result.results.indexOf [' + result.Response.results.indexOf('{') + ']' );
                 this.loginPending = false;
+                this.loginErrorMsg = null;
                 if( result.Response.status == 'success' )
                 {
                     if( result.Response.results && result.Response.results.indexOf('{') != -1 )
@@ -70,11 +74,18 @@ export class EcmSigninComponent implements OnInit {
                         console.log( 'comp Object.keys(this.userData) [' + Object.keys(this.userData) + ']' );
                         localStorage.setItem('userInfo', JSON.stringify( this.userData ) );
                     }
-                    this.parent.emit();
+                    this.closePanel.emit();
                 }
                 else if( result.Response.status == 'error' )
                 {
+                    this.loginErrorMsg = result.Response.results;
                     localStorage.removeItem('userInfo');
+                    this.signinFrom.resetForm();
+                    console.log( "passwordRef" + Object.keys( this.passwordRef.control.errors ) + "]"); 
+                    if( this.passwordRef.control ) 
+                    {
+                        this.passwordRef.control.markAsTouched();
+                    }
                 }
             },
             error => {

ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.css

@@ -28,3 +28,10 @@
     color: #fff;
 }
     
+@media screen and (max-width:30em) {
+    .user-option {
+	    height: 100%;
+	    position: relative;
+	    overflow: auto;
+    }
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-user-option/ecm-user-option.component.html

-<div>
-	 <ecm-signin *ngIf="!userData" (parent)="closePanel.emit();" ></ecm-signin>
+<div class="user-option">
 	 <div *ngIf="userData" class="content">
 		 <div class="button-panel">
 		 	<button md-button class="logout-button" (click)="logout(); closePanel.emit();">Logout</button>