Merge pull request #9 from lordvkrum/restoring-backend-connection

re styling login
mayel · Feb 28, 2017 · 86097f0 · 86097f0
2 parents 72369e8 + f5fc71b
commit 86097f0
Show file tree

Hide file tree

Showing 19 changed files with 218 additions and 119 deletions.
diff --git a/src/app/app.html b/src/app/app.html
@@ -16,5 +16,4 @@ <h2 class="ui header">Menu</h2>
   </ion-content>
 </ion-menu>
 
-<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
-<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
+<ion-nav [root]="rootPage" #content></ion-nav>
diff --git a/src/app/app.scss b/src/app/app.scss
@@ -18,41 +18,47 @@
 html {
 	font-size: 1em;
 }
-
 ion-header {
 	text-align: center;
+
+	ion-navbar.toolbar {
+		min-height: 35px;
+		height: 35px;
+	}
 	.toolbar-background {
-		background-color: #21BA45;
+		background-color: rgba(0, 0, 0, 0.2);
 	}
-	.ui.header,
-	button[menutoggle],
-	button[ion-button] span,
-	button[ion-button] ion-icon {
+	.toolbar-title {
+		color: white;
+		font-size: 20px;
+	}
+}
+ion-content.content {
+	background: #00b5ad;
+}
+ion-header {
+	.ui.header, button[menutoggle], button[ion-button] span, button[ion-button] ion-icon {
 		color: white;
 	}
 }
-
 ion-menu {
 	.ui.header {
 		color: white;
 	}
 }
-
 .ui.card {
 	width: 100%;
-	&>.content{
+
+	&>.content {
 		.author {
 			text-align: right;
 			padding-top: 10px;
 		}
 	}
 }
-
-.ui.form,
-.ui.button {
+.ui.form, .ui.button {
 	font-size: 100%;
 }
-
 .ui.button.add-new {
 	background-color: #21BA45;
 	color: white;
@@ -62,7 +68,6 @@ ion-menu {
 	right: 15px;
 	bottom: 15px;
 }
-
 .ui.dropdown.button {
 	text-align: center;
 }
diff --git a/src/app/app.settings.ts b/src/app/app.settings.ts
@@ -3,8 +3,7 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class AppSettings {
 	public get SERVER_URL(): any {
-		// return 'http://hamlets.communityforge.net/commex';
-		return 'http://northwind.servicestack.net/customers.json';
+		return 'http://hamlets.communityforge.net/commex';
 	}
 
 	public get URL(): any {

diff --git a/src/assets/images/ces_logo.png b/src/assets/images/ces_logo.png
diff --git a/src/components/fieldBuilder/fieldBuilder.html b/src/components/fieldBuilder/fieldBuilder.html
@@ -19,6 +19,15 @@
 		</div>
 	</div>
 
+	<div *ngSwitchCase="'select'" class="ui search selection dropdown" [class.multiple]="field.multiple" [class.normal]="field.multiple">
+		<input type="hidden" [formControlName]="field.name" [required]="field.required" [attr.data-field]="field.name">
+		<i class="dropdown icon"></i>
+		<div class="default text">{{ field.placeholder || '' }}</div>
+		<div class="menu">
+			<div class="item" [attr.data-value]="option.name" *ngFor="let option of field.options | keys">{{ option }}</div>
+		</div>
+	</div>
+
 	<div *ngSwitchCase="'member'" class="ui search normal selection dropdown">
 		<input type="hidden" [formControlName]="field.name" [required]="field.required" [attr.data-field]="field.name">
 		<i class="dropdown icon"></i>

diff --git a/src/components/fieldBuilder/fieldBuilder.ts b/src/components/fieldBuilder/fieldBuilder.ts
@@ -117,6 +117,15 @@ export class FieldBuilderComponent implements OnInit, AfterViewInit {
 					}
 				});
 				break;
+			case 'select':
+				$field.parents('.ui.dropdown').dropdown({
+					onChange: (value) => {
+						let fieldValue = {};
+						fieldValue[this.field.name] = value;
+						this.fieldForm.setValue(fieldValue);
+					}
+				});
+				break;
 			case 'member':
 				this.autocompleteService = this.fieldTypes[this.field.type].autocomplete;
 				this.autocompleteSearch();

diff --git a/src/pages/login/login.html b/src/pages/login/login.html
@@ -1,30 +1,53 @@
 <ion-header>
   <ion-navbar>
-    <h2 class="ui header">{{sitename}}</h2>
+  	<ion-title>Welcome</ion-title>
   </ion-navbar>
 </ion-header>
-
-<ion-content padding>
-	<form [formGroup]="loginForm" class="ui form">
-		<div class="field">
-	    <label>Username</label>
-	    <input type="text" required formControlName="username">
-		  <div *ngIf="formErrors.username" class="ui pointing red basic label">
-	      {{ formErrors.username }}
-	    </div>
-	  </div>
-	  <div class="field">
-	    <label>Password</label>
-	    <input type="password" required formControlName="password">
-		  <div *ngIf="formErrors.password" class="ui pointing red basic label">
-	      {{ formErrors.password }}
-	    </div>
-	  </div>
-	  <div class="field">
-	  	<button class="ui green fluid button" [disabled]="!loginForm.valid" (click)="login()">Sign In</button>
-	  </div>
-	  <div class="field">
-	  	<button class="ui fluid button" (click)="register()">Register</button>
-	  </div>
+<ion-content scroll="false">
+	<ion-slides>
+	  <ion-slide>
+			<div class="image-wrapper">
+				<div class="image">
+					<img alt="logo" src="assets/images/ces_logo.png">
+					<h1 class="logo-title">Community</h1>
+					<h1 class="logo-title">Exchange</h1>
+				</div>
+			</div>
+	  </ion-slide>
+	</ion-slides>
+	<form [formGroup]="loginForm">
+		<ion-list>
+		  <ion-item>
+		    <ion-label>
+		   		<ion-icon ios="ios-person" md="md-person"></ion-icon>
+		   	</ion-label>
+		    <ion-input type="text" placeholder="Username" required formControlName="username"></ion-input>
+		  </ion-item>
+		  <ion-item *ngIf="formErrors.username">
+			  <div>
+		      {{ formErrors.username }}
+		    </div>
+		  </ion-item>
+		  <ion-item>
+		    <ion-label>
+		    	<ion-icon ios="ios-lock" md="md-lock"></ion-icon>
+		   	</ion-label>
+		    <ion-input type="password" placeholder="Password" required formControlName="password"></ion-input>
+		  </ion-item>
+		  <ion-item *ngIf="formErrors.password">
+			  <div>
+		      {{ formErrors.password }}
+		    </div>
+		  </ion-item>
+		  <ion-item>
+			  <ion-label>Remember me</ion-label>
+			  <ion-checkbox checked="true" formControlName="rememberMe"></ion-checkbox>
+			</ion-item>
+		</ion-list>
+		<button ion-button full [disabled]="!loginForm.valid" (click)="doLogin()">Sign in</button>
+  	<p>This is the mobile site</p>
+  	<p>
+  		<a href="#" (click)="goToFullSite()">Go to full site</a>
+  	</p>
 	</form>
 </ion-content>
diff --git a/src/pages/login/login.scss b/src/pages/login/login.scss
@@ -1,3 +1,98 @@
 page-login {
-
+	height: calc(100%);
+	ion-slides {
+		height: 40%;
+
+		.image-wrapper {
+			height: 50%;
+			display: table;
+			width: 100%;
+
+			.image {
+				display: table-cell;
+				vertical-align: middle;
+
+				img {
+					max-height: 120px;
+				}
+			}
+		}
+		.logo-title {
+			margin: 0;
+			text-transform: uppercase;
+			color: #ffffff;
+			font-family: sans-serif;
+			font-size: 40px;
+		}
+		.logo-title:last-child {
+			color: #2185d0;
+		}
+	}
+	form {
+		height: 60%;
+		background: #ffffff;
+		padding: 20px 30px 0;
+
+		ion-list.list {
+			margin-bottom: 0;
+
+			ion-item.item.item-input {
+				padding: 0;
+				margin-bottom: 20px;
+				background: #fff;
+				color: rgba(0, 0, 0, .87);
+				border-radius: 5px;
+				font-size: 18px;
+				min-height: 55px;
+				height: 55px;
+				border: 1px solid rgba(34, 36, 38, .15) !important;
+				box-shadow: none !important;
+
+				ion-label.label {
+					margin: 0 10px 0 0;
+					padding: 13px 20px;
+					background: #F0F0F0;
+					border-right: 1px solid rgba(34, 36, 38, 0.15);
+
+					ion-icon.icon {
+						width: 15px;
+					}
+				}
+			}
+			ion-item.item.item-checkbox {
+				padding: 0;
+				margin: 0 auto;
+				margin-bottom: 20px;
+				background: #fff;
+				color: rgba(0, 0, 0, .87);
+				font-size: 15px;
+				min-height: 25px;
+				height: 25px;
+				text-align: center;
+				width: 150px;
+				border: none !important;
+
+				ion-checkbox.checkbox {
+					margin: 0;
+				}
+			}
+		}
+		button.button.button-full {
+			border-radius: 5px;
+			background: #2185d0;
+			height: 50px;
+			font-size: 20px;
+			margin-bottom: 20px;
+		}
+		p, a {
+			color: rgba(0, 0, 0, .87);
+		}
+		p {
+			width: 100%;
+			text-align: center;
+			font-size: 15px;
+			line-height: 20px;
+			margin: 0;
+		}
+	}
 }
diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts
@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { NavController, MenuController } from 'ionic-angular';
+import { NavController } from 'ionic-angular';
 import { AuthService } from '../../services/AuthService';
-import { ConfigService } from '../../services/ConfigService';
 import { AlertService } from '../../services/AlertService';
 import { HomePage } from '../home/home';
 
@@ -12,42 +11,40 @@ import { HomePage } from '../home/home';
 })
 export class LoginPage implements OnInit {
 	loginForm: FormGroup;
-	private sitename: string;
 	private username: string;
 	private password: string;
+	private rememberMe: boolean;
 
 	constructor(private navCtrl: NavController,
-		private menuCtrl: MenuController,
 		private formBuilder: FormBuilder,
 		private authService: AuthService,
-		private configService: ConfigService,
 		private alertService: AlertService) {
-		this.menuCtrl.enable(false, 'app-menu');
-		this.configService.appConfig.subscribe(
-			config => {
-				this.sitename = config.sitename;
-			});
 	}
 
-	login() {
+	doLogin() {
 		this.username = this.loginForm.value.username;
 		this.password = this.loginForm.value.password;
-		this.buildForm();
-		this.authService.login(this.username, this.password)
+		this.rememberMe = this.loginForm.value.rememberMe;
+		this.authService.login(this.username, this.password, this.rememberMe)
 			.subscribe(
 			response => this.navCtrl.setRoot(HomePage),
 			error => this.alertService.showError('Error with credentials. Please try again.')
 			);
 	}
 
+	goToFullSite() {
+		window.open('http://hamlets.communityforge.net', '_system', 'location=yes');
+	}
+
 	ngOnInit(): void {
 		this.buildForm();
 	}
 
 	buildForm(): void {
 		this.loginForm = this.formBuilder.group({
 			'username': [this.username, Validators.required],
-			'password': [this.password, Validators.required]
+			'password': [this.password, Validators.required],
+			'rememberMe': [this.rememberMe],
 		});
 		this.loginForm.valueChanges
 			.subscribe(data => this.onValueChanged(data));
@@ -77,7 +74,7 @@ export class LoginPage implements OnInit {
 
 	validationMessages = {
 		'username': {
-			'required': 'Username is required.'
+			'required': 'Email is required.'
 		},
 		'password': {
 			'required': 'Password is required.'

diff --git a/src/services/AlertService.ts b/src/services/AlertService.ts
@@ -14,9 +14,5 @@ export class AlertService {
 			subTitle: message,
 			buttons: ['OK']
 		}).present();
-		// return this.toastCtrl.create({
-		// 	message: message,
-		// 	duration: 3000
-		// }).present();
 	}
 }