Skip to content

C
coopwire-hypothesis
Commit 570f2b16 authored by Sean Hammond's avatar Sean Hammond
Browse files
Options

Merge pull request #2582 from hypothesis/replace-accounts-forms 

Server-rendered accounts forms
parents c36acd9d 8a46ae38
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 364 deletions
h/static/scripts/account/account-controller.js → h/static/scripts/account-controller.js
View file @ 570f2b16
......@@ -144,4 +144,4 @@ function AccountController($scope, $filter, auth, flash, formRespond, identity,
};
}
angular.module('h').controller('AccountController', AccountController);
module.exports = AccountController;
h/static/scripts/account/account.js deleted 100644 → 0
View file @ c36acd9d
var angular = require('angular');
// @ngInject
function AuthAppController($location, $scope, $timeout, $window, session) {
function onlogin() {
window.location.href = '/stream';
};
$scope.account = {};
$scope.model = {};
$scope.account.tab = $location.path().split('/')[1];
$scope.$on('auth', function(event, err, data) {
if (data != null ? data.userid : void 0) {
$timeout(onlogin, 1000);
}
});
$scope.$watch('account.tab', function(tab, old) {
if (tab !== old) {
$location.path('/' + tab);
}
});
// TODO: We should be calling identity.beginProvisioning() here in order to
// move toward become a federated BrowserID provider.
session.load(function(data) {
if (data.userid) {
onlogin();
}
});
}
// @ngInject
function AuthPageController($routeParams, $scope) {
$scope.model.code = $routeParams.code;
$scope.hasActivationCode = !!$routeParams.code;
}
// @ngInject
function configure($httpProvider, $locationProvider, $routeProvider) {
// Use the Pyramid XSRF header name
$httpProvider.defaults.xsrfHeaderName = 'X-CSRF-Token';
$locationProvider.html5Mode(true);
$routeProvider.when('/login', {
controller: 'AuthPageController',
templateUrl: 'auth.html'
});
$routeProvider.when('/register', {
controller: 'AuthPageController',
templateUrl: 'auth.html'
});
$routeProvider.when('/forgot_password', {
controller: 'AuthPageController',
templateUrl: 'auth.html'
});
$routeProvider.when('/reset_password/:code?', {
controller: 'AuthPageController',
templateUrl: 'auth.html'
});
}
angular.module('h')
.config(configure)
.controller('AuthAppController', AuthAppController)
.controller('AuthPageController', AuthPageController);
require('./account-controller');
require('./auth-controller');
h/static/scripts/app.coffee
View file @ 570f2b16
......@@ -98,8 +98,10 @@ module.exports = angular.module('h', [
])
.controller('AppController', require('./app-controller'))
.controller('AccountController', require('./account-controller'))
.controller('AnnotationUIController', require('./annotation-ui-controller'))
.controller('AnnotationViewerController', require('./annotation-viewer-controller'))
.controller('AuthController', require('./auth-controller'))
.controller('StreamController', require('./stream-controller'))
.controller('WidgetController', require('./widget-controller'))
......
h/static/scripts/account/auth-controller.js → h/static/scripts/auth-controller.js
View file @ 570f2b16
......@@ -7,19 +7,6 @@ function AuthController($scope, $timeout, flash, session, formRespond) {
$scope.$emit('auth', null, data);
}
$scope.account.tab = (function() {
switch ($scope.account.tab) {
case 'register':
return 'login';
case 'forgot_password':
return 'reset_password';
case 'reset_password':
return 'login';
default:
return $scope.account.tab;
}
})();
angular.copy({}, $scope.model);
if ($scope.form != null) {
......@@ -78,12 +65,6 @@ function AuthController($scope, $timeout, flash, session, formRespond) {
});
};
if ($scope.account == null) {
$scope.account = {
tab: 'login'
};
}
if ($scope.model == null) {
$scope.model = {};
}
......@@ -106,4 +87,4 @@ function AuthController($scope, $timeout, flash, session, formRespond) {
});
}
angular.module('h').controller('AuthController', AuthController);
module.exports = AuthController;
h/static/scripts/session.js
View file @ 570f2b16
......@@ -8,9 +8,6 @@ var CACHE_TTL = 5 * 60 * 1000; // 5 minutes
var ACCOUNT_ACTIONS = [
['login', 'POST'],
['logout', 'POST'],
['register', 'POST'],
['forgot_password', 'POST'],
['reset_password', 'POST'],
['profile', 'GET'],
['edit_profile', 'POST'],
['disable_user', 'POST']
......
h/static/scripts/account/test/account-controller-test.coffee → h/static/scripts/test/account-controller-test.coffee
View file @ 570f2b16
......@@ -15,7 +15,7 @@ describe 'h:AccountController', ->
before ->
angular.module('h', [])
require('../account-controller')
.controller('AccountController', require('../account-controller'))
beforeEach module('h')
......@@ -241,7 +241,7 @@ describe "h:AccountController", ->
# The h module hasn't been defined yet, so we need to define it
# (this happens when it.only() is used in this describe()).
angular.module("h", [])
require("../account-controller")
.controller('AccountController', require('../account-controller'))
)
beforeEach module('h')
......@@ -379,7 +379,7 @@ describe "h:AccountController", ->
}
{$scope} = createAccountController(
formRespond: require("../../form-respond")()
formRespond: require("../form-respond")()
session: getStubSession(
edit_profile: -> {$promise: Promise.reject(server_response)}
)
......@@ -451,7 +451,7 @@ describe "h:AccountController", ->
}
{$scope} = createAccountController(
formRespond: require("../../form-respond")()
formRespond: require("../form-respond")()
session: getStubSession(
edit_profile: -> {$promise: Promise.reject(server_response)}
)
......
h/static/scripts/account/test/auth-controller-test.coffee → h/static/scripts/test/auth-controller-test.coffee
View file @ 570f2b16
......@@ -27,7 +27,7 @@ describe 'h:AuthController', ->
before ->
angular.module('h', [])
require('../auth-controller')
.controller('AuthController', require('../auth-controller'))
beforeEach module('h')
beforeEach module('h.templates')
......
h/static/styles/common.scss
View file @ 570f2b16
......@@ -125,6 +125,13 @@ html {
.form-inline .control-group { margin-bottom: 0; }
.form-vertical {
legend {
font-size: $body1-font-size;
line-height: $body1-line-height;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
select, textarea, input, button {
display: block;
// margin-top: .75em;
......
h/templates/client/auth.html
View file @ 570f2b16
<div class="form-vertical tabbable"
tab-reveal="['forgot_password', 'reset_password']"
<div class="form-vertical"
ng-controller="AuthController as vm"
ng-form="form"
ng-model="account.tab"
ng-submit="vm.submit(form[account.tab])">
<!-- Login -->
<form data-title="Sign in"
data-value="login"
class="form tab-pane"
name="login"
form-validate
novalidate>
<p class="form-description form-error"
ng-show="login.responseErrorMessage">
{{login.responseErrorMessage}}
</p>
<div class="form-field">
<label class="form-label" for="field-login-username">Username or email address:</label>
<input class="form-input" type="text" id="field-login-username"
name="username" value=""
ng-model="model.username" ng-minlength="3"
required autocapitalize="false" />
<ul class="form-error-list">
<li class="form-error"
ng-show="login.username.$error.required"
>Please enter your username or email address.</li>
<li class="form-error"
ng-show="login.username.$error.minlength"
>Usernames are at least 3 characters.</li>
<li class="form-error"
ng-show="login.username.$error.response"
>{{login.username.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-login-password">Password:</label>
<input class="form-input" id="field-login-password"
type="password" name="password" value=""
ng-model="model.password"
required autocapitalize="false" autocorrect="false" />
<ul class="form-error-list">
<li class="form-error"
ng-show="login.password.$error.required"
>Please enter your password.</li>
<li class="form-error"
ng-show="login.password.$error.response"
>{{login.password.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-message">
<a href="" ng-click="account.tab = 'forgot_password'"
>Forgot your password?</a>
</div>
<div class="form-actions-buttons">
<button class="btn btn-primary" type="submit" name="login"
status-button="login">Sign in</button>
ng-submit="vm.submit(form['login'])">
<ul class="nav nav-tabs">
<li class="active"><a href="">Sign in</a></li>
<li><a href="/register" target="_blank">Create an account</a></li>
</ul>
<div class="tab-content">
<form data-value="login"
class="form"
name="login"
form-validate
novalidate>
<p class="form-description form-error"
ng-show="login.responseErrorMessage">
{{login.responseErrorMessage}}
</p>
<div class="form-field">
<label class="form-label" for="field-login-username">Username or email address:</label>
<input class="form-input" type="text" id="field-login-username"
name="username" value=""
ng-model="model.username"
required autocapitalize="false" />
<ul class="form-error-list">
<li class="form-error"
ng-show="login.username.$error.required"
>Please enter your username or email address.</li>
<li class="form-error"
ng-show="login.username.$error.response"
>{{login.username.responseErrorMessage}}</li>
</ul>
</div>
</div>
</form>
<!-- / Login -->
<!-- Register -->
<form data-title="Create an account"
data-value="register"
class="form tab-pane"
name="register"
form-validate
novalidate>
<p class="form-description form-error"
ng-show="register.responseErrorMessage">
{{register.responseErrorMessage}}
</p>
<div class="form-field">
<label class="form-label" for="field-register-username"
>Username:
<span class="form-hint">(between 3 and 15 characters)</span></label>
<input class="form-input" id="field-register-username"
type="text" name="username" value=""
required autocapitalize="false" ng-model="model.username"
ng-minlength="3" ng-maxlength="15"
ng-pattern="/^[A-Za-z0-9._]+$/"
ng-model-options="{updateOn: 'blur'}" />
<ul class="form-error-list">
<li class="form-error"
ng-show="register.username.$error.required"
>Please choose a username.</li>
<li class="form-error"
ng-show="register.username.$error.minlength"
>Usernames must be at least 3 characters.</li>
<li class="form-error"
ng-show="register.username.$error.maxlength"
>Usernames must be 15 characters at most.</li>
<li class="form-error"
ng-show="register.username.$error.pattern"
>Only letters, numbers, underscore and dot are allowed.</li>
<li class="form-error"
ng-show="register.username.$error.response"
>{{register.username.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-register-email"
>Email Address:</label>
<input class="form-input" id="field-register-email"
type="email" name="email" value=""
ng-model="model.email" required autocapitalize="false"
ng-model-options="{updateOn: 'blur'}" />
<ul class="form-error-list">
<li class="form-error"
ng-show="register.email.$error.email"
>Is this an email address?</li>
<li class="form-error"
ng-show="register.email.$error.required"
>Please enter your email.</li>
<li class="form-error"
ng-show="register.email.$error.response"
>{{register.email.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-register-password"
>Password:
<span class="form-hint">(at least two characters)</span></label>
<input id="field-register-password" class="form-input"
type="password" name="password" value=""
required autocapitalize="false" autocorrect="false"
ng-minlength="2" ng-model="model.password"
ng-model-options="{updateOn: 'blur'}" />
<ul class="form-error-list">
<li class="form-error"
ng-show="register.password.$error.required"
>Please enter a password.</li>
<li class="form-error"
ng-show="register.password.$error.minlength"
>Passwords must be at least 2 characters.</li>
<li class="form-error"
ng-show="register.password.$error.response"
>{{register.password.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-message">
You are agreeing to be bound by our <a href="terms-of-service" target="_blank"
>Terms of Service</a>.
</div>
<div class="form-actions-buttons">
<button class="btn" type="submit" name="sign_up"
status-button="register">Sign up</button>
<div class="form-field">
<label class="form-label" for="field-login-password">Password:</label>
<input class="form-input" id="field-login-password"
type="password" name="password" value=""
ng-model="model.password"
required autocapitalize="false" autocorrect="false" />
<ul class="form-error-list">
<li class="form-error"
ng-show="login.password.$error.required"
>Please enter your password.</li>
<li class="form-error"
ng-show="login.password.$error.response"
>{{login.password.responseErrorMessage}}</li>
</ul>
</div>
</div>
</form>
<!-- / Register -->
<!-- Forgot password -->
<form data-title="Password reset"
data-value="forgot_password"
class="form tab-pane"
name="forgot_password"
form-validate
novalidate>
<p class="form-description form-error"
ng-show="forgot_password.responseErrorMessage">
{{forgot_passwordresponseErrorMessage}}
</p>
<div class="form-field">
<label class="form-label" for="field-forgot-email"
>Please enter your email address:</label>
<input class="form-input" id="field-forgot-email"
type="email" name="email" value=""
required autocapitalize="false" ng-model="model.email" />
<ul class="form-error-list">
<li class="form-error"
ng-show="forgot_password.$error.email"
>Is this an email address?</li>
<li class="form-error"
ng-show="forgot_password.$error.required"
>Please enter your email.</li>
<li class="form-error"
ng-show="forgot_password.$error.response"
>{{forgot_password.email.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-buttons">
<button class="btn" type="submit" name="forgot_password"
status-button="forgot_password">Request reset</button>
</div>
</div>
</form>
<!-- / Forgot password -->
<!-- Reset password -->
<form data-title="New password"
data-value="reset_password"
class="form tab-pane"
name="reset_password"
form-validate
novalidate>
<p class="form-description form-error"
ng-show="reset_password.responseErrorMessage">
{{reset_password.responseErrorMessage}}
</p>
<input type="hidden" name="code" value="{{model.code}}" ng-if="hasActivationCode"/>
<div class="form-field" ng-if="!hasActivationCode">
<label class="form-label" for="field-activate-code"
>Your reset code:
<span class="form-hint">(this will be emailed to you)</span>
</label>
<input class="form-input" id="field-activate-code"
type="text" name="code" value=""
required autocorrect="false" autocapitalize="false"
ng-model="model.code" />
<ul class="form-error-list">
<li class="form-error"
ng-show="reset_password.code.$error.required"
>Please enter your reset code</li>
<li class="form-error"
ng-show="reset_password.code.$error.response"
>{{reset_password.code.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-activate-password"
>New password:
<span class="form-hint">(at least two characters)</span>
</label>
<input class="form-input" id="field-activate-password"
type="password" name="password" value=""
required autocapitalize="false" autocorrect="false"
ng-minlength="2" ng-model="model.password" />
<ul class="form-error-list">
<li class="form-error"
ng-show="reset_password.password.$error.required"
>Please choose a password.</li>
<li class="form-error"
ng-show="reset_password.password.$error.minlength"
>Passwords must be at least 2 characters.</li>
<li class="form-error"
ng-show="reset_password.password.$error.response"
>{{reset_password.password.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-buttons">
<button class="btn" type="submit" name="activate"
status-button="activate">Save</button>
<div class="form-actions">
<div class="form-actions-message">
<a href="/forgot_password" target="_blank">Forgot your password?</a>
</div>
<div class="form-actions-buttons">
<button class="btn btn-primary" type="submit" name="login"
status-button="login">Sign in</button>
</div>
</div>
</div>
</form>
<!--/ Reset password -->
</form>
</div><!-- /.tab-content -->
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment