Webclient: Handle firing an event once (#4499)

* draft: handle firing an event once

* lint

* Prevent rapid double-click on sending messages

* no rest spread on single primative when sibling components exist

* clear message instead of using a fireOnce handler.

* fix tests

* remove unnecessary validate mock
This commit is contained in:
Brent Clark 2022-01-30 11:14:28 -06:00 committed by GitHub
parent 4bb13677c8
commit 513fcb0908
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 21467 additions and 161 deletions

View file

@ -1,7 +1,5 @@
// eslint-disable-next-line
import React, { Component, useCallback, useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { Form, Field, useField } from 'react-final-form';
import React, { useEffect, useState, useCallback } from 'react';
import { Form, Field } from 'react-final-form';
import { OnChange } from 'react-final-form-listeners';
import Button from '@material-ui/core/Button';
@ -10,14 +8,14 @@ import { AuthenticationService } from 'api';
import { CheckboxField, InputField, KnownHosts } from 'components';
import { useAutoConnect } from 'hooks';
import { HostDTO, SettingDTO } from 'services';
import { FormKey, APP_USER } from 'types';
import { APP_USER } from 'types';
import './LoginForm.css';
const PASSWORD_LABEL = 'Password';
const STORED_PASSWORD_LABEL = '* SAVED *';
const LoginForm = ({ onSubmit, onResetPassword }: LoginFormProps) => {
const LoginForm = ({ onSubmit, disableSubmitButton, onResetPassword }: LoginFormProps) => {
const [host, setHost] = useState(null);
const [passwordLabel, setPasswordLabel] = useState(PASSWORD_LABEL);
const [autoConnect, setAutoConnect] = useAutoConnect();
@ -43,6 +41,8 @@ const LoginForm = ({ onSubmit, onResetPassword }: LoginFormProps) => {
setPasswordLabel(useStoredLabel ? STORED_PASSWORD_LABEL : PASSWORD_LABEL);
};
return (
<Form onSubmit={onSubmit} validate={validate}>
{({ handleSubmit, form }) => {
@ -140,7 +140,13 @@ const LoginForm = ({ onSubmit, onResetPassword }: LoginFormProps) => {
<OnChange name="autoConnect">{onAutoConnectChange}</OnChange>
</div>
</div>
<Button className='loginForm-submit rounded tall' color='primary' variant='contained' type='submit'>
<Button
className='loginForm-submit rounded tall'
color='primary'
variant='contained'
type='submit'
disabled={disableSubmitButton}
>
Login
</Button>
</form>
@ -152,6 +158,7 @@ const LoginForm = ({ onSubmit, onResetPassword }: LoginFormProps) => {
interface LoginFormProps {
onSubmit: any;
disableSubmitButton: boolean,
onResetPassword: any;
}