Move the signup form into its own directive
This commit is contained in:
Joseph Schorr
parent
ecabcc3fc6
commit
c24a14b402
4 changed files with 77 additions and 52 deletions
29
static/directives/signup-form.html
Normal file
29
static/directives/signup-form.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<div class="signup-form-element">
|
||||
<form class="form-signup" name="signupForm" ng-submit="register()" data-trigger="manual"
|
||||
data-content="{{ registerError }}" data-placement="left" ng-show="!awaitingConfirmation && !registering">
|
||||
<input type="text" class="form-control" placeholder="Create a username" name="username" ng-model="newUser.username" autofocus required>
|
||||
<input type="email" class="form-control" placeholder="Email address" ng-model="newUser.email" required>
|
||||
<input type="password" class="form-control" placeholder="Create a password" ng-model="newUser.password" required>
|
||||
<input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatPassword"
|
||||
match="newUser.password" required>
|
||||
<div class="form-group signin-buttons">
|
||||
<button class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit"
|
||||
analytics-on analytics-event="register">Sign Up for Free!</button>
|
||||
<span class="landing-social-alternate">
|
||||
<i class="fa fa-circle"></i>
|
||||
<span class="inner-text">OR</span>
|
||||
</span>
|
||||
<a href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ github_state_clause }}"
|
||||
class="btn btn-primary btn-block"><i class="fa fa-github fa-lg"></i> Sign In with GitHub</a>
|
||||
<p class="help-block">No credit card required.</p>
|
||||
</div>
|
||||
</form>
|
||||
<div ng-show="registering" style="text-align: center">
|
||||
<i class="fa fa-spinner fa-spin fa-3x"></i>
|
||||
</div>
|
||||
<div ng-show="awaitingConfirmation">
|
||||
<div class="sub-message">
|
||||
Thank you for registering! We have sent you an activation email.
|
||||
You must <b>verify your email address</b> before you can continue.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -579,6 +579,53 @@ quayApp.directive('signinForm', function () {
|
|||
});
|
||||
|
||||
|
||||
quayApp.directive('signupForm', function () {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 0,
|
||||
templateUrl: '/static/directives/signup-form.html',
|
||||
replace: false,
|
||||
transclude: true,
|
||||
restrict: 'C',
|
||||
scope: {
|
||||
|
||||
},
|
||||
controller: function($scope, $location, $timeout, Restangular, KeyService, UserService) {
|
||||
$('.form-signup').popover();
|
||||
|
||||
angulartics.waitForVendorApi(mixpanel, 500, function(loadedMixpanel) {
|
||||
var mixpanelId = loadedMixpanel.get_distinct_id();
|
||||
$scope.github_state_clause = '&state=' + mixpanelId;
|
||||
});
|
||||
|
||||
$scope.githubClientId = KeyService.githubClientId;
|
||||
|
||||
$scope.awaitingConfirmation = false;
|
||||
$scope.registering = false;
|
||||
|
||||
$scope.register = function() {
|
||||
$('.form-signup').popover('hide');
|
||||
$scope.registering = true;
|
||||
|
||||
var newUserPost = Restangular.one('user/');
|
||||
newUserPost.customPOST($scope.newUser).then(function() {
|
||||
$scope.awaitingConfirmation = true;
|
||||
$scope.registering = false;
|
||||
|
||||
mixpanel.alias($scope.newUser.username);
|
||||
}, function(result) {
|
||||
$scope.registering = false;
|
||||
$scope.registerError = result.data.message;
|
||||
$timeout(function() {
|
||||
$('.form-signup').popover('show');
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
return directiveDefinitionObject;
|
||||
});
|
||||
|
||||
|
||||
quayApp.directive('plansTable', function () {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 0,
|
||||
|
|
|
|||
|
|
@ -107,8 +107,6 @@ function RepoListCtrl($scope, Restangular, UserService) {
|
|||
}
|
||||
|
||||
function LandingCtrl($scope, $timeout, $location, Restangular, UserService, KeyService) {
|
||||
$('.form-signup').popover();
|
||||
|
||||
$scope.namespace = null;
|
||||
|
||||
$scope.$watch('namespace', function(namespace) {
|
||||
|
|
@ -119,35 +117,6 @@ function LandingCtrl($scope, $timeout, $location, Restangular, UserService, KeyS
|
|||
$scope.user = currentUser;
|
||||
}, true);
|
||||
|
||||
angulartics.waitForVendorApi(mixpanel, 500, function(loadedMixpanel) {
|
||||
var mixpanelId = loadedMixpanel.get_distinct_id();
|
||||
$scope.github_state_clause = '&state=' + mixpanelId;
|
||||
});
|
||||
|
||||
$scope.githubClientId = KeyService.githubClientId;
|
||||
|
||||
$scope.awaitingConfirmation = false;
|
||||
$scope.registering = false;
|
||||
|
||||
$scope.register = function() {
|
||||
$('.form-signup').popover('hide');
|
||||
$scope.registering = true;
|
||||
|
||||
var newUserPost = Restangular.one('user/');
|
||||
newUserPost.customPOST($scope.newUser).then(function() {
|
||||
$scope.awaitingConfirmation = true;
|
||||
$scope.registering = false;
|
||||
|
||||
mixpanel.alias($scope.newUser.username);
|
||||
}, function(result) {
|
||||
$scope.registering = false;
|
||||
$scope.registerError = result.data.message;
|
||||
$timeout(function() {
|
||||
$('.form-signup').popover('show');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$scope.canCreateRepo = function(namespace) {
|
||||
if (!$scope.user) { return false; }
|
||||
|
||||
|
|
|
|||
|
|
@ -36,27 +36,7 @@
|
|||
|
||||
<div class="col-md-4 col-md-offset-1">
|
||||
<div ng-show="user.anonymous">
|
||||
<form class="form-signup" name="signupForm" ng-submit="register()" data-trigger="manual" data-content="{{ registerError }}" data-placement="left" ng-show="!awaitingConfirmation && !registering">
|
||||
<input type="text" class="form-control" placeholder="Create a username" name="username" ng-model="newUser.username" autofocus required>
|
||||
<input type="email" class="form-control" placeholder="Email address" ng-model="newUser.email" required>
|
||||
<input type="password" class="form-control" placeholder="Create a password" ng-model="newUser.password" required>
|
||||
<input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatPassword" match="newUser.password" required>
|
||||
<div class="form-group signin-buttons">
|
||||
<button class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit" analytics-on analytics-event="register">Sign Up for Free!</button>
|
||||
<span class="landing-social-alternate">
|
||||
<i class="fa fa-circle"></i>
|
||||
<span class="inner-text">OR</span>
|
||||
</span>
|
||||
<a href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ github_state_clause }}" class="btn btn-primary btn-block"><i class="fa fa-github fa-lg"></i> Sign In with GitHub</a>
|
||||
<p class="help-block">No credit card required.</p>
|
||||
</div>
|
||||
</form>
|
||||
<div ng-show="registering" style="text-align: center">
|
||||
<span class="spin" color="#fff" style="display: inline-block"></span>
|
||||
</div>
|
||||
<div ng-show="awaitingConfirmation">
|
||||
<div class="sub-message">Thank you for registering! We have sent you an activation email. You must <b>verify your email address</b> before you can continue.</div>
|
||||
</div>
|
||||
<div class="signup-form"></div>
|
||||
</div>
|
||||
<div ng-show="!user.anonymous" class="user-welcome">
|
||||
<img class="gravatar" src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=128&d=identicon" />
|
||||
|
|
|
|||
Reference in a new issue