Skip to content

B
business-java
Commit 5e31a78e authored by prumde's avatar prumde
Browse files
Options

Login Screen changes 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174367 ce508802-f39f-4f6c-b175-0d175dae99d5
parent d35eea1b
Show whitespace changes
Inline Side-by-side
Showing with 102 additions and 57 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.css
View file @ 5e31a78e
......@@ -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
View file @ 5e31a78e
......@@ -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
View file @ 5e31a78e
......@@ -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
View file @ 5e31a78e
<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
View file @ 5e31a78e
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
View file @ 5e31a78e
......@@ -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
View file @ 5e31a78e
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment