react-bootstrap#Form JavaScript Examples

render() {
        return (
            <Form.Group as={Row}>
                <Form.Label column sm='3' htmlFor={this.props.name}>
                    {this.props.label}
                </Form.Label>
                <Col className={this.props.fieldClass}>
                    <textarea
                        ref={this.props.name}
                        rows={this.props.rows}
                        className='form-control'
                        id={this.props.name}
                        placeholder={this.props.placeholder}
                        value={this.props.value}
                        onChange={this.props.onChange}
                        onBlur={this.props.onBlur}
                    />
                    {this.props.validationMessage ? (
                        <span className='help-block'>{this.props.validationMessage} </span>
                    ) : null}
                </Col>
                {this.props.children}
            </Form.Group>
        );
    }

render() {
        return (
            <Container fluid>
                <Row>
                    <Col xs={{ span: 2, offset: 10 }}  md={{ span: 1, offset: 11 }}>
                        <Image src={staffImage} roundedCircle fluid className="border border-primary my-3" />
                    </Col>
                </Row>
                <Row>
                    <Col md="6" className="mb-3">
                        <Form onSubmit={this.submitNotice}>
                            <Form.Group controlId="ControlTextarea">
                                <Form.Control className="" style={{backgroundColor: 'rgba(255, 255, 255, 6%)'}} value={this.state.formText} onChange={this.changeNotice} name="formText" as="textarea" rows="10" placeholder="输入通知消息..."/>
                            </Form.Group>
                            <Button variant="primary" type="submit" className="float-right">通知</Button>
                        </Form>
                    </Col>
                    <Col md="6">
                        <Image src={azureImage} fluid />
                    </Col>
                </Row>
            </Container>
        );
    }

