Merge pull request #5107 from overleaf/jk-de-ng-reconfirm-and-pw-reset

[web] de-ng password reset and must-reconfirm forms

GitOrigin-RevId: 2101493ff017ba56214c6f981129f94eb9db46aa

services/web/app/src/Features/PasswordReset/PasswordResetController.js

@@ -63,7 +63,7 @@ module.exports = {
   requestReset(req, res, next) {
     const email = EmailsHelper.parseEmail(req.body.email)
     if (!email) {
-      return res.status(400).send({
+      return res.status(400).json({
         message: req.i18n.translate('must_be_email_address'),
       })
     }
@@ -74,15 +74,15 @@ module.exports = {
         })
         next(err)
       } else if (status === 'primary') {
-        res.status(200).send({
+        res.status(200).json({
-          message: { text: req.i18n.translate('password_reset_email_sent') },
+          message: req.i18n.translate('password_reset_email_sent'),
         })
       } else if (status === 'secondary') {
-        res.status(404).send({
+        res.status(404).json({
           message: req.i18n.translate('secondary_email_password_reset'),
         })
       } else {
-        res.status(404).send({
+        res.status(404).json({
           message: req.i18n.translate('cant_find_email'),
         })
       }

services/web/app/views/user/passwordReset.pug

@@ -1,4 +1,4 @@
-extends ../layout
+extends ../layout-marketing
 include ../_mixins/recaptcha
 
 block vars
@@ -26,37 +26,37 @@ block content
 							h1 #{translate("password_reset")}
 						.messageArea
 						form(
-							async-form="password-reset-request",
+							data-ol-form
 							name="passwordResetForm"
 							action="/user/password/reset",
 							method="POST",
 							captcha=(showCaptcha ? '' : false),
 							captcha-action-name=(showCaptcha ? "passwordReset" : false),
-							ng-cloak
 						)
+							div(data-ol-form-messages)
+
 							input(type="hidden", name="_csrf", value=csrfToken)
-							form-messages(for="passwordResetForm" role="alert")
 							.form-group
 								label(for='email') #{translate("please_enter_email")}
 								input.form-control#email(
+									aria-label="email"
 									type='email',
 									name='email',
 									placeholder='email@example.com',
 									required,
 									autocomplete="username",
-									ng-model="email",
 									autofocus
 								)
-								span.small.text-primary(
-									ng-show="passwordResetForm.email.$invalid && passwordResetForm.email.$dirty"
-								) #{translate("must_be_email_address")}
 							.actions
 								button.btn.btn-primary(
 									type='submit',
-									ng-disabled="passwordResetForm.$invalid || passwordResetForm.inflight"
+									data-ol-disabled-inflight,
+									aria-label=translate('request_password_reset_to_reconfirm')
 								)
-									span(ng-hide="passwordResetForm.inflight") #{translate("request_password_reset")}
+									span(data-ol-not-inflight-text)
-									span(ng-show="passwordResetForm.inflight") #{translate("requesting_password_reset")}…
+										| #{translate("request_password_reset")}
+									span(hidden data-ol-inflight-text)
+										| #{translate("requesting_password_reset")}…
 
 			.row
 				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4

services/web/app/views/user/reconfirm.pug

@@ -1,4 +1,4 @@
-extends ../layout
+extends ../layout-marketing
 include ../_mixins/recaptcha
 
 block content
@@ -25,18 +25,17 @@ block content
 							a(href=`mailto:${settings.adminEmail}`, ng-non-bindable) #{settings.adminEmail}
 							| .
 						form(
-							async-form="reconfirm-account-request",
+							data-ol-form
 							name="reconfirmAccountForm"
 							action="/user/reconfirm",
 							method="POST",
-							ng-cloak
-							ng-init="email='"+email+"'"
 							aria-label=translate('request_reconfirmation_email')
 							captcha=(showCaptcha ? '' : false),
-							captcha-action-name=(showCaptcha ? "passwordReset" : false),
+							captcha-action-name=(showCaptcha ? "passwordReset" : false)
 						)
+							div(data-ol-form-messages)
+
 							input(type="hidden", name="_csrf", value=csrfToken)
-							form-messages(for="reconfirmAccountForm" role="alert")
 							.form-group
 								label(for='email') #{translate("please_enter_email")}
 								input.form-control(
@@ -45,18 +44,19 @@ block content
 									name='email',
 									placeholder='email@example.com',
 									required,
-									ng-model="email",
 									autofocus
+									value=email
 								)
-								span.small.text-primary(
-									ng-show="reconfirmAccountForm.email.$invalid && reconfirmAccountForm.email.$dirty"
-								) #{translate("must_be_email_address")}
 							.actions
 								button.btn.btn-primary(
 									type='submit',
-									ng-disabled="reconfirmAccountForm.$invalid"
+									data-ol-disabled-inflight,
 									aria-label=translate('request_password_reset_to_reconfirm')
-								) #{translate('request_password_reset_to_reconfirm')}
+								)
+									span(data-ol-not-inflight-text)
+										| #{translate('request_password_reset_to_reconfirm')}
+									span(hidden data-ol-inflight-text)
+										| #{translate('request_password_reset_to_reconfirm')}… 
 			.row
 				.col-sm-12.col-md-6.col-md-offset-3
 					if showCaptcha

services/web/test/unit/src/PasswordReset/PasswordResetControllerTests.js

@@ -68,6 +68,9 @@ describe('PasswordResetController', function () {
   })
 
   describe('requestReset', function () {
+    beforeEach(function () {
+      this.res.json = sinon.stub()
+    })
     it('should tell the handler to process that email', function (done) {
       this.PasswordResetHandler.generateAndEmailResetToken.callsArgWith(
         1,
@@ -79,6 +82,7 @@ describe('PasswordResetController', function () {
         .calledWith(this.email)
         .should.equal(true)
       this.res.statusCode.should.equal(200)
+      this.res.json.calledWith(sinon.match.has('message')).should.equal(true)
       done()
     })
 
@@ -101,6 +105,7 @@ describe('PasswordResetController', function () {
       )
       this.PasswordResetController.requestReset(this.req, this.res)
       this.res.statusCode.should.equal(404)
+      this.res.json.calledWith(sinon.match.has('message')).should.equal(true)
       done()
     })
 
@@ -112,6 +117,7 @@ describe('PasswordResetController', function () {
       )
       this.PasswordResetController.requestReset(this.req, this.res)
       this.res.statusCode.should.equal(404)
+      this.res.json.calledWith(sinon.match.has('message')).should.equal(true)
       done()
     })
 
@@ -128,6 +134,7 @@ describe('PasswordResetController', function () {
         .calledWith(this.email.toLowerCase().trim())
         .should.equal(true)
       this.res.statusCode.should.equal(200)
+      this.res.json.calledWith(sinon.match.has('message')).should.equal(true)
       done()
     })
   })