Fleetbase-Mirror-Repo/console/app/components/onboarding/form.hbs

<div class="flex items-center justify-center h-screen min-h-screen px-4 py-12 bg-gray-50 dark:bg-gray-900 sm:px-6 lg:px-8 overflow-y-scroll">
    <div class="w-full max-w-md h-screen flex items-center justify-center py-4">
        <div class="bg-white dark:bg-gray-800 py-5 px-4 shadow rounded-lg w-full">
            <div class="mb-4">
                <Image src={{@brand.logo_url}} @fallbackSrc="/images/fleetbase-logo-svg.svg" alt={{t "app.name"}} height="56" class="h-10 object-contain mx-auto" />
                <div class="mt-2">
                    <h2 class="text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
                        {{t "onboard.index.title"}}
                    </h2>
                </div>
            </div>

            <div class="flex px-3 py-2 mb-4 rounded-md shadow-sm bg-blue-200">
                <div>
                    <FaIcon @icon="hand-spock" @size="lg" class="text-blue-900 mr-4" />
                </div>
                <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
                    {{t "onboard.index.welcome-title" htmlSafe=true companyName=(t "app.name")}}
                    {{t "onboard.index.welcome-text"}}
                </p>
            </div>

            <form {{on "submit" (perform this.onboard)}}>
                {{#if this.error}}
                    <InfoBlock @icon="exclamation-triangle" @text={{this.error}} class="mb-6 px-3 py-2 bg-red-300 text-red-900" @textClass="text-red-900" />
                {{/if}}
                <InputGroup @name={{t "onboard.index.full-name"}} @value={{this.name}} @helpText={{t "onboard.index.full-name-help-text"}} @inputClass="input-lg" />
                <InputGroup @name={{t "onboard.index.your-email"}} @type="email" @value={{this.email}} @helpText={{t "onboard.index.your-email-help-text"}} @inputClass="input-lg" />
                <InputGroup @name={{t "onboard.index.phone"}} @helpText={{t "onboard.index.phone-help-text"}}>
                    <PhoneInput @onInput={{fn (mut this.phone)}} class="form-input input-lg w-full" />
                </InputGroup>
                <InputGroup @name={{t "onboard.index.organization-name"}} @value={{this.organization_name}} @helpText={{t "onboard.index.organization-help-text"}} @inputClass="input-lg" />
                <InputGroup @name={{t "onboard.index.password"}} @value={{this.password}} @type="password" @helpText={{t "onboard.index.password-help-text"}} @inputClass="input-lg" />
                <InputGroup
                    @name={{t "onboard.index.confirm-password"}}
                    @value={{this.password_confirmation}}
                    @type="password"
                    @helpText={{t "onboard.index.confirm-password-help-text"}}
                    @inputClass="input-lg"
                />

                <div class="flex items-center justify-end mt-5">
                    <Button
                        @buttonType="submit"
                        @icon="check"
                        @iconPrefix="fas"
                        @type="primary"
                        @size="lg"
                        @text={{t "onboard.index.continue-button-text"}}
                        @isLoading={{this.onboard.isRunning}}
                        @disabled={{not this.filled}}
                    />
                </div>
            </form>

            <RegistryYield @registry="onboard" as |YieldedComponent ctx|>
                <YieldedComponent @context={{ctx}} />
            </RegistryYield>
        </div>
    </div>
</div>