createModal(title, toggle) {
    return (
      <Modal size="lg" show centered>
        <Modal.Header>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>Enter the message to send to all users:</p>
          <Form.Group>
            <Form.Control as="textarea" rows="10" id="comment" onChange={this.handleChange} />
          </Form.Group>
        </Modal.Body>
        <Modal.Footer>
          <Button
            variant="primary btn-square"
            disabled={!this.state.comment.length}
            onClick={() => {
              if (window.confirm('You are about to send this message to all users (' + this.props.user_count + ' accounts). Are you sure?')) {
                this.submit();
              }
            }}>
            Send
          </Button>
          <Button variant="secondary btn-square" onClick={toggle}>
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }

render() {
        return (
            <Layout>
                <Table title="Admin accounts" columns={this.getColumns()} data={this.getData()}></Table>
                <br />
                <div className=" flex flex-wrap relative">
                    <Form.Control className="w-40 mr-3 bg-gray-800 border-gray-900 focus:bg-gray-800 text-white" type="text" placeholder="Username" onChange={(e) => this.setState({ username: e.target.value })} />

                    <Form.Control className="w-40 mr-3 bg-gray-800 border-gray-900 focus:bg-gray-800 text-white" type="password" placeholder="Password" onChange={(e) => this.setState({ password: e.target.value })} />
                    <button className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded text-xs mr-3" onClick={this.createAdmin}>
                        New
                    </button>
                    <p className="text-red-500 text-xs italic">{this.state.statusMessage}</p>
                </div>

                <br></br>
                <Table title="Users" columns={this.getUserColumns()} data={this.getUserData()}></Table>
                <br />
                <div className=" flex flex-wrap relative">
                    <Form.Control className="w-40 mr-3 bg-gray-800 border-gray-900 focus:bg-gray-800 text-white" type="text" placeholder="Username" onChange={(e) => this.newUserNameChanged(e.target.value)} />
                    <button className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded text-xs mr-3" onClick={this.createUser}>
                        Create
                    </button>
                    <p className="text-red-500 text-xs italic">{this.state.statusMessageUser}</p>
                </div>
            </Layout>
        )
    }

render() {
    return (
      <Navbar.Form>
        <Form onSubmit={this.handleSubmit}>
          <FormGroup style={formGroupStyle}>
            <FormControl
              type="text"
              name="email"
              placeholder="Email"
              onChange={this.handleInputChange}
            />
            <FormControl
              type="password"
              name="password"
              placeholder="Password"
              onChange={this.handleInputChange}
              style={passwordStyle}
            />
            <Button type="submit" bsStyle="success" style={logInButtonStyle}>
              LOGIN
            </Button>
          </FormGroup>
        </Form>
      </Navbar.Form>
    );
  }

function ChangeWorker(props) {
  const onSubmit = (stakeValues) => {
    if (props.onChangeWorker) {
      props.onChangeWorker(stakeValues);
    }
  };
  return <Formik onSubmit={onSubmit} initialValues={{ workerAddress: props.worker ? props.worker : '' }} validationSchema={validationSchema}>
    {({
      handleSubmit,
      handleChange,
      handleBlur,
      values,
      touched,
      isValid,
      errors,
    }) => (
      <Form onSubmit={handleSubmit}>
        <Form.Group as={Row}>
          <Form.Label column sm={2} htmlFor="worker-address">
            Worker
          </Form.Label>
          <Col sm={10}>
            <Form.Control id="worker-address" type="text" name="workerAddress" onChange={handleChange} value={values.workerAddress} />
            <Form.Control.Feedback type="invalid" style={{ display: errors.workerAddress ? 'inline' : 'none' }}>{errors.workerAddress}</Form.Control.Feedback>
          </Col>
        </Form.Group>
        <div className="d-flex justify-content-center">
          <Button type="submit"  disabled={!isValid}>Set worker</Button>
        </div>
      </Form>
    )}
  </Formik>;
}

render() {
        const { selected, color, colorPickerOn } = this.state;
        const { data, labels } = this.props;
        return (
            <Container>
                <Form inline className="justify-content-center mb-3">
                    <Form.Label className="mr-2">
                        Select Chart Type
                    </Form.Label>
                    <DropdownButton className="chart-type-selector" title={selected} variant="outline-dark" onSelect={this.handleSelect}>
                        {chartTypes.map((item, i) =>
                            <Dropdown.Item key={i} eventKey={item} >{chartTypeIcons[item]}{item}</Dropdown.Item>
                        )}
                    </DropdownButton>
                    <span>&nbsp;</span>
                    <Button as="input" type="button" value="Color Picker" variant="outline-dark" onClick={this.handleColorPicker} />
                    <Button type="button" variant="outline-dark" onClick={this.refreshData} className="ml-1">Refresh</Button>
                    <Modal show={colorPickerOn} onHide={this.handleModalClose}>
                        <Modal.Header closeButton>
                            Color Picker
                        </Modal.Header>
                        <Modal.Body>
                            <SketchPicker
                                width="95%"
                                color={this.state.color}
                                onChangeComplete={this.handleColor}
                            />
                        </Modal.Body>
                    </Modal>
                </Form>
                <Row>
                    <Col>
                        <Charts chartType={selected} chartColor={color} labels={labels} title="Sample" data={data} options={{}} />
                    </Col>
                </Row>
            </Container>
        )
    }

render() {
    if (this.state.loginVerify) {
      return <Redirect to="/dashboard" />;
    }
    return (
      <Form className="login" onSubmit={this.sendLogin}>
        <h1>Login to get started</h1>
        <div className="loginBox">
          <Form.Group controlId="loginUsernameInput">
            <Form.Label>Username</Form.Label>
            <Form.Control type="text" />
          </Form.Group>
          <Form.Group controlId="loginPasswordInput">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" />
          </Form.Group>
          <p>{this.state.loginError}</p>
          <div className="buttons">
            <Button type="submit" variant="info">
              Login
            </Button>
            <Button type="submit" variant="outline-info">
              <Link className="signupLink" to={'/signup'}>
                Sign Up
              </Link>
            </Button>
          </div>
        </div>
      </Form>
    );
  }

function SearchBar(props) {
    let history = useHistory()
    let [value, setValue] = useState('')
    let handleChange = ({ target: { value } }) => {
        setValue(value)
    }
    let handleSubmit = (e) => {
        e.preventDefault();
        let value = e.target.search.value;
        value = encodeURIComponent(value);
        history.push(`/search?q=${value}`)
    }
    let { className } = props;
    return (
        <Form className={className} onSubmit={handleSubmit} role="search">
            <Form.Group className="w-100 mb-0 rounded-pill border-0 px-3"
                style={{ backgroundColor: "rgb(233,236,239)" }}>
                <InputGroup className="w-100">
                    <InputGroup.Prepend>
                        <InputGroup.Text>
                            <FontAwesomeIcon icon={faSearch} />
                        </InputGroup.Text>
                    </InputGroup.Prepend>
                    <Form.Control
                        value={value}
                        onChange={handleChange}
                        style={{ backgroundColor: "rgb(233,236,239)" }}
                        size="sm"
                        type="search"
                        placeholder="Search for posts, #hastags or @users"
                        name="search"
                        id="tsearch"
                    />
                </InputGroup>
            </Form.Group>
        </Form>
    )
}

render() {
    const {tokenAmount} = this.props;
    const {item} = this.props;
    let tokenUSDValue = 0;
    return (
      <div>
        <Form.Group controlId="formFundingCenter" className="pool-funding-form-row">
          <Form.Label>Amount of {item.symbol} to transfer. 1 {item.symbol} = {item.price} USD.</Form.Label>
          <Form.Control type="text" placeholder="enter amount of token to transfer" value={tokenAmount}
          onChange={this.tokenAmountChanged} />
          <Form.Text className="text-muted">
            Total USD value = {tokenUSDValue}. Your wallet balance {item.senderBalance}
          </Form.Text>
        </Form.Group>
      </div>
      )
  }

enterUsername() {
    return (
      <div>
        <Form onSubmit={this.handleLogin}>
          <InputGroup>
            <FormControl
              ref={input => {
                this.usernameInput = input;
              }}
              placeholder="Enter your alias here"
              name="username"
              aria-label="username"
              aria-describedby="text"
              onChange={this.handleUsernameChange}
            />
            <InputGroup.Append>
              <Button>Submit</Button>
            </InputGroup.Append>
          </InputGroup>
        </Form>
      </div>
    );
  }

ExtPubKeyInput = ({ extPubKey, network, onChange }) => {
  const isValid = useMemo(() => isValidExtPubKey(extPubKey, network), [
    extPubKey,
    network,
  ])

  const isEmptyExtPubKey = extPubKey === ""
  const isFilled = !isEmptyExtPubKey

  return (
    <Form noValidate>
      <Form.Group>
        <Form.Control
          isValid={isFilled && isValid}
          isInvalid={isFilled && !isValid}
          size="lg"
          type="password"
          placeholder="xpub..."
          value={extPubKey}
          onChange={onChange}
        />
      </Form.Group>
      {isFilled && !isValid && (
        <Alert variant="warning">Invalid public key</Alert>
      )}
    </Form>
  )
}

UploadButton = (props) => {

    const [state, setState] = useState({
        filename: "",
        numberOfFiles: 0
    });

    useEffect(() => {
        if (props.reset) { resetState(); }
    }, [props.reset]);

    const resetState = () => {
        setState({
            filename: "",
            numberOfFiles: 0
        });
    };
    const file = useRef()

    const checkFileIsGPX = (file) => {
        var parts = file.split(".");
        var ext = parts[parts.length - 1];
        switch (ext.toLowerCase()) {
            case "gpx":
                return true;
            default:
                return false;
        }
    };

    const handleSingleFileChanged = (e) => {
        props.onChange(e);
        if (file.current.files[0] !== undefined && checkFileIsGPX(file.current.files[0].name)) {
            let name = file.current.files[0].name;
            setState({ ...state, filename: name });
        }
        else {
            let name = "";
            setState({ ...state, filename: name });
        }

    };

    const handleMultipleFileChanged = (e) => {
        props.onChange(e);
        let number = file.current.files.length;
        setState({ ...state, numberOfFiles: number });
    };

    const uploadButton = (props.file)
        ?
        <Form.Group className={props.className}>
            <Form.Control ref={file} onChange={handleSingleFileChanged} id={props.id} type="file" accept=".gpx"></Form.Control>
            <Form.Label className="uploadLabel" htmlFor={props.id}>
                <p data-testid="upload-button-label">{state.filename !== "" ? state.filename : props.text}</p>
                <BsUpload></BsUpload>
            </Form.Label>
        </Form.Group>
        :
        (props.videos ?
            <Form.Group className={props.className}>
                <Form.Control multiple ref={file} onChange={handleMultipleFileChanged} id={props.id} type="file" accept="video/*"></Form.Control>
                <Form.Label className="uploadLabel" htmlFor={props.id}>
                    <p>{state.numberOfFiles !== 0 ? state.numberOfFiles + " files selected" : props.text}</p>
                    <BsUpload></BsUpload>
                </Form.Label>
            </Form.Group> :
            <Form.Group className={props.className}>
                <Form.Control multiple ref={file} onChange={handleMultipleFileChanged} id={props.id} type="file" accept="image/*"></Form.Control>
                <Form.Label className="uploadLabel" htmlFor={props.id}>
                    <p>{state.numberOfFiles !== 0 ? state.numberOfFiles + " files selected" : props.text}</p>
                    <BsUpload></BsUpload>
                </Form.Label>
            </Form.Group>
        )

    return (
        uploadButton
    );
}

GameConfiguration = ({ optionSettings, onOptionSettingToggle }) => {
    const { t } = useTranslation();

    return (
        <div>
            <Form>
                <Panel title={t('Game Settings')}>
                    <div className='advice'>
                        Note: Changes made here will only affect the current game.
                    </div>
                    <Form.Row>
                        <Form.Check
                            id='orderForcedAbilities'
                            name='optionSettings.orderForcedAbilities'
                            label={t('Prompt to order simultaneous abilities')}
                            type='switch'
                            checked={optionSettings.orderForcedAbilities}
                            onChange={(event) =>
                                onOptionSettingToggle('orderForcedAbilities', event.target.checked)
                            }
                        />
                        <Form.Check
                            id='confirmOneClick'
                            name='gameOptions.confirmOneClick'
                            label={t('Show a prompt when initating 1-click abilities')}
                            type='switch'
                            checked={optionSettings.confirmOneClick}
                            onChange={(event) =>
                                onOptionSettingToggle('confirmOneClick', event.target.checked)
                            }
                        />
                        <Form.Check
                            id='leftPrompt'
                            name='gameOptions.leftPrompt'
                            label={t('Show the prompt area on left')}
                            type='switch'
                            checked={optionSettings.leftPrompt}
                            onChange={(event) =>
                                onOptionSettingToggle('leftPrompt', event.target.checked)
                            }
                        />

                        <div className='bluffTimer'>
                            Bluff Timer (seconds):
                            <RangeSlider
                                name='gameOptions.bluffTimer'
                                label='Bluff Timer'
                                min='0'
                                max='10'
                                tooltip='on'
                                value={optionSettings.bluffTimer}
                                onChange={(event) =>
                                    onOptionSettingToggle('bluffTimer', event.target.value)
                                }
                            />
                        </div>
                        <br />
                    </Form.Row>
                </Panel>
            </Form>
        </div >
    );
}

render() {
        return (
            <div className="p-edit">
                <Form onSubmit={(e) => this.handleSubmit(e)}>
                    <Form.Row>
                        <Form.Group as={Col} controlId="formGridName">
                            <Form.Label>givenName</Form.Label>
                            <Form.Control placeholder="givenName" defaultValue={this.props.profile.givenName} />
                        </Form.Group>

                        <Form.Group as={Col} controlId="formGridSurname">
                            <Form.Label>surname</Form.Label>
                            <Form.Control placeholder="surname" defaultValue={this.props.profile.surname} />
                        </Form.Group>
                    </Form.Row>

                    <Form.Group controlId="formGridUPN">
                        <Form.Label>userPrincipalName</Form.Label>
                        <Form.Control placeholder="userPrincipalName" defaultValue={this.props.profile.userPrincipalName} />
                    </Form.Group>

                    <Form.Row>
                        <Form.Group as={Col} controlId="formGridJob">
                            <Form.Label>jobTitle</Form.Label>
                            <Form.Control placeholder="jobTitle" defaultValue={this.props.profile.jobTitle} />
                        </Form.Group>

                        <Form.Group as={Col} controlId="formGridPhone">
                            <Form.Label>mobilePhone</Form.Label>
                            <Form.Control placeholder="mobilePhone" defaultValue={this.props.profile.mobilePhone} />
                        </Form.Group>

                        <Form.Group as={Col} controlId="formGridLang">
                            <Form.Label>preferredLanguage</Form.Label>
                            <Form.Control placeholder="preferredLanguage"
                                as="select" defaultValue={this.props.profile.preferredLanguage}>
                                <option>English</option>
                                <option>Chinese</option>
                                <option>Hindi</option>
                            </Form.Control>
                        </Form.Group>
                    </Form.Row>

                    <Button variant="primary" type="submit">
                        Submit
                    </Button>
                </Form>
            </div>
        );
    }

render() {
    return (
      <React.Fragment>
        <Card className="card-square text-center">
          <Card.Header as="h5" className="text-left">
            Total Monitorees by Date of Last Exposure By Risk Status
          </Card.Header>
          <Card.Body>
            <Form.Row className="justify-content-md-center">
              <Form.Group
                as={Col}
                md="8"
                onChange={val => {
                  this.setTimeResolution(val.target.value);
                }}>
                <Form.Label>Time Resolution</Form.Label>
                <Form.Control as="select" size="md">
                  <option>Day</option>
                  <option>Week</option>
                  <option>Month</option>
                </Form.Control>
              </Form.Group>
            </Form.Row>
            <ResponsiveContainer width="100%" height={400}>
              <BarChart
                width={500}
                height={300}
                data={this.state.lastExposureDateDate}
                margin={{
                  top: 20,
                  right: 30,
                  left: 20,
                  bottom: 5,
                }}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="High" stackId="a" fill="#FA897B" />
                <Bar dataKey="Medium" stackId="a" fill="#FFDD94" />
                <Bar dataKey="Low" stackId="a" fill="#D0E6A5" />
                <Bar dataKey="No Identified Risk" stackId="a" fill="#333" />
                <Bar dataKey="Missing" stackId="a" fill="#BABEC4" />
              </BarChart>
            </ResponsiveContainer>
            <div className="text-secondary text-right">
              <i className="fas fa-exclamation-circle mr-1"></i>
              Illnesses that began
              {` ${this.state.lastExposureDateDate[this.state.lastExposureDateDate.length - 1]?.name} `}
              may not yet be reported
            </div>
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }

render() {
		return (
			<div className="login">
				<div className="flex justify-content-center align-items-center">
					<Card className={'w100 mb0'}>
						<Row className="loginForm">
							<Col md={12}>
								<Form noValidate validated={this.state.validated}>
									<h1>Login</h1>
									<p className="text-muted">Sign In to your account</p>
									<FormGroup>
										<InputGroup>
											<InputGroup.Prepend><i className={'fas fa-user'}/></InputGroup.Prepend>
											<Form.Control
												name={'username'}
												className={`textInput`}
												placeholder={'Username'}
												value={this.state.username}
												onChange={this.onInputChange}
												required
											/>
										</InputGroup>
									</FormGroup>
									<FormGroup>
										<InputGroup>
											<InputGroup.Prepend><i className={'fas fa-lock'}/></InputGroup.Prepend>
											<Form.Control
												name={'password'}
												placeholder={'Password'}
												type={'password'}
												value={this.state.password}
												onChange={this.onInputChange}
												required
											/>
										</InputGroup>
									</FormGroup>
									<Row>
										<Col md={12}>
											<Button
												onClick={this.login}
												bsstyle={'primary'}
												disabled={this.validateEmail() === 'error' || this.validatePassword() === 'error' || !this.state.username || !this.state.password}
												className={'pull-right'}
											>Login</Button>
											{this.state.error && <div className={'text-danger'}>{this.state.error}</div>}
										</Col>
									</Row>
								</Form>
							</Col>
						</Row>
					</Card>
				</div>
			</div>
		);
	}

render() {
    return (
      <div>
        <div className="d-flex align-items-center auth px-0">
          <div className="row w-100 mx-0">
            <div className="col-lg-4 mx-auto">
              <div className="auth-form-light text-left py-5 px-4 px-sm-5">
                <div className="brand-logo">
                  <img src={require("../../assets/images/logo.svg")} alt="logo" />
                </div>
                <h4>Hello! let's get started</h4>
                <h6 className="font-weight-light">Sign in to continue.</h6>
                <Form className="pt-3">
                  <Form.Group className="d-flex search-field">
                    <Form.Control type="email" placeholder="Username" size="lg" className="h-auto" />
                  </Form.Group>
                  <Form.Group className="d-flex search-field">
                    <Form.Control type="password" placeholder="Password" size="lg" className="h-auto" />
                  </Form.Group>
                  <div className="mt-3">
                    <Link className="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" to="/dashboard">SIGN IN</Link>
                  </div>
                  <div className="my-2 d-flex justify-content-between align-items-center">
                    <div className="form-check">
                      <label className="form-check-label text-muted">
                        <input type="checkbox" className="form-check-input"/>
                        <i className="input-helper"></i>
                        Keep me signed in
                      </label>
                    </div>
                    <a href="!#" onClick={event => event.preventDefault()} className="auth-link text-black">Forgot password?</a>
                  </div>
                  <div className="mb-2">
                    <button type="button" className="btn btn-block btn-facebook auth-form-btn">
                      <i className="mdi mdi-facebook mr-2"></i>Connect using facebook
                    </button>
                  </div>
                  <div className="text-center mt-4 font-weight-light">
                    Don't have an account? <Link to="/user-pages/register" className="text-primary">Create</Link>
                  </div>
                </Form>
              </div>
            </div>
          </div>
        </div>  
      </div>
    )
  }

render() {
        return (
            <div className={Styles.container} style={{ height: '100vh' }}>
                <div className={Styles.loginForm}>
                    <h2 className={Styles.header}>Create admin account</h2>
                    <div style={{ clear: 'both' }}></div>
                    <Form onSubmit={this.createAdminAccount}>
                        <Form.Group controlId="formBasicUsername">
                            <Form.Label>Username</Form.Label>
                            <Form.Control type="text" placeholder="Username" onChange={(e) => this.setState({ username: e.target.value })} />
                        </Form.Group>
    
                        <Form.Group controlId="formBasicPassword">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" placeholder="Password" onChange={(e) => this.setState({ password: e.target.value })} />
                        </Form.Group>

                        <Form.Group controlId="formBasicPassword">
                            <Form.Label>Repeat password</Form.Label>
                            <Form.Control type="password" placeholder="Password" onChange={(e) => this.setState({ repeatedPassword: e.target.value })} />
                        </Form.Group>
                        <br/>

                        <h2 className={Styles.header}>Main server url</h2>
                        <Form.Group controlId="formBasicUsername">
                            <Form.Label>Url/IP</Form.Label>
                            <Form.Control type="text" placeholder="127.0.0.1:3001" onChange={(e) => this.setState({ mainServerUrl: e.target.value })} />
                        </Form.Group>
                        <br/>

                        <h2 className={Styles.header}>Content Server</h2>
                        <Form.Group controlId="formBasicName">
                            <Form.Label>Name</Form.Label>
                            <Form.Control type="text" placeholder="Content server name" onChange={(e) => this.setState({ contentServerName: e.target.value })} />
                        </Form.Group>
                        <Form.Group controlId="formBasicName">
                            <Form.Label>Content server IP</Form.Label>
                            <Form.Control type="text" value={this.host} onChange={(e) => this.setState({ contentServerIp: e.target.value })} />
                        </Form.Group>

                        <br/>
                        <Button variant="primary" onClick={this.createAdminAccount}>
                            Submit
                        </Button>
                        <input type="submit" style={{ display: 'none' }} />
                        <p id="statusMessage" style={{float: 'right', color: 'red'}}>{this.state.statusMessage}</p>
                    </Form>
                </div>
            </div>
        )
    }

Login = (props) => {
  const { authStatus, setAuthStatus } = props;

  const [loginInputs, setLoginInputs] = useState({
    username: '',
    password: '',
    email: '',
  });

  //used to toggle error message if auth fails
  //as well as redirect if auth succeeds
  const [loginStatus, setLoginStatus] = useState(null);

  const handleSubmit = async (e) => {
    let status;
    e.preventDefault();
    const { username, password } = loginInputs;
    const body = {
      username,
      password,
    };
    let response = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    });
    status = response.status;
    let data = await response.json();
    if (status === 200) {
      let email;
      setLoginStatus(true);
      setAuthStatus({ isLoggedIn: true, username: data.username, email: data.email });
    } else setLoginStatus(false);
  };

  const setInput = (e) => {
    setLoginInputs({ ...loginInputs, [e.target.id]: e.target.value });
  };

  return loginStatus || authStatus.isLoggedIn ? (
    <Redirect to={{ pathname: '/explore' }} />
  ) : (
    <Spring from={{ opacity: 0 }} to={{ opacity: 1 }} config={config.slow}>
      {(springProps) => (
        <div style={springProps} className="login-container">
          <div className="login-box">
            <center>
              <h4>Welcome Back!</h4>
            </center>
            <Form>
              <Form.Group controlId="username">
                <Form.Label>Username</Form.Label>
                <Form.Control type="username" placeholder="Username" onChange={setInput} />
              </Form.Group>

              <Form.Group controlId="password">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" placeholder="Password" onChange={setInput} />
              </Form.Group>

              <Button variant="primary" type="submit" onClick={handleSubmit}>
                Submit
              </Button>
              <div className={loginStatus === false ? 'error-msg' : 'hidden'}>
                Sorry, your username/password was invalid.
              </div>
            </Form>
            <br></br>
            <Button variant="primary" type="link" href="/api/auth/github">
              Log In with GitHub
            </Button>
          </div>
        </div>
      )}
    </Spring>
  );
}

