Skip to content
This repository has been archived by the owner on Oct 29, 2019. It is now read-only.

Commit

Permalink
Merge pull request #363 from rcos/autofocus
Browse files Browse the repository at this point in the history 
Autofocus fields
  • Loading branch information
@kmcnellis
kmcnellis committed Mar 11, 2016
2 parents 32b41c0 + 5985cc6 commit 3fbabed
Show file tree
Hide file tree
Showing 10 changed files with 187 additions and 130 deletions.
5 changes: 4 additions & 1 deletion client/app/account/login/login.controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
'use strict';

angular.module('observatory3App')
.controller('LoginController', function ($scope, Auth, $location) {
.controller('LoginController', function ($scope, Auth, $location, focus) {
$scope.user = {};
$scope.errors = {};


focus('email');

$scope.login = function(form) {
$scope.submitted = true;

Expand Down
90 changes: 55 additions & 35 deletions client/app/account/login/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,68 @@
<div ng-include="'components/navbar/navbar.html'"></div>

<div class="container">
<div class="row">
<div class="text-center col-sm-12 col-md-6 col-md-offset-3">
<h1>Login</h1>
<div class="row">
<div class="text-center col-sm-12 col-md-6 col-md-offset-3">
<h1>Login</h1>
</div>
</div>
<div class="col-sm-12 col-md-6 col-md-offset-3">
<form class="form" name="form" ng-submit="login(form)" novalidate>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-sm-offset-3 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<form class="form" name="form" ng-submit="login(form)" novalidate>

<div class="form-group">
<label>Email</label>
<div class="form-group">
<label>Email</label>

<input type="email" name="email" class="form-control" ng-model="user.email" required>
</div>
<input id="email" type="email" name="email" class="form-control" ng-model="user.email" autofocus required>
</div>

<div class="form-group">
<label>Password</label>
<div class="form-group">
<label>
Password
</label>

<input type="password" name="password" class="form-control" ng-model="user.password" required>
</div>
<p class="pull-right">
<a ng-href="/forgot-password">Forgot Password</a>
</p>
<input type="password" name="password" class="form-control" ng-model="user.password" required>
</div>

<div class="form-group has-error">
<p class="help-block" ng-show="form.email.$error.required && form.password.$error.required && submitted">
Please enter your email and password.
</p>
<p class="help-block" ng-show="form.email.$error.email && submitted">
Please enter a valid email.
</p>
<p class="help-block">{{ errors.other }}</p>
</div>
<div class="form-group has-error">
<p class="help-block" ng-show="form.email.$error.required && form.password.$error.required && submitted">
Please enter your email and password.
</p>
<p class="help-block" ng-show="form.email.$error.email && submitted">
Please enter a valid email.
</p>
<p class="help-block">{{ errors.other }}</p>
</div>

<div>
<button class="btn btn-inverse btn-lg btn-login" type="submit">
Login
</button>
<a class="btn btn-default btn-lg btn-register" href="/signup">
Register
</a>
<a ng-href="/forgot-password">Forgot Password</a>
<div class="text-center">
<button class="btn btn-success btn-lg btn-login" type="submit">
Login
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-sm-offset-3 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center" >
Need and Account?
<a class="" href="/signup">
Sign Up
</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>


</div>
<div ng-include="'components/footer/footer.html'"></div>

<div ng-include="'components/footer/footer.html'"></div>
4 changes: 3 additions & 1 deletion client/app/account/signup/signup.controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
'use strict';

angular.module('observatory3App')
.controller('SignupCtrl', function ($scope, Auth, $location) {
.controller('SignupCtrl', function ($scope, Auth, $location, focus) {
$scope.user = {};
$scope.errors = {};

focus('name');

$scope.register = function(form) {
$scope.submitted = true;

Expand Down
192 changes: 104 additions & 88 deletions client/app/account/signup/signup.html
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,123 @@
<div ng-include="'components/navbar/navbar.html'"></div>

<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-md-offset-3 text-center">
<h1>Sign up</h1>
<div class="row">
<div class="col-sm-12 col-md-6 col-md-offset-3 text-center">
<h1>Sign up</h1>
</div>
</div>
<div class="col-sm-12 col-md-6 col-md-offset-3">
<form class="form" name="form" ng-submit="register(form)" novalidate>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-sm-offset-3 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<form class="form" name="form" ng-submit="register(form)" novalidate>

<div class="form-group" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
ng-class="{ 'has-success': form.name.$valid && (submitted || form.name.$dirty),
'has-error': form.name.$invalid && (submitted || form.name.$dirty) }">
<label>Name</label>
<div class="form-group" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
ng-class="{ 'has-success': form.name.$valid && (submitted || form.name.$dirty),
'has-error': form.name.$invalid && (submitted || form.name.$dirty) }">
<label>Name</label>

<input type="text" name="name" class="form-control" ng-model="user.name" required/>
<p class="help-block" ng-show="form.name.$error.required && (submitted || form.name.$dirty)">
A name is required
</p>
</div>
<input id="name" type="text" name="name" class="form-control" ng-model="user.name" autofocus required/>
<p class="help-block" ng-show="form.name.$error.required && (submitted || form.name.$dirty)">
A name is required
</p>
</div>

<div class="form-group" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
ng-class="{ 'has-success': form.email.$valid && (submitted || form.email.$dirty),
'has-error': form.email.$invalid && (submitted || form.email.$dirty) }">
<label>Email</label>
<div class="form-group" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
ng-class="{ 'has-success': form.email.$valid && (submitted || form.email.$dirty),
'has-error': form.email.$invalid && (submitted || form.email.$dirty) }">
<label>Email</label>

<input type="email" name="email" class="form-control" ng-model="user.email"
required
mongoose-error/>
<p class="help-block" ng-show="form.email.$error.email && (submitted || form.email.$dirty)">
Doesn't look like a valid email.
</p>
<p class="help-block" ng-show="form.email.$error.required && (submitted || form.email.$dirty)">
What's your email address?
</p>
<p class="help-block" ng-show="form.email.$error.mongoose">
{{ errors.email }}
</p>
</div>
<input type="email" name="email" class="form-control" ng-model="user.email"
required
mongoose-error/>
<p class="help-block" ng-show="form.email.$error.email && (submitted || form.email.$dirty)">
Doesn't look like a valid email.
</p>
<p class="help-block" ng-show="form.email.$error.required && (submitted || form.email.$dirty)">
What's your email address?
</p>
<p class="help-block" ng-show="form.email.$error.mongoose">
{{ errors.email }}
</p>
</div>

<div class="form-group" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
ng-class="{ 'has-success': form.github.$valid && (submitted || form.github.$dirty),
'has-error': form.github.$invalid && (submitted || form.github.$dirty) }">
<label>Github User Name</label>
<input type="text" name="github" class="form-control" ng-model="user.githubLogin"
required>
<p class="help-block" ng-show="form.github.$error.required && (submitted || form.github.$dirty)">
What's your github username?
</p>
<p class="help-block" ng-show="form.github.$error.mongoose">
{{ errors.github }}
</p>
</div>
<div class="form-group" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
ng-class="{ 'has-success': form.github.$valid && (submitted || form.github.$dirty),
'has-error': form.github.$invalid && (submitted || form.github.$dirty) }">
<label>Github User Name</label>
<input type="text" name="github" class="form-control" ng-model="user.githubLogin"
required>
<p class="help-block" ng-show="form.github.$error.required && (submitted || form.github.$dirty)">
What's your github username?
</p>
<p class="help-block" ng-show="form.github.$error.mongoose">
{{ errors.github }}
</p>
</div>

<div class="form-group" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
ng-class="{ 'has-success': form.password.$valid && (submitted || form.password.$dirty),
'has-error': form.password.$invalid && (submitted || form.password.$dirty) }">
<label>Password</label>
<div class="form-group" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
ng-class="{ 'has-success': form.password.$valid && (submitted || form.password.$dirty),
'has-error': form.password.$invalid && (submitted || form.password.$dirty) }">
<label>Password</label>

<input type="password" name="password" class="form-control" ng-model="user.password"
ng-minlength="3"
required
mongoose-error/>
<p class="help-block"
ng-show="(form.password.$error.minlength || form.password.$error.required) && (submitted || form.password.$dirty)">
Password must be at least 3 characters.
</p>
<p class="help-block" ng-show="form.password.$error.mongoose">
{{ errors.password }}
</p>
</div>
<div class="form-group" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
ng-class="{ 'has-success': form.passwordverify.$valid && (submitted || (form.password.$dirty && form.passwordverify.$dirty)),
'has-error': form.passwordverify.$invalid && (submitted || (form.password.$dirty && form.passwordverify.$dirty)) }">
<label>Re-type Password</label>
<input type="password" name="password" class="form-control" ng-model="user.password"
ng-minlength="3"
required
mongoose-error/>
<p class="help-block"
ng-show="(form.password.$error.minlength || form.password.$error.required) && (submitted || form.password.$dirty)">
Password must be at least 3 characters.
</p>
<p class="help-block" ng-show="form.password.$error.mongoose">
{{ errors.password }}
</p>
</div>
<div class="form-group" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
ng-class="{ 'has-success': form.passwordverify.$valid && (submitted || (form.password.$dirty && form.passwordverify.$dirty)),
'has-error': form.passwordverify.$invalid && (submitted || (form.password.$dirty && form.passwordverify.$dirty)) }">
<label>Re-type Password</label>

