import React, { useState } from "react";

export const Form = () => {
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");

  const onNameChange = e => {
    setName(e.target.value);
  };

  const onPasswordChange = e => {
    setPassword(e.target.value);
  };

  return (
    <form>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={onNameChange}
      />
      <input
        type="text"
        placeholder="Password"
        value={password}
        onChange={onPasswordChange}
      />
      <button type="submit" onSubmit={handleSubmit}>
        Submit
      </button>
    </form>
  );
};

[@react.component]
let make = () => {
  let (name, setName) = React.useState(() => "");
  let (password, setPassword) = React.useState(() => "");

  let onNameChange = (e: ReactEvent.Form.t): unit => {
    let value = e->ReactEvent.Form.target##value;
    setName(value);
  };

  let onPasswordChange = (e: ReactEvent.Form.t): unit => {
    let value = e->ReactEvent.Form.target##value;
    setPassword(value);
  };

  <form>
    <input
      type_="text"
      name="name"
      value=name
      onChange=onNameChange
      placeholder="Name"
    />
    <input
      type_="password"
      name="name"
      value=password
      onChange=onPasswordChange
      placeholder="Password"
    />
    <button type_="submit"> {React.string("Submit")} </button>
  </form>;
};

module Form where

import Prelude
import Data.Maybe (fromMaybe)
import Effect (Effect)
import React.Basic.DOM as R
import React.Basic.DOM.Events (targetValue)
import React.Basic.Events (handler)
import React.Basic.Hooks (ReactComponent, component, useState, (/\))
import React.Basic.Hooks as React

form :: Effect (ReactComponent {})
form = do
  component "form" \_ -> React.do
    { name } /\ setName <- useState { name: "" }
    { password } /\ setPassword <- useState { password: "" }
    pure
      $ R.form_
          [ R.input
              { onChange:
                  handler targetValue \value ->
                    setName \_ -> { name: fromMaybe "" value }
              , value: name
              , placeholder: "Name"
              }
          , R.input
              { onChange:
                  handler targetValue \value ->
                    setPassword \_ -> { password: fromMaybe "" value }
              , value: password
              , placeholder: "Password"
              }
          , R.button
              { type: "submit"
              , children: [ R.text "Submit" ]
              }
          ]

import * as React from 'react';

export const Form: React.FC = () => {
  const [name, setName] = React.useState('');
  const [password, setPassword] = React.useState('');

  const onNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  const onPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  return (
    <form>
      <input
        type="text"
        value={name}
        onChange={onNameChange}
        placeholder="Name"
      />
      <input
        type="password"
        value={password}
        onChange={onPasswordChange}
        placeholder="Password"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)

main =
  Browser.sandbox { init = init, update = update, view = view }

-- MODEL

type alias Model =
  { name : String
  , password : String
  }

init : Model
init =
  Model "" ""

-- UPDATE

type Msg
  = Name String
  | Password String


update : Msg -> Model -> Model
update msg model =
  case msg of
    Name name ->
      { model | name = name }

    Password password ->
      { model | password = password }

-- VIEW

view : Model -> Html Msg
view model =
  Html.form []
    [ viewInput "text" "Name" model.name Name
    , viewInput "password" "Password" model.password Password
    , button [] [ text "Submit" ]
    ]

viewInput : String -> String -> String -> (String -> msg) -> Html msg
viewInput t p v toMsg =
  input [ type_ t, placeholder p, value v, onInput toMsg ] []