html!{
<div class="container">
  <h1>{"//web/pwcrypt"}</h1>
  <p>{"You can use this page to create your hashed credentials for a TVL account. Enter your desired username and password below, and send us the output you receive in order for us to create your account."}</p>
  <p>
    {"Detailed documentation about the registration process is "}
    <a href="https://code.tvl.fyi/about/docs/REVIEWS.md#registration">
      {"available here"}
    </a>
    {"."}
  </p>
  <p>{"All of this happens in your browser: Your password does not leave this site!"}</p>

  <form>
    <fieldset>
      <legend>{"Credentials:"}</legend>

      <div class="form-group">
        <label for="username">{"Username:"}</label>
        <input id="username" name="username" type="text"
               oninput={link.callback(|event| input_to_message(event, Msg::SetUsername))} />
      </div>

      <div class="form-group">
        <label for="email">{"Email:"}</label>
        <input id="email" name="email" type="email"
               oninput={link.callback(|event| input_to_message(event, Msg::SetEmail))} />
      </div>

      <div class="form-group">
        <label for="password">{"Password:"}</label>
        <input id="password" name="password" type="password"
               oninput={link.callback(|event| input_to_message(event, Msg::SetPassword))} />
      </div>

      if let Some(missing) = self.whats_missing() {
        <p>{"Please fill in "}{missing}{"."}</p>
      } else {
        <div class="form-group">
          <button class="btn btn-default" type="button"
                  onclick={link.callback(|_| Msg::UpdateCredentials)}>{"Prepare credentials"}</button>
        </div>
      }
    </fieldset>
  </form>
  {self.display_credentials()}
</div>
}