Commit 820c9705 authored by Randall Leeds's avatar Randall Leeds

Split settings tabs; make auth and settings blocks

Make the auth and settings sections of the app template into blocks so
that they can easily be overridden in inheriting templates. That makes
it possible to split the account and notifications settings into their
own templates without worrying about whether they are applicable for
downstream partners, who can now override the whole block rather than
the account template, for instance.
parent e19bae3a
<div class="tabbable"
ng-controller="AccountController"
ng-model="tab"
>
{% raw %}
<div class="tab-pane" title="Account">
<form class="account-form form"
name="changePasswordForm"
ng-submit="submit(changePasswordForm)"
novalidate form-validate>
<h2 class="form-heading"><span>Change Your Password</span></h2>
<div class="form-field">
<label class="form-label" for="field-old-password">Current Password:</label>
<input id="field-old-password" class="form-input" type="password" name="pwd" required ng-model="changePassword.pwd" />
<ul class="form-error-list">
<li class="form-error" ng-show="changePasswordForm.pwd.$error.required">Please enter your current password.</li>
<li class="form-error" ng-show="changePasswordForm.pwd.$error.minlength">Your password does not match the one we have on record.</li>
<li class="form-error" ng-show="changePasswordForm.pwd.$error.response">{{changePasswordForm.pwd.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-new-password">New Password:</label>
<input id="field-new-password" class="form-input" type="password" name="password" required ng-model="changePassword.password" />
<ul class="form-error-list">
<li class="form-error" ng-show="changePasswordForm.password.$error.required">Please enter a password.</li>
<li class="form-error" ng-show="changePasswordForm.password.$error.minlength">Passwords must be at least 2 characters.</li>
<li class="form-error" ng-show="changePasswordForm.password.$error.response">{{changePasswordForm.password.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-confirm-password">Confirm Password:</label>
<input id="field-confirm-password" class="form-input" type="password" name="confirmPassword" ng-model="changePassword.confirmPassword" match="changePassword.password" required>
<ul class="form-error-list">
<li class="form-error" ng-show="changePasswordForm.confirmPassword.$error.required">Please confirm your new password.</li>
<li class="form-error" ng-show="changePasswordForm.confirmPassword.$error.minlength">Passwords must be at least 2 characters.</li>
<li class="form-error" ng-show="changePasswordForm.confirmPassword.$error.match">Passwords do not match.</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-buttons">
<button class="btn" type="submit"
status-button="changePasswordForm">Update</button>
</div>
</div>
</form>
<form class="account-form form" name="deleteAccountForm" ng-submit="delete(deleteAccountForm)" novalidate form-validate>
<h2 class="form-heading"><span>Delete Account</span></h2>
<p class="form-description">This will delete your user account. If you would like to delete your annotations, do so before continuing or email us at <a href="mailto:support@hypothes.is">support@hypothes.is</a>.</p>
<div class="form-field">
<label class="form-label" for="confirm-account-deletion">Confirm Password:</label>
<input id="confirm-account-deletion" class="form-input" type="password" name="pwd" ng-model="deleteAccount.pwd" required>
<ul class="form-error-list">
<li class="form-error" ng-show="deleteAccountForm.pwd.$error.required">Please enter your password to confirm</li>
<li class="form-error" ng-show="deleteAccountForm.pwd.$error.response">{{deleteAccountForm.pwd.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-buttons">
<button class="btn btn-danger" type="submit"
status-button="deleteAccountForm">Delete Account</button>
</div>
</div>
</form>
</div>
{% endraw %}
{% if feature('notification') %}
{% raw %}
<div class="tab-pane" title="Notifications">
<form class="account-form form" name="notificationsForm">
<p class="form-description">Receive notification emails for:</p>
<div class="form-field form-checkbox-list">
<div class="form-checkbox-item" ng-repeat="subscription in subscriptions">
<input id="checkbox-{{$index}}" type="checkbox" ng-model="subscription.active" ng-change="updated($index, notificationsForm)" />
<label class="form-label" for="checkbox-{{$index}}">{{subscriptionDescription[subscription.type]}}</label>
</div>
</div>
</form>
</div>
{% endraw %}
{% endif %}
</div>
<div class="pull-right">
<div title="Close" class="cancel-icon" ng-click="close()"></div>
</div>
<div ng-click="callback()" class="pull-left notif-text">
{{model.text}}
</div>
<div class="tab-pane" title="Account">
<form class="account-form form"
name="changePasswordForm"
ng-submit="submit(changePasswordForm)"
novalidate form-validate>
<h2 class="form-heading"><span>Change Your Password</span></h2>
<div class="form-field">
<label class="form-label" for="field-old-password">Current Password:</label>
<input id="field-old-password" class="form-input" type="password" name="pwd" required ng-model="changePassword.pwd" />
<ul class="form-error-list">
<li class="form-error" ng-show="changePasswordForm.pwd.$error.required">Please enter your current password.</li>
<li class="form-error" ng-show="changePasswordForm.pwd.$error.minlength">Your password does not match the one we have on record.</li>
<li class="form-error" ng-show="changePasswordForm.pwd.$error.response">{{changePasswordForm.pwd.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-new-password">New Password:</label>
<input id="field-new-password" class="form-input" type="password" name="password" required ng-model="changePassword.password" />
<ul class="form-error-list">
<li class="form-error" ng-show="changePasswordForm.password.$error.required">Please enter a password.</li>
<li class="form-error" ng-show="changePasswordForm.password.$error.minlength">Passwords must be at least 2 characters.</li>
<li class="form-error" ng-show="changePasswordForm.password.$error.response">{{changePasswordForm.password.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-confirm-password">Confirm Password:</label>
<input id="field-confirm-password" class="form-input" type="password" name="confirmPassword" ng-model="changePassword.confirmPassword" match="changePassword.password" required>
<ul class="form-error-list">
<li class="form-error" ng-show="changePasswordForm.confirmPassword.$error.required">Please confirm your new password.</li>
<li class="form-error" ng-show="changePasswordForm.confirmPassword.$error.minlength">Passwords must be at least 2 characters.</li>
<li class="form-error" ng-show="changePasswordForm.confirmPassword.$error.match">Passwords do not match.</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-buttons">
<button class="btn" type="submit"
status-button="changePasswordForm">Update</button>
</div>
</div>
</form>
<form class="account-form form" name="deleteAccountForm" ng-submit="delete(deleteAccountForm)" novalidate form-validate>
<h2 class="form-heading"><span>Delete Account</span></h2>
<p class="form-description">This will delete your user account. If you would like to delete your annotations, do so before continuing or email us at <a href="mailto:support@hypothes.is">support@hypothes.is</a>.</p>
<div class="form-field">
<label class="form-label" for="confirm-account-deletion">Confirm Password:</label>
<input id="confirm-account-deletion" class="form-input" type="password" name="pwd" ng-model="deleteAccount.pwd" required>
<ul class="form-error-list">
<li class="form-error" ng-show="deleteAccountForm.pwd.$error.required">Please enter your password to confirm</li>
<li class="form-error" ng-show="deleteAccountForm.pwd.$error.response">{{deleteAccountForm.pwd.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-buttons">
<button class="btn btn-danger" type="submit"
status-button="deleteAccountForm">Delete Account</button>
</div>
</div>
</form>
</div>
<div class="tab-pane" title="Notifications">
<form class="account-form form" name="notificationsForm">
<p class="form-description">Receive notification emails for:</p>
<div class="form-field form-checkbox-list">
<div class="form-checkbox-item" ng-repeat="subscription in subscriptions">
<input id="checkbox-{{$index}}" type="checkbox" ng-model="subscription.active" ng-change="updated($index, notificationsForm)" />
<label class="form-label" for="checkbox-{{$index}}">{{subscriptionDescription[subscription.type]}}</label>
</div>
</div>
</form>
</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