fullSimpleExample.fs

module App

open Elmish
open Elmish.React
open Feliz

type State =
    { Username: string
      Password: string
      LoggedIn: bool }

type Msg =
    | UpdateUsername of string
    | UpdatePassword of string
    | Login
    | ResetForm

let init() =
    { Username = ""
      Password = ""
      LoggedIn = false }

let update (msg: Msg) (state: State): State =
    match msg with
    | UpdateUsername username -> { state with Username = username }
    | UpdatePassword password -> { state with Password = password }
    | Login -> { state with LoggedIn = true }
    | ResetForm -> { state with LoggedIn = false; Username = ""; Password = "" }

let render (state: State) (dispatch: Msg -> unit) =
  Html.div [

    Html.div [
      Html.input [
        prop.valueOrDefault state.Username
        prop.onChange (UpdateUsername >> dispatch)
      ]
    ]

    Html.div [
      Html.input [
        prop.valueOrDefault state.Password
        prop.onChange (UpdatePassword >> dispatch)
        prop.type' "password"
      ]
    ]

    Html.div [
      Html.button [
        prop.onClick (fun _ -> dispatch Login)
        prop.text "Login"
      ]
    ]

    Html.div [
      Html.button [
        prop.onClick (fun _ -> dispatch ResetForm)
        prop.text "Reset"
      ]
    ]
  ]

Program.mkSimple init update render
|> Program.withReactSynchronous "elmish-app"
|> Program.run