Home = () => (
  <>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Comfortaa"
    />
    <div style={globalFont}>
      <section style={titleSection}>
        <img src={gourmetLogo} style={headerLogoStyle} alt="Gourmet Inc Logo" />
        <h1 style={headwelcome}>
          Welcome to the Gourmet Inc. Promotions Manager Website
        </h1>
      </section>
      <section style={servicesSection}>
        <Grid style={servicesGrid}>
          <Row style={servicesTitle}>
            <h2 style={servicesGridH2}>Services:</h2>
            <h2 style={servicesGridSub}>What we offer</h2>
          </Row>
          <Row>
            <Col md={4}>
              <img src={cloud} alt="cloud icon" style={cloudIcon} />
              <h4 style={serviceTitle}>Platforms</h4>
              <p style={serviceDescription}>
                We support all social media platforms
              </p>
            </Col>
            <Col md={4}>
              <img src={gear} alt="gear icon" />
              <h4 style={serviceTitle}>Functionality</h4>
              <p style={serviceDescription}>We have many awesome features</p>
            </Col>
            <Col md={4}>
              <img src={heart} alt="heart icon" style={heartIcon} />
              <h4 style={serviceTitle}>Passion</h4>
              <p style={serviceDescription}>
                Made with love by passionate marketers
              </p>
            </Col>
          </Row>
        </Grid>
      </section>
      <section style={pricingDiv}>
        <h1 style={pricingHeader}>Pricing:</h1>
        <h3>We offer the most competitive pricing</h3>
      </section>
      <section style={signUpSection}>
        <Grid style={signUpDiv}>
          <Row>
            <Col style={signUpSectionCol}>
              <h2 style={signUpHeader}>Sign up for a FREE trial</h2>
              <p style={signUpText}>
                The Promotions Manager is launching soon. Leave your email at
                the bottom to get a FREE 60 days trial when we launch
              </p>
              <Form inline>
                <FormControl type="text" placeholder="Enter your email" />
                <div style={btnCtaStyle}>
                  <Button bsStyle="success" style={signUpButtonStyle}>
                    SIGN ME UP
                  </Button>
                </div>
              </Form>
            </Col>
          </Row>
        </Grid>
      </section>
    </div>
  </>
)

