Skip to content

Commit

Permalink
Username (#143)
Browse files Browse the repository at this point in the history 
Fix #130
  • Loading branch information
@danaalyse @thomascoe
danaalyse authored and thomascoe committed Apr 25, 2017
1 parent 40ec2ae commit 431feb7
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 89 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ The Detailed Design Document containing the initial specifications of this plugi
* Removed unused admin pages
* Fixed issue where site is broken when plugin is first loaded because of no installed dependencies
* Check for expired members when member table is loaded, set them to expired
* Registration form blocks submission for bad username (#130)
* **Known Bugs and Defects**
* No email alerts are sent to non-recurring members when membership expires (#135)
* When non-recurring members expire, they do not immediately transition into an 'Expired' status. This only happens the next time the member table is loaded after they expire. We don't have a good way to trigger this to happen. Recurring members get triggered by a Stripe expiration event.
* Registration form still allows you to submit when username field is red (#130)
* Login may fail when logged into another (non-DecaturMakers) Google account (#44)
* Login may fail when logged into another (non-DecaturMakers) Google account. This may not be an issue with the new G Suite plugin suggested below (#44)

### v0.6 2017-04-17
* **New Features**
Expand Down
155 changes: 68 additions & 87 deletions front-end-pages/registration-form/registration-form.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,66 @@
<script language="javascript">
(function() {
"use strict";
angular
.module('registration', ['ngMessages'])
.controller('registrationCtrl', mainCtrl)
.directive('passwordVerify', passwordVerify);

function mainCtrl($scope) {
// Some code
}

function passwordVerify() {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgModelController
link: function(scope, elem, attrs, ngModel) {
if (!ngModel) return; // do nothing if no ng-model

// watch own value and re-validate on change
scope.$watch(attrs.ngModel, function() {
validate();
});
var passwordGood = 0;
var usernameGood = 0;

// observe the other value and re-validate on change
attrs.$observe('passwordVerify', function(val) {
validate();
});
function showError() {
jQuery("#username-group").addClass("has-error");
jQuery("#username-help-block").removeClass("hidden");
jQuery("#submit-button").prop("disabled", true);
}

function clearError() {
jQuery("#username-group").removeClass("has-error");
jQuery("#username-help-block").addClass("hidden");
if (passwordGood) {
jQuery("#submit-button").prop("disabled", false);
}
}

var validate = function() {
// values
var val1 = ngModel.$viewValue;
var val2 = attrs.passwordVerify;
function checkUsername() {
jQuery.ajax({
type: "GET",
url: "register",
data: {
"username": jQuery('#username').val(),
"action": 'check'
},
success: function(result) {
console.log(result);
var resultJson = JSON.parse(result);
if (resultJson['result'] == true) {
usernameGood = 1;
clearError();
} else {
usernameGood = 0;
showError();
}
}
});
}

// set validity
ngModel.$setValidity('passwordVerify', val1 === val2);
};
}
function checkPasswordMatch() {
var password = jQuery("#password").val();
var confirmPassword = jQuery("#passwordMatch").val();

if (password.length < 8) {
jQuery("#submit-button").prop("disabled", true);
jQuery("#errorGroup").addClass("has-error");
jQuery("#Error").html("Passwords must be 8 characters");
passwordGood = 0;
} else if (password != confirmPassword) {
jQuery("#submit-button").prop("disabled", true);
jQuery("#errorGroup").addClass("has-error");
jQuery("#Error").html("Passwords do not match!");
passwordGood = 0;
} else {
jQuery("#errorGroup").removeClass("has-error");
jQuery("#Error").html("");
passwordGood = 1;
if (usernameGood) {
jQuery("#submit-button").prop("disabled", false);
}
}
}
}
})();
</script>

<body style="background-color: #EBEBEB">
Expand Down Expand Up @@ -67,7 +89,7 @@ <h3>Register as Member</h3>

<div id="username-group" class="form-group">
<label for="username" class="control-label" >Username:</label>
<div class="input-group">
<div class="input-group" id="username-group">
<input type="text" style="" onkeyup="checkUsername()" onchange="checkUsername()" class="form-control" id="username"
name="username" placeholder=""
aria-describedby="username-help-block">
Expand All @@ -76,57 +98,16 @@ <h3>Register as Member</h3>
<span id="username-help-block" class="help-block hidden">This username is already taken.</span>
</div>

<script>


function showError() {
jQuery("#username-group").addClass("has-error");
jQuery("#username-help-block").removeClass("hidden");
//TODO Add submission blocker
}

function clearError() {
jQuery("#username-group").removeClass("has-error");
jQuery("#username-help-block").addClass("hidden");
}

function checkUsername() {
jQuery.ajax({
type: "GET",
url: "register",
data: {
"username": jQuery('#username').val(),
"action": 'check'
},
success: function(result) {
console.log(result);
var resultJson = JSON.parse(result);
if (resultJson['result'] == true) {
clearError();
} else {
showError();
}
}
});
}
</script>

<div class="form-group" ng-class="{ 'has-error' : register.password.$dirty && register.password.$invalid && register.passwordMatch.$dirty && register.passwordMatch.$invalid}">
<label for="password" class="control-label" >Password:</label>
<input type="password" style="display: inline;" class="form-control" id="password" name="password" required ng-model="password" password-verify="{{passwordMatch}}" ng-minlength="8">
<div class="help-block" ng-messages="register.password.$error" ng-if="register.password.$dirty">
<p ng-message="minlength">Must be 8 characters.</p>
<p ng-message="required">This field is required.</p>
<div id="errorGroup">
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="form-control" onchange="checkPasswordMatch();" onkeyup="checkPasswordMatch();">
</div>
</div>

<div class="form-group" ng-class="{ 'has-error' : register.passwordMatch.$dirty && register.passwordMatch.$invalid }">
<label for="passwordMatch" class="control-label" >Confirm Password:</label>
<input type="password" style="display: inline;" class="form-control" id="passwordMatch" name="passwordMatch" ng-model="passwordMatch" required password-verify="{{password}}" ng-minlength="8">
<div class="help-block" ng-messages="register.passwordMatch.$error" ng-if="register.passwordMatch.$dirty">
<p ng-message="required">This field is required.</p>
<p ng-message="minlength">Must be 8 characters.</p>
<p ng-message="passwordVerify">The fields do not match.</p>
<div class="form-group">
<label for="passwordMatch">Confirm Password:</label>
<input type="password" name="passwordMatch" id="passwordMatch" class="form-control" onchange="checkPasswordMatch();" onkeyup="checkPasswordMatch();">
<div id="Error" class="help-block"></div>
</div>
</div>

Expand All @@ -147,7 +128,7 @@ <h3>Register as Member</h3>
</div>

<div class="form-group">
<button type="submit" class="btn btn-primary" ng-disabled="register.$invalid">Submit</button>
<button id="submit-button" type="submit" class="btn btn-primary" disabled="true">Submit</button>
</div>
</div>
</form>
Expand Down

0 comments on commit 431feb7

Please sign in to comment.