ux: refactoring login page change

public/app/core/components/Login/Login.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react';
 
 const elementsInWidth = 22;
 const elementRows = 50;
@@ -55,7 +55,7 @@ export class Login extends Component {
             <login-bg>
                 <login-bg-fx />
                 <BgElements flipIndex={this.state.flipIndex} />
-            </login-bglogin-box>
+            </login-bg>
         );
     }
 }

public/app/core/controllers/invited_ctrl.ts

@@ -8,6 +8,17 @@ export class InvitedCtrl {
     contextSrv.sidemenu = false;
     $scope.formModel = {};
 
+    $scope.navModel = {
+      main: {
+        icon: 'gicon gicon-branding',
+        subTitle: 'Register your Grafana account',
+        breadcrumbs: [
+          { title: 'Login', url: '/login' },
+          { title: 'Invite' },
+        ]
+      }
+    };
+
     $scope.init = function() {
       backendSrv.get('/api/user/invite/' + $routeParams.code).then(function(invite) {
         $scope.formModel.name = invite.name;

public/app/core/controllers/reset_password_ctrl.ts

@@ -19,7 +19,7 @@ export class ResetPasswordCtrl {
         icon: 'gicon gicon-branding',
         subTitle: 'Reset your Grafana password',
         breadcrumbs: [
-          { title: 'Login', uri: '/login' },
+          { title: 'Login', url: '/login' },
           { title: 'Reset Password' },
         ]
       }

public/app/core/controllers/signup_ctrl.ts

@@ -31,7 +31,7 @@ export class SignUpCtrl {
         icon: 'gicon gicon-branding',
         subTitle: 'Register your Grafana account',
         breadcrumbs: [
-          { title: 'Login', uri: '/login' },
+          { title: 'Login', url: '/login' },
           { title: 'Sign Up' },
         ]
       }

public/app/partials/signup_invited.html

@@ -1,54 +1,40 @@
-<div class="login-container container">
+<page-header model="navModel"></page-header>
 
-	<div class="signup-page-background">
-	</div>
+<div class="page-container page-body">
+	<h3 class="page-sub-heading">Hello {{greeting}}.</h3>
 
-	<div class="login-content">
+	<div class="modal-tagline p-b-2">
+		<em>{{invitedBy}}</em> has invited you to join Grafana and the organization <span class="highlight-word">{{contextSrv.user.orgName}}</span></br>Please complete the following to accept your invitation and continue:
+	</div>
 
-		<div class="login-branding">
-			<img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
-			<i class="icon-gf icon-gf-grafana_wordmark"></i>
+	<form name="inviteForm" class="login-form gf-form-group">
+		<div class="gf-form">
+			<span class="gf-form-label width-7">Email</span>
+			<input type="email" name="email" class="gf-form-input max-width-21" required ng-model='formModel.email' placeholder="Email">
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-7">Name</span>
+			<input type="text" name="name" class="gf-form-input max-width-21" ng-model='formModel.name' placeholder="Name (optional)">
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-7">Username</span>
+			<input type="text" name="username" class="gf-form-input max-width-21" required ng-model='formModel.username' placeholder="Username">
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-7">Password</span>
+			<input type="password" name="password" class="gf-form-input max-width-21" required ng-model="formModel.password" id="inputPassword" placeholder="password">
 		</div>
 
-    <div class="invite-box">
-			<h3>
-				Hello {{greeting}}.
-			</h3>
-
-			<div class="modal-tagline p-b-2">
-				<em>{{invitedBy}}</em> has invited you to join Grafana and the organization <span class="highlight-word">{{contextSrv.user.orgName}}</span></br>Please complete the following to accept your invitation and continue:
-			</div>
-
-			<form name="inviteForm" class="login-form gf-form-group">
-				<div class="gf-form">
-					<span class="gf-form-label width-7">Email</span>
-					<input type="email" name="email" class="gf-form-input max-width-21" required ng-model='formModel.email' placeholder="Email">
-				</div>
-				<div class="gf-form">
-					<span class="gf-form-label width-7">Name</span>
-					<input type="text" name="name" class="gf-form-input max-width-21" ng-model='formModel.name' placeholder="Name (optional)">
-				</div>
-				<div class="gf-form">
-					<span class="gf-form-label width-7">Username</span>
-					<input type="text" name="username" class="gf-form-input max-width-21" required ng-model='formModel.username' placeholder="Username">
-				</div>
-				<div class="gf-form">
-					<span class="gf-form-label width-7">Password</span>
-					<input type="password" name="password" class="gf-form-input max-width-21" required ng-model="formModel.password" id="inputPassword" placeholder="password">
-				</div>
-
-				<div style="margin-left: 7.5rem; width: 254px;">
-					<password-strength password="formModel.password"></password-strength>
-				</div>
-
-				<div class="gf-form-button-row">
-					<button type="submit" class="btn btn-inverse" ng-click="submit();" ng-class="{'btn-inverse': !inviteForm.$valid, 'btn-primary': inviteForm.$valid}">
-						Continue
-					</button>
-				</div>
-			</form>
+		<div style="margin-left: 7.5rem; width: 254px;">
+			<password-strength password="formModel.password"></password-strength>
+		</div>
 
+		<div class="gf-form-button-row">
+			<button type="submit" class="btn btn-success" ng-click="submit();" ng-disable="!inviteForm.$valid">
+				Sign Up
+			</button>
 		</div>
-	</div>
+	</form>
+</div>