Merge pull request #5261 from overleaf/jpa-de-ng-more-complex-pages

[web] de-ng some of the complex pages

GitOrigin-RevId: 6c85bbf2d21cb2e8d3441202dfd299512bf71453

services/web/app/views/_mixins/bookmarkable_tabset.pug

@@ -0,0 +1,9 @@
+mixin bookmarkable-tabset-header(id, title, active)
+	li(role="presentation" class=(active ? 'active' : ''))
+		a(
+			href='#' + id
+			aria-controls=id
+			role="tab"
+			data-toggle="tab"
+			data-ol-bookmarkable-tab
+		) #{title}

services/web/app/views/admin/index.pug

@@ -1,4 +1,5 @@
-extends ../layout
+extends ../layout-marketing
+include ../_mixins/bookmarkable_tabset
 
 block content
 	.content.content-alt
@@ -8,8 +9,20 @@ block content
 					.card
 						.page-header
 							h1 Admin Panel
-						tabset(bookmarkable-tabset ng-cloak)
+						div(data-ol-bookmarkable-tabset)
-							tab(heading="System Messages" bookmarkable-tab="system-messages")
+							ul.nav.nav-tabs(role="tablist")
+								+bookmarkable-tabset-header('system-messages', 'System Messages', true)
+								+bookmarkable-tabset-header('open-sockets', 'Open Sockets')
+								+bookmarkable-tabset-header('open-close-editor', 'Open/Close Editor')
+								if hasFeature('saas')
+									+bookmarkable-tabset-header('tpds', 'TPDS/Dropbox Management')
+								+bookmarkable-tabset-header('advanced', 'Advanced')
+
+							.tab-content
+								.tab-pane.active(
+									role="tabpanel"
+									id='system-messages'
+								)
 									each message in systemMessages
 										.alert.alert-info.row-spaced(ng-non-bindable) #{message.content}
 									hr
@@ -24,8 +37,10 @@ block content
 										input(name="_csrf", type="hidden", value=csrfToken)
 										button.btn.btn-danger(type="submit") Clear all messages
 
-
+								.tab-pane(
-							tab(heading="Open Sockets" bookmarkable-tab="open-sockets")
+									role="tabpanel"
+									id='open-sockets'
+								)
 									.row-spaced
 										ul
 											each agents, url in openSockets
@@ -34,7 +49,10 @@ block content
 														each agent in agents
 															li(ng-non-bindable) #{agent}
 
-							tab(heading="Open/Close Editor" bookmarkable-tab="open-close-editor")
+								.tab-pane(
+									role="tabpanel"
+									id='open-close-editor'
+								)
 									if hasFeature('saas')
 										| The "Open/Close Editor" feature is not available in SAAS.
 									else
@@ -57,7 +75,10 @@ block content
 											p.small Will reopen the editor after closing.
 
 								if hasFeature('saas')
-								tab(heading="TPDS/Dropbox Management" bookmarkable-tab="tpds")
+									.tab-pane(
+										role="tabpanel"
+										id='tpds'
+									)
 										h3 Flush project to TPDS
 										.row
 											form.col-xs-6(method='post',action='/admin/flushProjectToTpds')
@@ -78,7 +99,10 @@ block content
 												.form-group
 													button.btn-primary.btn(type='submit') Poll
 
-							tab(heading="Advanced" bookmarkable-tab="advanced")
+								.tab-pane(
+									role="tabpanel"
+									id='advanced'
+								)
 									.row-spaced
 										form(method='post',action='/admin/unregisterServiceWorker')
 											input(name="_csrf", type="hidden", value=csrfToken)

services/web/app/views/general/post-gateway.pug

@@ -1,4 +1,4 @@
-extends ../layout
+extends ../layout-marketing
 
 block vars
 	- var suppressNavbar = true
@@ -6,8 +6,6 @@ block vars
 	- var suppressSkipToContent = true
 
 block content
-	script(type="template", id="gateway-data")!= StringHelper.stringifyJsonForScript({ params: form_data })
-
 	.content.content-alt
 		.container
 			.row
@@ -16,6 +14,11 @@ block content
 						p.text-center #{translate('processing_your_request')}
 
 	form(
-		ng-controller="PostGatewayController",
+		data-ol-regular-form
-		ng-init="handleGateway();"
+		data-ol-auto-submit
-		id='gateway' method='POST')
+		method="POST"
+	)
+		input(name="_csrf" type="hidden" value=csrfToken)
+		input(hidden name="viaGateway" type="submit" value="true")
+		for name in Object.keys(form_data)
+			input(name=name type="hidden" value=form_data[name])

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

@@ -1,16 +1,11 @@
-extends ../layout
+extends ../layout-marketing
-
-
-block append meta
-	meta(name="ol-otherSessions" data-type="json" content=sessions)
-
 
 block content
 	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-					.card.clear-user-sessions(ng-controller="ClearSessionsController", ng-cloak)
