file persistence, load users from json, js packages updated

web/src/components/Checkbox.jsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import React from 'react';
 import Hook from './Checkbox.svg'
 const CheckboxOrigin = styled.input.attrs({ type: 'checkbox' })`
   visibility: hidden;

web/src/components/TextInput.jsx

@@ -3,6 +3,16 @@ import styled from 'styled-components'
 import { withTheme } from 'styled-components';
 export class TextInput extends Component {
 
+    
+    constructor(props){
+        super(props);
+        this.state = {value: "value" in props?props.value:""}
+        //this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(event){
+        this.setState({value: event.target.value});
+    }
     render() {
         const InputWrapper = styled.div`
         font-size: 1.1em;
@@ -42,6 +52,7 @@ export class TextInput extends Component {
             border: none;
             background: none;
             outline: none;
+            color: ${this.props.theme.colours.color2};
             font-size: 1em;
             ${this.props.disabled!==undefined ? "user-select: none;" : null};
             &:focus + label, &:not(:placeholder-shown) + label {
@@ -99,7 +110,7 @@ export class TextInput extends Component {
         `;
         return (
             <InputWrapper>
-                <input id={this.props.id} placeholder=" " type={this.props.type ? this.props.type : "text"} value={this.props.value} disabled={this.props.disabled} />
+                <input name={this.props.name} id={this.props.id} placeholder=" " type={this.props.type ? this.props.type : "text"} value={this.state.value} onChange={e=>this.handleChange(e)} disabled={this.props.disabled} />
                 {this.props.label != null ? <label htmlFor={this.props.id}>{this.props.label}</label> : ""}
                 {this.props.button != null ? <button onClick={this.props.onClick}>{this.props.button}</button> : ""}
             </InputWrapper>