e-suite/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Next round of refactoring done

Browse Source
This commit is contained in:
Colin Dawson 2026-01-30 20:58:58 +00:00
parent 04c1875d5d
commit f3deae0842
18 changed files with 1149 additions and 927 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/locales/en/common.json
View File

@ -1,7 +1,10 @@
{
"Activate": "Activate",
"Admin": "Admin",
"AnEmailWithPasswordResetLinkHasBeenSent": "An email with a password reset link has been sent.",
"AnErrorOccurred": "An error occurred",
"Application": "Application",
"Applications": "Applications",
"AuditLog": "Audit Logs",
"AuditLogs": "Audit Logs",
"BlockedIPAddresses": "Blocked IP addresses",
@ -13,42 +16,49 @@
"ConfirmPassword": "Confirm Password",
"CustomFieldManager": "Custom Field Manager",
"CustomFields": "Custom Fields",
"DisableAuthenticator": "Disable Authenticator",
"DisplayName": "Display Name",
"EntityDisplayName": "Entity Display Name",
"e-print": "e-print",
"e-suite": "e-suite",
"e-suiteLogo": "e-suite logo",
"EntityDisplayName": "Entity Display Name",
"ErrorLogs": "Error Logs",
"ExceptionJson": "Exception JSON",
"ExceptionLogs": "Exception Logs",
"FailedToDisableAuthenticator": "Failed to disable authenticator:",
"Forms": "Forms",
"FormTemplateManager": "Form Template Manager",
"Glossaries": "Glossaries",
"GlossaryManager": "Glossary Manager",
"Home": "Home",
"Id": "Id",
"Application": "Application",
"Message": "Message",
"ShowJSON": "Show JSON",
"ShowStackTrace": "Show stack trace",
"OccuredAt": "Occured At",
"IPAddress": "IP Address",
"IPAddressUnblocked": "IP Address '{{ip}}' unblocked.",
"Loading": "Loading",
"LoggingOut": "Logging out",
"Message": "Message",
"Name": "Name",
"NumberOfAttempts": "Number Of Attempts",
"NewPassword": "New Password",
"NewValue": "New Value",
"NotFound": "Not found",
"NumberOfAttempts": "Number Of Attempts",
"OccuredAt": "Occured At",
"OldValue": "Old Value",
"Password": "Password",
"PasswordIsRequired": "Password is required",
"PasswordMinLength": "Password must be at least {{minPasswordLength}} characters",
"PasswordsMustMatch": "You need to confirm by typing exactly the same as the new password",
"PressAgainToUnblock": "Press again to unblock",
"ResetPassword": "Reset Password",
"Save": "Save",
"Sequence": "Sequence",
"SequenceManager": "Sequence Manager",
"ShowJSON": "Show JSON",
"ShowStackTrace": "Show stack trace",
"SiteManager": "Site Manager",
"SpecificationManager": "Specification Manager",
"StackTrace": "Stack Trace",
"SsoManager": "Sso Manager",
"StackTrace": "Stack Trace",
"Support": "Support",
"SupportingData": "Supporting Data",
"Timing": "Timing",
@ -56,5 +66,7 @@
"UnblockedInMinutes": "Unblocked In (Minutes)",
"UserManager": "User Manager",
"UserName": "User Name",
"UsernameIsRequired": "Username is required",
"UsernameMustBeValidEmail": "Username must be a valid email",
"Users": "Users"
}

23
src/img/logo.tsx
View File

@ -1,15 +1,26 @@
import { FunctionComponent } from "react";
import logo from "./E-SUITE_logo.svg"
import logo from "./E-SUITE_logo.svg";
import { useTranslation } from "react-i18next";
import { Namespaces } from "../i18n/i18n";
interface LogoProps {
className?: string;
height? : string
width? : string
alt?: string
height?: string;
width?: string;
}
const Logo: FunctionComponent<LogoProps> = (props: LogoProps) => {
return ( <img className={props.className} height={props.height} width={props.width} alt={props.alt} src={logo}/>);
}
const { t } = useTranslation(Namespaces.Common);
return (
<img
className={props.className}
height={props.height}
width={props.width}
alt={t("e-suiteLogo") as string}
src={logo}
/>
);
};
export default Logo;

1
src/modules/errorLogs/components/errorLogsTable.tsx
View File

