responsive login, profile new UX

gui/app/components/user-profile.js

@@ -20,7 +20,10 @@ export default Component.extend(AuthProvider, {
 	password: { password: "", confirmation: "" },
 	hasFirstnameError: empty('model.firstname'),
 	hasLastnameError: empty('model.lastname'),
-	hasEmailError: empty('model.email'),
+	hasEmailError: computed('model.email', function() {
+		let email = this.get('model.email');
+		return isEmpty(email) || is.not.email(email);
+	}),
 	hasPasswordError: computed('passwordError', 'password.password', {
 		get() {
 			if (isPresent(this.get('passwordError'))) {
@@ -35,10 +38,10 @@ export default Component.extend(AuthProvider, {
 	hasConfirmPasswordError: computed('confirmPasswordError', {
 		get() {
 			if (isPresent(this.get("confirmPasswordError"))) {
-				return `error`;
+				return `is-invalid`;
 			}
 
-			return;
+			return '';
 		}
 	}),
 

gui/app/pods/profile/template.hbs

@@ -1,15 +1,5 @@
-{{#layout/zone-container}}
+{{layout/nav-bar}}
-	{{#layout/zone-sidebar}}
+
-		<div class="sidebar-common">
+<div class="container">
-			{{layout/sidebar-intro title="Profile" message="Your user profile"}}
+	{{user-profile model=model save=(action 'save')}}
-		</div>
+</div>
-		<div class="sidebar-wrapper">
-			<div class="sidebar-menu">
-				<div class="avatar-large">{{session.user.initials}}</div>
-			</div>
-		</div>
-	{{/layout/zone-sidebar}}
-	{{#layout/zone-content}}
-		{{user-profile model=model save=(action 'save')}}
-	{{/layout/zone-content}}
-{{/layout/zone-container}}

gui/app/styles/app.scss

@@ -17,7 +17,6 @@
 @import "widget/widget.scss";
 @import "view/layout.scss"; // junk?
 @import "view/page-search.scss";
-@import "view/page-profile.scss";
 @import "view/page-customize.scss";
 @import "view/page-auth.scss";
 @import "view/page-onboard.scss";

gui/app/styles/view/page-auth.scss

@@ -1,7 +1,7 @@
 .auth-box {
     display: inline-block;
 	height: 500px;
-	width: 500px;
+	max-width: 500px;
 	padding: 20px 50px;
 	background-color: $color-white;
 	color: $color-off-black;

gui/app/styles/view/page-profile.scss

@@ -1,3 +0,0 @@
-.page-profile {
-    @include content-container();
-}

gui/app/templates/components/folder/category-admin.hbs

@@ -42,7 +42,7 @@
 									<i class="material-icons">edit</i>
 								</div>
 								<div class="button-icon-gap" />
-								<div id="{{concat 'delete-category-' cat.id}}" class="button-icon-red align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDelete' cat.id}}>
+								<div id="{{concat 'delete-category-' cat.id}}" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDelete' cat.id}}>
 									<i class="material-icons">delete</i>
 								</div>
 							{{/if}}

gui/app/templates/components/user-profile.hbs

@@ -1,31 +1,27 @@
-<div class="page-profile">
+<div class="view-profile my-5">
-	<div class="form-header">
+	<div class="avatar-large">{{session.user.initials}}</div>
-		<div class="title">About You</div>
+
-		<div class="tip"></div>
+    <div class="form-group">
-	</div>
+        <label for="firstname">Firstname</label>
-    <div class="input-control">
+        {{focus-input id="firstname" type="text" value=model.firstname class=(if hasFirstnameError 'form-control is-invalid' 'form-control')}}
-        <label>Firstname</label>
-        {{focus-input id="firstname" type="text" value=model.firstname class=(if hasFirstnameError 'error')}}
     </div>
-    <div class="input-control">
+    <div class="form-group">
-        <label>Lastname</label>
+        <label for="lastname">Lastname</label>
-        {{input id="lastname" type="text" value=model.lastname class=(if hasLastnameError 'error')}}
+        {{input id="lastname" type="text" value=model.lastname class=(if hasLastnameError 'form-control is-invalid' 'form-control')}}
     </div>
-    <div class="input-control">
+    <div class="form-group">
-        <label>Email</label>
+        <label for="email">Email</label>
-        {{input id="email" type="text" value=model.email class=(if hasEmailError 'error')}}
+        {{input id="email" type="email" value=model.email class=(if hasEmailError 'form-control is-invalid' 'form-control')}}
     </div>
     {{#if isAuthProviderDocumize}}
-        <div class="input-control">
+        <div class="form-group">
-            <label>Password</label>
+            <label for="password">Password</label>
-            <div class="tip">New password</div>
+            {{input id="password" type="password" value=password.password class=(if hasPasswordError 'form-control is-invalid' 'form-control')}}
-            {{input id="password" type="password" value=password.password class=hasPasswordError}}
         </div>
-        <div class="input-control">
+        <div class="form-group">
-            <label>Confirm Password</label>
+            <label for="confirmPassword">Confirm Password</label>
-            <div class="tip">Confirm your new password</div>
+            {{input id="confirmPassword" type="password" value=password.confirmation class=(if hasConfirmPasswordError 'form-control is-invalid' 'form-control')}}
-            {{input id="confirmPassword" type="password" value=password.confirmation class=hasConfirmPasswordError}}
         </div>
     {{/if}}
-    <div class="regular-button button-blue" {{ action 'save' }}>save</div>
+    <div class="btn btn-success" {{ action 'save' }}>save</div>
 </div>