Merge pull request #5012 from overleaf/jk-de-ng-user-emails-confirm

[web] de-ng the user/emails/confirm page

GitOrigin-RevId: d4b3ceb524627593be05308475b0597242dba8a1

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

@@ -1,4 +1,4 @@
-extends ../layout
+extends ../layout-marketing
 
 block content
 	main.content.content-alt#main-content
@@ -9,20 +9,30 @@ block content
 						.page-header
 							h1 #{translate("confirm_email")}
 						form(
-							async-form="confirm-email",
+							data-ol-form,
+							data-ol-auto-submit,
 							name="confirmEmailForm"
 							action="/user/emails/confirm",
 							method="POST",
 							id="confirmEmailForm",
-							auto-submit="true",
-							ng-cloak
 						)
 							input(type="hidden", name="_csrf", value=csrfToken)
-							input(type="hidden", name="token", value=token ng-non-bindable)
-							form-messages(for="confirmEmailForm")
-								.alert.alert-success(ng-show="confirmEmailForm.response.success")
-									| Thank you, your email is now confirmed
-							p.text-center(ng-show="!confirmEmailForm.response.success && !confirmEmailForm.response.error")
-								i.fa.fa-fw.fa-spin.fa-spinner(aria-hidden="true")
-								|
-								| Confirming your email…
+							input(type="hidden", name="token", value=token)
+
+							div(data-ol-not-sent)
+								div(data-ol-form-messages)
+
+								.actions
+									button.btn-primary.btn.btn-block(
+										type='submit',
+										data-ol-disabled-inflight
+									)
+										span(data-ol-not-inflight-text)
+											| #{translate('confirm')}
+										span(hidden data-ol-inflight-text)
+											i.fa.fa-fw.fa-spin.fa-spinner(aria-hidden="true")
+											|  #{translate('confirming')}… 
+
+							div(hidden data-ol-sent)
+								.alert.alert-success
+									| #{translate('thank_you_email_confirmed')}

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

@@ -112,6 +112,11 @@ function showMessages(formEl, messageBag) {
       'alert-success': message.type !== 'error',
     })
     messageEl.textContent = message.text
+    messageEl.setAttribute('aria-live', 'assertive')
+    messageEl.setAttribute(
+      'role',
+      message.type === 'error' ? 'alert' : 'status'
+    )
     messagesEl.append(messageEl)
   })
 }

services/web/locales/en.json

@@ -390,6 +390,7 @@
   "make_default": "Make default",
   "remove": "Remove",
   "confirm_email": "Confirm Email",
+  "thank_you_email_confirmed": "Thank you, your email is now confirmed",
   "invited_to_join_team": "You have been invited to join a team",
   "join_team": "Join Team",
   "accepted_invite": "Accepted invite",
@@ -731,6 +732,7 @@
   "project_url": "Affected project URL",
   "subject": "Subject",
   "confirm": "Confirm",
+  "confirming": "Confirming",
   "cancel_personal_subscription_first": "You already have a personal subscription, would you like us to cancel this first before joining the group licence?",
   "delete_projects": "Delete Projects",
   "leave_projects": "Leave Projects",