<input type="password" name="passwordverify" class="form-control" ng-model="user.passwordverify"
ng-minlength="3"
required
match-field="password"
/>
<p class="help-block"
ng-show="(form.passwordverify.$error.minlength || form.passwordverify.$error.required) && (submitted || (form.password.$dirty && form.passwordverify.$dirty))">
Password must be at least 3 characters.
</p>
<p class="help-block"
ng-show="(form.passwordverify.$error.matchField) && (submitted || (form.password.$dirty && form.passwordverify.$dirty))">
Passwords must match
</p>
<input type="password" name="passwordverify" class="form-control" ng-model="user.passwordverify"
ng-minlength="3"
required
match-field="password"
/>
<p class="help-block"
ng-show="(form.passwordverify.$error.minlength || form.passwordverify.$error.required) && (submitted || (form.password.$dirty && form.passwordverify.$dirty))">
Password must be at least 3 characters.
</p>
<p class="help-block"
ng-show="(form.passwordverify.$error.matchField) && (submitted || (form.password.$dirty && form.passwordverify.$dirty))">
Passwords must match
</p>

</div>
</div>

<div>
<button class="btn btn-lg btn-inverse btn-login" ng-class="{'disabled': !form.$valid}" type="submit">
Sign up
</button>
<a class="btn btn-default btn-lg btn-register" href="/login">
Login
</a>
<div class="text-center">
<button class="btn btn-lg btn-success btn-login" ng-class="{'disabled': !form.$valid}" type="submit">
Sign up
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-sm-offset-3 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center" >
Have an Account?
<a class="" href="/login">
Login
</a>
</div>
</div>
</div>
</div>

