diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/LoginForm.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/LoginForm.tsx | 232 |
1 files changed, 110 insertions, 122 deletions
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx index f579678f2..0fbbef7c3 100644 --- a/packages/demobank-ui/src/pages/LoginForm.tsx +++ b/packages/demobank-ui/src/pages/LoginForm.tsx @@ -128,132 +128,120 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { const isSessionExpired = !onRegister return ( - <Fragment> - <h1 class="nav"></h1> - {/* {error && ( - <ErrorBannerFloat error={error} onClear={() => saveError(undefined)} /> - )} */} - - <div class="flex min-h-full flex-col justify-center"> - {/* <div class="sm:mx-auto sm:w-full sm:max-w-sm"> - <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{i18n.str`Welcome to ${bankUiSettings.bankName}!`}</h2> - </div> */} - - <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm"> - <form class="space-y-6" noValidate - onSubmit={(e) => { - e.preventDefault(); - }} - autoCapitalize="none" - autoCorrect="off" - > - <div> - <label for="username" class="block text-sm font-medium leading-6 text-gray-900"> - <i18n.Translate>Username</i18n.Translate> - </label> - <div class="mt-2"> - <input - ref={ref} - autoFocus - type="text" - name="username" - id="username" - class="block w-full disabled:bg-gray-200 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - value={username ?? ""} - disabled={isSessionExpired} - enterkeyhint="next" - placeholder="identification" - autocomplete="username" - required - onInput={(e): void => { - setUsername(e.currentTarget.value); - }} - /> - <ShowInputErrorLabel - message={errors?.username} - isDirty={username !== undefined} - /> - </div> + <div class="flex min-h-full flex-col justify-center"> + + <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm"> + <form class="space-y-6" noValidate + onSubmit={(e) => { + e.preventDefault(); + }} + autoCapitalize="none" + autoCorrect="off" + > + <div> + <label for="username" class="block text-sm font-medium leading-6 text-gray-900"> + <i18n.Translate>Username</i18n.Translate> + </label> + <div class="mt-2"> + <input + ref={ref} + autoFocus + type="text" + name="username" + id="username" + class="block w-full disabled:bg-gray-200 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + value={username ?? ""} + disabled={isSessionExpired} + enterkeyhint="next" + placeholder="identification" + autocomplete="username" + required + onInput={(e): void => { + setUsername(e.currentTarget.value); + }} + /> + <ShowInputErrorLabel + message={errors?.username} + isDirty={username !== undefined} + /> </div> + </div> - <div> - <div class="flex items-center justify-between"> - <label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label> - </div> - <div class="mt-2"> - <input - type="password" - name="password" - id="password" - autocomplete="current-password" - class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - enterkeyhint="send" - value={password ?? ""} - placeholder="Password" - required - onInput={(e): void => { - setPassword(e.currentTarget.value); - }} - /> - <ShowInputErrorLabel - message={errors?.password} - isDirty={password !== undefined} - /> - </div> + <div> + <div class="flex items-center justify-between"> + <label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label> </div> - - {isSessionExpired ? <div class="flex justify-between"> - <button type="submit" - class="rounded-md bg-white-600 px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600" - onClick={(e) => { - e.preventDefault() - doLogin() - }} - > - <i18n.Translate>Cancel</i18n.Translate> - </button> - - <button type="submit" - class="rounded-md bg-indigo-600 disabled:bg-gray-300 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" - disabled={!!errors} - onClick={(e) => { - e.preventDefault() - doLogin() - }} - > - <i18n.Translate>Renew session</i18n.Translate> - </button> - </div> : <div> - <button type="submit" - class="flex w-full justify-center rounded-md bg-indigo-600 disabled:bg-gray-300 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" - disabled={!!errors} - onClick={(e) => { - e.preventDefault() - doLogin() + <div class="mt-2"> + <input + type="password" + name="password" + id="password" + autocomplete="current-password" + class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + enterkeyhint="send" + value={password ?? ""} + placeholder="Password" + required + onInput={(e): void => { + setPassword(e.currentTarget.value); }} - > - <i18n.Translate>Log in</i18n.Translate> - </button> - </div>} - </form> - - {bankUiSettings.allowRegistrations && onRegister && - <p class="mt-10 text-center text-sm text-gray-500 border-t"> - <button type="submit" - class="flex mt-4 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" - onClick={(e) => { - e.preventDefault() - onRegister() - }} - > - <i18n.Translate>Register</i18n.Translate> - </button> - </p> - } - </div> + /> + <ShowInputErrorLabel + message={errors?.password} + isDirty={password !== undefined} + /> + </div> + </div> + + {isSessionExpired ? <div class="flex justify-between"> + <button type="submit" + class="rounded-md bg-white-600 px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600" + onClick={(e) => { + e.preventDefault() + doLogin() + }} + > + <i18n.Translate>Cancel</i18n.Translate> + </button> + + <button type="submit" + class="rounded-md bg-indigo-600 disabled:bg-gray-300 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + disabled={!!errors} + onClick={(e) => { + e.preventDefault() + doLogin() + }} + > + <i18n.Translate>Renew session</i18n.Translate> + </button> + </div> : <div> + <button type="submit" + class="flex w-full justify-center rounded-md bg-indigo-600 disabled:bg-gray-300 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + disabled={!!errors} + onClick={(e) => { + e.preventDefault() + doLogin() + }} + > + <i18n.Translate>Log in</i18n.Translate> + </button> + </div>} + </form> + + {bankUiSettings.allowRegistrations && onRegister && + <p class="mt-10 text-center text-sm text-gray-500 border-t"> + <button type="submit" + class="flex mt-4 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" + onClick={(e) => { + e.preventDefault() + onRegister() + }} + > + <i18n.Translate>Register</i18n.Translate> + </button> + </p> + } </div> - - - </Fragment> + </div> ); } |