From 618b6a784975f102cc6becf85088fae927abd342 Mon Sep 17 00:00:00 2001 From: James Allen Date: Wed, 18 Jun 2014 15:23:00 +0100 Subject: [PATCH] Apply form validations --- services/web/app/views/project/list.jade | 82 +++++++++++-------- services/web/app/views/user/feedback.jade | 14 ---- services/web/app/views/user/login.jade | 19 ++++- .../web/app/views/user/passwordReset.jade | 13 ++- services/web/app/views/user/register.jade | 28 ++++++- services/web/app/views/user/setPassword.jade | 13 ++- .../public/stylesheets/components/forms.less | 18 ++-- 7 files changed, 118 insertions(+), 69 deletions(-) delete mode 100644 services/web/app/views/user/feedback.jade diff --git a/services/web/app/views/project/list.jade b/services/web/app/views/project/list.jade index 68fb9f027c..1f91033bf9 100644 --- a/services/web/app/views/project/list.jade +++ b/services/web/app/views/project/list.jade @@ -303,52 +303,64 @@ block content .modal-header h3 Create New Folder .modal-body - input.form-control( - type="text", - placeholder="New Folder Name", - ng-model="inputs.newTagName", - ng-enter="create()", - focus-on="open" - ) + form(name="newTagForm", novalidate) + input.form-control( + type="text", + placeholder="New Folder Name", + required, + ng-model="inputs.newTagName", + ng-enter="create()", + focus-on="open" + ) .modal-footer button.btn.btn-default(ng-click="cancel()") Cancel - button.btn.btn-primary(ng-click="create()") Create + button.btn.btn-primary( + ng-disabled="newTagForm.$invalid" + ng-click="create()" + ) Create script(type='text/ng-template', id='renameProjectModalTemplate') .modal-header h3 Rename Project .modal-body - input.form-control( - type="text", - placeholder="Project Name", - ng-model="inputs.projectName", - ng-enter="rename()", - focus-on="open" - ) + form(name="renameProjectForm", novalidate) + input.form-control( + type="text", + placeholder="Project Name", + ng-model="inputs.projectName", + required, + ng-enter="rename()", + focus-on="open" + ) .modal-footer button.btn.btn-default(ng-click="cancel()") Cancel - button.btn.btn-primary(ng-click="rename()") Rename + button.btn.btn-primary( + ng-click="rename()", + ng-disabled="renameProjectForm.$invalid" + ) Rename script(type='text/ng-template', id='cloneProjectModalTemplate') .modal-header h3 Copy Project .modal-body - .form-group - label New Name - input.form-control( - type="text", - placeholder="New Project Name", - ng-model="inputs.projectName", - ng-enter="clone()", - focus-on="open" - ) + form(name="cloneProjectForm", novalidate) + .form-group + label New Name + input.form-control( + type="text", + placeholder="New Project Name", + required, + ng-model="inputs.projectName", + ng-enter="clone()", + focus-on="open" + ) .modal-footer button.btn.btn-default( ng-disabled="state.inflight" ng-click="cancel()" ) Cancel button.btn.btn-primary( - ng-disabled="state.inflight" + ng-disabled="cloneProjectForm.$invalid || state.inflight" ng-click="clone()" ) span(ng-hide="state.inflight") Copy @@ -358,20 +370,22 @@ block content .modal-header h3 New Project .modal-body - input.form-control( - type="text", - placeholder="Project Name", - ng-model="inputs.projectName", - ng-enter="create()", - focus-on="open" - ) + form(novalidate, name="newProjectForm") + input.form-control( + type="text", + placeholder="Project Name", + required, + ng-model="inputs.projectName", + ng-enter="create()", + focus-on="open" + ) .modal-footer button.btn.btn-default( ng-disabled="state.inflight" ng-click="cancel()" ) Cancel button.btn.btn-primary( - ng-disabled="state.inflight" + ng-disabled="newProjectForm.$invalid || state.inflight" ng-click="create()" ) span(ng-hide="state.inflight") Create diff --git a/services/web/app/views/user/feedback.jade b/services/web/app/views/user/feedback.jade deleted file mode 100644 index db984e31bf..0000000000 --- a/services/web/app/views/user/feedback.jade +++ /dev/null @@ -1,14 +0,0 @@ -extends ../layout - -block content - .container - .box - .page-header - h1 Feedback - form(method='post') - .clearfix - label(for='xlInput') If you are having trouble with a project please include the url e.g. www.sharelatex.com/project/50c49b73ef78e1ad0c000006 - .input - textarea.span11(type='text', name='message').feedback - .actions - button.btn.btn-large.btn-primary(type='submit') Send diff --git a/services/web/app/views/user/login.jade b/services/web/app/views/user/login.jade index 2693525b39..078d51164f 100644 --- a/services/web/app/views/user/login.jade +++ b/services/web/app/views/user/login.jade @@ -8,7 +8,7 @@ block content .card .page-header h1 Login - form(async-form="login", action='/login', ng-cloak) + form(async-form="login", name="loginForm", action='/login', ng-cloak) input(name='_csrf', type='hidden', value=csrfToken) input(name='redir', type='hidden', value=redir) form-messages @@ -16,14 +16,25 @@ block content input.form-control( type='email', name='email', - placeholder='email@example.com' + required, + placeholder='email@example.com', + ng-model="email" ) + span.small.text-primary(ng-show="loginForm.email.$invalid && loginForm.email.$dirty") + | Must be an email address .form-group input.form-control( type='password', name='password', - placeholder='********' + required, + placeholder='********', + ng-model="password" ) + span.small.text-primary(ng-show="loginForm.password.$invalid && loginForm.password.$dirty") + | Required .actions - button.btn-primary.btn(type='submit') Login + button.btn-primary.btn( + type='submit' + ng-disabled="loginForm.$invalid" + ) Login a.pull-right(href='/user/password/reset') Forgot your password? diff --git a/services/web/app/views/user/passwordReset.jade b/services/web/app/views/user/passwordReset.jade index ee5492e9d4..8ae564b389 100644 --- a/services/web/app/views/user/passwordReset.jade +++ b/services/web/app/views/user/passwordReset.jade @@ -11,6 +11,7 @@ block content .messageArea form( async-form="password-reset-request", + name="passwordResetForm" action="/user/password/reset", ng-cloak ) @@ -23,7 +24,15 @@ block content input.form-control( type='email', name='email', - placeholder='email@example.com' + placeholder='email@example.com', + required, + ng-model="email" ) + span.small.text-primary( + ng-show="passwordResetForm.email.$invalid && passwordResetForm.email.$dirty" + ) Must be a valid email address .actions - button.btn.btn-primary(type='submit') Request password reset + button.btn.btn-primary( + type='submit', + ng-disabled="passwordResetForm.$invalid" + ) Request password reset diff --git a/services/web/app/views/user/register.jade b/services/web/app/views/user/register.jade index 34146237da..e7140252e0 100644 --- a/services/web/app/views/user/register.jade +++ b/services/web/app/views/user/register.jade @@ -18,16 +18,36 @@ block content .card .page-header h1 Register - form(async-form="register", action="/register", ng-cloak) + form(async-form="register", name="registerForm", action="/register", novalidate, ng-cloak) input(name='_csrf', type='hidden', value=csrfToken) input(name='redir', type='hidden', value=redir) form-messages .form-group label(for='email') Email - input.form-control(type='email', name='email', value='#{new_email}') + input.form-control( + type='email', + name='email', + value='#{new_email}', + placeholder="email@example.com" + required, + ng-model="email" + ) + span.small.text-primary(ng-show="registerForm.email.$invalid && registerForm.email.$dirty") + | Must be an email address .form-group label(for='password') Password - input.form-control(type='password', name='password') + input.form-control( + type='password', + name='password', + placeholder="********", + required, + ng-model="password" + ) + span.small.text-primary(ng-show="registerForm.password.$invalid && registerForm.password.$dirty") + | Required .actions - button.btn-primary.btn(type='submit') Register + button.btn-primary.btn( + type='submit' + ng-disabled="register.$invalid" + ) Register diff --git a/services/web/app/views/user/setPassword.jade b/services/web/app/views/user/setPassword.jade index 3e22c0a3c9..7b99fa990e 100644 --- a/services/web/app/views/user/setPassword.jade +++ b/services/web/app/views/user/setPassword.jade @@ -10,6 +10,7 @@ block content h1 Reset your password form( async-form="password-reset", + name="passwordResetForm", action="/user/password/set", ng-cloak ) @@ -23,12 +24,20 @@ block content input.form-control( type='password', name='password', - placeholder='new password' + placeholder='new password', + required, + ng-model="password" ) + span.small.text-primary( + ng-show="passwordResetForm.password.$invalid && passwordResetForm.password.$dirty" + ) Required input( type="hidden", name="passwordResetToken", value=passwordResetToken ) .actions - button.btn.btn-primary(type='submit') Set new password \ No newline at end of file + button.btn.btn-primary( + type='submit', + ng-disabled="passwordResetForm.$invalid" + ) Set new password \ No newline at end of file diff --git a/services/web/public/stylesheets/components/forms.less b/services/web/public/stylesheets/components/forms.less index 55b9660bdb..4e32779d7b 100755 --- a/services/web/public/stylesheets/components/forms.less +++ b/services/web/public/stylesheets/components/forms.less @@ -313,15 +313,15 @@ input[type="checkbox"], .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); } -// .form-control.ng-invalid { -// border-color: @state-danger-text; -// .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work -// &:focus { -// border-color: darken(@state-danger-text, 10%); -// @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@state-danger-text, 20%); -// .box-shadow(@shadow); -// } -// } +.form-control.ng-dirty.ng-invalid:not(:focus) { + border-color: @state-danger-text; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work + &:focus { + border-color: darken(@state-danger-text, 10%); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@state-danger-text, 20%); + .box-shadow(@shadow); + } +} // Static form control text