Fleetbase-Mirror-Repo/console/app/templates/auth/forgot-password.hbs

<div class="bg-white dark:bg-gray-800 py-8 px-4 shadow rounded-lg">
    <div class="mb-4">
        <Image src={{@model.logo_url}} @fallbackSrc="/images/fleetbase-logo-svg.svg" alt={{t "app.name"}} width="160" height="56" class="w-40 h-14 mx-auto" />
        <h2 class="text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
            {{if this.isSent (t "auth.forgot-password.is-sent.title") (t "auth.forgot-password.not-sent.title")}}
        </h2>
    </div>

    {{#if this.isSent}}
        <div class="flex px-3 py-2 mb-4 rounded-md shadow-sm bg-green-200">
            <div>
                <FaIcon @icon="check-circle" @size="lg" class="text-green-900 mr-4" />
            </div>
            <p class="flex-1 text-sm text-green-900 dark:text-green-900">
                {{t "auth.forgot-password.is-sent.message" htmlSafe=true}}
            </p>
        </div>
        <div class="flex flex-row mt-4">
            <Button @icon="check" @type="primary" @text={{t "common.continue"}} @onClick={{transition-to "auth.login"}} />
        </div>
    {{else}}
        <div class="flex px-3 py-2 mb-6 rounded-md shadow-sm bg-blue-200">
            <div>
                <FaIcon @icon="info-circle" @size="lg" class="text-blue-900 mr-4" />
            </div>
            <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
                {{t "auth.forgot-password.not-sent.message" htmlSafe=true appName=(t "app.name")}}
            </p>
        </div>

        <form class="space-y-6" {{on "submit" (perform this.sendSecureLink)}}>
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-50">
                    {{t "auth.forgot-password.form.email-label"}}
                </label>
                <div class="mt-2">
                    <Input
                        @value={{this.email}}
                        @type="email"
                        id="email"
                        name="email"
                        required
                        class="form-input form-input-lg w-full"
                        placeholder={{t "auth.forgot-password.form.email-label"}}
                    />
                </div>
            </div>

            <div class="flex flex-row space-x-2">
                <Button
                    @icon="magic"
                    @type="primary"
                    @buttonType="submit"
                    @text={{t "auth.forgot-password.form.submit-button"}}
                    @onClick={{perform this.sendSecureLink}}
                    @isLoading={{this.sendSecureLink.isRunning}}
                />
                <Button @buttonType="button" @text={{t "auth.forgot-password.form.nevermind-button"}} @onClick={{fn (transition-to "auth.login")}} @disabled={{this.isLoading}} />
            </div>
        </form>
    {{/if}}
</div>