Fleetbase-Mirror-Repo/console/app/templates/console/account/index.hbs

<Layout::Section::Header @title={{t "common.profile"}} />

<Layout::Section::Body class="overflow-y-scroll h-full">
    <div class="container mx-auto h-screen">
        <div class="max-w-3xl my-10 mx-auto">
            <ContentPanel @title={{t "common.your-profile"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <form class="flex flex-col md:flex-row" {{on "submit" (perform this.saveProfile)}}>
                    <div class="w-32 flex flex-col justify-center mb-6 mr-6">
                        <Image src={{this.user.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.user.name}} class="w-32 h-32 rounded-md" />
                        <FileUpload @name={{t "console.account.index.photos"}} @accept="image/*" @onFileAdded={{this.uploadNewPhoto}} @labelClass="flex flex-row items-center justify-center" as |queue|>
                            <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default" disabled={{queue.files.length}}>
                                {{#if queue.files.length}}
                                    <div class="mr-1.5">
                                        <Spinner />
                                    </div>
                                    <span>
                                        {{t "common.uploading"}}                       
                                    </span>
                                {{else}}
                                    <FaIcon @icon="image" class="mr-1.5" />
                                    <span>                                        
                                        {{t "console.account.index.upload-new"}}
                                    </span>
                                {{/if}}
                            </a>
                        </FileUpload>
                    </div>
                    <div class="flex-1">
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
                            <InputGroup @name={{t "common.name"}} @value={{this.user.name}} />
                            <InputGroup @name={{t "common.email"}} @type="email" @value={{this.user.email}} />
                            <InputGroup @name={{t "common.phone"}} @helpText={{t "console.account.index.phone"}}>
                                <PhoneInput @value={{this.user.phone}} @onInput={{fn (mut this.user.phone)}} class="form-input input-lg w-full" />
                            </InputGroup>
                            <InputGroup @name={{t "common.date-of-birth"}} @type="date" @value={{this.user.date_of_birth}} />
                            <InputGroup @name={{t "common.timezone"}} @helpText={{t "console.account.index.timezone"}}>
                                <Select @value={{this.user.timezone}} @options={{this.timezones}} @onSelect={{fn (mut this.user.timezone)}} @placeholder={{t "console.account.index.timezone"}} />
                            </InputGroup>
                        </div>
                        <div class="mt-3 flex items-center justify-end">
                            <Button @buttonType="submit" @type="primary" @size="lg" @icon="save" @text={{t "common.save-button-text"}} @onClick={{perform this.saveProfile}} @isLoading={{not this.saveProfile.isIdle}} />
                        </div>
                    </div>
                </form>
            </ContentPanel>
        </div>
    </div>
    <Spacer @height="500px" />
</Layout::Section::Body>