</form>
</div>
</div>

</div>
<div ng-include="'components/footer/footer.html'"></div>
5 changes: 4 additions & 1 deletion client/app/attend/attend.controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
'use strict';

angular.module('observatory3App')
.controller('AttendCtrl', function ($scope, $stateParams, $http, Auth, User, $location, notify) {
.controller('AttendCtrl', function ($scope, $stateParams, $http, Auth, User, $location, notify, focus) {
// put text focus on day code
focus('dayCodeInput');

$scope.submitDayCode = function(){
var user = Auth.getCurrentUser();
$http.put('/api/users/' + user._id + '/attend', {
Expand Down
2 changes: 1 addition & 1 deletion client/app/attend/attend.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
<form ng-submit="submitDayCode()">
<div class="input-group dayCodeForm">
<input type="text" ng-model='userDayCode' class="form-control" placeholder="Day Code">
<input id="dayCodeInput" type="text" ng-model='userDayCode' class="form-control" placeholder="Day Code" autofocus>
<span class="input-group-btn">
<button class="btn btn-primary" ng-click='submitDayCode()' type="button">Submit Day Code</button>
</span>
Expand Down
4 changes: 2 additions & 2 deletions client/app/projects/projects.controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
'use strict';

angular.module('observatory3App')

.controller('ProjectsCtrl', function ($scope, $location, $http, Auth) {
.controller('ProjectsCtrl', function ($scope, $location, $http, Auth, focus) {
$scope.projects = [];
$scope.projectToAdd = {active: true, repositories: [""]};
$scope.loggedIn = false;
focus('searchProjectsInput');

Auth.isLoggedInAsync(function(loggedIn){
if (loggedIn){
Expand Down
2 changes: 1 addition & 1 deletion client/app/projects/projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ <h3>{{ past ? "Past" : "Active" }} Projects</h3>
<form class="form-inline" role="form">
<div class="left-inner-addon">
<i class="glyphicon glyphicon-search"></i>
<input type="text" class="form-control" placeholder="Search for project..." ng-model="searchString">
<input id="searchProjectsInput" type="text" class="form-control" placeholder="Search for project..." ng-model="searchString">
</div>
</form>
</div>
Expand Down
Loading

0 comments on commit 3fbabed

Please sign in to comment.