Merge pull request #4989 from overleaf/jk-de-ng-logout

[web] de-ng logout page

GitOrigin-RevId: 0d46e554ab41759bbf1044fcd49d750322a345ae

services/web/app/src/Features/User/UserController.js

@@ -19,6 +19,9 @@ const EmailHandler = require('../Email/EmailHandler')
 const UrlHelper = require('../Helpers/UrlHelper')
 const { promisify } = require('util')
 const { expressify } = require('../../util/promises')
+const {
+  acceptsJson,
+} = require('../../infrastructure/RequestContentTypeDetection')
 
 async function _sendSecurityAlertClearedSessions(user) {
   const emailOptions = {
@@ -431,7 +434,11 @@ const UserController = {
       if (err != null) {
         return next(err)
       }
-      res.redirect(redirectUrl)
+      if (acceptsJson(req)) {
+        res.status(200).json({ redir: redirectUrl })
+      } else {
+        res.redirect(redirectUrl)
+      }
     })
   },
 

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

@@ -1,4 +1,4 @@
-extends ../layout
+extends ../layout-marketing
 
 block vars
 	- metadata = { viewport: true }
@@ -9,12 +9,19 @@ block content
 			.card.login-register-card
 				.login-register-header
 					h1.login-register-header-heading #{translate("log_out")}
-				form.login-register-form(name="logoutForm", action='/logout', method="POST" ng-init="$scope.inflight=true" auto-submit-form)
+				form.login-register-form(
+					data-ol-form,
+					name="logoutForm",
+					action='/logout',
+					method="POST"
+					data-ol-auto-submit
+				)
 					input(name='_csrf', type='hidden', value=csrfToken)
+					div(data-ol-form-messages)
 					.actions
 						button#submit-logout.btn-primary.btn.btn-block(
-							type='submit',
-							ng-disabled="$scope.inflight"
+							data-ol-disabled-inflight,
+							type='submit'
 						)
-							span(ng-show="!$scope.inflight") #{translate("log_out")}
-							span(ng-show="$scope.inflight" ng-cloak) #{translate("logging_out")}…
+							span(data-ol-not-inflight-text aria-label=translate('log_out')) #{translate('log_out')}
+							span(hidden data-ol-inflight-text aria-label=translate("logging_out")) #{translate('logging_out')}…

services/web/frontend/js/features/form-helpers/hydrate-form.js

@@ -60,6 +60,11 @@ function formSubmitHelper(formEl) {
       formEl.dispatchEvent(new Event('not-inflight'))
     }
   })
+  if (formEl.hasAttribute('data-ol-auto-submit')) {
+    setTimeout(() => {
+      formEl.querySelector('[type="submit"]').click()
+    }, 0)
+  }
 }
 
 async function validateCaptcha(formEl) {

services/web/test/unit/src/User/UserControllerTests.js

@@ -33,6 +33,7 @@ describe('UserController', function () {
       },
       ip: '0:0:0:0',
       query: {},
+      headers: {},
     }
 
     this.UserDeleter = { deleteUser: sinon.stub().yields() }
@@ -91,6 +92,7 @@ describe('UserController', function () {
       .withArgs('https://evil.com')
       .returns(undefined)
     this.UrlHelper.getSafeRedirectPath.returnsArg(0)
+    this.acceptsJson = sinon.stub().returns(false)
 
     this.UserController = SandboxedModule.require(modulePath, {
       requires: {
@@ -127,6 +129,9 @@ describe('UserController', function () {
           sendEmail: sinon.stub(),
           promises: { sendEmail: sinon.stub().resolves() },
         }),
+        '../../infrastructure/RequestContentTypeDetection': {
+          acceptsJson: this.acceptsJson,
+        },
       },
     })
 
@@ -480,6 +485,10 @@ describe('UserController', function () {
   })
 
   describe('logout', function () {
+    beforeEach(function () {
+      this.acceptsJson.returns(false)
+    })
+
     it('should destroy the session', function (done) {
       this.req.session.destroy = sinon.stub().callsArgWith(0)
       this.res.redirect = url => {
@@ -533,6 +542,20 @@ describe('UserController', function () {
       }
       this.UserController.logout(this.req, this.res)
     })
+
+    it('should send json with redir property for json request', function (done) {
+      this.acceptsJson.returns(true)
+      this.req.session.destroy = sinon.stub().callsArgWith(0)
+      this.res.status = code => {
+        code.should.equal(200)
+        return this.res
+      }
+      this.res.json = data => {
+        data.redir.should.equal('/login')
+        done()
+      }
+      this.UserController.logout(this.req, this.res)
+    })
   })
 
   describe('register', function () {