diff options
author | Sebastian <sebasjm@gmail.com> | 2023-09-25 11:58:17 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-09-25 14:50:45 -0300 |
commit | 4041a76a58503572c6fe8edc87658afc946a11e0 (patch) | |
tree | 2b70e70ae060eef9cf64a8799d8ffc693d4b218c /packages/demobank-ui/src/pages/LoginForm.tsx | |
parent | 0b2c03dc5e1060cd229aeafb84263f171b5a9788 (diff) | |
download | wallet-core-4041a76a58503572c6fe8edc87658afc946a11e0.tar.xz |
more ui: pagination
Diffstat (limited to 'packages/demobank-ui/src/pages/LoginForm.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/LoginForm.tsx | 41 |
1 files changed, 35 insertions, 6 deletions
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx index f1ba439ac..f579678f2 100644 --- a/packages/demobank-ui/src/pages/LoginForm.tsx +++ b/packages/demobank-ui/src/pages/LoginForm.tsx @@ -24,6 +24,7 @@ import { useCredentialsChecker } from "../hooks/useCredentialsChecker.js"; import { bankUiSettings } from "../settings.js"; import { undefinedIfEmpty } from "../utils.js"; + /** * Collect and submit login data. */ @@ -35,7 +36,6 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { const { i18n } = useTranslationContext(); const { requestNewLoginToken, refreshLoginToken } = useCredentialsChecker(); - // const testLogin = useCredentialsCheckerOld(); const ref = useRef<HTMLInputElement>(null); useEffect(function focusInput() { ref.current?.focus(); @@ -120,6 +120,13 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { setBusy(undefined) } + /** + * Register form may be shown in the initialization step. + * If this is an error when usgin the app the registration + * callback is not set + */ + const isSessionExpired = !onRegister + return ( <Fragment> <h1 class="nav"></h1> @@ -128,9 +135,9 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { )} */} <div class="flex min-h-full flex-col justify-center"> - <div class="sm:mx-auto sm:w-full sm:max-w-sm"> + {/* <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> */} <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm"> <form class="space-y-6" noValidate @@ -151,8 +158,9 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { type="text" name="username" id="username" - 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" + 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" @@ -194,7 +202,28 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { </div> </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} @@ -205,7 +234,7 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { > <i18n.Translate>Log in</i18n.Translate> </button> - </div> + </div>} </form> {bankUiSettings.allowRegistrations && onRegister && |