+					.card.clear-user-sessions
 						.page-header
 							h1  #{translate("your_sessions")}
 
@@ -18,8 +13,14 @@ block content
 							p.small
 								| !{translate("clear_sessions_description")}
 
-						div
+						form(
-							div(ng-if="state.otherSessions.length == 0")
+							data-ol-async-form
+							action='/user/sessions/clear'
+							method='POST'
+						)
+							input(name='_csrf' type='hidden' value=csrfToken)
+							div(data-ol-not-sent)
+								if sessions.length == 0
 									p.text-center
 										| #{translate("no_other_sessions")}
 
@@ -27,22 +28,29 @@ block content
 										p.text-success.text-center
 											| #{translate('clear_sessions_success')}
 
-							div(ng-if="state.otherSessions.length != 0")
+								if sessions.length > 0
 									table.table.table-striped
 										thead
 											tr
 												th #{translate("ip_address")}
 												th #{translate("session_created_at")}
-									tr(ng-repeat="session in state.otherSessions")
+										for session in sessions
-										td {{session.ip_address}}
+											tr
-										td {{session.session_created | formatDate}}
+												td #{session.ip_address}
+												td #{moment(session.session_created).utc().format('Do MMM YYYY, h:mm a')} UTC
 
 									p.actions
 										.text-center
 											button.btn.btn-lg.btn-primary(
-											ng-click="clearSessions()"
+												type="submit"
-										) #{translate('clear_sessions')}
+												data-ol-disable-inflight
+											)
+												span(data-ol-inflight="idle") #{translate('clear_sessions')}
+												span(hidden data-ol-inflight="pending") #{translate("processing")}…
 
-										div(ng-if="state.error == true")
+							div(hidden data-ol-sent)
-											p.text-danger.error
+								p.text-center
-												| #{translate('generic_something_went_wrong')}
+									| #{translate("no_other_sessions")}
+
+								p.text-success.text-center
+									| #{translate('clear_sessions_success')}

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

@@ -56,11 +56,6 @@ function formSubmitHelper(formEl) {
       formEl.dispatchEvent(new Event('idle'))
     }
   })
-  if (formEl.hasAttribute('data-ol-auto-submit')) {
-    setTimeout(() => {
-      formEl.querySelector('[type="submit"]').click()
-    }, 0)
-  }
 }
 
 async function validateCaptcha(formEl) {
@@ -154,6 +149,14 @@ function formValidationHelper(el) {
   })
 }
 
+function formAutoSubmitHelper(el) {
+  if (el.hasAttribute('data-ol-auto-submit')) {
+    setTimeout(() => {
+      el.querySelector('[type="submit"]').click()
+    }, 0)
+  }
+}
+
 export function toggleDisplay(hide, show) {
   hide.forEach(el => {
     el.hidden = true
@@ -168,6 +171,7 @@ function hydrateAsyncForm(el) {
   inflightHelper(el)
   formSentHelper(el)
   formValidationHelper(el)
+  formAutoSubmitHelper(el)
 }
 
 function hydrateRegularForm(el) {
@@ -177,6 +181,8 @@ function hydrateRegularForm(el) {
   el.addEventListener('submit', () => {
     el.dispatchEvent(new Event('pending'))
   })
+
+  formAutoSubmitHelper(el)
 }
 
 document.querySelectorAll(`[data-ol-async-form]`).forEach(hydrateAsyncForm)

services/web/frontend/js/main.js

@@ -14,7 +14,6 @@ import './main/account-settings'
 import './main/clear-sessions'
 import './main/account-upgrade-angular'
 import './main/plans'
-import './main/post-gateway'
 import './main/user-membership'
 import './main/scribtex-popup'
 import './main/event'

services/web/frontend/js/main/post-gateway.js

@@ -1,18 +0,0 @@
-import App from '../base'
-
-export default App.controller('PostGatewayController', function ($scope) {
-  $scope.handleGateway = function () {
-    const { params } = JSON.parse($('#gateway-data').text())
-    params.viaGateway = 'true'
-    Object.keys(params).forEach(param => {
-      $('<input>')
-        .attr({
-          type: 'hidden',
-          name: param,
-          value: params[param],
-        })
-        .appendTo('#gateway')
-    })
-    $('#gateway').submit()
-  }
-})

services/web/frontend/js/marketing.js

@@ -3,6 +3,7 @@ import 'jquery'
 import 'bootstrap'
 import './features/form-helpers/hydrate-form'
 import './features/link-helpers/slow-link'
+import './features/bookmarkable-tab'
 import './features/contact-form'
 import './features/event-tracking'
 import './features/fallback-image'