[web] Migrate user-activate module to BS5 (#25174)

* Revert-me: Add `user-activate` to SAAS modules

* Migrate user-activate module to BS5

* Add loading state to button

* Revert "Revert-me: Add `user-activate` to SAAS modules"

This reverts commit 0584005953bf470ab21697e5c5448c566d95ca5d.

* Remove `bootstrap5PageStatus` var in register.pug

GitOrigin-RevId: 45fffc902e69a0b8f6e2a1a9c0381c9e844fafca

services/web/modules/user-activate/app/views/user/register.pug

@@ -3,10 +3,6 @@ extends ../../../../../app/views/layout-marketing
 block entrypointVar
 	- entrypoint = 'modules/user-activate/pages/user-activate-page'
 
-
-block vars
-	- bootstrap5PageStatus = 'disabled'
-
 block content
 	.content.content-alt#main-content
 		.container

services/web/modules/user-activate/frontend/js/components/register-form.jsx

@@ -1,5 +1,9 @@
+import { useState } from 'react'
 import PropTypes from 'prop-types'
-import { postJSON } from '../../../../../frontend/js/infrastructure/fetch-json'
+import { postJSON } from '@/infrastructure/fetch-json'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import OLForm from '@/features/ui/components/ol/ol-form'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
 
 function RegisterForm({
   setRegistrationSuccess,
@@ -7,6 +11,7 @@ function RegisterForm({
   setRegisterError,
   setFailedEmails,
 }) {
+  const [isLoading, setIsLoading] = useState(false)
   function handleRegister(event) {
     event.preventDefault()
     const formData = new FormData(event.target)
@@ -22,6 +27,7 @@ function RegisterForm({
   async function registerGivenUsers(emails) {
     const registeredEmails = []
     const failingEmails = []
+    setIsLoading(true)
     for (const email of emails) {
       try {
         const result = await registerUser(email)
@@ -30,6 +36,7 @@ function RegisterForm({
         failingEmails.push(email)
       }
     }
+    setIsLoading(false)
     if (registeredEmails.length > 0) setRegistrationSuccess(true)
     if (failingEmails.length > 0) {
       setRegisterError(true)
@@ -45,10 +52,10 @@ function RegisterForm({
   }
 
   return (
-    <form onSubmit={handleRegister}>
-      <div className="row">
-        <div className="col-md-4 col-xs-8">
-          <input
+    <OLForm onSubmit={handleRegister}>
+      <div className="d-flex gap-2 flex-wrap">
+        <div className="flex-grow-1 max-width">
+          <OLFormControl
             className="form-control"
             name="email"
             type="text"
@@ -61,11 +68,11 @@ function RegisterForm({
             commas
           </p>
         </div>
-        <div className="col-md-8 col-xs-4">
-          <button className="btn btn-primary">Register</button>
-        </div>
+        <OLButton type="submit" className="ms-auto" isLoading={isLoading}>
+          Register
+        </OLButton>
       </div>
-    </form>
+    </OLForm>
   )
 }
 

services/web/modules/user-activate/frontend/js/components/user-activate-register.jsx

@@ -1,6 +1,10 @@
 import { useState } from 'react'
 import PropTypes from 'prop-types'
 import RegisterForm from './register-form'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLCard from '@/features/ui/components/ol/ol-card'
+
 function UserActivateRegister() {
   const [emails, setEmails] = useState([])
   const [failedEmails, setFailedEmails] = useState([])
@@ -8,11 +12,11 @@ function UserActivateRegister() {
   const [registrationSuccess, setRegistrationSuccess] = useState(false)
 
   return (
-    <div className="row">
-      <div className="col-md-12">
-        <div className="card">
+    <OLRow>
+      <OLCol>
+        <OLCard>
           <div className="page-header">
-            <h1> Register New Users</h1>
+            <h1>Register New Users</h1>
           </div>
           <RegisterForm
             setRegistrationSuccess={setRegistrationSuccess}
@@ -30,9 +34,9 @@ function UserActivateRegister() {
               <DisplayEmailsList emails={emails} />
             </>
           ) : null}
-        </div>
-      </div>
-    </div>
+        </OLCard>
+      </OLCol>
+    </OLRow>
   )
 }