Initial commit

2022-05-11 19:49:34 +00:00
commit 05a8cd39ed
35 changed files with 10972 additions and 0 deletions
@@ -0,0 +1,95 @@
+import React from "react";
+import { Callout, Link, PrimaryButton, Stack, Text, TextField } from "@fluentui/react";
+import ISandboxProps from "../../Interfaces/ISandboxProps";
+import { Strings } from "../../Services/LocalizationService";
+
+interface IStates
+{
+	login : string;
+	password : string;
+	loginError?: string;
+	passwordError?: string;
+	showHint : boolean;
+}
+
+export default class SandboxOne extends React.Component<ISandboxProps, IStates>
+{
+	constructor(props : ISandboxProps)
+	{
+		super(props);
+		this.state =
+		{
+			login: "",
+			password: "",
+			loginError: null,
+			passwordError: null,
+			showHint: false
+		};
+	}
+
+	private OnSubmit() : void
+	{
+		let newState : IStates = this.state;
+		newState.loginError = null;
+		newState.passwordError = null;
+
+		if (newState.login.toLocaleLowerCase() !== "test-user@example.com")
+			newState.loginError = Strings.sandboxLoginError;
+
+		if (newState.password !== ".tSYRc:eYP_868p")
+			newState.passwordError = Strings.sandboxPasswordError;
+
+		if (newState.login === "")
+			newState.loginError = Strings.sandboxEmptyField;
+
+		if (newState.password === "")
+			newState.passwordError = Strings.sandboxEmptyField;
+
+		this.setState(newState);
+
+		// if (newState.loginError === null && newState.passwordError === null)
+			this.props.context.current.OnFinished();
+	}
+
+	private OnPaste(event : React.ClipboardEvent<HTMLInputElement>) : boolean
+	{
+		event.preventDefault();
+		return false;
+	}
+
+	public render() : JSX.Element
+	{
+		return (
+			<Stack tokens={ { childrenGap: 10 } } >
+				<Text variant="xLarge">{ Strings.sandboxLoginHeader }</Text>
+
+				<TextField
+					placeholder={ Strings.sandboxEmail } required autoComplete="chrome-off" onPaste={ this.OnPaste }
+					value={ this.state.login } onChange={ (_, e) => this.setState({ ...this.state, login: e }) }
+					errorMessage={ this.state.loginError } />
+				<TextField
+					placeholder={ Strings.sandboxPassword } required autoComplete="chrome-off" onPaste={ this.OnPaste }
+					type="password" canRevealPassword
+					value={ this.state.password } onChange={ (_, e) => this.setState({ ...this.state, password: e }) }
+					errorMessage={ this.state.passwordError } />
+
+				<Stack horizontalAlign="end" tokens={ { childrenGap: 10 } }>
+					<Link id="credentialHintLink" onClick={ () => this.setState({ ...this.state, showHint: true })}>{ Strings.sandbox1forgotPassword }</Link>
+					<PrimaryButton text={ Strings.sandboxLogin } onClick={ () => this.OnSubmit() } />
+				</Stack>
+
+				{ this.state.showHint &&
+					<Callout
+						onDismiss={ () => this.setState({ ...this.state, showHint: false }) }
+						target="#credentialHintLink" >
+
+						<Stack tokens={ { padding: 20 } } styles={ { root: { userSelect: "none" } } }>
+							<Text>{ Strings.startPrereqLogin }: test-user@example.com</Text>
+							<Text>{ Strings.startPrereqPassword }: .tSYRc:eYP_868p</Text>
+						</Stack>
+					</Callout>
+				}
+			</Stack>
+		);
+	}
+}