function RCform({ formId, fw }) {
  const { form, isLoading, isError } = getFormData(formId);

  if (isLoading) return <Spinner />;
  if (isError) return <Error />;

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("form submitted", e);
  };

  return (
    <Card style={{ width: fw }} className={styles.showCard}>
      <Card.Title className={styles.showTitle}>{form.title}</Card.Title>
      <Card.Body>
        <Form onSubmit={handleSubmit}>
          {form.data?.attributes.formQs.map((ele, i) => (
            <Form.Group key={i} className="mb-3" controlId="formBasicEmail">
              <Form.Label>{ele.value}</Form.Label>
              {ele.type == "number" ? (
                <>
                  <Form.Control
                    key={i}
                    type={ele.type}
                    min={ele.min}
                    max={ele.max}
                    placeholder=""
                    required={ele.required}
                  />
                  <Form.Text className="text-muted">
                    * Value must be in range {ele.min} - {ele.max}
                  </Form.Text>
                </>
              ) : (
                <Form.Control
                  key={i}
                  type={ele.type}
                  placeholder=""
                  required={ele.required}
                />
              )}

              {ele.type == "number"}
            </Form.Group>
          ))}
          <Button variant="primary" o type="submit">
            Submit
          </Button>
        </Form>
      </Card.Body>
    </Card>
  );
}

