Merge pull request #350 from fleetbase/dev-v0.5.25

v0.5.25 ~ Improved API, Performance and Design

api/composer.json

@@ -9,10 +9,10 @@
     "license": "AGPL-3.0-or-later",
     "require": {
         "php": "^8.0",
-        "fleetbase/core-api": "^1.5.20",
-        "fleetbase/fleetops-api": "^0.5.14",
+        "fleetbase/core-api": "^1.5.28",
+        "fleetbase/fleetops-api": "^0.5.20",
         "fleetbase/registry-bridge": "^0.0.18",
-        "fleetbase/storefront-api": "^0.3.17",
+        "fleetbase/storefront-api": "^0.3.25",
         "guzzlehttp/guzzle": "^7.0.1",
         "laravel/framework": "^10.0",
         "laravel/octane": "^2.3",

console/app/controllers/auth/verification.js

@@ -3,7 +3,6 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { later } from '@ember/runloop';
-import { not } from '@ember/object/computed';
 import { task } from 'ember-concurrency';
 
 export default class AuthVerificationController extends Controller {
@@ -15,73 +14,16 @@ export default class AuthVerificationController extends Controller {
     @service session;
     @service intl;
 
-    /**
-     * The session paramerer.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
+    /** props */
     @tracked hello;
-
-    /**
-     * The token paramerer.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
     @tracked token;
-
-    /**
-     * Validation state tracker.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
-    @tracked isReadyToSubmit = false;
-
-    /**
-     * The request timeout to trigger alternative verification options.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
-    @tracked waitTimeout = 1000 * 60 * 1.25;
-
-    /**
-     * Determines if Fleetbase is still awaiting verification after a certain time.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
-    @tracked stillWaiting = false;
-
-    /**
-     * The input code.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
     @tracked code;
-
-    /**
-     * The email to verify.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
     @tracked email;
+    @tracked isReadyToSubmit = false;
+    @tracked waitTimeout = 1000 * 60 * 1.25;
+    @tracked stillWaiting = false;
+    @tracked queryParams = ['hello', 'token', 'code'];
 
-    /**
-     * The query param for the session token.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
-    @tracked queryParams = ['hello', 'token'];
-
-    /**
-     * The boolean opposite of `isReadyToSubmit`
-     *
-     * @memberof OnboardVerifyEmailController
-     */
-    @not('isReadyToSubmit') isNotReadyToSubmit;
-
-    /**
-     * Creates an instance of OnboardVerifyEmailController.
-     * @memberof OnboardVerifyEmailController
-     */
     constructor() {
         super(...arguments);
 
@@ -94,21 +36,10 @@ export default class AuthVerificationController extends Controller {
         );
     }
 
-    /**
-     * Allow user to manually trigger no code received prompt.
-     *
-     * @memberof AuthVerificationController
-     */
     @action onDidntReceiveCode() {
         this.stillWaiting = true;
     }
 
-    /**
-     * Validates the input
-     *
-     * @param {InputEvent} { target: { value } }
-     * @memberof OnboardVerifyEmailController
-     */
     @action validateInput({ target: { value } }) {
         if (value.length > 5) {
             this.isReadyToSubmit = true;
@@ -117,12 +48,6 @@ export default class AuthVerificationController extends Controller {
         }
     }
 
-    /**
-     * Validates input on the first render
-     *
-     * @param {HTMLElement} el
-     * @memberof AuthVerificationController
-     */
     @action validateInitInput(el) {
         const value = el.value;
         if (value.length > 5) {
@@ -132,11 +57,6 @@ export default class AuthVerificationController extends Controller {
         }
     }
 
-    /**
-     * Submits to verify code.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
     @task *verifyCode() {
         try {
             const { status, token } = yield this.fetch.post('auth/verify-email', { token: this.token, code: this.code, email: this.email, authenticate: true });
@@ -156,11 +76,7 @@ export default class AuthVerificationController extends Controller {
             this.notifications.serverError(error);
         }
     }
-    /**
-     * Action to resend verification code by SMS.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
+
     @action resendBySms() {
         this.modalsManager.show('modals/verify-by-sms', {
             title: 'Verify Account by Phone',
@@ -185,11 +101,6 @@ export default class AuthVerificationController extends Controller {
         });
     }
 
-    /**
-     * Action to resend verification code by email.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
     @action resendEmail() {
         this.modalsManager.show('modals/resend-verification-email', {
             title: 'Resend Verification Code',

console/app/controllers/console.js

@@ -50,7 +50,7 @@ export default class ConsoleController extends Controller {
      *
      * @var {Array}
      */
-    @tracked hiddenSidebarRoutes = ['console.home', 'console.notifications'];
+    @tracked hiddenSidebarRoutes = ['console.home', 'console.notifications', 'console.virtual'];
 
     /**
      * Menu items to be added to the main header navigation bar.

console/app/controllers/onboard/verify-email.js

@@ -1,39 +1,40 @@
 import AuthVerificationController from '../auth/verification';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { later } from '@ember/runloop';
+import { not } from '@ember/object/computed';
+import { task } from 'ember-concurrency';
 
 export default class OnboardVerifyEmailController extends AuthVerificationController {
-    /**
-     * Submits to verify code.
-     *
-     * @return {Promise}
-     * @memberof OnboardVerifyEmailController
-     */
-    @action verifyCode() {
-        const { hello, code } = this;
+    @service fetch;
+    @service notifications;
+    @service session;
+    @service currentUser;
+    @service router;
 
-        this.isLoading = true;
+    /** props */
+    @tracked hello;
+    @tracked code;
+    @tracked queryParams = ['hello', 'code'];
 
-        return this.fetch
-            .post('onboard/verify-email', { session: hello, code })
-            .then(({ status, token }) => {
-                if (status === 'ok') {
-                    this.notifications.success('Email successfully verified!');
+    @task *verifyCode() {
+        try {
+            const { status, token } = yield this.fetch.post('onboard/verify-email', { session: this.hello, code: this.code });
+            if (status === 'ok') {
+                this.notifications.success('Email successfully verified!');
 
-                    if (token) {
-                        this.notifications.info('Welcome to Fleetbase!');
-                        this.session.manuallyAuthenticate(token);
+                if (token) {
+                    this.notifications.info('Welcome to Fleetbase!');
+                    this.session.manuallyAuthenticate(token);
 
-                        return this.router.transitionTo('console');
-                    }
-
-                    return this.router.transitionTo('auth.login');
+                    return this.router.transitionTo('console');
                 }
-            })
-            .catch((error) => {
-                this.notifications.serverError(error);
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+
+                return this.router.transitionTo('auth.login');
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 }

console/app/models/user.js

@@ -31,7 +31,10 @@ export default class UserModel extends Model {
     @attr('string') locale;
     @attr('boolean') is_online;
     @attr('boolean') is_admin;
+    @attr('boolean') is_subscribed;
+    @attr('boolean') is_trialing;
     @attr('raw') meta;
+    @attr('raw') subscription;
 
     /** @relationships */
     @belongsTo('role') role;
@@ -42,6 +45,7 @@ export default class UserModel extends Model {
     @attr('date') last_seen_at;
     @attr('date') phone_verified_at;
     @attr('date') email_verified_at;
+    @attr('date') trial_ends_at;
     @attr('date') last_login;
     @attr('date') deleted_at;
     @attr('date') created_at;

console/app/templates/console/settings/index.hbs

@@ -11,7 +11,7 @@
                         <PhoneInput @value={{@model.phone}} @onInput={{fn (mut @model.phone)}} class="form-input w-full" />
                     </InputGroup>
                     <InputGroup @name={{t "console.settings.index.organization-currency"}}>
-                        <CurrencySelect @value={{@model.currency}} @onSelect={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
+                        <CurrencySelect @currency={{@model.currency}} @onCurrencyChange={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
                     </InputGroup>
                     <InputGroup @name={{t "console.settings.index.organization-id"}} @value={{@model.public_id}} @disabled={{true}} />
                     <div class="mt-3 flex items-center justify-end">

console/app/templates/console/virtual.hbs

@@ -1,11 +1,6 @@
 {{page-title @model.title}}
-<Layout::Section::Header @title={{@model.title}} />
 
 <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 space-y-">
-            {{component @model.component params=@model.componentParams}}
-        </div>
-    </div>
+    {{component @model.component params=@model.componentParams}}
     <Spacer @height="300px" />
 </Layout::Section::Body>

console/app/templates/onboard/verify-email.hbs

@@ -1,27 +1,42 @@
 {{page-title (t "onboard.verify-email.header-title")}}
 
 <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow rounded-lg w-full">
-    <div class="mb-8">
-        <img class="mx-auto h-12 w-auto " src="/images/fleetbase-logo-svg.svg" alt={{t "app.name"}}>
+    <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>
 
-    <div class="flex px-3 py-2 mb-6 rounded-md shadow-sm bg-blue-200">
-        <div>
-            <FaIcon @icon="shield-check" @size="lg" class="text-blue-900 mr-4" />
-        </div>
-        <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
-             {{t "onboard.verify-email.message-text" htmlSafe=true}}
-        </p>
-    </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" this.verifyCode}}>
-        <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.validateInput}} {{did-insert this.validateInitInput}} />
+    <form class="mt-8 space-y-6" {{on "submit" (perform this.verifyCode)}}>
+        <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.validateInput}}
+            {{did-insert this.validateInitInput}}
+        />
 
         <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.isLoading}} @disabled={{this.isNotReadyToSubmit}} @onClick={{this.verifyCode}} />
+            <Button
+                @icon="check"
+                @iconPrefix="fas"
+                @buttonType="submit"
+                @type="primary"
+                @size="lg"
+                @text="Verify & Continue"
+                @isLoading={{this.verifyCode.isRunning}}
+                @disabled={{not this.isReadyToSubmit}}
+                @onClick={{perform this.verifyCode}}
+            />
             <a href="#" {{on "click" this.onDidntReceiveCode}} class="text-sm text-blue-400 hover:text-blue-300">{{t "onboard.verify-email.didnt-receive-a-code"}}</a>
         </div>
 
@@ -33,14 +48,14 @@
                     </div>
                     <div class="flex-1">
                         <div class="flex-1 text-sm text-yellow-100">
-                            <div>{{t "onboard.verify-email.didnt-receive-a-code" htmlSafe=true}}</div>
-                            <div>{{t "onboard.verify-email.not-sent.alternative-choice" htmlSafe=true}}</div>
+                            <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 "onboard.verify-email.not-sent.resend-email"}}
+                        @text={{t "auth.verification.not-sent.resend-email"}}
                         @buttonType="button"
                         @type="link"
                         class="text-yellow-100"
@@ -48,7 +63,7 @@
                         @onClick={{this.resendEmail}}
                     />
                     <Button
-                        @text={{t "onboard.verify-email.not-sent.send-by-sms"}}
+                        @text={{t "auth.verification.not-sent.send-by-sms"}}
                         @buttonType="button"
                         @type="link"
                         class="text-yellow-100"

console/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/console",
-    "version": "0.5.18",
+    "version": "0.5.25",
     "private": true,
     "description": "Modular logistics and supply chain operating system (LSOS)",
     "repository": "https://github.com/fleetbase/fleetbase",
@@ -33,11 +33,11 @@
         "@fleetbase/ember-core": "latest",
         "@fleetbase/ember-ui": "latest",
         "@fleetbase/fleetops-data": "latest",
-        "@fleetbase/fleetops-engine": "^0.5.14",
+        "@fleetbase/fleetops-engine": "^0.5.20",
         "@fleetbase/iam-engine": "^0.1.3",
         "@fleetbase/leaflet-routing-machine": "^3.2.16",
         "@fleetbase/registry-bridge-engine": "^0.0.18",
-        "@fleetbase/storefront-engine": "^0.3.17",
+        "@fleetbase/storefront-engine": "^0.3.25",
         "@fortawesome/ember-fontawesome": "^2.0.0",
         "ember-changeset": "^4.1.2",
         "ember-changeset-validations": "^4.1.1",