3172: Added to activation code form

Author: tuj

src/components/activation-code/activation-code-create.jsx

@@ -69,16 +69,14 @@ function ActivationCodeCreate() {
   };
 
   return (
-    <div className="p-3">
-      <ActivationCodeForm
-        activationCode={formStateObject}
-        headerText={headerText}
-        handleInput={handleInput}
-        handleSubmit={handleSubmit}
-        isLoading={isSaving}
-        loadingMessage={t("loading-messages.saving-activation-code")}
-      />
-    </div>
+    <ActivationCodeForm
+      activationCode={formStateObject}
+      headerText={headerText}
+      handleInput={handleInput}
+      handleSubmit={handleSubmit}
+      isLoading={isSaving}
+      loadingMessage={t("loading-messages.saving-activation-code")}
+    />
   );
 }
 

src/components/activation-code/activation-code-form.jsx

@@ -1,14 +1,14 @@
 import { React } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button } from "react-bootstrap";
+import { Button, Col, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
 import ContentBody from "../util/content-body/content-body";
-import ContentFooter from "../util/content-footer/content-footer";
 import FormInput from "../util/forms/form-input";
 import RadioButtons from "../util/forms/radio-buttons";
+import StickyFooter from "../util/sticky-footer";
 
 /**
  * The user form component.
@@ -17,6 +17,7 @@ import RadioButtons from "../util/forms/radio-buttons";
  * @param {object} props.activationCode The activationCode object to modify in the form.
  * @param {Function} props.handleInput Handles form input.
  * @param {Function} props.handleSubmit Handles form submit.
+ * @param {Function} props.handleSaveNoClose Handles form submit without close.
  * @param {string} props.headerText Headline text.
  * @param {boolean} props.isLoading Indicator of whether the form is loading
  * @param {string} props.loadingMessage The loading message for the spinner
@@ -48,44 +49,48 @@ function ActivationCodeForm({
     <>
       <LoadingComponent isLoading={isLoading} loadingMessage={loadingMessage} />
       <Form>
-        <h1 id="h1UserDisplayName">{headerText}</h1>
-        <ContentBody>
-          <div className="mb-2">
-            <FormInput
-              title="display-name"
-              type="text"
-              label={t("display-name-label")}
-              placeholder={t("display-name-placeholder")}
-              value={activationCode.displayName}
-              onChange={handleInput}
-              name="displayName"
-              required
-            />
-          </div>
-          <div className="mb-2">
-            <RadioButtons
-              radioGroupName="role"
-              handleChange={handleInput}
-              options={roles}
-              label={t("role-label")}
-              selected={activationCode.role}
-            />
-            <div>
-              <small>{t("role-external-user-helptext")}</small>
-            </div>
-            <div>
-              <small>{t("role-external-user-admin-helptext")}</small>
-            </div>
-          </div>
-        </ContentBody>
-        <ContentFooter>
+        <Row className="m-3">
+          <h1 id="h1UserDisplayName">{headerText}</h1>
+          <Col>
+            <ContentBody>
+              <div className="mb-2">
+                <FormInput
+                  title="display-name"
+                  type="text"
+                  label={t("display-name-label")}
+                  placeholder={t("display-name-placeholder")}
+                  value={activationCode.displayName}
+                  onChange={handleInput}
+                  name="displayName"
+                  required
+                />
+              </div>
+              <div className="mb-2">
+                <RadioButtons
+                  radioGroupName="role"
+                  handleChange={handleInput}
+                  options={roles}
+                  label={t("role-label")}
+                  selected={activationCode.role}
+                />
+                <div>
+                  <small>{t("role-external-user-helptext")}</small>
+                </div>
+                <div>
+                  <small>{t("role-external-user-admin-helptext")}</small>
+                </div>
+              </div>
+            </ContentBody>
+          </Col>
+        </Row>
+
+        <StickyFooter>
           <Button
             variant="secondary"
             type="button"
             id="cancel_user"
             onClick={() => navigate("/activation/list/")}
             className="margin-right-button"
-            size="lg"
           >
             {t("cancel-button")}
           </Button>
@@ -94,12 +99,10 @@ function ActivationCodeForm({
             type="button"
             onClick={handleSubmit}
             id="save_user"
-            size="lg"
-            className="col"
           >
             {t("save-button")}
           </Button>
-        </ContentFooter>
+        </StickyFooter>
       </Form>
     </>
   );
@@ -112,6 +115,7 @@ ActivationCodeForm.propTypes = {
   }).isRequired,
   handleInput: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
+  handleSaveNoClose: PropTypes.func.isRequired,
   headerText: PropTypes.string.isRequired,
   isLoading: PropTypes.bool,
   loadingMessage: PropTypes.string,