render() {
    return (
      <>
        <Modal
          show={this.state.show}
          onHide={this.handleClose}
          size={"xs"}
          aria-labelledby="contained-modal-title-vcenter"
          centered
          dialogClassName="small-modal"
        >
          <Modal.Header style={{ background: "#AB84C8" }}>
            <h5
              style={{ textAlign: "center", width: "100%", fontSize: "1.5rem" }}
            >
              Sort
            </h5>
          </Modal.Header>
          <Modal.Body>
            <Form.Control
              as="select"
              className="small-selection"
              onChange={(e) => {
                this.setState({ sort: e.target.value });
              }}
            >
              <option value="name" selected>
                Name
              </option>
              <option value="rating">Rating</option>
              <option value="total_project">Total Project</option>
            </Form.Control>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
            </Button>
            <Button
              variant="primary"
              style={{ background: "#AB84C8" }}
              onClick={()=>{
                this.props.onSort(this.state.sort);
                this.handleClose();
              }}
            >
              Sort
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }

SearchBar = () => {
  const [animeName, setAnimeName] = useState("");

  const handleChange = (event) => {
    setAnimeName(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    // directing to a new page, that is routed to cards' component
    window.location = `/anime/cards/${animeName}`;
  };

  const onClick = (event) => {
    event.preventDefault();
    window.location = "/";
  };

  return (
    <div className={styles.container}>
      <Navbar className={styles.nav}>
        <span className={styles.span} onClick={onClick}>
          Anime Tracker App
        </span>
        <div className={styles.searchBar}>
          <Form inline onSubmit={handleSubmit}>
            <FormControl
              onChange={handleChange}
              type="text"
              placeholder="Anime"
              className=" mr-sm-2"
            />
            <Button className={styles.button} type="submit">
              Enter
            </Button>
          </Form>
        </div>
      </Navbar>
    </div>
  );
}

SelectModal = ({ visible, title, label, options, value, multiple, inline, onChange, onHide, ...props }) => {
  const hide = () => onHide(selected)

  // if single-select, return selection as singleton array for consistency
  const singleSelect = e => {
    const options = Array.from(e.target.selectedOptions).map(o => +o.value)
    setSelected(options)
    onChange(options)
  }

  // if multi-select, prevent clearing existing selections
  // allows multiple selections without pressing ctrl
  const multiSelect = !multiple ? undefined : e => {
    e.preventDefault()
    e.stopPropagation()
    const newSelect = +e.target.value
    const index = selected.indexOf(newSelect)
    const newSelection = e.target.selected ? [...selected.slice(0, index), ...selected.slice(index+1)] : [...selected, newSelect]
    setSelected(newSelection)
    onChange(newSelection)
    e.target.selected = !e.target.selected
  }

  const [selected, setSelected] = useState([])

  return <Modal size="md" centered show={visible} onHide={hide} {...props}>
    <Modal.Header closeButton>
      <Modal.Title>{title}</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <Form inline={inline}>
        <Form.Label>{label}</Form.Label>
        <Form.Control as="select" custom multiple={multiple} defaultValue={value} onChange={singleSelect}>
          {options.map(([ key, value ]) => <option key={key} value={key} onPointerDown={multiSelect}>
            {value}
          </option>)}
        </Form.Control>
      </Form>
    </Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={hide}>
        Close
      </Button>
    </Modal.Footer>
  </Modal>
}

ContactPage = () => (
  <Layout>
    <SEO title="お問い合わせ" />
            <Row>
            <Col className="space"></Col>
            </Row>
            <Row>
            <Col className="title-obi">
                <h1 className="h1-font">お問い合わせ</h1>
            </Col>
            </Row>
            <Row>
            <Col className="space"></Col>
            </Row>
            <Container className="" style={{width:`80%`}}>
            <Row>
                <Col>
                    <p>（※このサンプルサイトで送信機能は使用できません）</p>
                    <Form>
                    <Form.Group controlId="formBasicText">
                        <Form.Control type="text" as="input" placeholder="お名前" name="name" required />
                    </Form.Group>
                    <Form.Group controlId="formBasicEmail">
                        <Form.Control type="email" as="input" placeholder="メールアドレス" name="email" required />
                    </Form.Group>
                    <Form.Group controlId="formTextarea">
                        <Form.Control as="textarea" placeholder="メッセージ" rows="3" name="message" required />
                    </Form.Group>
                    <Form.Group>
                        <Form.File id="FormControlFile" name="file" lang="ja" label="ファイル添付" />
                    </Form.Group>
                        <Button variant="light" type="submit">送信</Button>
                    </Form>
                </Col>
            </Row>
            </Container>
            <Row>
            <Col className="space"></Col>
            </Row>
  </Layout>
)

ContactPage = () => (
  <Layout>
    <SEO title="お問い合わせ" />
            <Row>
            <Col className="space"></Col>
            </Row>
            <Row>
            <Col className="title-obi">
                <h1 className="h1-font">お問い合わせ</h1>
            </Col>
            </Row>
            <Row>
            <Col className="space"></Col>
            </Row>
            <Container className="" style={{width:`80%`}}>
            <Row>
                <Col>
                    <p>（※このサンプルサイトで送信機能は使用できません）</p>
                    <Form>
                    <Form.Group controlId="formBasicText">
                        <Form.Control type="text" as="input" placeholder="お名前" name="name" required />
                    </Form.Group>
                    <Form.Group controlId="formBasicEmail">
                        <Form.Control type="email" as="input" placeholder="メールアドレス" name="email" required />
                    </Form.Group>
                    <Form.Group controlId="formTextarea">
                        <Form.Control as="textarea" placeholder="メッセージ" rows="3" name="message" required />
                    </Form.Group>
                    <Form.Group>
                        <Form.File id="FormControlFile" name="file" lang="ja" label="ファイル添付" />
                    </Form.Group>
                        <Button variant="light" type="submit">送信</Button>
                    </Form>
                </Col>
            </Row>
            </Container>
            <Row>
            <Col className="space"></Col>
            </Row>
  </Layout>
)

render() {
    return (
      <Modal
        show={this.props.showModal}
        onHide={this.props.handleClose}
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title>
            <Container>
              <Row>
                <Col xs={12}>
                  <h1 className="modal-heading">
                    New Category
                  </h1>
                </Col>
              </Row>
            </Container>
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Container>
            <Row>
              <Col xs={12}>
                <div className="modal-form">
                  {this.state.formSubmissionError && (
                    <Alert variant="danger">
                      {this.state.formSubmissionError}
                    </Alert>
                  )}
                  <Form onSubmit={this.onFormSubmit}>
                    <Form.Group controlId="addCategoryFormBasicText">
                      <Form.Label>Name</Form.Label>
                      <Form.Control
                        onChange={this.onFieldChange}
                        type="text"
                        name={fieldNames.NAME}
                        value={this.state.name}
                      />
                      {this.state.nameError && (
                        <h6 className="form-field-error">
                          {this.state.nameError}
                        </h6>
                      )}
                    </Form.Group>
                    <Form.Group controlId="addCategoryFormBasicTextArea">
                      <Form.Label>Description</Form.Label>
                      <Form.Control
                        onChange={this.onFieldChange}
                        as="textarea"
                        rows={3}
                        name={fieldNames.DESCRIPTION}
                        value={this.state.description}
                      />
                      {this.state.descriptionError && (
                        <h6 className="form-field-error">
                          {this.state.descriptionError}
                        </h6>
                      )}
                    </Form.Group>
                    <Row className="center-row">
                      <Button
                        variant=""
                        className="primary-button organization-page-create-button"
                        type="submit"
                        disabled={this.state.isFormInvalid}
                      >
                        Create
                      </Button>
                    </Row>
                  </Form>
                </div>
              </Col>
            </Row>
          </Container>
        </Modal.Body>
      </Modal>
    );
  }

function AddStake(props) {
  const onSubmit = (stakeValues) => {
    if (props.onAddStake) {
      props.onAddStake(stakeValues);
    }
  };
  return <Formik onSubmit={onSubmit} initialValues={{ infiniteApproval: false }} validationSchema={validationSchema}>
    {({
      handleSubmit,
      handleChange,
      handleBlur,
      values,
      touched,
      isValid,
      errors,
      dirty
    }) => (
      <Form onSubmit={handleSubmit}>
        <Form.Group as={Row}>
          <Form.Label column sm={4} htmlFor="stake-value">
            Stake value
          </Form.Label>
          <Col sm={8}>
            <Form.Control id="stake-value" type="number" name="stakeValue" onChange={handleChange} value={values.value} />
            <div className="feedback-placeholder">
              <Form.Control.Feedback type="invalid" style={{ display: errors.stakeValue && dirty ? 'inline' : 'none' }}>{errors.stakeValue}</Form.Control.Feedback>
            </div>
          </Col>
        </Form.Group>
        <Form.Group as={Row}>
          <Form.Label column sm={4} htmlFor="stakeDuration">
            Stake duration
          </Form.Label>
          <Col sm={8}>
            <Form.Control id="stakeDuration" type="number" name="stakeDuration" onChange={handleChange} value={values.duration} />
            <div className="feedback-placeholder">
              <Form.Control.Feedback type="invalid" style={{ display: errors.stakeDuration && dirty ? 'inline' : 'none' }}>{errors.stakeDuration}</Form.Control.Feedback>
            </div>
          </Col>
        </Form.Group>
        <Form.Group as={Row}>
          <Col sm={{ span: 8, offset: 4 }}>
            <Form.Check label="Infinite approval" name="infiniteApproval" defaultChecked={values.infiniteApproval} onChange={handleChange} value={values.infiniteApproval} />
          </Col>
        </Form.Group>
        <div className="d-flex justify-content-center">
          <Button type="submit" disabled={!isValid}>Stake</Button>
        </div>
      </Form>
    )}
  </Formik>;
}