- Made the LogApiRequests middleware more robust

- Fixed controller validation handling
- Added microsoft365/graph mail driver
- Improved password requirements (including breached password check)
- Patched creating duplicate users by email in IAM
- Patch env mapper
- Vehicle/driver tracking API doesnt fire resource lifecycle events or log requests - only tracking events
- Patched `<ModelCoordinatesInput />` component
- Security patch on Storefront customers API
- Styling updates on Storefront

console/app/components/configure/mail.hbs

@@ -13,6 +13,14 @@
         <InputGroup @name="SMTP Timeout" @value={{this.smtpTimeout}} disabled={{this.loadConfigValues.isRunning}} />
         <InputGroup @name="SMTP Auth Mode" @value={{this.smtpAuth_mode}} disabled={{this.loadConfigValues.isRunning}} />
     {{/if}}
+    {{#if (eq this.mailer "microsoft-graph")}}
+        <InputGroup @name="Client ID" @value={{this.microsoftGraphClient_id}} disabled={{this.loadConfigValues.isRunning}} />
+        <InputGroup @name="Client Secret" @value={{this.microsoftGraphClient_secret}} disabled={{this.loadConfigValues.isRunning}} />
+        <InputGroup @name="Tenant ID" @value={{this.microsoftGraphTenant_id}} disabled={{this.loadConfigValues.isRunning}} />
+        <InputGroup>
+            <Toggle @isToggled={{this.microsoftGraphSave_to_sent_items}} @onToggle={{fn (mut this.microsoftGraphSave_to_sent_items)}} @label="Save to sent items"  />
+        </InputGroup>
+    {{/if}}
     {{#if (eq this.mailer "mailgun")}}
         <InputGroup @name="Mailgun Domain" @value={{this.mailgunDomain}} disabled={{this.loadConfigValues.isRunning}} />
         <InputGroup @name="Mailgun Endpoint" @value={{this.mailgunEndpoint}} disabled={{this.loadConfigValues.isRunning}} />

console/app/components/configure/mail.js

@@ -26,6 +26,10 @@ export default class ConfigureMailComponent extends Component {
     @tracked postmarkToken = null;
     @tracked sendgridApi_key = null;
     @tracked resendKey = null;
+    @tracked microsoftGraphClient_id = null;
+    @tracked microsoftGraphClient_secret = null;
+    @tracked microsoftGraphTenant_id = null;
+    @tracked microsoftGraphSave_to_sent_items = false;
 
     /**
      * Creates an instance of ConfigureFilesystemComponent.
@@ -64,6 +68,19 @@ export default class ConfigureMailComponent extends Component {
         };
     }
 
+    @action serializeMicrosoftGraphConfig() {
+        return {
+            client_id: this.microsoftGraphClient_id,
+            client_secret: this.microsoftGraphClient_secret,
+            tenant_id: this.microsoftGraphTenant_id,
+            save_to_sent_items: this.microsoftGraphSave_to_sent_items,
+            from: {
+                address: this.fromAddress,
+                name: this.fromName,
+            },
+        };
+    }
+
     @action serializeMailgunConfig() {
         return {
             domain: this.mailgunDomain,
@@ -112,6 +129,7 @@ export default class ConfigureMailComponent extends Component {
                 postmark: this.serializePostmarkConfig(),
                 sendgrid: this.serializeSendgridConfig(),
                 resend: this.serializeResendConfig(),
+                microsoftGraph: this.serializeMicrosoftGraphConfig(),
             });
         } catch (error) {
             this.notifications.serverError(error);
@@ -131,6 +149,7 @@ export default class ConfigureMailComponent extends Component {
                 postmark: this.serializePostmarkConfig(),
                 sendgrid: this.serializeSendgridConfig(),
                 resend: this.serializeResendConfig(),
+                microsoftGraph: this.serializeMicrosoftGraphConfig(),
             });
             this.notifications.success('Mail configuration saved.');
         } catch (error) {

console/app/components/onboarding/form.hbs

@@ -0,0 +1,42 @@
+<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>

console/app/components/onboarding/form.js

@@ -0,0 +1,77 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action, getProperties } from '@ember/object';
+import { isBlank } from '@ember/utils';
+import { task } from 'ember-concurrency';
+import OnboardValidations from '../../validations/onboard';
+import lookupValidator from 'ember-changeset-validations';
+import Changeset from 'ember-changeset';
+
+export default class OnboardingFormComponent extends Component {
+    @service fetch;
+    @service session;
+    @service router;
+    @service notifications;
+    @service urlSearchParams;
+    @tracked name;
+    @tracked email;
+    @tracked phone;
+    @tracked organization_name;
+    @tracked password;
+    @tracked password_confirmation;
+    @tracked error;
+
+    get filled() {
+        // eslint-disable-next-line ember/no-get
+        const input = getProperties(this, 'name', 'email', 'phone', 'organization_name', 'password', 'password_confirmation');
+        return Object.values(input).every((val) => !isBlank(val));
+    }
+
+    @task *onboard(event) {
+        event?.preventDefault?.();
+
+        // eslint-disable-next-line ember/no-get
+        const input = getProperties(this, 'name', 'email', 'phone', 'organization_name', 'password', 'password_confirmation');
+        const changeset = new Changeset(input, lookupValidator(OnboardValidations), OnboardValidations);
+
+        yield changeset.validate();
+
+        if (changeset.get('isInvalid')) {
+            const errorMessage = changeset.errors.firstObject.validation.firstObject;
+
+            this.notifications.error(errorMessage);
+            return;
+        }
+
+        // Set user timezone
+        input.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+        try {
+            const { status, skipVerification, token, session } = yield this.fetch.post('onboard/create-account', input);
+            if (status !== 'success') {
+                this.notifications.error('Onboard failed');
+                return;
+            }
+
+            // save session
+            this.args.context.persist('session', session);
+
+            if (skipVerification === true && token) {
+                // only manually authenticate if skip verification
+                this.session.isOnboarding().manuallyAuthenticate(token);
+
+                yield this.router.transitionTo('console');
+                return this.notifications.success('Welcome to Fleetbase!');
+            } else {
+                this.args.orchestrator.next();
+                this.urlSearchParams.setParamsToCurrentUrl({
+                    step: this.args.orchestrator?.current?.id,
+                    session,
+                });
+            }
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+}

console/app/components/onboarding/verify-email.hbs

@@ -0,0 +1,78 @@
+{{page-title (t "onboard.verify-email.header-title")}}
+
+{{#if this.initialized}}
+    <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow rounded-lg w-full">
+        <div class="mb-6">
+            <LinkTo @route="console" class="flex items-center justify-center">
+                <LogoIcon @size="12" class="rounded-md" />
+            </LinkTo>
+            <h2 class="mt-6 text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
+                {{t "onboard.verify-email.title"}}
+            </h2>
+        </div>
+
+        <InfoBlock @type="info" @icon="shield-halved" @iconSize="lg">
+            {{t "onboard.verify-email.message-text" htmlSafe=true}}
+        </InfoBlock>
+
+        <form class="mt-8 space-y-6" {{on "submit" (perform this.verify)}}>
+            <InputGroup
+                @type="tel"
+                @name={{t "onboard.verify-email.verification-input-label"}}
+                @value={{this.code}}
+                @helpText={{t "onboard.verify-email.verification-code-text"}}
+                @inputClass="input-lg"
+                {{on "input" this.verification.validateInput}}
+                {{did-insert this.verification.validateInput}}
+            />
+
+            <div class="flex flex-row items-center space-x-4">
+                <Button
+                    @icon="check"
+                    @iconPrefix="fas"
+                    @buttonType="submit"
+                    @type="primary"
+                    @size="lg"
+                    @text="Verify & Continue"
+                    @isLoading={{this.verify.isRunning}}
+                    @disabled={{not this.verification.ready}}
+                />
+                <a href="#" {{on "click" this.verification.didntReceiveCode}} class="text-sm text-blue-400 hover:text-blue-300">{{t "onboard.verify-email.didnt-receive-a-code"}}</a>
+            </div>
+
+            {{#if this.verification.waiting}}
+                <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">
+                            <div class="flex-1 text-sm text-yellow-100">
+                                <div>{{t "auth.verification.didnt-receive-a-code" htmlSafe=true}}</div>
+                                <div>{{t "auth.verification.not-sent.alternative-choice" htmlSafe=true}}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <Button
+                            @text={{t "auth.verification.not-sent.resend-email"}}
+                            @buttonType="button"
+                            @type="link"
+                            class="text-yellow-100"
+                            @wrapperClass="px-4 py-2 bg-gray-900 bg-opacity-25 hover:opacity-50"
+                            @onClick={{this.verification.resendEmail}}
+                        />
+                        <Button
+                            @text={{t "auth.verification.not-sent.send-by-sms"}}
+                            @buttonType="button"
+                            @type="link"
+                            class="text-yellow-100"
+                            @wrapperClass="px-4 py-2 bg-gray-900 bg-opacity-25 hover:opacity-50"
+                            @onClick={{this.verification.resendBySms}}
+                        />
+                    </div>
+                </div>
+            {{/if}}
+        </form>
+    </div>
+{{/if}}

console/app/components/onboarding/verify-email.js

@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { later, next } from '@ember/runloop';
+import { not } from '@ember/object/computed';
+import { task } from 'ember-concurrency';
+
+export default class OnboardingVerifyEmailComponent extends Component {
+    @service('session') authSession;
+    @service('user-verification') verification;
+    @service fetch;
+    @service notifications;
+    @service router;
+    @service urlSearchParams;
+    @tracked code;
+    @tracked session;
+    @tracked initialized = false;
+
+    constructor() {
+        super(...arguments);
+        next(() => this.#initialize());
+    }
+
+    #initialize() {
+        this.code = this.urlSearchParams.get('code');
+        this.session = this.args.context.get('session') ?? this.urlSearchParams.get('session');
+        this.initialized = true;
+        this.verification.start();
+    }
+
+    @task *verify(event) {
+        event?.preventDefault?.();
+
+        try {
+            const { status, token } = yield this.fetch.post('onboard/verify-email', { session: this.session, code: this.code });
+            if (status === 'ok') {
+                this.notifications.success('Email successfully verified!');
+
+                if (token) {
+                    this.notifications.info('Welcome to Fleetbase!');
+                    this.authSession.manuallyAuthenticate(token);
+
+                    return this.router.transitionTo('console');
+                }
+
+                return this.router.transitionTo('auth.login');
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

console/app/components/onboarding/yield.hbs

@@ -0,0 +1,11 @@
+<section class="onboarding step-host">
+    {{#if this.initialized}}
+        {{#if this.currentComponent}}
+            {{component this.currentComponent context=this.context orchestrator=this.orchestrator brand=@brand}}
+        {{/if}}
+    {{else}}
+        <div class="flex items-center justify-center min-h-24">
+            <Spinner />
+        </div>
+    {{/if}}
+</section>

console/app/components/onboarding/yield.js

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { next } from '@ember/runloop';
+
+export default class OnboardingYieldComponent extends Component {
+    @service('onboarding-orchestrator') orchestrator;
+    @service('onboarding-context') context;
+    @tracked initialized = false;
+
+    get currentComponent() {
+        return this.orchestrator.current && this.orchestrator.current.component;
+    }
+
+    constructor(owner, { step, session, code }) {
+        super(...arguments);
+        next(() => this.#initialize(step, session, code));
+    }
+
+    #initialize(step, session, code) {
+        if (step) this.orchestrator.goto(step);
+        if (session) this.context.persist('session', session);
+        if (code) this.context.set('code', code);
+
+        this.initialized = true;
+    }
+}