use `react-hook-form` and fix tests

1 files changed, 9 insertions, 17 deletions

diff --git a/vnext/src/ui/Login.js b/vnext/src/ui/Login.js
index 774664c0..fc3922c8 100644
--- a/vnext/src/ui/Login.js
+++ b/vnext/src/ui/Login.js
@@ -3,8 +3,7 @@ import { useLocation, useHistory } from 'react-router-dom';
 
 import Icon from './Icon';
 import Button from './Button';
-import Input from './Input';
-import { useFormState } from 'react-use-form-state';
+import { useForm } from 'react-hook-form';
 
 import { me, facebookLink, vkLink, appleLink } from '../api';
 
@@ -33,14 +32,11 @@ function Login({ visitor, onAuth }) {
         }
     }, [history, location.state, visitor]);
 
-    const [formState, { text, password }] = useFormState();
+    const { register, handleSubmit, formState: { errors }, } = useForm();
 
-    /**
-     * @param {React.SyntheticEvent} event
-     */
-    let onSubmit = (event) => {
-        event.preventDefault();
-        me(formState.values.username, formState.values.password)
+    /** @type { import('react-hook-form').SubmitHandler<import('react-hook-form').FieldValues> } */
+    let onSubmit = (values) => {
+        me(values.username, values.password)
             .then(response => {
                 onAuth(response);
             }
@@ -63,14 +59,10 @@ function Login({ visitor, onAuth }) {
              <a href={appleLink()}><img src="https://appleid.cdn-apple.com/appleid/button" /></a>
                 </div>
                 <p>Already registered?</p>
-                <form onSubmit={onSubmit}>
-                    <Input name="username"
-                        placeholder="Username..."
-                        value={formState.values.username} {...text('username')} /><br />
-                    <Input name="password"
-                        placeholder="Password..."
-                        value={formState.values.password} {...password('password')} /><br />
-                    <Button onClick={onSubmit}>OK</Button>
+                <form onSubmit={handleSubmit(onSubmit)}>
+                    <input placeholder="Username..." {...register('username')} /><br />
+                    <input placeholder="Password..." type="password" {...register('password')} /><br />
+                    <Button onClick={handleSubmit(onSubmit)}>OK</Button>
                 </form>
             </div>
         </div>