moparisthebest
/
mail
mirror of https://github.com/moparisthebest/mail
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix formvalidation, integrate wmail account creation UI

This commit is contained in:
Tankred Hase 2014-11-09 20:58:13 +01:00
parent 4468c91242
commit 4bfeb99b7b
9 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/js/app.js
View File

@ -16,6 +16,8 @@ if (typeof window.applicationCache !== 'undefined') {
var DialogCtrl = require('./controller/dialog'),
AddAccountCtrl = require('./controller/add-account'),
CreateAccountCtrl = require('./controller/create-account'),
ValidatePhoneCtrl = require('./controller/validate-phone'),
AccountCtrl = require('./controller/account'),
SetPassphraseCtrl = require('./controller/set-passphrase'),
PrivateKeyUploadCtrl = require('./controller/privatekey-upload'),
@ -63,12 +65,12 @@ app.config(function($routeProvider) {
controller: AddAccountCtrl
});
$routeProvider.when('/create-account', {
templateUrl: 'tpl/create-account.html'/*,
controller: AddAccountCtrl*/
templateUrl: 'tpl/create-account.html',
controller: CreateAccountCtrl
});
$routeProvider.when('/validate-phone', {
templateUrl: 'tpl/validate-phone.html'/*,
controller: AddAccountCtrl*/
templateUrl: 'tpl/validate-phone.html',
controller: ValidatePhoneCtrl
});
$routeProvider.when('/login-set-credentials', {
templateUrl: 'tpl/login-set-credentials.html',

1
src/js/controller/add-account.js
View File

@ -11,6 +11,7 @@ var AddAccountCtrl = function($scope, $location, $routeParams, $http) {
$scope.getAccountSettings = function() {
if ($scope.form.$invalid) {
$scope.errMsg = 'Please enter a valid email address!';
return;
}

12
src/js/controller/create-account.js
View File

@ -11,16 +11,24 @@ var CreateAccountCtrl = function($scope, $location, $routeParams) {
$scope.createWhiteoutAccount = function() {
if ($scope.form.$invalid) {
$scope.errMsg = 'Please fill out all required fields!';
return;
}
$scope.busy = true;
$scope.errMsg = undefined; // reset error msg
$scope.emailAddress = $scope.user + '@' + cfg.wmailDomain;
var emailAddress = $scope.user + '@' + cfg.wmailDomain;
// set to state for next view
$scope.state.createAccount = {
emailAddress: emailAddress,
pass: $scope.pass,
realname: $scope.realname
};
// call REST api
appCtrl._adminDao.createUser({
emailAddress: $scope.emailAddress,
emailAddress: emailAddress,
password: $scope.pass,
phone: $scope.phone.replace(/\s+/g, ''), // remove spaces from the phone number
betaCode: $scope.betaCode.toUpperCase()

21
src/js/controller/validate-phone.js
View File

@ -10,21 +10,22 @@ var ValidatePhoneCtrl = function($scope, $location, $routeParams) {
}
$scope.validateUser = function() {
if ($scope.formValidate.$invalid) {
if ($scope.form.$invalid) {
$scope.errMsg = 'Please fill out all required fields!';
return;
}
$scope.busyValidate = true;
$scope.errMsgValidate = undefined; // reset error msg
$scope.busy = true;
$scope.errMsg = undefined; // reset error msg
// verify user to REST api
appCtrl._adminDao.validateUser({
emailAddress: $scope.emailAddress,
emailAddress: $scope.state.createAccount.emailAddress,
token: $scope.token.toUpperCase()
}, function(err) {
if (err) {
$scope.busyValidate = false;
$scope.errMsgValidate = err.errMsg || err.message;
$scope.busy = false;
$scope.errMsg = err.errMsg || err.message;
$scope.$apply();
return;
}
@ -38,10 +39,10 @@ var ValidatePhoneCtrl = function($scope, $location, $routeParams) {
// store credentials in memory
appCtrl._auth.setCredentials({
provider: 'wmail',
emailAddress: $scope.emailAddress,
username: $scope.emailAddress,
realname: $scope.realname,
password: $scope.pass,
emailAddress: $scope.state.createAccount.emailAddress,
username: $scope.state.createAccount.emailAddress,
realname: $scope.state.createAccount.realname,
password: $scope.state.createAccount.pass,
imap: cfg.wmail.imap,
smtp: cfg.wmail.smtp
});

3
src/sass/blocks/basics/_form.scss
View File

@ -93,8 +93,7 @@
color: $color-text-light;
}
&:invalid,
&.ng-invalid,
&.ng-touched.ng-invalid,
&--error {
border-color: $color-error;
}

6
src/tpl/add-account.html
View File

@ -9,10 +9,10 @@
<form class="form" name="form">
<p class="form__error-message" ng-show="errMsg">{{errMsg}}</p>
<p class="form__error-message" ng-show="form.$invalid">Please enter a valid email address!</p>
<div class="form__row">
<input type="email" ng-model="emailAddress" class="input-text input-text--big" placeholder="Enter email address" required
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input type="email" ng-model="emailAddress" placeholder="Enter email address" required tabindex="1"
class="input-text input-text--big" ng-class="{'input-text--error': errMsg}"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
<div class="spinner-block" ng-show="busy">
<span class="spinner spinner--big"></span>

16
src/tpl/create-account.html
View File

@ -8,30 +8,30 @@
<p class="typo-paragraph">Please fill out the following form. You will need a <em>beta access code</em> during the private beta period. To participate in the private beta just <a href="mailto:support@whiteout.io?subject=Beta%20Access%20Code&body=I%20would%20like%20to%20try%20the%20encrypted%20Whiteout%20Mailbox%20service.%20Please%20send%20me%20a%20beta%20access%20code." target="_blank">get in touch</a>.</p>
<form class="form" name="form">
<p class="form__error-message" ng-show="errMsg">{{errMsg}}</p>
<p class="form__error-message" ng-show="form.$invalid">Please fill out all required fields!</p>
<div class="form__row">
<div class="input-email-fixed-domain">
<input class="input-text" ng-model="user" required type="text"
pattern='^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))' placeholder="User name" focus-me="step === 2">
<input class="input-text" ng-model="user" required type="text" focus-me="true" tabindex="1"
pattern='[a-zA-Z0-9\.]+' placeholder="User name"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<span>@wmail.io</span>
</div>
</div>
<div class="form__row">
<input class="input-text" type="text" ng-model="realname" placeholder="Full name (optional)">
<input class="input-text" type="text" ng-model="realname" placeholder="Full name (optional)" tabindex="2">
</div>
<div class="form__row form__row--multi">
<div class="form__col">
<input class="input-text" ng-model="pass" required type="password" placeholder="Password" pattern=".{3,30}">
<input class="input-text" ng-model="pass" required type="password" placeholder="Password" pattern=".{3,30}" tabindex="3">
</div>
<div class="form__col">
<input class="input-text right" ng-model="confirmPass" required type="password" placeholder="Confirm password" ng-class="{'input-text--error': (pass || confirmPass) && pass !== confirmPass}">
<input class="input-text right" ng-model="confirmPass" required type="password" placeholder="Confirm password" ng-class="{'input-text--error': (pass || confirmPass) && pass !== confirmPass}" tabindex="4">
</div>
</div>
<div class="form__row">
<input class="input-text" type="tel" ng-model="phone" required placeholder="Mobile phone number (e.g. +49 170 1234567)">
<input class="input-text" type="tel" ng-model="phone" required placeholder="Mobile phone number (e.g. +49 170 1234567)" tabindex="5">
</div>
<div class="form__row">
<input class="input-text" type="text" ng-model="betaCode" required placeholder="Beta access code">
<input class="input-text" type="text" ng-model="betaCode" required placeholder="Beta access code" tabindex="6">
</div>
<div class="spinner-block" ng-show="busy">
<span class="spinner spinner--big"></span>

11
src/tpl/login-set-credentials.html
View File

@ -26,21 +26,16 @@
</p>
</fieldset>
<p class="form__error-message" ng-show="form.$invalid || credentialsIncomplete">
Please fill out all required fields!
</p>
<div class="form__row">
<input class="input-text" type="email" required ng-model="emailAddress"
placeholder="Email address" focus-me="true" tabindex="1" spellcheck="false">
placeholder="Email address" tabindex="1" spellcheck="false">
</div>
<div class="form__row">
<input class="input-text" type="text" ng-model="realname"
placeholder="Full name (optional)" tabindex="2">
placeholder="Full name (optional)" focus-me="true" tabindex="2">
</div>
<div class="form__row" ng-hide="useOAuth">
<input ng-required="!useOAuth" class="input-text"
ng-class="{'input-text--error': connectionError}" type="password"
<input ng-required="!useOAuth" class="input-text" type="password"
ng-model="password" placeholder="Password" tabindex="3">
</div>

9
src/tpl/validate-phone.html
View File

@ -6,12 +6,13 @@
<main class="page__main">
<h2 class="typo-title">Validate phone number</h2>
<p class="typo-paragraph">We have sent you a validation code via SMS. Please enter this code to confirm your phone number.</p>
<form class="form" name="formValidate">
<p class="form__error-message" ng-show="errMsgValidate">{{errMsgValidate}}</p>
<form class="form" name="form">
<p class="form__error-message" ng-show="errMsg">{{errMsg}}</p>
<div class="form__row">
<input type="text" class="input-text input-text--big" size="6" maxlength="6" ng-model="token" placeholder="Code" focus-me="step === 3" required pattern="([a-zA-Z0-9]*)">
<input type="text" class="input-text input-text--big" ng-class="{'input-text--error': errMsg}"
size="6" maxlength="6" ng-model="token" placeholder="Code" required pattern="([a-zA-Z0-9]*)" focus-me="true" tabindex="1">
</div>
<div class="spinner-block" ng-show="busyValidate">
<div class="spinner-block" ng-show="busy">
<span class="spinner spinner--big"></span>
</div>
<div class="form__row">