mirror of
https://github.com/fleetbase/fleetbase.git
synced 2026-01-06 06:15:51 +00:00
82 lines
4.2 KiB
Handlebars
82 lines
4.2 KiB
Handlebars
<div>
|
|
<div class="mx-auto w-12 h-12">
|
|
<LogoIcon @url={{@brand.icon_url}} @size="12" class="mx-auto" />
|
|
</div>
|
|
<h2 class="mt-6 mb-3 text-3xl font-extrabold leading-9 text-center text-gray-900 dark:text-gray-100">
|
|
{{t "auth.login.title"}}
|
|
</h2>
|
|
</div>
|
|
|
|
{{#if (gte this.failedAttempts 3)}}
|
|
<div class="flex flex-col flex-grow-0 flex-shrink-0 text-sm bg-yellow-800 border border-yellow-600 px-2 py-2 rounded-md text-yellow-100 my-4 transition-all">
|
|
<div class="flex flex-row items-start mb-2">
|
|
<div class="w-8 flex-grow-0 flex-shrink-0">
|
|
<FaIcon @icon="triangle-exclamation" @size="xl" class="pt-1" />
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="flex-1 text-sm text-yellow-100">
|
|
{{t "auth.login.failed-attempt.message" htmlSafe=true}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button @text={{t "auth.login.failed-attempt.button-text"}} @type="link" class="text-yellow-100" @wrapperClass="px-4 py-2 bg-gray-900 bg-opacity-25 hover:opacity-50" @onClick={{this.forgotPassword}} />
|
|
</div>
|
|
{{/if}}
|
|
|
|
<form class="mt-8" {{on "submit" this.login}}>
|
|
<input type="hidden" name="remember" value="true" />
|
|
<div class="rounded-md shadow-sm">
|
|
<div>
|
|
<Input
|
|
@value={{this.identity}}
|
|
aria-label={{t "auth.login.form.email-label"}}
|
|
name="email"
|
|
@type="email"
|
|
autocomplete="username"
|
|
required
|
|
class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-none appearance-none rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5 dark:text-white dark:bg-gray-700 dark:border-gray-900"
|
|
placeholder={{t "auth.login.form.email-label"}}
|
|
disabled={{this.isLoading}}
|
|
/>
|
|
</div>
|
|
<div class="-mt-px">
|
|
<Input
|
|
@value={{this.password}}
|
|
aria-label={{t "auth.login.form.password-label"}}
|
|
name="password"
|
|
@type="password"
|
|
autocomplete="current-password"
|
|
required
|
|
class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-none appearance-none rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5 dark:text-white dark:bg-gray-700 dark:border-gray-900"
|
|
placeholder={{t "auth.login.form.password-label"}}
|
|
disabled={{this.isLoading}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between mt-6">
|
|
<div class="flex items-center">
|
|
<Input id="rememberMe" @type="checkbox" @checked={{this.rememberMe}} disabled={{this.isLoading}} class="w-4 h-4 transition duration-150 ease-in-out form-checkbox text-sky-500" />
|
|
<label for="rememberMe" class="block ml-2 text-sm leading-5 text-gray-900 dark:text-gray-100">
|
|
{{t "auth.login.form.remember-me-label"}}
|
|
</label>
|
|
</div>
|
|
|
|
<div class="text-sm leading-5">
|
|
<a
|
|
href="javascript:;"
|
|
{{on "click" this.forgotPassword}}
|
|
disabled={{this.isLoading}}
|
|
class="font-medium transition duration-150 ease-in-out text-sky-600 hover:text-sky-500 focus:outline-none focus:underline"
|
|
>
|
|
{{t "auth.login.form.forgot-password-label"}}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 space-y-4">
|
|
<Button @buttonType="submit" @type="primary" @text={{t "auth.login.form.sign-in-button"}} @icon="lock" @wrapperClass="btn-block" @isLoading={{this.isLoading}} @onClick={{this.login}} />
|
|
<Button @text={{t "auth.login.form.create-account-button"}} @wrapperClass="btn-block" @disabled={{this.isLoading}} @onClick={{fn (transition-to "onboard")}} />
|
|
<Button @text="Customer Login" @type="link" @wrapperClass="btn-block py-1 border dark:border-gray-700 border-gray-200 hover:opacity-50" @disabled={{this.isLoading}} @onClick={{fn (transition-to "auth.portal-login")}} />
|
|
</div>
|
|
</form> |