Alexander Zinn
1469c7f52f
- Upgraded @reduxjs/toolkit to version 2.9.0 and added new dependencies including @techniker-me/pcast-api and moment. - Refactored authentication logic and added middleware for improved request handling. - Introduced new UI components such as buttons, loaders, and forms, along with a theme system following SOLID principles. - Updated routing to include protected routes and improved the login form with better error handling. - Removed unused CSS and organized the project structure for better maintainability.
93 lines
2.4 KiB
TypeScript
93 lines
2.4 KiB
TypeScript
/**
|
|
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
|
|
*/
|
|
import {
|
|
ChangeEvent,
|
|
useRef,
|
|
FC
|
|
} from 'react';
|
|
import text from './text';
|
|
|
|
import {InputWithRef} from 'components/inputs';
|
|
import Theme from 'theme';
|
|
|
|
import {
|
|
LoginLayout as Layout,
|
|
LoginButton,
|
|
LoginHeader,
|
|
LoginText,
|
|
LoginLink,
|
|
ErrorText
|
|
} from './style';
|
|
|
|
import personImage from 'assets/images/symbol-person-24x24.png';
|
|
import lockImage from 'assets/images/symbol-lock-24x24.png';
|
|
import { LoadingWheel } from 'components/loaders';
|
|
|
|
interface ILoginContainer {
|
|
onSubmit: () => void;
|
|
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
errorMessage: string;
|
|
isLoading?: boolean;
|
|
isWebsocketConnected?: boolean;
|
|
}
|
|
|
|
export const Login: FC<ILoginContainer> = (props: ILoginContainer) => {
|
|
const {headerText, headerTextSmall, signInText, loginForgottenText} = text;
|
|
const {onChange, onSubmit, errorMessage, isLoading, isWebsocketConnected} = props;
|
|
const applicationIdRef = useRef(null);
|
|
const secretRef = useRef(null);
|
|
const handleKeySubmit = ({key}) => {
|
|
if (key !== 'Enter') {
|
|
return;
|
|
}
|
|
|
|
onSubmit();
|
|
};
|
|
|
|
return (
|
|
<Layout>
|
|
<LoginHeader>
|
|
{headerText}
|
|
</LoginHeader>
|
|
<LoginText>
|
|
{headerTextSmall}
|
|
</LoginText>
|
|
{/* <InputWithRef
|
|
imagePath={personImage}
|
|
imageAltText="Application Id"
|
|
onChange={onChange}
|
|
onKeyPress={handleKeySubmit}
|
|
name="applicationId"
|
|
type="text"
|
|
ref={applicationIdRef}
|
|
disabled={isLoading}
|
|
autocomplete="off"
|
|
/>
|
|
<InputWithRef
|
|
imagePath={lockImage}
|
|
imageAltText="Secret"
|
|
onChange={onChange}
|
|
onKeyPress={handleKeySubmit}
|
|
ref={secretRef}
|
|
name="secret"
|
|
type="password"
|
|
disabled={isLoading}
|
|
autocomplete="new-password"
|
|
/> */}
|
|
<ErrorText className="error-message testId-displayMessage">{errorMessage || null}</ErrorText>
|
|
<LoginButton
|
|
backgroundColor={Theme.colors.red}
|
|
onClick={onSubmit}
|
|
disabled={isLoading || !isWebsocketConnected}
|
|
className="testId-loginButton"
|
|
>
|
|
{(!isWebsocketConnected || isLoading) && <span><LoadingWheel size={'small'} /></span>}
|
|
{isWebsocketConnected && signInText}
|
|
</LoginButton>
|
|
<LoginLink>
|
|
{loginForgottenText}
|
|
</LoginLink>
|
|
</Layout>
|
|
);
|
|
}; |