11import { React } from "react" ;
22import { useNavigate } from "react-router-dom" ;
3- import { Button } from "react-bootstrap" ;
3+ import { Button , Col , Row } from "react-bootstrap" ;
44import { useTranslation } from "react-i18next" ;
55import PropTypes from "prop-types" ;
66import Form from "react-bootstrap/Form" ;
77import LoadingComponent from "../util/loading-component/loading-component" ;
88import ContentBody from "../util/content-body/content-body" ;
9- import ContentFooter from "../util/content-footer/content-footer" ;
109import FormInput from "../util/forms/form-input" ;
1110import RadioButtons from "../util/forms/radio-buttons" ;
11+ import StickyFooter from "../util/sticky-footer" ;
1212
1313/**
1414 * The user form component.
@@ -48,44 +48,48 @@ function ActivationCodeForm({
4848 < >
4949 < LoadingComponent isLoading = { isLoading } loadingMessage = { loadingMessage } />
5050 < Form >
51- < h1 id = "h1UserDisplayName" > { headerText } </ h1 >
52- < ContentBody >
53- < div className = "mb-2" >
54- < FormInput
55- title = "display-name"
56- type = "text"
57- label = { t ( "display-name-label" ) }
58- placeholder = { t ( "display-name-placeholder" ) }
59- value = { activationCode . displayName }
60- onChange = { handleInput }
61- name = "displayName"
62- required
63- />
64- </ div >
65- < div className = "mb-2" >
66- < RadioButtons
67- radioGroupName = "role"
68- handleChange = { handleInput }
69- options = { roles }
70- label = { t ( "role-label" ) }
71- selected = { activationCode . role }
72- />
73- < div >
74- < small > { t ( "role-external-user-helptext" ) } </ small >
75- </ div >
76- < div >
77- < small > { t ( "role-external-user-admin-helptext" ) } </ small >
78- </ div >
79- </ div >
80- </ ContentBody >
81- < ContentFooter >
51+ < Row className = "m-3" >
52+ < h1 > { headerText } </ h1 >
53+ < Col >
54+ < ContentBody >
55+ < div className = "mb-2" >
56+ < FormInput
57+ title = "display-name"
58+ type = "text"
59+ label = { t ( "display-name-label" ) }
60+ placeholder = { t ( "display-name-placeholder" ) }
61+ value = { activationCode . displayName }
62+ onChange = { handleInput }
63+ name = "displayName"
64+ required
65+ />
66+ </ div >
67+ < div className = "mb-2" >
68+ < RadioButtons
69+ radioGroupName = "role"
70+ handleChange = { handleInput }
71+ options = { roles }
72+ label = { t ( "role-label" ) }
73+ selected = { activationCode . role }
74+ />
75+ < div >
76+ < small > { t ( "role-external-user-helptext" ) } </ small >
77+ </ div >
78+ < div >
79+ < small > { t ( "role-external-user-admin-helptext" ) } </ small >
80+ </ div >
81+ </ div >
82+ </ ContentBody >
83+ </ Col >
84+ </ Row >
85+
86+ < StickyFooter >
8287 < Button
8388 variant = "secondary"
8489 type = "button"
8590 id = "cancel_user"
8691 onClick = { ( ) => navigate ( "/activation/list/" ) }
8792 className = "margin-right-button"
88- size = "lg"
8993 >
9094 { t ( "cancel-button" ) }
9195 </ Button >
@@ -94,12 +98,10 @@ function ActivationCodeForm({
9498 type = "button"
9599 onClick = { handleSubmit }
96100 id = "save_user"
97- size = "lg"
98- className = "col"
99101 >
100102 { t ( "save-button" ) }
101103 </ Button >
102- </ ContentFooter >
104+ </ StickyFooter >
103105 </ Form >
104106 </ >
105107 ) ;
0 commit comments