67P/hyperchannel

<form {{on "submit" this.submitForm}}>
  <div class="grid grid-cols-1 gap-2 sm:grid-cols-10 sm:gap-4 sm:items-center mb-8">
    <label class="sm:col-span-3">User address (JID)</label>
    <div class="mb-4 sm:mb-0 sm:col-span-7 flex justify-center items-center">
      <Input @type="text" @value={{this.username}} name="username"
             aria-label="Username" placeholder="Username" required
             class="grow min-w-0" autocomplete="username" {{autofocus}} />
      <span class="flex-0 mx-1 text-xl">@</span>
      <Input @type="text" @value={{this.hostname}} name="hostname"
             aria-label="hostname" placeholder="Hostname" required
             class="grow min-w-0" />
    </div>
    <label for="password" class="sm:col-span-3">Password</label>
    <Input id="password" @type="password" @value={{this.password}} name="password"
           required class="sm:col-span-7" autocomplete="current-password" />
  </div>

  {{#if this.connectError}}
    <FlashMessageError @title={{this.connectError.title}}
                       @content={{this.connectError.content}}
                       class="mt-4" />
  {{/if}}

  <div class="w-full mt-10 sm:flex sm:justify-center">
    <ButtonSubmit @classNames="w-full sm:w-1/2 btn-md btn-blue"
                  @loading={{this.connecting}}>
      Continue
    </ButtonSubmit>
  </div>
</form>