ux: Move "Sign up" and "Reset password" to its own pages - and remove all inline styling (#9879)

public/app/core/components/PageHeader/PageHeader.tsx

@@ -113,12 +113,18 @@ export default class PageHeader extends React.Component<IProps, any> {
   }
 
   render() {
+    const { model } = this.props;
+
+    if (!model) {
+      return null;
+    }
+
     return (
       <div className="page-header-canvas">
         <div className="page-container">
           <div className="page-header">
-            {this.renderHeaderTitle(this.props.model.main)}
-            {this.props.model.main.children && <Navigation main={this.props.model.main} />}
+            {this.renderHeaderTitle(model.main)}
+            {model.main.children && <Navigation main={model.main} />}
           </div>
         </div>
       </div>

public/app/core/controllers/reset_password_ctrl.ts

@@ -14,6 +14,17 @@ export class ResetPasswordCtrl {
       $scope.formModel.code = params.code;
     }
 
+    $scope.navModel = {
+      main: {
+        icon: 'gicon gicon-branding',
+        subTitle: 'Reset your Grafana password',
+        breadcrumbs: [
+          { title: 'Login', uri: '/login' },
+          { title: 'Reset Password' },
+        ]
+      }
+    };
+
     $scope.sendResetEmail = function() {
       if (!$scope.sendResetForm.$valid) {
         return;

public/app/core/controllers/signup_ctrl.ts

@@ -26,6 +26,17 @@ export class SignUpCtrl {
     $scope.verifyEmailEnabled = false;
     $scope.autoAssignOrg = false;
 
+    $scope.navModel = {
+      main: {
+        icon: 'gicon gicon-branding',
+        subTitle: 'Register your Grafana account',
+        breadcrumbs: [
+          { title: 'Login', uri: '/login' },
+          { title: 'Sign Up' },
+        ]
+      }
+    };
+
     backendSrv.get('/api/user/signup/options').then(options => {
       $scope.verifyEmailEnabled = options.verifyEmailEnabled;
       $scope.autoAssignOrg = options.autoAssignOrg;

public/app/partials/reset_password.html

@@ -1,71 +1,31 @@
-<div class="login-container container">
-
-	<div class="login-content">
-
-		<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>
-		</div>
-
-		<div class="login-inner-box">
-			<div class="login-tab-header">
-				<button class="btn-login-tab" class="active">
-					Reset password
-				</button>
+<page-header model="navModel"></page-header>
+
+<div class="page-container page-body">
+	<div class="signup">
+		<h3 class="p-b-1">Reset password</h3>
+		<form name="sendResetForm" class="login-form gf-form-group" ng-show="mode === 'send'">
+			<div class="gf-form">
+					<span class="gf-form-label width-7">User</span>
+					<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username">
 			</div>
+			<div class="gf-form-button-row">
+				<button type="submit" class="btn btn-success" ng-click="sendResetEmail();" ng-disabled="!sendResetForm.$valid">
+					Reset Password
+				</button>
+				<a href="/login" class="btn btn-inverse">
+					Back
+				</a>
 
-			<form name="sendResetForm" class="login-form gf-form-group" ng-show="mode === 'send'">
-				<div class="gf-form">
-						<span class="gf-form-label width-7">User</span>
-						<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username">
-				</div>
-
-				<div class="gf-form-button-row">
-					<br />
-					<br />
-					<button type="submit" class="btn btn-large" ng-click="sendResetEmail();" ng-class="{'btn-inverse': !sendResetForm.$valid, 'btn-primary': sendResetForm.$valid}">
-						Reset Password
-					</button>
-				</div>
-			</form>
-
-
-			<div style="text-align: center; padding: 20px;" ng-if="mode === 'email-sent'">
-				An email with a reset link as been sent to the email address. <br>
-				You should receive it shortly.
 			</div>
-
-			<br />
-			<br />
-
-			<form name="resetForm" class="login-form gf-form-group" ng-show="mode === 'reset'">
-				<div class="gf-form">
-					<span class="gf-form-label width-10">New Password</span>
-					<input type="password" name="NewPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.newPassword' placeholder="password" watch-change="formModel.newPassword = inputValue;">
-				</div>
-				<div class="gf-form">
-					<span class="gf-form-label width-10">Confirm Password</span>
-					<input type="password" name="ConfirmPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.confirmPassword' placeholder="confirm password">
-				</div>
-
-				<div style="margin-left: 141px; width: 207px;">
-					<password-strength password="formModel.newPassword"></password-strength>
-				</div>
-
-				<div class="gf-form-button-row">
-					<button type="submit" class="btn" ng-click="submitReset();" ng-class="{'btn-inverse': !resetForm.$valid, 'btn-primary': resetForm.$valid}">
-						Reset Password
-					</button>
-				</div>
-			</form>
-
-      <div style="margin-top: 20px">
-        <div class="text-center">
-          <a href="login">Back to login</a>
-        </div>
-      </div>
-    </div>
-
-  </div>
+		</form>
+		<div ng-if="mode === 'email-sent'">
+			An email with a reset link as been sent to the email address. <br>
+			You should receive it shortly.
+			<div class="p-t-1">
+				<a href="/login" class="btn btn-success p-t-1">
+					Login
+				</a>
+			</div>
+		</div>
+	</div>
 </div>
-

public/app/partials/signup_step2.html

@@ -1,73 +1,49 @@
-<div class="container">
-
-	<div class="signup-page-background">
-	</div>
-
-	<div class="login-content">
-
-		<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>
-		</div>
-
-    <div class="invite-box">
-			<h3>
-				You're almost there.
-			</h3>
-
-			<div class="modal-tagline">
-				We just need a couple of more bits of<br> information to finish creating your account.
-			</div>
-
-			<div style="display: inline-block; margin-top: 25px; width: 300px">
-					<div class="editor-option">
-						<label class="small">Your email:</label>
-						<span class="large">{{formModel.email}}</span>
-					</div>
-			</div>
-			<br>
-			<br>
-
-			<form name="signUpForm" class="login-form gf-form-group">
-
-				<div class="gf-form" ng-if="verifyEmailEnabled">
-					<span class="gf-form-label width-9">
-						Email code<tip>Email verification code (sent to your email)</tip>
-					</span>
-					<input type="text" class="gf-form-input max-width-14" ng-model="formModel.code" required></input>
-				</div>
-
-				<div class="gf-form" ng-if="!autoAssignOrg">
-					<span class="gf-form-label width-9">Org. name</span>
-					<input type="text" name="orgName" class="gf-form-input max-width-14" ng-model='formModel.orgName' placeholder="Name your organization">
-				</div>
-
-				<div class="gf-form">
-					<span class="gf-form-label width-9">Your name</span>
-					<input type="text" name="name" class="gf-form-input max-width-14" ng-model='formModel.name' placeholder="(optional)">
-				</div>
-				<div class="gf-form">
-					<span class="gf-form-label width-9">Username</span>
-					<input type="text" class="gf-form-input max-width-14" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
-				</div>
-				<div class="gf-form">
-					<span class="gf-form-label width-9">Password</span>
-					<input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
-				</div>
-
-				<div style="margin-left: 9rem; width: 194px;">
-					<password-strength password="formModel.password"></password-strength>
-				</div>
-
-				<div class="gf-form-button-row">
-					<button type="submit" class="btn" ng-click="ctrl.submit();" ng-class="{'btn-inverse': !signUpForm.$valid, 'btn-primary': signUpForm.$valid}">
-						Continue
-					</button>
-				</div>
-			</form>
-		</div>
-
-	</div>
-</div>
-
-
+<page-header model="navModel"></page-header>
+
+<div class="page-container page-body">
+  <div class="signup">
+    <h3 class="p-b-1">You're almost there.</h3>
+    <div class="p-b-1">
+      We just need a couple of more bits of<br> information to finish creating your account.
+    </div>
+    <form name="signUpForm" class="login-form gf-form-group">
+      <div class="gf-form" ng-if="verifyEmailEnabled">
+        <span class="gf-form-label width-9">
+          Email code<tip>Email verification code (sent to your email)</tip>
+        </span>
+        <input type="text" class="gf-form-input max-width-14" ng-model="formModel.code" required></input>
+      </div>
+
+      <div class="gf-form" ng-if="!autoAssignOrg">
+        <span class="gf-form-label width-9">Org. name</span>
+        <input type="text" name="orgName" class="gf-form-input max-width-14" ng-model="formModel.orgName" placeholder="Name your organization">
+      </div>
+
+      <div class="gf-form">
+        <span class="gf-form-label width-9">Your name</span>
+        <input type="text" name="name" class="gf-form-input max-width-14" ng-model="formModel.name" placeholder="(optional)">
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label width-9">Email</span>
+        <input type="text" class="gf-form-input max-width-14" required ng-model="formModel.username" placeholder="Email" autocomplete="off">
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label width-9">Password</span>
+        <input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
+      </div>
+
+      <div class="signup__password-strength">
+        <password-strength password="formModel.password"></password-strength>
+      </div>
+
+      <div class="gf-form-button-row p-t-3">
+        <button type="submit" class="btn btn-success" ng-click="ctrl.submit();" ng-disabled="!signUpForm.$valid">
+          Sign Up
+        </button>
+        <a href="/login" class="btn btn-inverse">
+            Back
+        </a>
+      </div>
+    </form>
+  </div>
+</div>

public/sass/base/_icons.scss

@@ -63,6 +63,10 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
 }
 
+.gicon-branding {
+  background-image: url('../img/grafana_icon.svg');
+}
+
 .sidemenu {
   .gicon-dashboard {
     background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
@@ -70,6 +74,4 @@
   .gicon-alert {
     background-image: url('../img/icons_dark_theme/icon_alert.svg');
   }
-}
-
-
+}

public/sass/pages/_signup.scss

@@ -15,3 +15,8 @@
   }
 }
 
+.signup__password-strength {
+  position: absolute;
+  margin-left: 9rem;
+  width: 194px;
+}