From 5944f70a2a06ebd8cb5d93cdfd6f7e6632a6dbaa Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Sat, 23 May 2020 03:31:26 -0400 Subject: [PATCH] Add login behavior up to loading state. The remaining functionality depends on implementing a new AuthManager and overlay system. --- src/renderer/components/login/Login.tsx | 123 ++++++++++++++++-- .../login/login-field/LoginField.tsx | 47 ++++--- 2 files changed, 145 insertions(+), 25 deletions(-) diff --git a/src/renderer/components/login/Login.tsx b/src/renderer/components/login/Login.tsx index 9054096..9a0296f 100644 --- a/src/renderer/components/login/Login.tsx +++ b/src/renderer/components/login/Login.tsx @@ -3,18 +3,47 @@ import LoginField from './login-field/LoginField' import './Login.css' +enum LoginStatus { + IDLE, + LOADING, + SUCCESS, + ERROR +} + type LoginProperties = { cancelable: boolean } -export default class Login extends React.Component { +type LoginState = { + rememberMe: boolean, + userValid: boolean, + passValid: boolean, + status: LoginStatus +} + +export default class Login extends React.Component { + + private userRef: React.RefObject + private passRef: React.RefObject + + constructor(props: LoginProperties) { + super(props) + this.state = { + rememberMe: true, + userValid: false, + passValid: false, + status: LoginStatus.IDLE + } + this.userRef = React.createRef() + this.passRef = React.createRef() + } getCancelButton(): JSX.Element { if(this.props.cancelable) { return ( <>
- @@ -26,32 +55,108 @@ export default class Login extends React.Component { } } + isFormDisabled = (): boolean => { + return this.state.status !== LoginStatus.IDLE + } + + isLoading = (): boolean => { + return this.state.status === LoginStatus.LOADING + } + + canSave = (): boolean => { + return this.state.passValid && this.state.userValid && !this.isFormDisabled() + } + + getButtonText = (): string => { + switch(this.state.status) { + case LoginStatus.LOADING: + return 'LOGGING IN' + case LoginStatus.SUCCESS: + return 'SUCCESS' + case LoginStatus.ERROR: + case LoginStatus.IDLE: + return 'LOGIN' + } + } + + handleUserValidityChange = (valid: boolean): void => { + this.setState({ + ...this.state, + userValid: valid + }) + } + + handlePassValidityChange = (valid: boolean): void => { + this.setState({ + ...this.state, + passValid: valid + }) + } + + handleCheckBoxChange = (event: React.ChangeEvent): void => { + this.setState({ + ...this.state, + rememberMe: event.target.checked + }) + } + + handleFormSubmit = (event: React.FormEvent): void => { + event.preventDefault() + } + + handleLoginButtonClick = (event: React.MouseEvent): void => { + console.log(this.userRef.current!.getValue()) + console.log(this.passRef.current!.getValue()) + this.setState({ + ...this.state, + status: LoginStatus.LOADING + }) + } + render() { return ( <>
{this.getCancelButton()}
-
+ MINECRAFT LOGIN - - + +
forgot password? -
-