Feature/bootstrap v5

package.json

@@ -47,7 +47,7 @@
 	"dependencies": {
 		"@vectopus/atlas-icons": "^0.0.7",
 		"axios": "^0.21.1",
-		"bootstrap": "4.6.0",
+		"bootstrap": "^5",
 		"core-js": "3",
 		"date-fns": "^2.28.0",
 		"i18next": "^19.7.0",
@@ -63,7 +63,7 @@
 		"react-redux": "^7.2.0",
 		"react-router-dom": "^5.1.2",
 		"react-simple-tree-menu": "^1.1.18",
-		"reactstrap": "^8.4.1",
+		"reactstrap": "^9.2.0",
 		"redux": "^4.0.1"
 	}
 }

src/modules/auth/containers/AcceptInvitationCard.js

@@ -108,7 +108,7 @@ function AcceptInvitationCard(props) {
 			<CardBody>
 				<Row className="justify-content-center">
 					<h5>
-						<Label for="acceptas" style={{display: "block"}}>
+						<Label for="acceptas" style={{display: "block"}} className='form-label'>
 							{t(`AcceptInvitationCard|Accept invitation as`)}
 							<span className="primary-span">{props.credentials}</span>
 						</Label>

src/modules/auth/containers/FormFields.js

@@ -1,7 +1,7 @@
-import React, { useState }  from 'react';
+import React from 'react';
 import {
-	FormGroup, Input, Label,
-	Button, InputGroupAddon, InputGroup, FormFeedback, FormText
+	Input, Label,
+	InputGroup, FormFeedback, FormText
 } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
 
@@ -22,8 +22,8 @@ export function PhoneField(props) {
 		}
 	);
 	return (
-		<FormGroup>
-			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="phone">
+		<FormGroup className="mb-3">
+			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="phone" className='form-label'>
 				{t("FormFields|Phone")}{props.content?.required && '*'}
 			</Label>
 			<Input
@@ -61,8 +61,8 @@ export function EmailField(props) {
 	);
 
 	return (
-		<FormGroup>
-			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="email">
+		<FormGroup className="mb-3">
+			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="email" className='form-label'>
 				{t("FormFields|Email")}{props.content?.required && '*'}
 			</Label>
 			<Input
@@ -102,8 +102,8 @@ export function UserNameField(props) {
 	}
 
 	return (
-		<FormGroup>
-			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="username">
+		<FormGroup className="mb-3">
+			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="username" className='form-label'>
 				{t("FormFields|Username")}{props.content?.required && '*'}
 			</Label>
 			<Input
@@ -155,10 +155,11 @@ export function PasswordField(props) {
 
 	return(
 		<>
-			<FormGroup>
+			<FormGroup className="mb-3">
 				<Label
 					title={props.content?.required ? t("FormFields|Required field") : undefined}
 					for="password"
+					className='form-label'
 				>
 					{t("FormFields|Password")}{props.content?.required && (props.content?.set == false) && '*'}
 				</Label>
@@ -177,7 +178,7 @@ export function PasswordField(props) {
 				</InputGroup>
 			</FormGroup>
 
-			<FormGroup>
+			<FormGroup className="mb-3">
 				<Label for="password2">{t("FormFields|Re-enter Password")}</Label>
 				<InputGroup>
 					<Input

src/modules/auth/containers/LoginCard.js

@@ -7,9 +7,10 @@ import {
 	Row, Col,
 	Card, CardHeader, CardTitle,
 	CardSubtitle, CardBody, CardFooter,
-	Form, FormGroup, FormText,
+	Form, FormText,
 	Label, Input, CustomInput,
-	Collapse, Button, Progress, ButtonGroup
+	Collapse, Button, Progress, ButtonGroup,
+	FormGroup
 } from 'reactstrap';
 
 import publicKeyValuesToJSON from "../webauthn/publicKeyValuesToJSON";
@@ -326,7 +327,7 @@ function LoginCard(props) {
 					{/* ident */}
 					<FormGroup tag="fieldset" disabled={isSubmitting || isOnClickSubmitting} className="text-center">
 						<h5>
-							<Label for="username" style={{display: "block"}}>
+							<Label for="username" style={{display: "block"}} className='form-label'>
 								{t('LoginCard|Username, email or phone')}
 							</Label>
 						</h5>
@@ -515,7 +516,7 @@ function PasswordField(props) {
 	return(
 		<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 			<h5>
-				<Label for={props.factor.type} style={{display: "block"}}>
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 					{t('LoginCard|Password')}
 				</Label>
 			</h5>
@@ -540,7 +541,7 @@ function KeyoteField(props) {
 	return(
 		<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 			<h5>
-				<Label for={props.factor.type} style={{display: "block"}}>
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 					{t('LoginCard|Login with mobile application')}
 				</Label>
 			</h5>
@@ -559,7 +560,7 @@ function YubiKeyField(props) {
 	return(
 		<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 			<h5>
-				<Label for={props.factor.type} style={{display: "block"}}>
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 					{t('LoginCard|Yubikey')}
 				</Label>
 			</h5>
@@ -585,7 +586,7 @@ function TOTPField(props) {
 	return(
 		<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 			<h5>
-				<Label for={props.factor.type} style={{display: "block"}}>
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 					{t('LoginCard|OTP Code')}
 				</Label>
 			</h5>
@@ -786,8 +787,8 @@ function WebAuthnField(props) {
 	return(
 		<div className="text-center">
 			<h6>
-				<Label for={props.factor.type} style={{display: "block"}}>
-					<span className="at-shield-star-win pr-1" />{t('LoginCard|You will be prompted to login with FIDO2/WebAuthn')}
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
+					<span className="at-shield-star-win pe-1" />{t('LoginCard|You will be prompted to login with FIDO2/WebAuthn')}
 				</Label>
 			</h6>
 
@@ -858,7 +859,7 @@ function SMSLoginField(props) {
 		return(
 			<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 				<h5>
-					<Label for={props.factor.type} style={{display: "block"}}>
+					<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 						{t('LoginCard|Code from SMS')}
 					</Label>
 				</h5>
@@ -881,7 +882,7 @@ function SMSLoginField(props) {
 	return(
 		<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 			<h5>
-				<Label for={props.factor.type} style={{display: "block"}}>
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 					{t('LoginCard|Login by SMS code')}
 				</Label>
 			</h5>

src/modules/auth/containers/RegisterScreen.js

@@ -200,12 +200,12 @@ function RegisterScreen(props) {
 										{(userinfo == undefined) ?
 											t("RegisterScreen|You have been invited to")
 										:
-											<>{t(`RegisterScreen|Hello`)}<span className="primary-span pr-0">{credentials}</span>, {t(`RegisterScreen|you have been invited to`)}</>
+											<>{t(`RegisterScreen|Hello`)}<span className="primary-span pe-0">{credentials}</span>, {t(`RegisterScreen|you have been invited to`)}</>
 										}
 									</p>
 									{registerFeatures && registerFeatures?.tenants && registerFeatures?.tenants.map((tenant, i) => (
 											(registerFeatures.tenants.length != i+1) ?
-												<span key={i} className="primary-span pr-0">{tenant},</span>
+												<span key={i} className="primary-span pe-0">{tenant},</span>
 											:
 												<span key={i} className="primary-span">{tenant}</span>
 										))

src/modules/auth/email/EmailScreen.js

@@ -7,7 +7,7 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import {
 	Container, Row, Col,
 	Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter,
-	Form, FormGroup, FormFeedback, Input, Button
+	Form, FormFeedback, FormGroup, Input, Button
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
@@ -160,7 +160,6 @@ function ManageEmail(props) {
 					</CardSubtitle>
 				</div>
 			</CardHeader>
-
 			<CardBody className="text-center pb-1">
 				<FormGroup tag="fieldset" disabled={props.isSubmitting}>
 					<Input

src/modules/auth/home/HomeScreen.js

@@ -7,7 +7,7 @@ import {
 	Container, Row, Col,
 	Card, CardHeader, CardTitle,
 	CardSubtitle, CardBody, ListGroup,
-	ListGroupItem, CustomInput
+	ListGroupItem, Input, FormGroup
 } from 'reactstrap';
 
 import { DateTime } from 'asab-webui';
@@ -223,39 +223,39 @@ function HomeScreen(props) {
 											<Col sm={6}>{t('HomeScreen|Created')}</Col>
 											<Col sm={6}>
 												{userinfo?.created_at ?
-													<div className="float-right"><DateTime value={userinfo?.created_at}/></div>
+													<div className="float-end"><DateTime value={userinfo?.created_at}/></div>
 												:
-													<div className="float-right">N/A</div>
+													<div className="float-end">N/A</div>
 												}
 											</Col>
 										</Row>
 										<Row>
 											<Col sm={6}>{t('HomeScreen|Last successful login')}</Col>
 											<Col sm={6}>
 												{lastLogin?.sat ?
-													<div className="float-right"><DateTime value={lastLogin?.sat}/></div>
+													<div className="float-end"><DateTime value={lastLogin?.sat}/></div>
 												:
-													<div className="float-right">N/A</div>
+													<div className="float-end">N/A</div>
 												}
 											</Col>
 										</Row>
 										<Row>
 											<Col sm={6}>{t('HomeScreen|Last failed login')}</Col>
 											<Col sm={6}>
 												{lastLogin?.fat ?
-													<div className="float-right"><DateTime value={lastLogin?.fat}/></div>
+													<div className="float-end"><DateTime value={lastLogin?.fat}/></div>
 												:
-													<div className="float-right">N/A</div>
+													<div className="float-end">N/A</div>
 												}
 											</Col>
 										</Row>
 										<Row>
 											<Col sm={6}>{t('HomeScreen|Session expiration')}</Col>
 											<Col sm={6}>
 												{userinfo?.exp ?
-													<div className="float-right"><DateTime value={userinfo?.exp}/></div>
+													<div className="float-end"><DateTime value={userinfo?.exp}/></div>
 												:
-													<div className="float-right">N/A</div>
+													<div className="float-end">N/A</div>
 												}
 											</Col>
 										</Row>
@@ -274,13 +274,15 @@ function HomeScreen(props) {
 													</a>
 												</Col>
 												<Col sm={6}>
-													<CustomInput
-														id={`${item.label.replace(/[^\w\s]/gi, '-')}`}
-														className="float-right"
-														type="switch"
-														defaultChecked={isConnected}
-														onClick={() => externalServiceOnChange({ item, isConnected })}
-													/>
+													<FormGroup className="p-0" switch>
+														<Input
+															id={`${item?.label?.replace(/[^\w\s]/gi, '-')}`}
+															className="float-end"
+															defaultChecked={isConnected}
+															type="switch"
+															onClick={() => externalServiceOnChange({ item, isConnected })}
+														/>
+													</FormGroup>
 												</Col>
 											</Row>
 										</ListGroupItem>
@@ -308,7 +310,7 @@ function HomeScreen(props) {
 										</Col>
 										<Col sm={7}>
 											<div
-												className="float-right char-limit char-limit-text"
+												className="float-end char-limit char-limit-text"
 												id="emailAddress"
 												name="emailAddress"
 												title={userinfo?.email ?? "" }
@@ -338,7 +340,7 @@ function HomeScreen(props) {
 										</Col>
 										<Col sm={6}>
 											<div
-												className="float-right text-muted pointer char-limit char-limit-number"
+												className="float-end text-muted pointer char-limit char-limit-number"
 												id="phoneNumber"
 												name="phoneNumber"
 												title={userinfo?.phone ?? ""}
@@ -361,7 +363,7 @@ function HomeScreen(props) {
 											</Link>
 										</Col>
 										<Col sm={6}>
-											<div className="float-right text-muted pointer" id="webauthn" name="webauthn">
+											<div className="float-end text-muted pointer" id="webauthn" name="webauthn">
 												<div
 													className={((userinfo?.available_factors) && (userinfo.available_factors.indexOf("totp") != -1)) ?
 														`status-circle status-active`
@@ -385,7 +387,7 @@ function HomeScreen(props) {
 											</Link>
 										</Col>
 										<Col sm={6}>
-											<div className="float-right text-muted pointer" id="webauthn" name="webauthn">
+											<div className="float-end text-muted pointer" id="webauthn" name="webauthn">
 												<div
 													className={((userinfo?.available_factors) && (userinfo.available_factors.indexOf("webauthn") != -1)) ?
 														`status-circle status-active`

src/modules/auth/number/PhoneNumberScreen.js

@@ -7,7 +7,7 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import {
 	Container, Row, Col,
 	Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter,
-	Form, FormGroup, FormFeedback, Label, Input, Button
+	Form, FormFeedback, FormGroup, Label, Input, Button
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";

src/modules/auth/otp/TOTPScreen.js

@@ -8,7 +8,7 @@ import QRCode from "react-qr-code";
 import {
 	Container, Row, Col,
 	Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter,
-	Form, FormGroup, FormText, Label, Input, Button, FormFeedback
+	Form, FormText, Input, Button, FormFeedback, FormGroup
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
@@ -222,7 +222,6 @@ function ActivateTOTP(props) {
 						<code>{props.secret}</code>
 					</Col>
 				</Row>
-
 				<FormGroup tag="fieldset" disabled={props.isSubmitting} style={{textAlign: "center"}}>
 					<Input
 						autoFocus
@@ -242,10 +241,9 @@ function ActivateTOTP(props) {
 						:
 						<FormText style={{paddingBottom: "1em"}}>{t('TOTPScreen|Enter the code from authenticator app')}</FormText>
 					}
-
 					<Button
 						block
-						className="justify-content-center"
+						className="justify-content-center my-2"
 						color="primary"
 						type="submit"
 					>