@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
import { Namespaces } from "../../../i18n/i18n";
import ExpandableCell from "../../../components/common/ExpandableCell";
import { max } from "date-fns";
export default function ErrorLogsTable(
props: PublishedTableProps<ErrorLog>,

56
src/modules/frame/components/EmailUserActionDisableTwoFactorAuthentication.tsx
View File

@ -1,33 +1,28 @@
import Form, { FormState, FormData } from "../../../components/common/Form";
import Joi from "joi";
import React, { useState } from "react";
import authentication from "../services/authenticationService";
import { IEmailUserAction } from "../models/IEmailUserAction";
import { FormData } from "../../../components/common/Form";
import Button, { ButtonType } from "../../../components/common/Button";
import { useTranslation } from "react-i18next";
import { Namespaces } from "../../../i18n/i18n";
export interface EmailUserActionDiableTwoFactorAuthenticationData extends FormData {
authenticatorDisabled: boolean;
}
export interface EmailUserActionDiableTwoFactorAuthenticationState extends FormState {
data: EmailUserActionDiableTwoFactorAuthenticationData;
interface Props {
emailUserAction: IEmailUserAction;
}
class EmailUserActionDiableTwoFactorAuthentication extends Form<any, any, EmailUserActionDiableTwoFactorAuthenticationState> {
state = {
loaded: true,
data: { authenticatorDisabled: false },
errors: {},
};
const EmailUserActionDiableTwoFactorAuthentication: React.FC<Props> = ({
emailUserAction,
}) => {
const { t } = useTranslation<typeof Namespaces.Common>();
const [authenticatorDisabled, setAuthenticatorDisabled] = useState(false);
labelChangePassword = "Disable Authenticator";
schema = {
authenticatorDisabled: Joi.boolean(),
};
doSubmit = async () => {
const { emailUserAction } = this.props;
const LABEL_DISABLE_AUTHENTICATOR = t("DisableAuthenticator");
const handleSubmit = async () => {
const action: IEmailUserAction = {
email: emailUserAction.email,
token: emailUserAction.token,
@ -35,29 +30,34 @@ class EmailUserActionDiableTwoFactorAuthentication extends Form<any, any, EmailU
emailActionType: emailUserAction.emailActionType,
};
try {
const callResult = await authentication.completeEmailAction(action);
if (callResult === 1) {
let data = { ...this.state.data };
data.authenticatorDisabled = true;
this.setState({ data });
setAuthenticatorDisabled(true);
}
} catch (error) {
console.error(t("FailedToDisableAuthenticator"), error);
}
};
render() {
const { authenticatorDisabled } = this.state.data;
if (authenticatorDisabled) {
return <div>Your authenticator has been disabled. You can now log in without two factor authentication</div>;
return (
<div>
Your authenticator has been disabled. You can now log in without two
factor authentication
</div>
);
}
return (
<>
<div>Disable two factor authentication</div>
<Button buttonType={ButtonType.link} onClick={this.doSubmit}>Disable Authenticator</Button>
<Button buttonType={ButtonType.link} onClick={handleSubmit}>
{LABEL_DISABLE_AUTHENTICATOR}
</Button>
</>
);
}
}
};
export default EmailUserActionDiableTwoFactorAuthentication;

209
src/modules/frame/components/EmailUserActionPasswordReset.tsx
View File

@ -1,8 +1,13 @@
import Joi from "joi";
import Form, { businessValidationResult, FormData, FormState } from "../../../components/common/Form";
import React, { useState } from "react";
import { InputType } from "../../../components/common/Input";
import { IEmailUserAction } from "../models/IEmailUserAction";
import authentication from "../services/authenticationService";
import { FormData } from "../../../components/common/Form";
import Input from "../../../components/common/Input";
import Button, { ButtonType } from "../../../components/common/Button";
import ErrorBlock from "../../../components/common/ErrorBlock";
import { useTranslation } from "react-i18next";
import { Namespaces } from "../../../i18n/i18n";
export interface EmailUserActionPasswordResetData extends FormData {
password: string;
@ -10,78 +15,74 @@ export interface EmailUserActionPasswordResetData extends FormData {
passwordChanged: boolean;
}
export interface EmailUserActionPasswordResetState extends FormState {
data: EmailUserActionPasswordResetData;
interface Props {
emailUserAction: IEmailUserAction;
}
class EmailUserActionPasswordReset extends Form<any, any, EmailUserActionPasswordResetState> {
state = {
loaded: true,
passwordMaxLenght: 255,
data: { password: "", confirmPassword: "", passwordChanged: false },
errors: {},
hasTwelveCharacters: false,
hasSpecialCharacter: false,
hasUppercaseLetter: false,
hasLowercaseLetter: false,
hasNumber: false
const EmailUserActionPasswordReset: React.FC<Props> = ({ emailUserAction }) => {
const { t } = useTranslation<typeof Namespaces.Common>();
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [passwordChanged, setPasswordChanged] = useState(false);
const [generalError, setGeneralError] = useState("");
const [errors, setErrors] = useState<{ [key: string]: string }>({});
const [hasTwelveCharacters, setHasTwelveCharacters] = useState(false);
const [hasSpecialCharacter, setHasSpecialCharacter] = useState(false);
const [hasUppercaseLetter, setHasUppercaseLetter] = useState(false);
const [hasLowercaseLetter, setHasLowercaseLetter] = useState(false);
const [hasNumber, setHasNumber] = useState(false);
const LABEL_PASSWORD = t("NewPassword");
const LABEL_CONFIRM_PASSWORD = t("ConfirmPassword");
const LABEL_CHANGE_PASSWORD = t("Save");
const PASSWORD_MAX_LENGTH = 255;
const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newPassword = e.currentTarget.value;
setPassword(newPassword);
setConfirmPassword("");
setHasNumber(/\d+/g.test(newPassword));
setHasLowercaseLetter(/[a-z]/g.test(newPassword));
setHasUppercaseLetter(/[A-Z]/g.test(newPassword));
setHasSpecialCharacter(
/[ ~`! @#$%^&*()_+\-=[\]{};:\\|,.'"<>/?]/.test(newPassword),
);
setHasTwelveCharacters(newPassword.length >= 12);
};
labelPassword = "New Password";
labelConfirmPassword = "Confirm Password";
labelChangePassword = "Save";
schema = {
password: Joi.string().required().min(12).label(this.labelPassword),
confirmPassword: Joi.string()
.when("password", {
is: "",
then: Joi.optional(),
otherwise: Joi.valid(Joi.ref("password")).error(() => {
const e = new Error("Passwords must match");
e.name = "confirmPassword";
return e;
}),
})
.label(this.labelConfirmPassword),
passwordChanged: Joi.boolean(),
const handleConfirmPasswordChange = (
e: React.ChangeEvent<HTMLInputElement>,
) => {
setConfirmPassword(e.currentTarget.value);
};
BusinessValidation(): businessValidationResult | null {
const { password, confirmPassword } = this.state.data;
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const newErrors: { [key: string]: string } = {};
if (password !== confirmPassword) {
return {
details: [
{
path: "confirmPassword",
message: "You need to confirm by typing exactly the same as the new password",
},
],
};
const minPasswordLength = 12;
// Validation
if (!password) {
newErrors.password = t("PasswordIsRequired");
} else if (password.length < minPasswordLength) {
newErrors.password = t("PasswordMinLength", {
minPasswordLength: minPasswordLength,
});
}
return null;
if (password && password !== confirmPassword) {
newErrors.confirmPassword = t("PasswordsMustMatch");
}
handlePasswordChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const { data } = this.state;
data.password = e.currentTarget.value;
data.confirmPassword = "";
const stateData = this.state;
stateData.hasNumber = /\d+/g.test(data.password);
stateData.hasLowercaseLetter = /[a-z]/g.test(data.password);
stateData.hasUppercaseLetter = /[A-Z]/g.test(data.password);;
stateData.hasSpecialCharacter = /[ ~`! @#$%^&*()_+\-=[\]{};:\\|,.'"<>/?]/.test(data.password);
stateData.hasTwelveCharacters = data.password.length >= 12;
this.setState(stateData);
};
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
return;
}
doSubmit = async (buttonName: string) => {
const { emailUserAction } = this.props;
const { password } = this.state.data;
setErrors({});
try {
const action: IEmailUserAction = {
email: emailUserAction.email,
token: emailUserAction.token,
@ -89,48 +90,84 @@ class EmailUserActionPasswordReset extends Form<any, any, EmailUserActionPasswor
emailActionType: emailUserAction.emailActionType,
};
try {
const callResult = await authentication.completeEmailAction(action);
if (callResult === 1) {
let data = { ...this.state.data };
data.passwordChanged = true;
this.setState({ data });
setTimeout(function () {
window.location.replace('/login');
setPasswordChanged(true);
setTimeout(() => {
window.location.replace("/login");
}, 1000);
}
}
catch (ex: any) {
this.handleGeneralError(ex);
} catch (ex: any) {
setGeneralError(ex?.message || t("AnErrorOccurred"));
}
};
render() {
const { passwordChanged, password, confirmPassword } = this.state.data;
const { hasNumber, hasLowercaseLetter, hasSpecialCharacter, hasUppercaseLetter, hasTwelveCharacters, passwordMaxLenght } = this.state;
const isFormValid = password !== "" && password === confirmPassword && hasNumber && hasLowercaseLetter && hasSpecialCharacter && hasUppercaseLetter && hasTwelveCharacters;
const isFormValid =
password !== "" &&
password === confirmPassword &&
hasNumber &&
hasLowercaseLetter &&
hasSpecialCharacter &&
hasUppercaseLetter &&
hasTwelveCharacters;
if (passwordChanged) {
return <div className="alert alert-info">Your password has been reset. Please contact your admin if this wasn't you.</div>;
return (
<div className="alert alert-info">
Your password has been reset. Please contact your admin if this wasn't
you.
</div>
);
}
return (
<>
<form onSubmit={this.handleSubmit}>
{this.renderError("_general")}
{this.renderInputWithChangeEvent("password", "", InputType.password, undefined, this.handlePasswordChange, undefined, this.labelPassword, passwordMaxLenght)}
<div className={hasTwelveCharacters ? "checked" : "unchecked"}>Password requires a minimum of 12 characters containing a combination of:</div>
<form onSubmit={handleSubmit}>
{generalError && <ErrorBlock error={generalError} />}
<Input
name="password"
label={LABEL_PASSWORD}
type={InputType.password}
value={password}
onChange={handlePasswordChange}
maxLength={PASSWORD_MAX_LENGTH}
error={errors.password}
/>
<div className={hasTwelveCharacters ? "checked" : "unchecked"}>
Password requires a minimum of 12 characters containing a combination
of:
</div>
<ul>
<li className={hasSpecialCharacter ? "checked" : ""}>At least 1 symbol</li>
<li className={hasSpecialCharacter ? "checked" : ""}>
At least 1 symbol
</li>
<li className={hasNumber ? "checked" : ""}>At least 1 number</li>
<li className={hasLowercaseLetter ? "checked" : ""}>At least 1 lowercase letter</li>
<li className={hasUppercaseLetter ? "checked" : ""}>At least 1 uppercase letter</li>
<li className={hasLowercaseLetter ? "checked" : ""}>
At least 1 lowercase letter
</li>
<li className={hasUppercaseLetter ? "checked" : ""}>
At least 1 uppercase letter
</li>
</ul>
{this.renderInput("confirmPassword", "", InputType.password, undefined, undefined, this.labelConfirmPassword, passwordMaxLenght)}
{this.renderButton(this.labelChangePassword, "save", undefined, undefined, isFormValid)}
<Input
name="confirmPassword"
label={LABEL_CONFIRM_PASSWORD}
type={InputType.password}
value={confirmPassword}
onChange={handleConfirmPasswordChange}
maxLength={PASSWORD_MAX_LENGTH}
error={errors.confirmPassword}
/>
<Button
buttonType={ButtonType.primary}
disabled={!isFormValid}
onClick={() => {}}
>
{LABEL_CHANGE_PASSWORD}
</Button>
</form>
</>
);
}
}
};
export default EmailUserActionPasswordReset;

89
src/modules/frame/components/ForgotPassword.tsx
View File

@ -1,58 +1,76 @@
import Joi from "joi";
import Form, { FormData, FormState } from "../../../components/common/Form";
import React, { useState } from "react";
import { FormData } from "../../../components/common/Form";
import authentication from "../services/authenticationService";
import Input, { InputType } from "../../../components/common/Input";
import Button, { ButtonType } from "../../../components/common/Button";
import ErrorBlock from "../../../components/common/ErrorBlock";
import { useTranslation } from "react-i18next";
import { Namespaces } from "../../../i18n/i18n";
export interface ForgotPasswordData extends FormData {
username: string;
emailSent: boolean;
}
export interface ForgotPasswordtate extends FormState {
data: ForgotPasswordData;
const ForgotPassword: React.FC = () => {
const { t } = useTranslation<typeof Namespaces.Common>();
const [username, setUsername] = useState("");
const [emailSent, setEmailSent] = useState(false);
const [generalError, setGeneralError] = useState("");
const [errors, setErrors] = useState<{ [key: string]: string }>({});
const validateEmail = (email: string): boolean => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const newErrors: { [key: string]: string } = {};
// Validation
if (!username) {
newErrors.username = t("UsernameIsRequired");
} else if (!validateEmail(username)) {
newErrors.username = t("UsernameMustBeValidEmail");
}
class ForgotPassword extends Form<any, any, ForgotPasswordtate> {
state = {
loaded: true,
data: { username: "", emailSent: false },
errors: {},
};
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
return;
}
schema = {
username: Joi.string()
.required()
.email({ tlds: { allow: false } })
.label("Username"),
emailSent: Joi.boolean().required(),
};
setErrors({});
doSubmit = async (buttonName : string) => {
try {
let { data } = this.state;
const response = await authentication.forgotPassword(data.username);
const response = await authentication.forgotPassword(username);
if (response) {
data.emailSent = true;
this.setState({ data });
setEmailSent(true);
}
}
catch(ex: any) {
this.handleGeneralError(ex);
} catch (ex: any) {
setGeneralError(ex?.message || t("AnErrorOccurred"));
}
};
render() {
const { emailSent } = this.state.data;
let content = (
<form onSubmit={this.handleSubmit}>
{this.renderError("_general")}
{this.renderInput("username", "Username")}
{this.renderButton("Reset password")}
<form onSubmit={handleSubmit}>
{generalError && <ErrorBlock error={generalError} />}
<Input
type={InputType.text}
name="username"
label={t("Username")}
value={username}
onChange={(e) => setUsername(e.currentTarget.value)}
error={errors.username}
/>
<Button buttonType={ButtonType.primary} onClick={() => {}}>
{t("ResetPassword")}
</Button>
</form>
);
if (emailSent) {
content = <div>An email with a password reset link has been sent.</div>;
content = <div>{t("AnEmailWithPasswordResetLinkHasBeenSent")}</div>;
}
return (
@ -63,7 +81,6 @@ class ForgotPassword extends Form<any, any, ForgotPasswordtate> {
{content}
</div>
);
}
}
};
export default ForgotPassword;

46
src/modules/frame/components/LeftMenuItem.tsx
View File

@ -1,49 +1,45 @@
import { IconDefinition } from "@fortawesome/pro-thin-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { Component } from "react";
import { Link } from "react-router-dom";
import withRouter, { RouterProps } from "../../../utils/withRouter";
import React from "react";
import { Link, useLocation } from "react-router-dom";
interface LeftMenuItemProps extends RouterProps {
interface LeftMenuItemProps {
to: string;
icon?: IconDefinition;
label: string;
}
class LOCLeftMenuItem extends Component<LeftMenuItemProps> {
isSelected = ():boolean => {
const { to } = this.props;
const { pathname } = this.props.router.location;
let isSelected : boolean = false;
if (to === '/' ? (pathname === to) : pathname.toLowerCase().startsWith(to)){
isSelected = true;
}
const LeftMenuItem: React.FC<LeftMenuItemProps> = ({ to, icon, label }) => {
const location = useLocation();
return isSelected;
}
render() {
const { to, icon, label } = this.props;
const isSelected = (): boolean => {
const pathname = location.pathname;
return to === "/" ? pathname === to : pathname.toLowerCase().startsWith(to);
};
let className = "";
if (this.isSelected()) {
if (isSelected()) {
className += " leftMenuSelected";
}
if (icon) {
return (
<div className="LeftMenuItem"><Link className={className} to={to} ><FontAwesomeIcon className="leftMenuItemIcon" icon={icon}/><div className="leftMenuItemLabel">{label}</div></Link></div>
<div className="LeftMenuItem">
<Link className={className} to={to}>
<FontAwesomeIcon className="leftMenuItemIcon" icon={icon} />
<div className="leftMenuItemLabel">{label}</div>
</Link>
</div>
);
}
return (
<Link className={className} to={to} >{label}</Link>
<Link className={className} to={to}>
{label}
</Link>
);
}
}
const LeftMenuItem = withRouter(LOCLeftMenuItem);
};
export default LeftMenuItem;
export { LOCLeftMenuItem };
export { LeftMenuItem as LOCLeftMenuItem };

39
src/modules/frame/components/LeftMenuSubMenu.tsx
View File

@ -11,47 +11,45 @@ interface LeftMenuSubMenuProps extends RouterProps{
onClick?: (menuItem: LOCLeftMenuSubMenu) => void;
}
interface LeftMenuSubMenuState {
interface LeftMenuSubMenuState {}
}
class LOCLeftMenuSubMenu extends React.Component<
LeftMenuSubMenuProps,
LeftMenuSubMenuState
> {
state = {};
class LOCLeftMenuSubMenu extends React.Component<LeftMenuSubMenuProps, LeftMenuSubMenuState> {
state = { }
handleClick = (): void =>
{
handleClick = (): void => {
const { onClick } = this.props;
if (onClick !== undefined)
onClick(this);
}
if (onClick !== undefined) onClick(this);
};
isChildSelected = (child: JSX.Element): boolean => {
const { to } = child.props;
const { pathname } = this.props.router.location;
let isSelected: boolean = false;
if (to === '/' ? (pathname === to) : pathname.toLowerCase().startsWith(to)){
if (to === "/" ? pathname === to : pathname.toLowerCase().startsWith(to)) {
isSelected = true;
}
return isSelected;
}
};
isAnyChildSelected = (): boolean => {
const { children } = this.props;
let childIsSelected = false;
children.forEach(child => {
children.forEach((child) => {
if (child === false) {
return;
}
if (this.isChildSelected(child))
childIsSelected = true;
if (this.isChildSelected(child)) childIsSelected = true;
});
return childIsSelected;
}
};
render() {
const { icon, label, openMenu } = this.props;
@ -64,10 +62,15 @@ class LOCLeftMenuSubMenu extends React.Component<LeftMenuSubMenuProps, LeftMenuS
className += " leftMenuSubMenuOpen";
}
return ( <div className={className} onClick={this.handleClick}><FontAwesomeIcon className="leftMenuItemIcon" icon={icon}/><div className="leftMenuItemLabel">{label}</div></div> );
return (
<div className={className} onClick={this.handleClick}>
<FontAwesomeIcon className="leftMenuItemIcon" icon={icon} />
<div className="leftMenuItemLabel">{label}</div>
</div>
);
}
}
const LeftMenuSubMenu = withRouter(LOCLeftMenuSubMenu);
export default LeftMenuSubMenu;
export {LOCLeftMenuSubMenu}
export { LOCLeftMenuSubMenu };

106
src/modules/frame/components/LoginForm.tsx
View File

@ -16,9 +16,9 @@ export interface LoginFormStateData extends FormData {
}
export interface LoginFormState extends FormState {
passwordMaxLength: number,
isInNextStage: boolean,
emailSent: boolean,
passwordMaxLength: number;
isInNextStage: boolean;
emailSent: boolean;
data: LoginFormStateData;
}
@ -62,7 +62,7 @@ class LoginForm extends Form<any, any, LoginFormState> {
stateData.isInNextStage = true;
this.setState(stateData);
}
}
};
handleForgetPassword = async () => {
try {
@ -72,8 +72,7 @@ class LoginForm extends Form<any, any, LoginFormState> {
stateData.data.username = "";
stateData.data.password = "";
this.setState(stateData);
}
catch (ex: any) {
} catch (ex: any) {
this.handleGeneralError(ex);
}
};
@ -89,7 +88,12 @@ class LoginForm extends Form<any, any, LoginFormState> {
private async performLogin(data: LoginFormStateData) {
try {
let result = await authentication.login(data.username, data.password, data.securityCode, data.requestTfaRemoval);
let result = await authentication.login(
data.username,
data.password,
data.securityCode,
data.requestTfaRemoval,
);
switch (result) {
case 1: //requires tfa
@ -120,26 +124,82 @@ class LoginForm extends Form<any, any, LoginFormState> {
const { tfaNeeded, requestTfaRemoval } = this.state.data;
const { isInNextStage, data, emailSent, passwordMaxLength } = this.state;
const result = this.schema.username.validate(data.username);
const validEmail = (result.error === undefined) ? true : false;
const validEmail = result.error === undefined ? true : false;
if (authentication.getCurrentUser()) return <Navigate to="/" />;
const requestTfaRemovalPanel = <div>An email has been sent to you so that you can regain control of your account.</div>;
const requestTfaRemovalPanel = (
<div>
An email has been sent to you so that you can regain control of your
account.
</div>
);
const loginPanel = (
<><form onSubmit={this.handleSubmit}>
{this.renderInput("username", "", InputType.text, isInNextStage, undefined, "Email", undefined, undefined,"username")}
{this.renderInput("password", "", InputType.password, emailSent, undefined, "Password", passwordMaxLength, isInNextStage, "current-password")}
{!isInNextStage && this.renderButton("Next", "login", this.handleNextClick, "next", validEmail, ButtonType.primary, true)}
{isInNextStage && <div className="clickables">
{this.renderButton("Login", "login", undefined, "login", !emailSent)}
<>
<form onSubmit={this.handleSubmit}>
{this.renderInput(
"username",
"",
InputType.text,
isInNextStage,
undefined,
"Email",
undefined,
undefined,
"username",
)}
{this.renderInput(
"password",
"",
InputType.password,
emailSent,
undefined,
"Password",
passwordMaxLength,
isInNextStage,
"current-password",
)}
{!isInNextStage &&
this.renderButton(
"Next",
"login",
this.handleNextClick,
"next",
validEmail,
ButtonType.primary,
true,
)}
{isInNextStage && (
<div className="clickables">
{this.renderButton(
"Login",
"login",
undefined,
"login",
!emailSent,
)}
</div>
}
)}
</form>
{isInNextStage && <div className="forgottenLink">
{this.renderButton("Forgotten Password", "forgot-password", this.handleForgetPassword, "forgot-password", validEmail, ButtonType.secondary, true)}
</div>}
{emailSent && <div className="alert alert-info emailSent">If you have a registered account, you will receive an email.</div>}
{isInNextStage && (
<div className="forgottenLink">
{this.renderButton(
"Forgotten Password",
"forgot-password",
this.handleForgetPassword,
"forgot-password",
validEmail,
ButtonType.secondary,
true,
)}
</div>
)}
{emailSent && (
<div className="alert alert-info emailSent">
If you have a registered account, you will receive an email.
</div>
)}
{this.renderError("_general")}
</>
);
@ -157,7 +217,11 @@ class LoginForm extends Form<any, any, LoginFormState> {
return (
<div>
{requestTfaRemoval ? requestTfaRemovalPanel : tfaNeeded ? tfaPanel : loginPanel}
{requestTfaRemoval
? requestTfaRemovalPanel
: tfaNeeded
? tfaPanel
: loginPanel}
</div>
);
}

24
src/modules/frame/components/Logout.tsx
View File

@ -1,20 +1,20 @@
import * as React from "react";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import authentication from "../services/authenticationService";
class Logout extends React.Component {
componentDidMount() {
const Logout: React.FC = () => {
const { t } = useTranslation();
useEffect(() => {
authentication.logout();
if (window.__RUNTIME_CONFIG__.EXTERNAL_LOGIN) {
window.location.href = "/account/logout"
}
else {
window.location.href = "/"
}
window.location.href = "/account/logout";
} else {
window.location.href = "/";
}
}, []);
render() {
return <div>Logging out</div>;
}
}
return <div>{t("LoggingOut")}</div>;
};
export default Logout;

12
src/modules/frame/components/Mainframe.tsx
View File

@ -1,23 +1,23 @@
import * as React from "react";
import React from "react";
import TopMenu from "./TopMenu";
import LeftMenu from "./LeftMenu";
import "../../../Sass/_frame.scss";
type MainFrameProps = {
title?: string | undefined | null;
children?: React.ReactNode; // 👈️ type children
title?: string | null;
children?: React.ReactNode;
};
const Mainframe = (props: MainFrameProps): JSX.Element => {
const Mainframe: React.FC<MainFrameProps> = ({ title, children }) => {
return (
<div className="frame">
<TopMenu title={props.title ? props.title : undefined} />
<TopMenu title={title} />
<div className="frame-row">
<div className="frame-leftMenu">
<LeftMenu />
</div>
<div className="frame-workArea">{props.children}</div>
<div className="frame-workArea">{children}</div>
</div>
</div>
);

11
src/modules/frame/components/NotFound.tsx
View File

@ -1,7 +1,10 @@
import * as React from "react";
import React from "react";
import { useTranslation } from "react-i18next";
function NotFound() {
return <h1>Not found</h1>;
}
const NotFound: React.FC = () => {
const { t } = useTranslation();
return <h1>{t("NotFound")}</h1>;
};
export default NotFound;

49
src/modules/frame/components/Switch.tsx
View File

@ -1,49 +0,0 @@
import * as React from "react";
export interface SwitchProps {
children: React.ReactNode;
}
export class Switch extends React.PureComponent<SwitchProps> {
render() {
const children = React.Children.toArray(this.props.children);
let caseComponent: any = children.filter((c:any) => {
return c.type === Case && c.props.condition === true;
});
if (!caseComponent || caseComponent.length === 0) {
caseComponent = children.filter((c: any) => c.type === Else);
}
return (
<React.Fragment>
{ caseComponent }
</React.Fragment>
);
}
}
export interface CaseProps {
condition: boolean;
children: React.ReactNode;
}
export class Case extends React.PureComponent<CaseProps> {
render() {
const { condition, children } = this.props;
return (
<React.Fragment>
{ condition ? children : null }
</React.Fragment>
);
}
}
export class Else extends React.PureComponent<SwitchProps>
{
render() {
return this.props.children;
}
}

4
src/modules/frame/components/TopMenu.tsx
View File

@ -12,7 +12,7 @@ import { getCurrentUser } from "../services/authenticationService";
import { LanguageSelectorMenuItem } from "./LanguageSelector";
export interface TopMenuProps {
title?: string;
title: string | undefined | null;
}
function TopMenu(props: TopMenuProps) {
@ -21,7 +21,7 @@ function TopMenu(props: TopMenuProps) {
return (
<Navbar className="navbar bg-body-tertiary px-4 Header">
<Navbar.Brand href="/">
<Logo alt="esuite logo" />
<Logo />
</Navbar.Brand>
<div className="navbar-left">{props.title}</div>
<div className="navbar-right">

28
src/modules/frame/components/loginFrame.tsx
View File

@ -5,34 +5,24 @@ import "../../../Sass/login.scss";
import Logo from "../../../img/logo";
interface LoginFrameProps {
children?: JSX.Element
children?: JSX.Element;
}
interface LoginFrameState {
}
class LoginFrame extends React.Component<LoginFrameProps, LoginFrameState> {
render() {
const { children } = this.props;
return (<div className="container-fluid vh-100">
const LoginFrame: React.FC<LoginFrameProps> = ({ children }) => {
return (
<div className="container-fluid vh-100">
<div className="col-md-2">
<div className="loginFormContainer">
<div className="col-12 logo">
<Logo alt="esuite logo" height="120px" width="120px" />
</div>
<div className="col-12">
{children}
<Logo height="120px" width="120px" />
</div>
<div className="col-12">{children}</div>
</div>
</div>
<div className="col-md-8"></div>
</div>);
}
}
</div>
);
};
export default LoginFrame;

20
src/modules/homepage/Env.tsx
View File

@ -1,13 +1,23 @@
import * as React from "react";
import React from "react";
function EnvPage() {
const EnvPage: React.FC = () => {
return (
<>
<p>This is the Environment</p>
<br></br>
<p>window.__RUNTIME_CONFIG__.API_URL = {window.__RUNTIME_CONFIG__.API_URL}</p>
<br />
<p>
window.__RUNTIME_CONFIG__.NODE_ENV ={" "}
{window.__RUNTIME_CONFIG__.NODE_ENV}
</p>
<p>
window.__RUNTIME_CONFIG__.API_URL = {window.__RUNTIME_CONFIG__.API_URL}
</p>
<p>
window.__RUNTIME_CONFIG__.EXTERNAL_LOGIN ={" "}
{window.__RUNTIME_CONFIG__.EXTERNAL_LOGIN ? "true" : "false"}
</p>
</>
);
}
};
export default EnvPage;

18
src/modules/homepage/HomePage.tsx
View File

@ -1,20 +1,24 @@
import * as React from "react";
import React from "react";
import { useTranslation } from "react-i18next";
const HomePage: React.FC = () => {
const { t } = useTranslation();
function HomePage() {
const redirect = () => {
window.location.href = '/organisations'
}
window.location.href = "/organisations";
};
return (
<div className="fluid-container">
<h3>Applications</h3>
<h3>{t("Applications")}</h3>
<div className="e-printWidget" onClick={redirect}>
<div className="e-print">
<div className="thumbnail alert"></div><div className="label">E-print</div>
<div className="thumbnail alert"></div>
<div className="label">{t("e-print")}</div>
</div>
</div>
</div>
);
}
};
export default HomePage;

225
src/modules/manager/customfields/customFieldDetails.tsx
View File

@ -7,11 +7,16 @@ import { InputType } from "../../../components/common/Input";
import { FormState } from "../../../components/common/Form";
import withRouter from "../../../utils/withRouter";
import { MakeGeneralIdRef } from "../../../utils/GeneralIdRef";
import customFieldsService, { numberParams, textParams } from "./services/customFieldsService";
import customFieldsService, {
numberParams,
textParams,
} from "./services/customFieldsService";
import Option from "../../../components/common/option";
import { GeneralIdRef } from "./../../../utils/GeneralIdRef";
import { Case, Else, Switch } from "../../frame/components/Switch";
import { CustomFieldValue, SystemGlossaries } from "../glossary/services/glossaryService";
import {
CustomFieldValue,
SystemGlossaries,
} from "../glossary/services/glossaryService";
import Loading from "../../../components/common/Loading";
interface CustomFieldDetailsState extends FormState {
@ -89,7 +94,7 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
id: Joi.optional(),
guid: Joi.optional(),
}).required(),
})
}),
)
.required(),
}),
@ -107,14 +112,22 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
then: Joi.number(),
otherwise: Joi.number()
.min(Joi.ref("minValue"))
.message('"Default Value" must be greater than or equal to "' + this.labelMinValue + '"'),
.message(
'"Default Value" must be greater than or equal to "' +
this.labelMinValue +
'"',
),
})
.when("maxValue", {
is: Joi.any().valid(null, ""),
then: Joi.number(),
otherwise: Joi.number()
.max(Joi.ref("maxValue"))
.message('"Default Value" must be less than or equal to "' + this.labelMaxValue + '"'),
.message(
'"Default Value" must be less than or equal to "' +
this.labelMaxValue +
'"',
),
})
.allow(""),
otherwise: Joi.string().allow(""),
@ -124,7 +137,8 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
doSubmit = async (buttonName: string) => {
try {
const { name, fieldType } = this.state.data;
let { refElementId, defaultValue, minEntries, maxEntries, required } = this.state.data;
let { refElementId, defaultValue, minEntries, maxEntries, required } =
this.state.data;
let numberParams: numberParams | undefined = undefined;
let textParams: textParams | undefined = undefined;
let params;
@ -151,7 +165,8 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
minEntries = required ? 1 : 0;
maxEntries = maxEntries === 0 ? undefined : maxEntries;
defaultValue = "";
refElementIdValue = (refElementId as CustomFieldValue[])[0].value as GeneralIdRef;
refElementIdValue = (refElementId as CustomFieldValue[])[0]
.value as GeneralIdRef;
break;
case "Text":
minEntries = 1;
@ -173,7 +188,8 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
refElementIdValue = undefined;
}
const cleanMaxEntries: Number | undefined = maxEntries === "" ? undefined : Number(maxEntries);
const cleanMaxEntries: Number | undefined =
maxEntries === "" ? undefined : Number(maxEntries);
if (this.isEditMode()) {
const { customFieldId } = this.props.router.params;
@ -187,19 +203,28 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
minEntries,
cleanMaxEntries,
refElementIdValue,
params
params,
);
if (response) {
toast.info("Custom Field edited");
}
} else {
const response = await customFieldsService.postField(name, fieldType, defaultValue, minEntries, cleanMaxEntries, refElementIdValue, params);
const response = await customFieldsService.postField(
name,
fieldType,
defaultValue,
minEntries,
cleanMaxEntries,
refElementIdValue,
params,
);
if (response) {
toast.info("New Custom Field added");
}
}
if (buttonName === this.labelSave) this.setState({ redirect: "/customfields" });
if (buttonName === this.labelSave)
this.setState({ redirect: "/customfields" });
} catch (ex: any) {
this.handleGeneralError(ex);
}
@ -245,13 +270,17 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
switch (data.fieldType) {
case "Number":
data.required = loadedData.minEntries > 0;
const parameters: numberParams = JSON.parse(loadedData.parameters);
const parameters: numberParams = JSON.parse(
loadedData.parameters,
);
data.minValue = parameters.minValue ?? undefined;
data.maxValue = parameters.maxValue ?? undefined;
data.step = parameters.step ?? undefined;
break;
case "Text":
const textParameters: textParams = JSON.parse(loadedData.parameters);
const textParameters: textParams = JSON.parse(
loadedData.parameters,
);
data.multiLine = textParameters.multiLine ?? false;
break;
}
@ -309,43 +338,139 @@ class CustomFieldDetails extends Form<any, any, CustomFieldDetailsState> {
<form onSubmit={this.handleSubmit}>
{this.renderError("_general")}
{this.renderInput("name", this.labelName, InputType.text)}
{this.renderSelect("fieldType", this.labelFieldType, fieldTypeOptions)}
<Switch>
<Case condition={this.state.data.fieldType === "Domain"}>
{this.renderInput("required", this.labelRequired, InputType.checkbox)}
{this.renderInput("maxEntries", this.labelMaxEntries, InputType.number)}
</Case>
<Case condition={this.state.data.fieldType === "Glossary"}>
{this.renderGlossaryPicker(true, "refElementId", this.labelRefElementId, 1, SystemGlossaries)}
{this.renderInput("required", this.labelRequired, InputType.checkbox)}
{this.renderInput("maxEntries", this.labelMaxEntries, InputType.number)}
</Case>
<Case condition={this.state.data.fieldType === "Sequence"}>
{this.renderSequencePicker(true, "refElementId", this.labelRefElementId)}
</Case>
<Case condition={this.state.data.fieldType === "FormTemplate"}>
<></>
</Case>
<Case condition={this.state.data.fieldType === "Text"}>
{this.renderInput("multiLine", this.labelMultiLine, InputType.checkbox)}
<Case condition={this.state.data.multiLine === true}>{this.renderInputTextarea(true, "defaultValue", this.labelDefaultValue)}</Case>
<Case condition={this.state.data.multiLine === false}>
{this.renderInput("defaultValue", this.labelDefaultValue, InputType.text)}
</Case>
</Case>
<Case condition={this.state.data.fieldType === "Number"}>
{this.renderInput("required", this.labelRequired, InputType.checkbox)}
{this.renderInputNumber("minValue", this.labelMinValue, false, undefined, undefined, maxValue, undefined)}
{this.renderInputNumber("maxValue", this.labelMaxValue, false, undefined, minValue, undefined, undefined)}
{this.renderSelect(
"fieldType",
this.labelFieldType,
fieldTypeOptions,
)}
{this.state.data.fieldType === "Domain" && (
<>
{this.renderInput(
"required",
this.labelRequired,
InputType.checkbox,
)}
{this.renderInput(
"maxEntries",
this.labelMaxEntries,
InputType.number,
)}
</>
)}
{this.state.data.fieldType === "Glossary" && (
<>
{this.renderGlossaryPicker(
true,
"refElementId",
this.labelRefElementId,
1,
SystemGlossaries,
)}
{this.renderInput(
"required",
this.labelRequired,
InputType.checkbox,
)}
{this.renderInput(
"maxEntries",
this.labelMaxEntries,
InputType.number,
)}
</>
)}
{this.state.data.fieldType === "Sequence" && (
<>
{this.renderSequencePicker(
true,
"refElementId",
this.labelRefElementId,
)}
</>
)}
{this.state.data.fieldType === "Text" && (
<>
{this.renderInput(
"multiLine",
this.labelMultiLine,
InputType.checkbox,
)}
{this.state.data.multiLine === true &&
this.renderInputTextarea(
true,
"defaultValue",
this.labelDefaultValue,
)}
{this.state.data.multiLine === false &&
this.renderInput(
"defaultValue",
this.labelDefaultValue,
InputType.text,
)}
</>
)}
{this.state.data.fieldType === "Number" && (
<>
{this.renderInput(
"required",
this.labelRequired,
InputType.checkbox,
)}
{this.renderInputNumber(
"minValue",
this.labelMinValue,
false,
undefined,
undefined,
maxValue,
undefined,
)}
{this.renderInputNumber(
"maxValue",
this.labelMaxValue,
false,
undefined,
minValue,
undefined,
undefined,
)}
{this.renderInput("step", this.labelStep, InputType.number)}
{this.renderInputNumber("defaultValue", this.labelDefaultValue, false, undefined, minValue, maxValue, step)}
</Case>
<Else>
{this.renderInput("defaultValue", this.labelDefaultValue, InputType.text)}
{this.renderInput("minEntries", this.labelMinEntries, InputType.number)}
{this.renderInput("maxEntries", this.labelMaxEntries, InputType.number)}
</Else>
</Switch>
{this.renderInputNumber(
"defaultValue",
this.labelDefaultValue,
false,
undefined,
minValue,
maxValue,
step,
)}
</>
)}
{![
"Domain",
"Glossary",
"Sequence",
"FormTemplate",
"Text",
"Number",
].includes(this.state.data.fieldType) && (
<>
{this.renderInput(
"defaultValue",
this.labelDefaultValue,
InputType.text,
)}
{this.renderInput(
"minEntries",
this.labelMinEntries,
InputType.number,
)}
{this.renderInput(
"maxEntries",
this.labelMaxEntries,
InputType.number,
)}
</>
)}
{this.isEditMode() && this.renderButton(this.labelApply)}
{this.renderButton(this.labelSave)}
</form>