Merge pull request #191 from fleetbase/dev-v0.3.9

v0.3.9

.github/workflows/cd.yml

@@ -35,7 +35,7 @@ jobs:
           echo "STACK=$(basename $GITHUB_REF)" >> $GITHUB_ENV
 
     - name: Configure AWS Credentials
-      uses: aws-actions/configure-aws-credentials@v2
+      uses: aws-actions/configure-aws-credentials@v4
       with:
         role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_NUMBER }}:role/${{ env.PROJECT }}-${{ env.STACK }}-deployer
         role-session-name: github
@@ -72,7 +72,7 @@ jobs:
       run: |-
           set -eu
           # run deploy.sh script before deployments
-          env "ECS_RUN.SERVICE=app" "ECS_RUN.LAUNCH_TYPE=FARGATE" ./ecs-tool run --image_tag '{container_name}-${{ env.VERSION }}' --cluster ${{ env.PROJECT }}-${{ env.STACK }} --task_definition ${{ env.PROJECT }}-${{ env.STACK }}-app --container_name app ./deploy.sh
+          env "ECS_RUN.SERVICE=app" "ECS_RUN.LAUNCH_TYPE=FARGATE" ./ecs-tool run -l "ecs-tool" --image_tag '{container_name}-${{ env.VERSION }}' --cluster ${{ env.PROJECT }}-${{ env.STACK }} --task_definition ${{ env.PROJECT }}-${{ env.STACK }}-app --container_name app ./deploy.sh
           ./ecs-tool deploy --image_tag '{container_name}-${{ env.VERSION }}' --cluster ${{ env.PROJECT }}-${{ env.STACK }} -s app -s scheduler -s events
 
   build_frontend:
@@ -158,6 +158,10 @@ jobs:
     
     - name: Deploy Console 🚀
       run: |
-          DEPLOY_BUCKET=${{ env.PROJECT }}-${{ env.STACK }}
+          set -u
+
+          DEPLOY_BUCKET=${STATIC_DEPLOY_BUCKET:-${{ env.PROJECT }}-${{ env.STACK }}}
+          # this value will come from the dotenv above
+          echo "Deploying to $DEPLOY_BUCKET"
           wget -O- https://github.com/bep/s3deploy/releases/download/v2.11.0/s3deploy_2.11.0_linux-amd64.tar.gz | tar xzv -f - s3deploy
           ./s3deploy -region ${AWS_REGION} -source console/dist -bucket ${DEPLOY_BUCKET}

.github/workflows/gcp-cd.yml

@@ -0,0 +1,185 @@
+name: Fleetbase CI/CD
+
+on:
+  push:
+    branches: [ "gcpdeploy/*" ]
+
+concurrency:
+    group: ${{ github.ref }}
+    cancel-in-progress: true
+
+env:
+  PROJECT: ${{ vars.PROJECT }}
+  REGISTRY: ${{ vars.REGISTRY }}
+  SOCKETCLUSTER_HOST: ${{ vars.SOCKETCLUSTER_HOST }}
+  API_HOST: ${{ vars.API_HOST }}
+  K8S_CLUSTER_NAME: ${{ vars.K8S_CLUSTER_NAME }}
+  K8S_CLUSTER_LOCATION: ${{ vars.K8S_CLUSTER_LOCATION }}
+  GCP_WORKLOAD_IDENTITY_PROVIDER: ${{ vars.GCP_WORKLOAD_IDENTITY_PROVIDER }}
+  GCP_SERVICE_ACCOUNT: ${{ vars.GCP_SERVICE_ACCOUNT }}
+  GCP: "True" # switches docker builds to GCP-style registry
+
+jobs:
+  build_service:
+    name: Build and Deploy the Service
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write # This is required for requesting the JWT
+      contents: read  # This is required for actions/checkout
+
+    steps:
+    - name: Checkout Code
+      uses: actions/checkout@v3
+      with:
+        submodules: recursive
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+
+    - name: Set Dynamic ENV Vars
+      run: |
+          SHORT_COMMIT=$(echo $GITHUB_SHA | cut -c -8)
+          echo "VERSION=${SHORT_COMMIT}" >> $GITHUB_ENV
+          echo "STACK=$(basename $GITHUB_REF)" >> $GITHUB_ENV
+          echo "REGISTRY_HOST=$(dirname $(dirname $REGISTRY))" >> $GITHUB_ENV
+
+    - id: 'auth'
+      name: 'Authenticate to Google Cloud'
+      uses: 'google-github-actions/auth@v1'
+      with:
+        token_format: "access_token"
+        create_credentials_file: true
+        workload_identity_provider: ${{ env.GCP_WORKLOAD_IDENTITY_PROVIDER }}
+        service_account: ${{ env.GCP_SERVICE_ACCOUNT }}
+
+    - name: 'Set up Cloud SDK'
+      uses: 'google-github-actions/setup-gcloud@v1'
+
+    - id: 'get-credentials'
+      uses: 'google-github-actions/get-gke-credentials@v1'
+      with:
+        cluster_name: ${{ env.K8S_CLUSTER_NAME }}
+        location: ${{ env.K8S_CLUSTER_LOCATION }}
+
+    - uses: 'docker/login-action@v3'
+      with:
+        registry: ${{ env.REGISTRY_HOST }}
+        username: 'oauth2accesstoken'
+        password: '${{ steps.auth.outputs.access_token }}'
+
+    - name: Prepare Composer Auth Secret
+      run: |
+        if [[ -n "${{ secrets._GITHUB_AUTH_TOKEN }}" ]]; then
+          echo '{"github-oauth": {"github.com": "'${{ secrets._GITHUB_AUTH_TOKEN }}'"}}' > composer-auth.json
+        else
+          echo '{}' > composer-auth.json
+        fi
+
+    - name: nullify ssm-parent config
+      run: |
+        # this is needed to disable ssm-parent, which is used on AWS
+        echo > api/.ssm-parent.yaml
+
+    - name: Build and Release
+      uses: docker/bake-action@v2
+      env: 
+        REGISTRY: ${{ env.REGISTRY }}
+        VERSION: ${{ env.VERSION }}
+        CACHE: type=gha
+      with:
+        push: true
+        files: |
+          ./docker-bake.hcl
+
+    - name: deploy with helm
+      run: |
+        helm upgrade -i fleetbase infra/helm -n ${{ env.PROJECT }}-${{ env.STACK }} --set image.repository=${{ env.REGISTRY }} --set image.tag=${{ env.VERSION }} --set 'api_host=${{ env.API_HOST }}' --set 'socketcluster_host=${{ env.SOCKETCLUSTER_HOST }}' --set 'ingress.annotations.kubernetes\.io/ingress\.global-static-ip-name=${{ env.PROJECT }}-${{ env.STACK }}' 
+
+  build_frontend:
+    name: Build and Deploy the Console
+    needs: [build_service]
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write # This is required for requesting the JWT
+      contents: read  # This is required for actions/checkout
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+      with:
+        submodules: true
+
+    - name: Set Dynamic ENV Vars
+      run: |
+          SHORT_COMMIT=$(echo $GITHUB_SHA | cut -c -8)
+          echo "VERSION=${SHORT_COMMIT}" >> $GITHUB_ENV
+          echo "STACK=$(basename $GITHUB_REF)" >> $GITHUB_ENV
+
+    - id: 'auth'
+      name: 'Authenticate to Google Cloud'
+      uses: 'google-github-actions/auth@v1'
+      with:
+        token_format: "access_token"
+        create_credentials_file: true
+        workload_identity_provider: ${{ env.GCP_WORKLOAD_IDENTITY_PROVIDER }}
+        service_account: ${{ env.GCP_SERVICE_ACCOUNT }}
+
+    - name: 'Set up Cloud SDK'
+      uses: 'google-github-actions/setup-gcloud@v1'
+
+    - name: Install Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16
+
+    - uses: pnpm/action-setup@v2
+      name: Install pnpm
+      id: pnpm-install
+      with:
+        version: 8
+        run_install: false
+
+    - name: Get pnpm Store Directory
+      id: pnpm-cache
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+    - uses: actions/cache@v3
+      name: Setup pnpm Cache
+      with:
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Check for _GITHUB_AUTH_TOKEN and create .npmrc
+      run: |
+        if [[ -n "${{ secrets._GITHUB_AUTH_TOKEN }}" ]]; then
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets._GITHUB_AUTH_TOKEN }}" > .npmrc
+        fi
+      working-directory: ./console
+
+    - name: Install dependencies
+      run: pnpm install
+      working-directory: ./console
+
+    - name: Build
+      env:
+        SOCKETCLUSTER_HOST: ${{ env.SOCKETCLUSTER_HOST }}
+        SOCKETCLUSTER_SECURE: "true"
+        SOCKETCLUSTER_PORT: "443"
+        API_HOST: ${{ env.API_HOST }}
+      run: |
+        set -eu
+
+        pnpm build
+      working-directory: ./console
+
+    - name: Deploy Console 🚀
+      run: |
+          set -eu
+
+          gcloud app deploy --appyaml console/app.yaml console/dist
+          # leave 2 versions
+          gcloud app versions list --filter="traffic_split=0" --sort-by '~version' --format 'value(version.id)' | sed '1d' | xargs -r gcloud app versions delete

.gitignore

@@ -12,9 +12,24 @@ api/storage/*.key
 api/storage/uploads
 api/storage/public
 api/vendor
+api/composer.dev.json
+api/composer-install-dev.sh
+api/auth.json
 act.sh
 composer-auth.json
-packages/billing-api
-packages/billing-engine
 docker/database/*
-docker/database/mysql/*
+docker/database/mysql/*
+.talismanrc
+verdaccio/minio
+verdaccio/config/htpasswd
+verdaccio/storage
+# private packages
+packages/billing
+packages/flespi
+packages/loconav
+packages/internals
+packages/projectargus-engine
+# wip
+packages/solid
+solid
+verdaccio

.gitmodules

@@ -1,15 +1,16 @@
-[submodule "console"]
-	path = console
-	url = git@github.com:fleetbase/console.git
-	branch = main
+[submodule "packages/fleetops"]
+	path = packages/fleetops
+	url = git@github.com:fleetbase/fleetops.git
+[submodule "packages/storefront"]
+	path = packages/storefront
+	url = git@github.com:fleetbase/storefront.git
+[submodule "packages/pallet"]
+	path = packages/pallet
+	url = git@github.com:fleetbase/pallet.git
 [submodule "packages/core-api"]
 	path = packages/core-api
 	url = git@github.com:fleetbase/core-api.git
 	branch = main
-[submodule "packages/fleetops-api"]
-	path = packages/fleetops-api
-	url = git@github.com:fleetbase/fleetops-api.git
-	branch = main
 [submodule "packages/ember-core"]
 	path = packages/ember-core
 	url = git@github.com:fleetbase/ember-core.git
@@ -18,10 +19,6 @@
 	path = packages/ember-ui
 	url = git@github.com:fleetbase/ember-ui.git
 	branch = main
-[submodule "packages/storefront-engine"]
-	path = packages/storefront-engine
-	url = git@github.com:fleetbase/storefront-engine.git
-	branch = main
 [submodule "packages/iam-engine"]
 	path = packages/iam-engine
 	url = git@github.com:fleetbase/iam-engine.git
@@ -32,9 +29,9 @@
 [submodule "packages/fleetbase-extensions-indexer"]
 	path = packages/fleetbase-extensions-indexer
 	url = git@github.com:fleetbase/fleetbase-extensions-indexer.git
-[submodule "packages/fleetops-engine"]
-	path = packages/fleetops-engine
-	url = git@github.com:fleetbase/fleetops-engine.git
+[submodule "packages/fleetops-data"]
+	path = packages/fleetops-data
+	url = git@github.com:fleetbase/fleetops-data.git
 	branch = main
 [submodule "docs/guides"]
 	path = docs/guides
@@ -42,23 +39,3 @@
 [submodule "docs/api-reference"]
 	path = docs/api-reference
 	url = git@github.com:fleetbase/api-reference.git
-[submodule "packages/storefront-api"]
-	path = packages/storefront-api
-	url = git@github.com:fleetbase/storefront-api.git
-	branch = main
-[submodule "packages/fleetops-data"]
-	path = packages/fleetops-data
-	url = git@github.com:fleetbase/fleetops-data.git
-	branch = main
-[submodule "socket"]
-	path = socket
-	url = git@github.com:fleetbase/socket.git
-	branch = main
-[submodule "packages/pallet-api"]
-	path = packages/pallet-api
-	url = git@github.com:fleetbase/pallet-api.git
-	branch = main
-[submodule "packages/pallet-engine"]
-	path = packages/pallet-engine
-	url = git@github.com:fleetbase/pallet-engine.git
-	branch = main

.s3deploy.yml

@@ -7,7 +7,11 @@ routes:
     headers:
       Cache-Control: "max-age=600, no-transform, public"
     gzip: false
-  - route: "^.+\\.(html|xml|json)$"
+  - route: "^.+\\.(xml|json)$"
+    headers:
+      Cache-Control: "max-age=600, no-transform, public"
+    gzip: true
+  - route: "^.+\\.(html)$"
     headers:
       Cache-Control: "public, max-age=0, must-revalidate"
     gzip: true

README.md

@@ -10,6 +10,9 @@
       <a href="https://fleetbase.github.io/guides" rel="nofollow">Fleetbase Documentation →</a>
       <br>
       <br>
+      <a href="https://meetings.hubspot.com/shiv-thakker" rel="nofollow">Book a Demo</a>
+      <br>
+      <br>
       <a href="https://github.com/fleetbase/fleetbase/issues">Report an Issue</a>
       ·
       <a href="https://fleetbase.github.io/api-reference">API Reference</a>

api/.gitignore

@@ -13,3 +13,4 @@ npm-debug.log
 yarn-error.log
 /.idea
 /.vscode
+.composer.dev.json

api/README.md

@@ -1,64 +0,0 @@
-<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400"></a></p>
-
-<p align="center">
-<a href="https://travis-ci.org/laravel/framework"><img src="https://travis-ci.org/laravel/framework.svg" alt="Build Status"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
-</p>
-
-## About Laravel
-
-Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
-
-- [Simple, fast routing engine](https://laravel.com/docs/routing).
-- [Powerful dependency injection container](https://laravel.com/docs/container).
-- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
-- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
-- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
-- [Robust background job processing](https://laravel.com/docs/queues).
-- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
-
-Laravel is accessible, powerful, and provides tools required for large, robust applications.
-
-## Learning Laravel
-
-Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.
-
-If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains over 1500 video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
-
-## Laravel Sponsors
-
-We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the Laravel [Patreon page](https://patreon.com/taylorotwell).
-
-### Premium Partners
-
-- **[Vehikl](https://vehikl.com/)**
-- **[Tighten Co.](https://tighten.co)**
-- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
-- **[64 Robots](https://64robots.com)**
-- **[Cubet Techno Labs](https://cubettech.com)**
-- **[Cyber-Duck](https://cyber-duck.co.uk)**
-- **[Many](https://www.many.co.uk)**
-- **[Webdock, Fast VPS Hosting](https://www.webdock.io/en)**
-- **[DevSquad](https://devsquad.com)**
-- **[Curotec](https://www.curotec.com/services/technologies/laravel/)**
-- **[OP.GG](https://op.gg)**
-- **[WebReinvent](https://webreinvent.com/?utm_source=laravel&utm_medium=github&utm_campaign=patreon-sponsors)**
-- **[Lendio](https://lendio.com)**
-
-## Contributing
-
-Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
-
-## Code of Conduct
-
-In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
-
-## Security Vulnerabilities
-
-If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
-
-## License
-
-The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

api/composer-install-dev.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-
-if [ -f composer.lock ]; then
-    rm composer.lock
-fi
-
-mv composer.json composer.prod.json && cp composer.dev.json composer.json && composer install && mv composer.prod.json composer.json

api/composer.dev.json

@@ -1,90 +0,0 @@
-{
-    "name": "laravel/laravel",
-    "type": "project",
-    "description": "The Laravel Framework.",
-    "keywords": ["framework", "laravel"],
-    "license": "MIT",
-    "require": {
-        "php": "^7.3|^8.0",
-        "fleetbase/core-api": "^1.2.6",
-        "fleetbase/fleetops-api": "^1.1.4",
-        "fleetbase/storefront-api": "^1.1.2",
-        "fleetbase/pallet-api": "^0.0.1",
-        "fleetbase/billing-api": "^0.0.2",
-        "fruitcake/laravel-cors": "^2.0",
-        "guzzlehttp/guzzle": "^7.0.1",
-        "laravel/framework": "^8.75",
-        "laravel/sanctum": "^2.11",
-        "laravel/tinker": "^2.5",
-        "league/flysystem-aws-s3-v3": "^1.0",
-        "maatwebsite/excel": "^3.1",
-        "phpoffice/phpspreadsheet": "^1.28",
-        "predis/predis": "^2.1",
-        "psr/http-factory-implementation": "*"
-    },
-    "require-dev": {
-        "facade/ignition": "^2.5",
-        "fakerphp/faker": "^1.9.1",
-        "kitloong/laravel-migrations-generator": "^6.10",
-        "laravel/sail": "^1.0.1",
-        "mockery/mockery": "^1.4.4",
-        "nunomaduro/collision": "^5.10",
-        "phpunit/phpunit": "^9.5.10"
-    },
-    "repositories": [
-        {
-            "type": "path",
-            "url": "../packages/core-api"
-        },
-        {
-            "type": "path",
-            "url": "../packages/fleetops-api"
-        },
-        {
-            "type": "path",
-            "url": "../packages/storefront-api"
-        },
-        {
-            "type": "path",
-            "url": "../packages/pallet-api"
-        }
-    ],
-    "autoload": {
-        "psr-4": {
-            "App\\": "app/",
-            "Database\\Factories\\": "database/factories/",
-            "Database\\Seeders\\": "database/seeders/"
-        }
-    },
-    "autoload-dev": {
-        "psr-4": {
-            "Tests\\": "tests/"
-        }
-    },
-    "scripts": {
-        "post-autoload-dump": ["Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", "@php artisan package:discover --ansi"],
-        "post-update-cmd": ["@php artisan vendor:publish --tag=laravel-assets --ansi --force"],
-        "post-root-package-install": ["@php -r \"file_exists('.env') || copy('.env.example', '.env');\""],
-        "post-create-project-cmd": ["@php artisan key:generate --ansi"],
-        "clear-logs": ["rm -rf storage/logs/*.log", "composer dump-autoload", "chmod -R 777 storage", "chmod -R 777 bootstrap/cache", "chmod -R 777 resources"],
-        "clean-logs": ["composer run-script clear-logs"],
-        "dock": ["docker exec -it fleetbase_os_application_1 /usr/bin/tmux -u new"],
-        "dock-server": ["docker exec -it fleetbase_os_httpd_1 /bin/sh"],
-        "tunnel": ["ngrok http --region=ap --hostname=fleetbase.ap.ngrok.io 8000"]
-    },
-    "extra": {
-        "laravel": {
-            "dont-discover": []
-        }
-    },
-    "config": {
-        "optimize-autoloader": true,
-        "preferred-install": "dist",
-        "sort-packages": true,
-        "allow-plugins": {
-            "php-http/discovery": true
-        }
-    },
-    "minimum-stability": "dev",
-    "prefer-stable": true
-}

api/composer.json

@@ -9,9 +9,9 @@
     "license": "MIT",
     "require": {
         "php": "^7.3|^8.0",
-        "fleetbase/core-api": "^1.2.6",
-        "fleetbase/fleetops-api": "^1.1.4",
-        "fleetbase/storefront-api": "^1.1.2",
+        "fleetbase/core-api": "^1.3.12",
+        "fleetbase/fleetops-api": "^0.4.3",
+        "fleetbase/storefront-api": "^0.2.8",
         "fruitcake/laravel-cors": "^2.0",
         "guzzlehttp/guzzle": "^7.0.1",
         "laravel/framework": "^8.75",

api/config/app.php

@@ -13,7 +13,7 @@ return [
     |
     */
 
-    'name' => env('APP_NAME', 'Laravel'),
+    'name' => env('APP_NAME', 'Fleetbase'),
 
     /*
     |--------------------------------------------------------------------------

api/config/cors.php

@@ -1,5 +1,7 @@
 <?php
 
+use Fleetbase\Support\Utils;
+
 return [
 
     /*
@@ -19,7 +21,7 @@ return [
 
     'allowed_methods' => ['*'],
 
-    'allowed_origins' => ['http://localhost:4200', env('CONSOLE_HOST')],
+    'allowed_origins' => array_filter(['http://localhost:4200', env('CONSOLE_HOST'), Utils::addWwwToUrl(env('CONSOLE_URL'))]),
 
     'allowed_origins_patterns' => [],
 

api/config/filesystems.php

@@ -32,25 +32,33 @@ return [
 
         'local' => [
             'driver' => 'local',
-            'root' => storage_path('app'),
+            'root' => storage_path('app')
         ],
 
         'public' => [
             'driver' => 'local',
             'root' => storage_path('app/public'),
-            'url' => env('APP_URL').'/storage',
+            'url' => env('APP_URL') . '/storage',
         ],
 
         's3' => [
             'driver' => 's3',
             'key' => env('AWS_ACCESS_KEY_ID'),
             'secret' => env('AWS_SECRET_ACCESS_KEY'),
-            'region' => env('AWS_DEFAULT_REGION'),
+            'region' => env('AWS_DEFAULT_REGION', 'ap-southeast-1'),
             'bucket' => env('AWS_BUCKET'),
             'url' => env('AWS_URL'),
             'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
         ],
 
+        'gcs' => [
+            'driver' => 'gcs',
+            'project_id' => env('GOOGLE_CLOUD_PROJECT_ID', 'your-project-id'),
+            'key_file' => env('GOOGLE_CLOUD_KEY_FILE', null),
+            'bucket' => env('GOOGLE_CLOUD_STORAGE_BUCKET', env('AWS_BUCKET')),
+            'path_prefix' => env('GOOGLE_CLOUD_STORAGE_PATH_PREFIX', null),
+            'storage_api_uri' => env('GOOGLE_CLOUD_STORAGE_API_URI', env('AWS_URL')),
+        ],
     ],
 
     /*
@@ -65,8 +73,7 @@ return [
     */
 
     'links' => [
-        public_path('storage') => storage_path('app/public'),
-        public_path('uploads') => storage_path('app/uploads'),
+        public_path('storage') => storage_path('app/public')
     ],
 
 ];

api/config/mail.php

@@ -60,6 +60,10 @@ return [
             'transport' => 'postmark',
         ],
 
+        'sendgrid' => [
+            'transport' => 'sendgrid',
+        ],
+
         'sendmail' => [
             'transport' => 'sendmail',
             'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -t -i'),
@@ -96,7 +100,7 @@ return [
 
     'from' => [
         'address' => env('MAIL_FROM_ADDRESS', 'hello@fleetbase.io'),
-        'name' => env('MAIL_FROM_NAME', 'Fleetbase'),
+        'name' => env('MAIL_FROM_NAME', env('APP_NAME', 'Fleetbase')),
     ],
 
     /*

api/config/services.php

@@ -30,4 +30,8 @@ return [
         'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
     ],
 
+    'sendgrid' => [
+        'api_key' => env('SENDGRID_API_KEY'),
+    ],
+
 ];

api/deploy.sh

@@ -13,4 +13,7 @@ php artisan migrate --force
 php artisan sandbox:migrate --force
 
 # Seed database
-php artisan fleetbase:seed
+php artisan fleetbase:seed
+
+# Restart queue
+php artisan queue:restart

api/public/uploads

@@ -1 +0,0 @@
-/var/www/html/api/storage/app/uploads

console/.dockerignore

@@ -0,0 +1,25 @@
+# Ignore files not needed for docker to build microservice image
+node_modules/*
+postgres/*
+typings/*
+*/.git*
+*.git*
+*.git
+*.md
+!gulpfile.js
+ci/
+.circleci/
+Vagrantfile
+concourse/
+infra/*
+vagrant/*
+docker/*
+deploy/*
+media/*
+data/*
+appspec.yml
+compose.yml
+docker-compose-prod.yml
+docker-compose.yml
+$virtualenv.tar.gz
+$node_modules.tar.gz

console/.editorconfig

@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.hbs]
+insert_final_newline = false
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

console/.ember-cli

@@ -0,0 +1,7 @@
+{
+  /**
+    Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+    rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+  */
+  "isTypeScriptProject": false
+}

console/.eslintignore

@@ -0,0 +1,13 @@
+# unconventional js
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# misc
+/coverage/
+!.*
+.*/
+
+# ember-try
+/.node_modules.ember-try/

console/.eslintrc.js

@@ -0,0 +1,77 @@
+'use strict';
+
+module.exports = {
+    root: true,
+    parser: '@babel/eslint-parser',
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        requireConfigFile: false,
+        babelOptions: {
+            plugins: [['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }]],
+        },
+    },
+    plugins: ['ember'],
+    extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'],
+    ignorePatterns: ['prebuild.js'],
+    env: {
+        browser: true,
+    },
+    globals: {
+        socketClusterClient: 'readonly',
+        L: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+    },
+    rules: {
+        'ember/no-array-prototype-extensions': 'off',
+        'ember/no-computed-properties-in-native-classes': 'off',
+        'ember/no-controller-access-in-routes': 'off',
+        'ember/no-empty-glimmer-component-classes': 'off',
+        'ember/no-get': 'off',
+        'ember/classic-decorator-no-classic-methods': 'off',
+        'n/no-unpublished-require': [
+            'error',
+            {
+                allowModules: [
+                    'ember-cli',
+                    'tailwindcss',
+                    '@tailwindcss/forms',
+                    'postcss-import',
+                    'postcss-preset-env',
+                    'postcss-each',
+                    'postcss-mixins',
+                    'postcss-conditionals-renewed',
+                    'autoprefixer',
+                    'broccoli-funnel',
+                    'ember-auto-import',
+                ],
+            },
+        ],
+        'no-prototype-builtins': 'off',
+    },
+    overrides: [
+        {
+            files: [
+                './.eslintrc.js',
+                './.prettierrc.js',
+                './.stylelintrc.js',
+                './.template-lintrc.js',
+                './ember-cli-build.js',
+                './testem.js',
+                './blueprints/*/index.js',
+                './config/**/*.js',
+                './lib/*/index.js',
+                './server/**/*.js',
+            ],
+            parserOptions: {
+                sourceType: 'script',
+            },
+            env: {
+                browser: false,
+                node: true,
+            },
+            extends: ['plugin:n/recommended'],
+        },
+    ],
+};

console/.github/workflows/ci.yml

@@ -0,0 +1,60 @@
+name: Ember CI
+
+on:
+  push:
+    branches: [ main ]
+    tags:
+      - 'v*'
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]  # Build on Node.js 18
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v2.0.1
+      with:
+        version: latest
+
+    - name: Get pnpm Store Directory
+      id: pnpm-cache
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+    - uses: actions/cache@v3
+      name: Setup pnpm Cache
+      with:
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Create .npmrc
+      run: |
+        if [[ -n "${{ secrets._GITHUB_AUTH_TOKEN }}" ]]; then
+          echo "@fleetbase:registry=https://npm.pkg.github.com/" > .npmrc
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets._GITHUB_AUTH_TOKEN }}" >> .npmrc
+        fi
+
+    - name: Install Dependencies
+      run: pnpm install
+
+    - name: Lint
+      run: pnpm run lint
+
+    - name: Build
+      run: npx ember build --environment production

console/.gitignore

@@ -0,0 +1,28 @@
+# compiled output
+/dist/
+/declarations/
+
+# dependencies
+/node_modules/
+/scripts/node_modules/
+
+# misc
+/.env*
+/environments/.env*
+/.pnp*
+/.eslintcache
+/coverage/
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+/.npmrc
+
+# ember-try
+/.node_modules.ember-try/
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+# broccoli-debug
+/DEBUG/

console/.prettierignore

@@ -0,0 +1,13 @@
+# unconventional js
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# misc
+/coverage/
+!.*
+.*/
+
+# ember-try
+/.node_modules.ember-try/

console/.prettierrc.js

@@ -0,0 +1,17 @@
+'use strict';
+
+module.exports = {
+    trailingComma: 'es5',
+    tabWidth: 4,
+    semi: true,
+    singleQuote: true,
+    printWidth: 190,
+    overrides: [
+        {
+            files: '*.{hbs,js,ts}',
+            options: {
+                singleQuote: false,
+            },
+        },
+    ],
+};

console/.stylelintignore

@@ -0,0 +1,8 @@
+# unconventional files
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# addons
+/.node_modules.ember-try/

console/.stylelintrc.js

@@ -0,0 +1,8 @@
+'use strict';
+
+module.exports = {
+    extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+    rules: {
+        'import-notation': null,
+    },
+};

console/.template-lintrc.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+    extends: 'recommended',
+    rules: {
+        'no-bare-strings': 'off',
+        'no-invalid-interactive': 'off',
+        'no-yield-only': 'off',
+        'table-groups': 'off',
+        'link-href-attributes': 'off',
+        'require-input-label': 'off',
+    },
+};

console/.watchmanconfig

@@ -0,0 +1,3 @@
+{
+  "ignore_dirs": ["dist"]
+}

console/Dockerfile

@@ -0,0 +1,51 @@
+# ---- Build Stage ----
+FROM node:18.15.0-alpine AS builder
+
+# Set the working directory in the container to /app
+WORKDIR /app
+
+# Create the pnpm directory and set the PNPM_HOME environment variable
+RUN mkdir -p ~/.pnpm
+ENV PNPM_HOME /root/.pnpm
+
+# Add the pnpm global bin to the PATH
+ENV PATH /root/.pnpm/bin:$PATH
+
+# Copy pnpm-lock.yaml (or package.json) into the directory /app in the container
+COPY console/package.json console/pnpm-lock.yaml ./
+
+# Copy over .npmrc if applicable
+COPY console/.npmr[c] ./
+
+# Install global dependencies
+RUN npm install -g ember-cli pnpm 
+
+# Install git
+RUN apk update && apk add git openssh-client
+
+# Trust GitHub's RSA host key
+RUN mkdir -p -m 0600 ~/.ssh && ssh-keyscan github.com >> ~/.ssh/known_hosts
+
+# Install app dependencies
+RUN pnpm install
+
+# Copy the console directory contents into the container at /app
+COPY console .
+
+# Build the application
+RUN pnpm build
+
+# ---- Serve Stage ----
+FROM nginx:alpine
+
+# Copy the built app to our served directory
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Expose the port nginx is bound to
+EXPOSE 4200
+
+# Use custom nginx.conf
+COPY console/nginx.conf /etc/nginx/conf.d/default.conf
+
+# Start Nginx server
+CMD ["nginx", "-g", "daemon off;"]

console/README.md

@@ -0,0 +1,22 @@
+<div id="hero">
+  <p align="center" dir="auto">
+      <a href="https://fleetbase.io" rel="nofollow">
+        <img src="https://user-images.githubusercontent.com/58805033/191936702-fed04b0f-7966-4041-96d0-95e27bf98248.png" alt="Fleetbase logo" width="600" height="140" style="max-width: 100%;">
+      </a>
+    </p>
+    <h2 align="center" dir="auto">
+      Fleetbase Console
+    </h2>
+</div>
+
+<p align="center" dir="auto">
+  <img src="https://user-images.githubusercontent.com/816371/246987420-deef79fa-e30c-4ce9-8a04-0dee990ffd9d.png" alt="Fleetbase Console" width="600" style="max-width: 100%;" />
+</p>
+
+# ⭐️ Overview
+
+<p>The Fleetbase Console, a vital component of the Fleetbase Platform, serves as the graphical user interface that facilitates interaction with all Fleetbase extensions. It's architecturally designed to be lightweight, primarily employing Ember Engines for its operational foundation. Ember Engines, a scalable development paradigm for ambitious web applications, allow the Console to dynamically load and manage extensions, ensuring a streamlined and efficient user experience.</p>
+
+<p>The responsibilities of the Console are kept minimalistic to maintain its performance and agility. The Console's key responsibilities encompass administration management, configuration of organization and user settings, and establishing a robust connection to the Fleetbase extensions repository. In its administrative capacity, it provides an intuitive interface for configuring the Fleetbas instance.</p>
+
+<p>Lastly, the Console plays a pivotal role in connecting to the Fleetbase extensions repository. This provides the flexibility to add, update, or remove extensions as per the organizational needs and preferences, all while ensuring the seamless operation and integrity of the Fleetbase Platform.</p>

console/app.yaml

@@ -0,0 +1,12 @@
+runtime: python312
+
+handlers:
+- url: /(.*\..+)$
+  static_files: \1
+  upload: (.+)
+  secure: always
+  expiration: 1h
+- url: /.*
+  static_files: index.html
+  upload: index.html
+  secure: always

console/app/adapters/application.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-core/adapters/application';

console/app/adapters/brand.js

@@ -0,0 +1,15 @@
+import ApplicationAdapter from './application';
+
+export default class BrandAdapter extends ApplicationAdapter {
+    urlForFindRecord() {
+        return `${this.host}/${this.namespace}/settings/branding`;
+    }
+
+    urlForUpdateRecord() {
+        return `${this.host}/${this.namespace}/settings/branding`;
+    }
+
+    urlForCreateRecord() {
+        return `${this.host}/${this.namespace}/settings/branding`;
+    }
+}

console/app/app.js

@@ -0,0 +1,23 @@
+import Application from '@ember/application';
+import Resolver from 'ember-resolver';
+import loadInitializers from 'ember-load-initializers';
+import config from '@fleetbase/console/config/environment';
+import loadExtensions from '@fleetbase/ember-core/utils/load-extensions';
+import mapEngines from '@fleetbase/ember-core/utils/map-engines';
+
+export default class App extends Application {
+    modulePrefix = config.modulePrefix;
+    podModulePrefix = config.podModulePrefix;
+    Resolver = Resolver;
+    extensions = [];
+    engines = {};
+
+    async ready() {
+        const extensions = await loadExtensions();
+
+        this.extensions = extensions;
+        this.engines = mapEngines(extensions);
+    }
+}
+
+loadInitializers(App, config.modulePrefix);

console/app/components/configure/2fa.hbs

@@ -0,0 +1 @@
+{{yield}}

console/app/components/configure/2fa.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class Configure2faComponent extends Component {}

console/app/components/configure/filesystem.hbs

@@ -0,0 +1,21 @@
+<ContentPanel @title="Filesystem" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Driver" @helpText="Select the default filesystem driver for Fleetbase to use.">
+        <Select @options={{this.disks}} @value={{this.driver}} @onSelect={{this.setDriver}} @placeholder="Select filesystem driver" class="w-full" disabled={{this.isLoading}} />
+    </InputGroup>
+    {{#if (eq this.driver "s3")}}
+        <InputGroup @name="S3 Bucket" @value={{this.s3Bucket}} disabled={{this.isLoading}} />
+        <InputGroup @name="S3 URL" @value={{this.s3Url}} disabled={{this.isLoading}} />
+        <InputGroup @name="S3 Endpoint" @value={{this.s3Endpoint}} disabled={{this.isLoading}} />
+    {{/if}}
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</EmberWormhole>

console/app/components/configure/filesystem.js

@@ -0,0 +1,85 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ConfigureFilesystemComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked isLoading = false;
+    @tracked testResponse;
+    @tracked disks = [];
+    @tracked driver = 'local';
+    @tracked s3Bucket = null;
+    @tracked s3Url = null;
+    @tracked s3Endpoint = null;
+
+    /**
+     * Creates an instance of ConfigureFilesystemComponent.
+     * @memberof ConfigureFilesystemComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.loadConfigValues();
+    }
+
+    @action setConfigValues(config) {
+        for (const key in config) {
+            if (this[key] !== undefined) {
+                this[key] = config[key];
+            }
+        }
+    }
+
+    @action setDriver(driver) {
+        this.driver = driver;
+    }
+
+    @action loadConfigValues() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('settings/filesystem-config')
+            .then((response) => {
+                this.setConfigValues(response);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action save() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/filesystem-config', {
+                driver: this.driver,
+                s3: {
+                    bucket: this.s3Bucket,
+                    url: this.s3Url,
+                    endpoint: this.s3Endpoint,
+                },
+            })
+            .then(() => {
+                this.notifications.success('Filesystem configuration saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action test() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-filesystem-config', {
+                disk: this.driver,
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

console/app/components/configure/mail.hbs

@@ -0,0 +1,27 @@
+<ContentPanel @title="Mail" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Mailer" @helpText="Select the default mailer for Fleetbase to use.">
+        <Select @options={{this.mailers}} @value={{this.mailer}} @onSelect={{this.setMailer}} @placeholder="Select mailer" class="w-full" />
+    </InputGroup>
+    {{#if (eq this.mailer "smtp")}}
+        <InputGroup @name="SMTP Host" @value={{this.smtpHost}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Port" @type="number" @value={{this.smtpPort}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Encryption" @value={{this.smtpEncryption}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Username" @value={{this.smtpUsername}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Password" @type="password" @value={{this.smtpPassword}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Timeout" @value={{this.smtpTimeout}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Auth Mode" @value={{this.smtpAuth_mode}} disabled={{this.isLoading}} />
+    {{/if}}
+    <InputGroup @name="From Address" @helpText="Input the email address for Fleetbase to send emails from." @value={{this.fromAddress}} @placeholder="From Address" disabled={{this.isLoading}} />
+    <InputGroup @name="From Name" @helpText="Input the name for Fleetbase to send emails from." @value={{this.fromName}} @placeholder="From Name" disabled={{this.isLoading}} />
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</EmberWormhole>

console/app/components/configure/mail.js

@@ -0,0 +1,108 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ConfigureMailComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked isLoading = false;
+    @tracked testResponse;
+    @tracked mailers = [];
+    @tracked mailer = 'smtp';
+    @tracked fromAddress = null;
+    @tracked fromName = null;
+    @tracked smtpHost = 'smtp.mailgun.org';
+    @tracked smtpPort = 587;
+    @tracked smtpEncryption = 'tls';
+    @tracked smtpUsername = null;
+    @tracked smtpPassword = null;
+    @tracked smtpTimeout = null;
+    @tracked smtpAuth_mode = null;
+
+    /**
+     * Creates an instance of ConfigureFilesystemComponent.
+     * @memberof ConfigureFilesystemComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.loadConfigValues();
+    }
+
+    @action setConfigValues(config) {
+        for (const key in config) {
+            if (this[key] !== undefined) {
+                this[key] = config[key];
+            }
+        }
+    }
+
+    @action setMailer(mailer) {
+        this.mailer = mailer;
+    }
+
+    @action serializeSmtpConfig() {
+        return {
+            host: this.smtpHost,
+            port: this.smtpPort,
+            encryption: this.smtpEncryption,
+            username: this.smtpUsername,
+            password: this.smtpPassword,
+            timeout: this.smtpTimeout,
+            auth_mode: this.smtpAuth_mode,
+        };
+    }
+
+    @action loadConfigValues() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('settings/mail-config')
+            .then((response) => {
+                this.setConfigValues(response);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action test() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-mail-config', {
+                mailer: this.mailer,
+                from: {
+                    address: this.fromAddress,
+                    name: this.fromName,
+                },
+                smtp: this.serializeSmtpConfig(),
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action save() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/mail-config', {
+                mailer: this.mailer,
+                from: {
+                    address: this.fromAddress,
+                    name: this.fromName,
+                },
+                smtp: this.serializeSmtpConfig(),
+            })
+            .then(() => {
+                this.notifications.success('Mail configuration saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

console/app/components/configure/notification-channels.hbs

@@ -0,0 +1,52 @@
+<ContentPanel @title="APN Configutation" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="APN Key ID" @value={{this.apn.key_id}} disabled={{this.isLoading}} />
+    <InputGroup @name="APN Team ID" @value={{this.apn.team_id}} disabled={{this.isLoading}} />
+    <InputGroup @name="APN App Bundle ID" @value={{this.apn.app_bundle_id}} disabled={{this.isLoading}} />
+    {{!-- <InputGroup @name="APN Private Key" disabled={{this.isLoading}}>
+        <Textarea class="form-input w-full" @value={{this.apn.private_key_content}} placeholder="APN Private Key" rows="10" disabled={{this.isLoading}} />
+    </InputGroup> --}}
+    <InputGroup @wrapperClass="flex flex-row items-center">
+        <UploadButton @name="apn-key" @accept="text/plain,application/x-pem-file,application/x-pkcs12,application/x-x509-ca-cert,.p12,.pem,.p8" @onFileAdded={{this.uploadApnKey}} @buttonText="Upload P8 Key File" @uploadIcon="upload" class="w-auto m-0i mt-0i" />
+        {{#if this.apn.private_key_file}}
+            <div class="ml-2.5 text-sm dark:text-white text-black flex flex-row items-center border border-blue-500 rounded-lg px-2 py-0.5 -mt-1">
+                <FaIcon @icon="file-text" @size="sm" class="mr-2 dark:text-white text-black" />
+                <span>{{this.apn.private_key_file.original_filename}}</span>
+                <a href="javascript:;" class="text-red-500 ml-2" {{on "click" this.removeApnFile}}><FaIcon @icon="times" class="text-red-500" /></a>
+            </div>
+        {{/if}}
+    </InputGroup>
+    <InputGroup>
+        <Checkbox @label="APN Production" @value={{this.apn.production}} @onToggle={{fn (mut this.apn.production)}} @disabled={{this.isLoading}} />
+    </InputGroup>
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <div class="mt-3 rounded-lg bg-gray-900 shadow-inner p-3">
+        <div class="flex flex-col space-y-2">
+            <div class="flex flex-row items-center">
+                <div class="text-sm w-40">Title:</div>
+                <Input @value={{this.testTitle}} placeholder="Push Notification Title" class="form-input flex-1" />
+            </div>
+            <div class="flex flex-row items-center">
+                <div class="text-sm w-40">Message:</div>
+                <Input @value={{this.testMessage}} placeholder="Push Notification Message" class="form-input flex-1" />
+            </div>
+            <div class="flex flex-row items-center">
+                <div class="text-sm w-40">APN Device Token:</div>
+                <Input @value={{this.apnToken}} placeholder="APN Device Token" class="form-input flex-1" />
+            </div>
+            <div class="flex flex-row items-center">
+                <div class="text-sm w-40">FCM Device Token:</div>
+                <Input @value={{this.fcmToken}} placeholder="FCM Device Token" class="form-input flex-1" />
+            </div>
+        </div>
+        <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
+    </div>
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</EmberWormhole>

console/app/components/configure/notification-channels.js

@@ -0,0 +1,127 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ConfigureNotificationChannelsComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @service currentUser;
+    @tracked isLoading = false;
+    @tracked testResponse;
+    @tracked testTitle = 'Hello World from Fleetbase 🚀';
+    @tracked testMessage = 'This is a test push notification!';
+    @tracked apnToken;
+    @tracked fcmToken;
+    @tracked apn = {
+        key_id: '',
+        team_id: '',
+        app_bundle_id: '',
+        private_key_path: '',
+        private_key_file_id: '',
+        private_key_file: null,
+        production: true,
+    };
+    @tracked fcm = {
+        firebase_credentials_json: '',
+        firebase_database_url: '',
+        firebase_project_name: '',
+    };
+
+    constructor() {
+        super(...arguments);
+        this.loadConfigValues();
+    }
+
+    @action removeApnFile() {
+        const apnConfig = this.apn;
+        apnConfig.private_key_file = null;
+        apnConfig.private_key_file_id = '';
+        apnConfig.private_key_path = '';
+
+        this.apn = apnConfig;
+    }
+
+    @action uploadApnKey(file) {
+        try {
+            this.fetch.uploadFile.perform(
+                file,
+                {
+                    disk: 'local',
+                    path: `apn`,
+                    subject_uuid: this.currentUser.companyId,
+                    subject_type: `company`,
+                    type: `apn_key`,
+                },
+                (uploadedFile) => {
+                    const apnConfig = this.apn;
+                    apnConfig.private_key_file = uploadedFile;
+                    apnConfig.private_key_file_id = uploadedFile.id;
+                    apnConfig.private_key_path = uploadedFile.path;
+
+                    this.apn = apnConfig;
+                }
+            );
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action setConfigValues(config) {
+        for (const key in config) {
+            if (this[key] !== undefined) {
+                this[key] = config[key];
+            }
+        }
+    }
+
+    @action loadConfigValues() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('settings/notification-channels-config')
+            .then((response) => {
+                this.setConfigValues(response);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action save() {
+        this.isLoading = true;
+
+        const apnConfig = this.apn;
+        delete apnConfig.private_key_file;
+
+        this.fetch
+            .post('settings/notification-channels-config', {
+                apn: apnConfig,
+            })
+            .then(() => {
+                this.notifications.success("Notification channel's configuration saved.");
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action test() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-notification-channels-config', {
+                apn: this.apn,
+                title: this.testTitle,
+                message: this.testMessage,
+                apnToken: this.apnToken,
+                fcmToken: this.fcmToken,
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

console/app/components/configure/queue.hbs

@@ -0,0 +1,25 @@
+<ContentPanel @title="Queue" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Driver" @helpText="Select the default queue driver for Fleetbase to use.">
+        <Select @options={{this.connections}} @value={{this.driver}} @onSelect={{this.setDriver}} @placeholder="Select queue driver" disabled={{this.isLoading}} class="w-full" />
+    </InputGroup>
+    {{#if (eq this.driver "beanstalkd")}}
+        <InputGroup @name="Beanstalk Host" @value={{this.beanstalkdHost}} disabled={{this.isLoading}} />
+        <InputGroup @name="Beanstalk Queue" @value={{this.beanstalkdQueue}} />
+    {{/if}}
+    {{#if (eq this.driver "sqs")}}
+        <InputGroup @name="SQS Prefix" @value={{this.sqsPrefix}} disabled={{this.isLoading}} />
+        <InputGroup @name="SQS Queue" @value={{this.sqsQueue}} disabled={{this.isLoading}} />
+        <InputGroup @name="SQS Suffix" @value={{this.sqsSuffix}} disabled={{this.isLoading}} />
+    {{/if}}
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</EmberWormhole>

console/app/components/configure/queue.js

@@ -0,0 +1,91 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ConfigureQueueComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked isLoading = false;
+    @tracked testResponse;
+    @tracked connections = [];
+    @tracked driver = 'sync';
+    @tracked sqsPrefix = null;
+    @tracked sqsQueue = null;
+    @tracked sqsSuffix = null;
+    @tracked beanstalkdHost = 'localhost';
+    @tracked beanstalkdQueue = 'default';
+
+    /**
+     * Creates an instance of ConfigureQueueComponent.
+     * @memberof ConfigureQueueComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.loadConfigValues();
+    }
+
+    @action setConfigValues(config) {
+        for (const key in config) {
+            if (this[key] !== undefined) {
+                this[key] = config[key];
+            }
+        }
+    }
+
+    @action setDriver(driver) {
+        this.driver = driver;
+    }
+
+    @action loadConfigValues() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('settings/queue-config')
+            .then((response) => {
+                this.setConfigValues(response);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action save() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/queue-config', {
+                driver: this.driver,
+                sqs: {
+                    prefix: this.sqsPrefix,
+                    queue: this.sqsQueue,
+                    suffix: this.sqsSuffix,
+                },
+                beanstalkd: {
+                    host: this.beanstalkdHost,
+                    queue: this.beanstalkdQueue,
+                },
+            })
+            .then(() => {
+                this.notifications.success('Queue configuration saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action test() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-queue-config', {
+                queue: this.driver,
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

console/app/components/configure/services.hbs

@@ -0,0 +1,45 @@
+<ContentPanel @title="AWS" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="AWS Access Key" @value={{this.awsKey}} disabled={{this.isLoading}} />
+    <InputGroup @name="AWS Access Secret" @value={{this.awsSecret}} disabled={{this.isLoading}} />
+    <InputGroup @name="AWS Region" @value={{this.awsRegion}} disabled={{this.isLoading}} />
+</ContentPanel>
+
+<ContentPanel @title="Google Maps" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Google Maps API Key" @value={{this.googleMapsApiKey}} disabled={{this.isLoading}} />
+    <InputGroup @name="Google Maps Locale" @value={{this.googleMapsLocale}} disabled={{this.isLoading}} />
+</ContentPanel>
+
+<ContentPanel @title="Twilio" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Twilio SID" @value={{this.twilioSid}} disabled={{this.isLoading}} />
+    <InputGroup @name="Twilio Token" @value={{this.twilioToken}} disabled={{this.isLoading}} />
+    <InputGroup @name="Twilio From" @value={{this.twilioFrom}} disabled={{this.isLoading}} />
+    {{#if this.twilioTestResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.twilioTestResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.twilioTestResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.twilioTestResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.twilioTestResponse.message}}</span>
+        </div>
+    {{/if}}
+    <div class="flex flex-row items-center mt-3">
+        <Input @value={{this.twilioTestPhone}} @type="tel" placeholder="Send Test SMS Here" class="form-input form-input-sm" />
+        <Button @wrapperClass="ml-2" @icon="plug" @text="Test Twilio Config" @onClick={{this.testTwilio}} @isLoading={{this.isLoading}} @disabled={{not this.twilioTestPhone}} />
+    </div>
+</ContentPanel>
+
+<ContentPanel @title="Sentry" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Sentry DSN" @value={{this.sentryDsn}} disabled={{this.isLoading}} />
+    {{#if this.sentryTestResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.sentryTestResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.sentryTestResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.sentryTestResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.sentryTestResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Sentry Config" @onClick={{this.testSentry}} @isLoading={{this.isLoading}} />
+</ContentPanel>
+
+<ContentPanel @title="IP Info" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="IP Info API Key" @value={{this.ipinfoApiKey}} disabled={{this.isLoading}} />
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</EmberWormhole>

console/app/components/configure/services.js

@@ -0,0 +1,130 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ConfigureServicesComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked isLoading = false;
+
+    /** aws service */
+    @tracked awsKey = null;
+    @tracked awsSecret = null;
+    @tracked awsRegion = null;
+
+    /** ipinfo service */
+    @tracked ipinfoApiKey = null;
+
+    /** google maps service */
+    @tracked googleMapsApiKey = null;
+    @tracked googleMapsLocale = 'us';
+
+    /** twilio service */
+    @tracked twilioSid = null;
+    @tracked twilioToken = null;
+    @tracked twilioFrom = null;
+    @tracked twilioTestPhone = null;
+    @tracked twilioTestResponse;
+
+    /** sentry service */
+    @tracked sentryDsn = null;
+    @tracked sentryTestResponse;
+
+    /**
+     * Creates an instance of ConfigureServicesComponent.
+     * @memberof ConfigureServicesComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.loadConfigValues();
+    }
+
+    @action setConfigValues(config) {
+        for (const key in config) {
+            if (this[key] !== undefined) {
+                this[key] = config[key];
+            }
+        }
+    }
+
+    @action loadConfigValues() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('settings/services-config')
+            .then((response) => {
+                this.setConfigValues(response);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action save() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/services-config', {
+                aws: {
+                    key: this.awsKey,
+                    secret: this.awsSecret,
+                    region: this.awsRegion,
+                },
+                ipinfo: {
+                    api_key: this.ipinfoApiKey,
+                },
+                googleMaps: {
+                    api_key: this.googleMapsApiKey,
+                    locale: this.googleMapsLocale,
+                },
+                twilio: {
+                    sid: this.twilioSid,
+                    token: this.twilioToken,
+                    from: this.twilioFrom,
+                },
+                sentry: {
+                    dsn: this.sentryDsn,
+                },
+            })
+            .then(() => {
+                this.notifications.success('Services configuration saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action testTwilio() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-twilio-config', {
+                sid: this.twilioSid,
+                token: this.twilioToken,
+                from: this.twilioFrom,
+                phone: this.twilioTestPhone,
+            })
+            .then((response) => {
+                this.twilioTestResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action testSentry() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-sentry-config', {
+                dsn: this.sentryDsn,
+            })
+            .then((response) => {
+                this.sentryTestResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

console/app/components/configure/socket.hbs

@@ -0,0 +1,46 @@
+<ContentPanel @title="SocketCluster Connection" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <p class="mb-4">The SocketCluster configuration cannot be changed at this time.</p>
+    <div id="output" class="font-mono rounded-lg max-h-full px-6 py-4 overflow-y-scroll bg-black shadow-inner dark:shadow-none">
+        <div class="flex items-center justify-between mb-4">
+            <div class="block w-1/2 font-mono text-sm font-semibold text-green-300">
+                Output
+            </div>
+            {{#if this.events.length}}
+                <div class="flex items-center justify-end w-1/2 text-sm text-green-300">
+                    <Spinner @iconClass="green-loader" />
+
+                    <span class="ml-2 text-sm font-mono">
+                        Awaiting events...
+                    </span>
+                </div>
+            {{/if}}
+        </div>
+
+        <div>
+            {{#each this.events as |event|}}
+                <div class="mb-3 text-sm font-mono rounded-lg shadow-sm flex flex-row">
+                    <div class="text-{{event.color}}-300 uppercase text-sm font-mono pr-2 flex-shrink-0">
+                        [{{event.time}}]:
+                    </div>
+                    <div class="text-{{event.color}}-300 text-sm font-mono">
+                        {{html-safe event.content}}
+                    </div>
+                </div>
+            {{else}}
+                <div class="flex items-center mt-6 text-green-300">
+                    <Spinner @iconClass="green-loader" />
+                    <span class="ml-2 text-sm font-mono">
+                        Awaiting events...
+                    </span>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Socket Connection" @onClick={{this.testSocketConnection}} @isLoading={{this.isLoading}} />
+</ContentPanel>

console/app/components/configure/socket.js

@@ -0,0 +1,165 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { format } from 'date-fns';
+
+export default class ConfigureSocketComponent extends Component {
+    /**
+     * Inject the `router` service
+     *
+     * @var {Service}
+     * @memberof ConfigureSocketComponent
+     */
+    @service router;
+
+    /**
+     * Inject the `fetch` service
+     *
+     * @var {Service}
+     * @memberof ConfigureSocketComponent
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @var {Service}
+     * @memberof ConfigureSocketComponent
+     */
+    @service notifications;
+
+    /**
+     * Inject the `socket` service
+     *
+     * @var {Service}
+     * @memberof ConfigureSocketComponent
+     */
+    @service socket;
+
+    /**
+     * State of the test request.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    @tracked isLoading = null;
+
+    /**
+     * The response form testing the socket.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    @tracked testResponse = null;
+
+    /**
+     * Incoming events logged from test socket channel.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    @tracked events = [];
+
+    /**
+     * Date format to use for socket console events.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    consoleDateFormat = 'MMM-dd HH:mm';
+
+    /**
+     * Creates an instance of ConfigureSocketComponent.
+     * @memberof ConfigureSocketComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.listenToTestSocket();
+    }
+
+    /**
+     * Send a request to test the socket connection.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    @action testSocketConnection() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-socket', {
+                channel: 'test',
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Opens socket and logs all incoming events.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    @action async listenToTestSocket() {
+        // Create SocketClusterClient
+        const socket = this.socket.instance();
+
+        // Listen for socket connection errors
+        (async () => {
+            // eslint-disable-next-line no-unused-vars
+            for await (let event of socket.listener('error')) {
+                // Push an event or notification for socket connection here
+                this.events.pushObject({
+                    time: format(new Date(), this.consoleDateFormat),
+                    content: 'Socket connection error!',
+                    color: 'red',
+                });
+            }
+        })();
+
+        // Listen for socket connection
+        (async () => {
+            // eslint-disable-next-line no-unused-vars
+            for await (let event of socket.listener('connect')) {
+                // Push an event or notification for socket connection here
+                this.events.pushObject({
+                    time: format(new Date(), this.consoleDateFormat),
+                    content: 'Socket is connected',
+                    color: 'green',
+                });
+            }
+        })();
+
+        // Listed on company channel
+        const channel = socket.subscribe('test');
+
+        // Listen for channel subscription
+        (async () => {
+            // eslint-disable-next-line no-unused-vars
+            for await (let event of channel.listener('subscribe')) {
+                // Push an event or notification for channel subscription here
+                this.events.pushObject({
+                    time: format(new Date(), this.consoleDateFormat),
+                    content: `Socket subscribed to test channel`,
+                    color: 'blue',
+                });
+            }
+        })();
+
+        // Listen for channel subscription
+        (async () => {
+            for await (let data of channel) {
+                this.events.pushObject({
+                    time: format(new Date(), this.consoleDateFormat),
+                    content: JSON.stringify(data, undefined, 2),
+                    color: 'green',
+                });
+            }
+        })();
+
+        // disconnect when transitioning
+        this.router.on('routeWillChange', () => {
+            channel.close();
+            this.events = [];
+        });
+    }
+}

console/app/components/dashboard.hbs

@@ -0,0 +1,7 @@
+<div class="fleetbase-dashboard-grid">
+    <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
+        {{#each this.dashboards as |dashboard index|}}
+            <Dashboard::Create @index={{index}} @dashboard={{dashboard}} />
+        {{/each}}
+    </div>
+</div>

console/app/components/dashboard.js

@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import loadExtensions from '@fleetbase/ember-core/utils/load-extensions';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency-decorators';
+
+export default class DashboardComponent extends Component {
+    @service fetch;
+    @tracked extensions;
+    @tracked dashboards = [];
+    @tracked isLoading;
+
+    constructor() {
+        super(...arguments);
+        this.loadExtensions();
+    }
+
+    @action async loadExtensions() {
+        this.extensions = await loadExtensions();
+        this.loadDashboardBuilds.perform();
+    }
+
+    @task *loadDashboard(extension) {
+        this.isLoading = extension.extension;
+        let dashboardBuild;
+
+        try {
+            dashboardBuild = yield this.fetch.get(extension.fleetbase.dashboard, {}, { namespace: '' });
+        } catch {
+            return;
+        }
+
+        if (isArray(dashboardBuild)) {
+            this.dashboards = [...this.dashboards, ...dashboardBuild.map((build) => ({ ...build, extension }))];
+        }
+    }
+
+    @task({ enqueue: true, maxConcurrency: 1 }) *loadDashboardBuilds() {
+        const extensionsWithDashboards = this.extensions.filter((extension) => typeof extension.fleetbase?.dashboard === 'string');
+
+        for (let i = 0; i < extensionsWithDashboards.length; i++) {
+            const extension = extensionsWithDashboards[i];
+            yield this.loadDashboard.perform(extension);
+        }
+    }
+}

console/app/components/dashboard/count.hbs

@@ -0,0 +1,6 @@
+<div class="dashboard-component-count lg:col-span-2">
+    <h3 class="text-sm dark:text-gray-100 text-black mb-4">{{@options.title}}</h3>
+    <h1 class="text-3xl font-bold dark:text-gray-100 text-black mb-4">
+        {{this.displayValue}}
+    </h1>
+</div>

console/app/components/dashboard/count.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { computed } from '@ember/object';
+import formatCurrency from '@fleetbase/ember-ui/utils/format-currency';
+import formatMeters from '@fleetbase/ember-ui/utils/format-meters';
+import formatBytes from '@fleetbase/ember-ui/utils/format-bytes';
+import formatDuration from '@fleetbase/ember-ui/utils/format-duration';
+import formatDate from '@fleetbase/ember-ui/utils/format-date';
+
+export default class DashboardCountComponent extends Component {
+    @computed('args.options.{currency,dateFormat,format,value}') get displayValue() {
+        let format = this.args.options?.format;
+        let currency = this.args.options?.currency;
+        let dateFormat = this.args.options?.dateFormat;
+        let value = this.args.options?.value;
+
+        switch (format) {
+            case 'money':
+                value = formatCurrency([value, currency]);
+                break;
+
+            case 'meters':
+                value = formatMeters([value]);
+                break;
+
+            case 'bytes':
+                value = formatBytes([value]);
+                break;
+
+            case 'duration':
+                value = formatDuration([value]);
+                break;
+
+            case 'date':
+                value = formatDate([value, dateFormat]);
+                break;
+
+            default:
+                break;
+        }
+
+        return value;
+    }
+}

console/app/components/dashboard/create.hbs

@@ -0,0 +1,18 @@
+<div class="col-span-{{or @dashboard.size 12}}">
+    <div class="dashboard-title flex flex-col lg:flex-row lg:items-center">
+        <div class="flex flex-row items-center mb-2 lg:mb-0">
+            {{#if this.isLoading}}
+                <Spinner class="mr-2i" />
+            {{/if}}
+            <h2 class="text-sm font-bold dark:text-gray-100 text-black">{{@dashboard.title}}</h2>
+        </div>
+        <div>
+            <Dashboard::QueryParams @params={{@dashboard.queryParams}} @onChange={{this.onQueryParamsChanged}} />
+        </div>
+    </div>
+    <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
+        {{#each this.dashboard.widgets as |widget|}}
+            {{component (concat "dashboard/" widget.component) options=widget.options}}
+        {{/each}}
+    </div>
+</div>

console/app/components/dashboard/create.js

@@ -0,0 +1,41 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { task } from 'ember-concurrency-decorators';
+
+export default class DashboardCreateComponent extends Component {
+    @service fetch;
+    @tracked isLoading = false;
+    @tracked dashboard;
+
+    constructor() {
+        super(...arguments);
+        this.dashboard = this.args.dashboard;
+    }
+
+    @action onQueryParamsChanged(changedParams) {
+        this.reloadDashboard.perform(changedParams);
+    }
+
+    @task *reloadDashboard(params) {
+        const { extension } = this.args.dashboard;
+        const index = this.args.index;
+        let dashboards = [];
+
+        this.isLoading = true;
+
+        try {
+            dashboards = yield this.fetch.get(extension.fleetbase.dashboard, params, { namespace: '' });
+        } catch {
+            return;
+        }
+
+        this.isLoading = false;
+
+        if (isArray(dashboards)) {
+            this.dashboard = dashboards.objectAt(index);
+        }
+    }
+}

console/app/components/dashboard/query-params.hbs

@@ -0,0 +1,8 @@
+<div class="flex flex-row items-center space-x-3" ...attributes>
+    {{#each-in @params as |param options|}}
+        <div class="flex flex-col lg:flex-row lg:items-center">
+            <label class="hidden lg:flex mr-2 text-sm">{{humanize param}}:</label>
+            {{component options.component onChange=(fn this.onChange param) placeholder=(humanize param) class="form-input-sm"}}
+        </div>
+    {{/each-in}}
+</div>

console/app/components/dashboard/query-params.js

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DashboardQueryParamsComponent extends Component {
+    @tracked changedParams = {};
+
+    @action onChange(param, value) {
+        const component = this.args.params[param].component;
+
+        if (component === 'date-picker') {
+            value = value.formattedDate;
+        }
+
+        this.changedParams = { ...this.changedParams, [param]: value };
+
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(this.changedParams);
+        }
+    }
+}

console/app/components/fleetbase-blog.hbs

@@ -0,0 +1,27 @@
+<div class="fleetbase-blog" ...attributes>
+    <div class="border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm flex flex-col">
+        <div class="flex flex-row items-center justify-between rounded-t-lg px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+            <span class="text-base font-bold text-black dark:text-gray-100">Fleetbase Blog</span>
+            <a href="https://www.fleetbase.io/blog" target="_blog" class="flex flex-row items-center text-sm">
+                <FaIcon @icon="arrow-up-right-from-square" @size="xs" class="mr-2" />
+                <span>Visit Blog</span>
+            </a>
+        </div>
+        <div class="px-4 py-2.5">
+            {{#if this.isLoading}}
+                <Spinner />
+            {{else}}
+                <ul class="space-y-2">
+                    {{#each this.posts as |post|}}
+                        <li class="text-sm flex flex-col lg:flex-row">
+                            <a href={{post.link}} target="_blog" class="text-black truncate max-w-lg dark:text-gray-200">
+                                <span class="truncate">{{post.title}}</span>
+                            </a>
+                            <span class="ml-1 text-gray-900 dark:text-gray-400">- {{post.pubDate}}</span>
+                        </li>
+                    {{/each}}
+                </ul>
+            {{/if}}
+        </div>
+    </div>
+</div>

console/app/components/fleetbase-blog.js

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class FleetbaseBlogComponent extends Component {
+    @service fetch;
+    @tracked posts = [];
+    @tracked isLoading = false;
+
+    constructor() {
+        super(...arguments);
+        this.loadBlogPosts();
+    }
+
+    @action loadBlogPosts() {
+        this.isLoading = true;
+
+        return this.fetch
+            .get('lookup/fleetbase-blog')
+            .then((response) => {
+                this.posts = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

console/app/components/github-card.hbs

@@ -0,0 +1,49 @@
+<div class="fleetbase-github-card relative flex-1 w-full" ...attributes>
+    <div class="border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm flex flex-col">
+        {{#if this.isLoading}}
+            <div class="p-4">
+                <Spinner />
+            </div>
+        {{else}}
+            <div class="flex flex-row p-3 border-b dark:border-gray-700 border-gray-200">
+                <div class="w-12 flex-shrink-0"><img src={{this.data.owner.avatar_url}} alt="fleetbase/fleetbase" class="rounded-full w-8 h-8" width="32" height="32" /></div>
+                <div class="flex-1 -mt-2">
+                    <div class="flex flex-1 flex-row items-center justify-between mb-2">
+                        <a href={{this.data.html_url}} target="_github" class="dark:text-gray-100 text-black text-base font-semibold">{{this.data.full_name}}</a>
+                        <a href={{this.data.html_url}} target="_github" class="btn btn-xs btn-default">
+                            <FaIcon @icon="star" class="text-yellow-400" />
+                            <span class="hidden truncate lg:flex ml-2.5">Star on Github</span>
+                        </a>
+                    </div>
+                    <p class="dark:text-gray-100 text-black text-sm">{{this.data.description}}</p>
+                    <div class="flex-grow-0 flex mt-2">
+                        <a href={{this.releaseUrl}} class="rounded-lg px-2 py-1 flex flex-row items-center text-xs text-white font-bold font-mono">
+                            <FaIcon @icon="arrow-up-right-from-square" @size="xs" class="mr-2" />
+                            <span>Latest Release: {{this.latestRelease.name}}</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="rounded-b-lg px-4 py-2">
+                <div class="grid grid-cols-12 gap-2">
+                    <div class="col-span-3 dark:text-gray-100 text-black text-xs flex flex-row">
+                        <span class="font-bold mr-1">{{this.data.stargazers_count}}</span>
+                        <span>Stars</span>
+                    </div>
+                    <div class="col-span-3 dark:text-gray-100 text-black text-xs flex flex-row">
+                        <span class="font-bold mr-1">{{this.data.subscribers_count}}</span>
+                        <span>Watchers</span>
+                    </div>
+                    <div class="col-span-3 dark:text-gray-100 text-black text-xs flex flex-row">
+                        <span class="font-bold mr-1">{{this.data.forks_count}}</span>
+                        <span>Forks</span>
+                    </div>
+                    <div class="col-span-3 dark:text-gray-100 text-black text-xs flex flex-row">
+                        <span class="font-bold mr-1">{{this.data.open_issues_count}}</span>
+                        <span class="truncate"><span class="hidden lg:inline-flex">Open</span> Issues</span>
+                    </div>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</div>

console/app/components/github-card.js

@@ -0,0 +1,58 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, computed } from '@ember/object';
+import { isArray } from '@ember/array';
+import { isBlank } from '@ember/utils';
+import fetch from 'fetch';
+
+export default class GithubCardComponent extends Component {
+    @tracked data;
+    @tracked tags;
+    @tracked isLoading = false;
+
+    @computed('tags.length') get latestRelease() {
+        if (isArray(this.tags) && this.tags.length) {
+            return this.tags[0];
+        }
+
+        return { name: 'v0.0.1' };
+    }
+
+    @computed('data.releases_url', 'latestRelease.name') get releaseUrl() {
+        let url = 'https://github.com/fleetbase/fleetbase/releases';
+
+        if (!isBlank(this.latestRelease?.name)) {
+            url += '/tag/' + this.latestRelease.name;
+        }
+
+        return url;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadRepositoryData();
+        this.loadRepositoryTags();
+    }
+
+    @action loadRepositoryData() {
+        this.isLoading = true;
+
+        return fetch('https://api.github.com/repos/fleetbase/fleetbase')
+            .then((response) => {
+                return response.json().then((data) => {
+                    this.data = data;
+                });
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action loadRepositoryTags() {
+        return fetch('https://api.github.com/repos/fleetbase/fleetbase/tags').then((response) => {
+            return response.json().then((data) => {
+                this.tags = data;
+            });
+        });
+    }
+}

console/app/components/locale-selector.hbs

@@ -0,0 +1,30 @@
+<div class="next-user-button" ...attributes>
+    <BasicDropdown @defaultClass={{@wrapperClass}} @onOpen={{@onOpen}} @onClose={{@onClose}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @renderInPlace={{or @renderInPlace true}} @initiallyOpened={{@initiallyOpened}} as |dd|>
+        <dd.Trigger class={{@triggerClass}}>
+            <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
+                <FaIcon @icon="globe" @size="sm" />
+            </div>
+        </dd.Trigger>
+        <dd.Content class={{@contentClass}}>
+            <div class="next-dd-menu {{@dropdownMenuClass}} {{if dd.isOpen 'is-open'}}">
+                {{#each-in this.availableLocales as |key country|}}
+                    <div class="px-1">
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.changeLocale key)}}>
+                            <div class="flex flex-row items-center justify-between w-full">
+                                <div class="flex-1">
+                                    <span class="mr-1">{{country.emoji}}</span>
+                                    <span>{{country.language}}</span>
+                                </div>
+                                {{#if (eq this.currentLocale key)}}
+                                    <div>
+                                        <FaIcon @icon="check" class="text-green-400" />
+                                    </div>
+                                {{/if}}
+                            </div>
+                        </a>
+                    </div>
+                {{/each-in}}
+            </div>
+        </dd.Content>
+    </BasicDropdown>
+</div>

console/app/components/locale-selector.js

@@ -0,0 +1,144 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency-decorators';
+
+export default class LocaleSelectorComponent extends Component {
+    /**
+     * Inject the intl service.
+     *
+     * @memberof LocaleSelectorComponent
+     */
+    @service intl;
+
+    /**
+     * Inject the intl service.
+     *
+     * @memberof LocaleSelectorComponent
+     */
+    @service fetch;
+
+    /**
+     * Tracks all the available locales.
+     *
+     * @memberof LocaleSelectorComponent
+     */
+    @tracked locales = [];
+
+    /**
+     * All available countries data.
+     *
+     * @memberof LocaleSelectorComponent
+     */
+    @tracked countries = [];
+
+    /**
+     * The current locale in use.
+     *
+     * @memberof LocaleSelectorComponent
+     */
+    @tracked currentLocale;
+
+    /**
+     * Creates an instance of LocaleSelectorComponent.
+     * @memberof LocaleSelectorComponent
+     */
+    constructor() {
+        super(...arguments);
+
+        this.locales = this.intl.locales;
+        this.currentLocale = this.intl.primaryLocale;
+        this.loadAvailableCountries.perform();
+
+        // Check for locale change
+        this.intl.onLocaleChanged(() => {
+            this.currentLocale = this.intl.primaryLocale;
+        });
+    }
+
+    /**
+     * Handles the change of locale.
+     * @param {string} selectedLocale - The selected locale.
+     * @returns {void}
+     * @memberof LocaleSelectorComponent
+     * @method changeLocale
+     * @instance
+     * @action
+     */
+    @action changeLocale(selectedLocale) {
+        this.currentLocale = selectedLocale;
+        this.intl.setLocale(selectedLocale);
+        // Persist to server
+        this.saveUserLocale.perform(selectedLocale);
+    }
+
+    /**
+     * Loads available countries asynchronously.
+     * @returns {void}
+     * @memberof LocaleSelectorComponent
+     * @method loadAvailableCountries
+     * @instance
+     * @task
+     * @generator
+     */
+    @task *loadAvailableCountries() {
+        this.countries = yield this.fetch.get('lookup/countries', { columns: ['name', 'cca2', 'flag', 'emoji', 'languages'] });
+        this.availableLocales = this._createAvailableLocaleMap();
+    }
+
+    /**
+     * Saves the user's selected locale to the server.
+     * @param {string} locale - The user's selected locale.
+     * @returns {void}
+     * @memberof LocaleSelectorComponent
+     * @method saveUserLocale
+     * @instance
+     * @task
+     * @generator
+     */
+    @task *saveUserLocale(locale) {
+        yield this.fetch.post('users/locale', { locale });
+    }
+
+    /**
+     * Creates a map of available locales.
+     * @private
+     * @returns {Object} - The map of available locales.
+     * @memberof LocaleSelectorComponent
+     * @method _createAvailableLocaleMap
+     * @instance
+     */
+    _createAvailableLocaleMap() {
+        const localeMap = {};
+
+        for (let i = 0; i < this.locales.length; i++) {
+            const locale = this.locales.objectAt(i);
+
+            localeMap[locale] = this._findCountryDataForLocale(locale);
+        }
+
+        return localeMap;
+    }
+
+    /**
+     * Finds country data for a given locale.
+     * @private
+     * @param {string} locale - The locale to find country data for.
+     * @returns {Object|null} - The country data or null if not found.
+     * @memberof LocaleSelectorComponent
+     * @method _findCountryDataForLocale
+     * @instance
+     */
+    _findCountryDataForLocale(locale) {
+        const localeCountry = locale.split('-')[1];
+        const country = this.countries.find((country) => country.cca2.toLowerCase() === localeCountry);
+
+        if (country) {
+            // get the language
+            country.language = Object.values(country.languages)[0];
+        }
+
+        return country;
+    }
+}

console/app/components/two-fa-enforcement-alert.hbs

@@ -0,0 +1,14 @@
+{{#if this.shouldRender}}
+    <InfoBlock @icon="triangle-exclamation" class="two-fa-enforcement-alert bg-yellow-100 border-2 border-yellow-600 dark:border-yellow-500 rounded-lg py-3.5 px-5">
+        <div class="flex flex-row justify-between">
+            <div class="flex-1 pr-2">
+                <p class="text-sm dark:text-yellow-900 mb-2">
+                    {{t "component.two-fa-enforcement-alert.message"}}
+                </p>
+            </div>
+            <div class="flex-shrink-0">
+                <Button id="two-fa-setup-button" @text={{t "component.two-fa-enforcement-alert.button-text"}} @icon="shield-halved" @type="warning" @buttonType="button" @onClick={{this.transitionToTwoFactorSettings}} />
+            </div>
+        </div>
+    </InfoBlock>
+{{/if}}

console/app/components/two-fa-enforcement-alert.js

@@ -0,0 +1,74 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency-decorators';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+/**
+ * Glimmer component for handling notification enforcement.
+ *
+ * @class EnforceNotificationComponent
+ * @extends Component
+ */
+export default class TwoFaEnforcementAlertComponent extends Component {
+    /**
+     * Flag to determine whether the component should render or not.
+     *
+     * @property {boolean} shouldRender
+     * @default false
+     * @tracked
+     */
+    @tracked shouldRender = false;
+
+    /**
+     * Ember Router service for transitioning between routes.
+     *
+     * @type {RouterService}
+     */
+    @service router;
+
+    /**
+     * Fetch service for making HTTP requests.
+     *
+     * @property {FetchService} fetch
+     * @inject
+     */
+    @service fetch;
+
+    /**
+     * Constructor method for the ConsoleAccountAuthController.
+     *
+     * @constructor
+     */
+    constructor() {
+        super(...arguments);
+        this.checkTwoFactorEnforcement.perform();
+    }
+
+    /**
+     * Transition to the users auth page.
+     *
+     * @method transitionToTwoFa
+     * @memberof ConsoleHomeController
+     */
+    @action transitionToTwoFactorSettings() {
+        this.router.transitionTo('console.account.auth');
+    }
+
+    @task *checkTwoFactorEnforcement() {
+        const shouldRender = yield this.fetch.get('two-fa/enforce').catch((error) => {
+            this.notifications.serverError(error);
+        });
+
+        /**
+         * Task to check whether two-factor authentication enforcement is required.
+         *
+         * @method checkTwoFactorEnforcement
+         * @memberof TwoFaEnforcementAlertComponent
+         * @task
+         */
+        if (shouldRender) {
+            this.shouldRender = shouldRender.shouldEnforce;
+        }
+    }
+}

console/app/components/two-fa-settings.hbs

@@ -0,0 +1,31 @@
+<div class="flex items-center space-x-4">
+    <label class="text-base font-medium">Enable Two-Factor Authentication</label>
+    <Toggle @isToggled={{this.isTwoFaEnabled}} @onToggle={{this.onTwoFaToggled}} />
+</div>
+
+{{#if this.isTwoFaEnabled}}
+    <div class="mt-6">
+        {{#if this.showEnforceOption}}
+            <div class="flex items-center space-x-4 mb-6">
+                <label class="text-base font-medium">Require Users to Set-Up 2FA</label>
+                <Toggle @isToggled={{this.isTwoFaEnforced}} @onToggle={{this.onTwoFaEnforcedToggled}} />
+            </div>
+        {{/if}}
+        {{#if this.showMethodSelection}}
+            <label class="text-base font-medium">Choose an authentication method</label>
+            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">In addition to your username and password, you'll have to enter a code (delivered via app or SMS) to sign in to your account</p>
+            {{#each @twoFaMethods as |method|}}
+                <div class="border rounded-lg px-4 py-3 mt-2 transition duration-300 {{if (eq this.selectedTwoFaMethod method.key) 'border-blue-500' 'border-gray-200 dark:border-gray-700'}}">
+                    <input type="radio" name="2fa-method" id="{{method.name}}" checked={{eq this.selectedTwoFaMethod method.key}} {{on "change" (fn this.onTwoFaSelected method.key)}} />
+                    <label for="{{method.name}}">
+                        {{method.name}}
+                        {{#if method.recommended}}
+                            <span class="bg-blue-500 rounded-xl text-white px-2 py-1 ml-2 text-xs font-semibold">Recommended</span>
+                        {{/if}}
+                        <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">{{method.description}}</p>
+                    </label>
+                </div>
+            {{/each}}
+        {{/if}}
+    </div>
+{{/if}}

console/app/components/two-fa-settings.js

@@ -0,0 +1,169 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { inject as service } from '@ember/service';
+
+/**
+ * Default Two-Factor Authentication method when not explicitly selected.
+ *
+ * @property {string} DEFAULT_2FA_METHOD
+ * @private
+ */
+const DEFAULT_2FA_METHOD = 'email';
+
+/**
+ * Glimmer component for managing Two-Factor Authentication settings.
+ *
+ * @class TwoFaSettingsComponent
+ * @extends Component
+ */
+export default class TwoFaSettingsComponent extends Component {
+    /**
+     * The fetch service for making HTTP requests.
+     *
+     * @property {Service} fetch
+     * @public
+     */
+    @service fetch;
+
+    /**
+     * The notifications service for displaying user notifications.
+     *
+     * @property {Service} notifications
+     * @public
+     */
+    @service notifications;
+
+    /**
+     * The currently selected Two-Factor Authentication method.
+     *
+     * @property {string} selectedTwoFaMethod
+     * @public
+     */
+    @tracked selectedTwoFaMethod;
+
+    /**
+     * Indicates whether Two-Factor Authentication is currently enabled.
+     *
+     * @property {boolean} isTwoFaEnabled
+     * @public
+     */
+    @tracked isTwoFaEnabled;
+
+    /**
+     * Indicates whether Two-Factor Authentication is required for all users.
+     *
+     * @property {boolean} isTwoFaEnforced
+     * @public
+     */
+    @tracked isTwoFaEnforced;
+
+    /**
+     * Indicates whether the settings should render an option to `enforce`
+     * Enforce is a flag that indicates that users either under a company or system must setup 2FA.
+     *
+     * @property {boolean} showEnforceOption
+     * @public
+     */
+    @tracked showEnforceOption;
+
+    /**
+     * Indicates whether the settings should render an option to select 2fa `mn=ethod`
+     * Method is a flag that indicates which method users can receive a 2FA code from.
+     *
+     * @property {boolean} showEnforceOption
+     * @public
+     */
+    @tracked showMethodSelection;
+
+    /**
+     * Class constructor to initialize the component.
+     *
+     * @constructor
+     * @param {Object} owner - The owner of the component.
+     * @param {Object} options - Options passed during component instantiation.
+     * @param {Object} options.twoFaSettings - The current Two-Factor Authentication settings.
+     * @param {Array} options.twoFaMethods - Available Two-Factor Authentication methods.
+     */
+    constructor(owner, { twoFaSettings, twoFaMethods, showEnforceOption, showMethodSelection = true }) {
+        super(...arguments);
+
+        const userSelectedMethod = isArray(twoFaMethods) ? twoFaMethods.find(({ key }) => key === twoFaSettings.method) : null;
+
+        this.showMethodSelection = showMethodSelection === true;
+        this.showEnforceOption = showEnforceOption === true;
+        this.isTwoFaEnabled = twoFaSettings.enabled === true;
+        this.isTwoFaEnforced = twoFaSettings.enforced === true;
+        this.selectedTwoFaMethod = userSelectedMethod ? userSelectedMethod.key : DEFAULT_2FA_METHOD;
+    }
+
+    /**
+     * Action handler for toggling Two-Factor Authentication.
+     *
+     * @method onTwoFaToggled
+     * @param {boolean} isTwoFaEnabled - Indicates whether Two-Factor Authentication is enabled.
+     * @return {void}
+     * @public
+     */
+    @action onTwoFaToggled(isTwoFaEnabled) {
+        this.isTwoFaEnabled = isTwoFaEnabled;
+
+        if (isTwoFaEnabled) {
+            const recommendedMethod = isArray(this.args.twoFaMethods) ? this.args.twoFaMethods.find((method) => method.recommended) : null;
+            if (recommendedMethod) {
+                this.selectedTwoFaMethod = recommendedMethod.key;
+            }
+        } else {
+            this.selectedTwoFaMethod = null;
+        }
+
+        if (typeof this.args.onTwoFaToggled === 'function') {
+            this.args.onTwoFaToggled(...arguments);
+        }
+
+        if (typeof this.args.onTwoFaMethodSelected === 'function') {
+            this.args.onTwoFaMethodSelected(this.selectedTwoFaMethod);
+        }
+    }
+
+    /**
+     * Action handler for toggling Two-Factor Authentication.
+     *
+     * @method onTwoFaEnforcedToggled
+     * @param {boolean} isTwoFaEnforced - Indicates whether Two-Factor Authentication is enabled.
+     * @return {void}
+     * @public
+     */
+    @action onTwoFaEnforcedToggled(isTwoFaEnforced) {
+        this.isTwoFaEnforced = isTwoFaEnforced;
+
+        if (typeof this.args.onTwoFaEnforcedToggled === 'function') {
+            this.args.onTwoFaEnforcedToggled(...arguments);
+        }
+    }
+
+    /**
+     * Action handler for selecting a Two-Factor Authentication method.
+     *
+     * @method onTwoFaSelected
+     * @param {string} method - The selected Two-Factor Authentication method.
+     * @return {void}
+     * @public
+     */
+    @action onTwoFaSelected(method) {
+        this.selectedTwoFaMethod = method;
+
+        if (typeof this.args.onTwoFaMethodSelected === 'function') {
+            this.args.onTwoFaMethodSelected(...arguments);
+        }
+    }
+
+    @action onRequireUsersToSetUpToggled(isTwoFaEnforced) {
+        this.isTwoFaEnforced = isTwoFaEnforced;
+
+        if (typeof this.args.onTwoFaEnforcedToggled === 'function') {
+            this.args.onTwoFaEnforcedToggled(isTwoFaEnforced);
+        }
+    }
+}

console/app/controllers/application.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ApplicationController extends Controller {}

console/app/controllers/auth/forgot-password.js

@@ -0,0 +1,75 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class AuthForgotPasswordController extends Controller {
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `intl` service
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @service intl;
+
+    /**
+     * The email variable
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @tracked email;
+
+    /**
+     * The loading state
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @tracked isLoading;
+
+    /**
+     * Indicator if request has been sent.
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @tracked isSent = false;
+
+    /**
+     * Sends a secure magic reset link to the user provided email.
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @action sendSecureLink(event) {
+        // firefox patch
+        event.preventDefault();
+
+        const { email } = this;
+
+        this.isLoading = true;
+
+        this.fetch
+            .post('auth/get-magic-reset-link', { email })
+            .then(() => {
+                this.notifications.success(this.intl.t('auth.forgot-password.success-message'));
+                this.isSent = true;
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

console/app/controllers/auth/login.js

@@ -0,0 +1,285 @@
+import Controller, { inject as controller } from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import pathToRoute from '@fleetbase/ember-core/utils/path-to-route';
+
+export default class AuthLoginController extends Controller {
+    /**
+     * Inject the `forgotPassword` controller
+     *
+     * @var {Controller}
+     */
+    @controller('auth.forgot-password') forgotPasswordController;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @var {Service}
+     */
+    @service notifications;
+
+    /**
+     * Inject the `urlSearchParams` service
+     *
+     * @var {Service}
+     */
+    @service urlSearchParams;
+
+    /**
+     * Inject the `session` service
+     *
+     * @var {Service}
+     */
+    @service session;
+
+    /**
+     * Inject the `router` service
+     *
+     * @var {Service}
+     */
+    @service router;
+
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
+    /**
+     * Inject the `fetch` service
+     *
+     * @var {Service}
+     */
+    @service fetch;
+
+    /**
+     * Whether or not to remember the users session
+     *
+     * @var {Boolean}
+     */
+    @tracked rememberMe = false;
+
+    /**
+     * The identity to authenticate with
+     *
+     * @var {String}
+     */
+    @tracked identity = null;
+
+    /**
+     * The password to authenticate with
+     *
+     * @var {String}
+     */
+    @tracked password = null;
+
+    /**
+     * Login is validating user input
+     *
+     * @var {Boolean}
+     */
+    @tracked isValidating = false;
+
+    /**
+     * Login is processing
+     *
+     * @var {Boolean}
+     */
+    @tracked isLoading = false;
+
+    /**
+     * If the connection or requesst it taking too long
+     *
+     * @var {Boolean}
+     */
+    @tracked isSlowConnection = false;
+
+    /**
+     * Interval to determine when to timeout the request
+     *
+     * @var {Integer}
+     */
+    @tracked timeout = null;
+
+    /**
+     * Number of failed login attempts
+     *
+     * @var {Integer}
+     */
+    @tracked failedAttempts = 0;
+
+    @tracked token;
+
+    @action async login(event) {
+        // firefox patch
+        event.preventDefault();
+        // get user credentials
+        const { identity, password, rememberMe } = this;
+
+        // If no password error
+        if (!identity) {
+            return this.notifications.warning(this.intl.t('auth.login.no-identity-notification'));
+        }
+
+        // If no password error
+        if (!password) {
+            return this.notifications.warning(this.intl.t('auth.login.no-identity-notification'));
+        }
+
+        // start loader
+        this.set('isLoading', true);
+        // set where to redirect on login
+        this.setRedirect();
+
+        // send request to check for 2fa
+        try {
+            let { twoFaSession, isTwoFaEnabled } = await this.session.checkForTwoFactor(identity);
+
+            if (isTwoFaEnabled) {
+                return this.session.store
+                    .persist({ identity })
+                    .then(() => {
+                        return this.router.transitionTo('auth.two-fa', { queryParams: { token: twoFaSession } }).then(() => {
+                            this.reset('success');
+                        });
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                        this.reset('error');
+
+                        throw error;
+                    });
+            }
+        } catch (error) {
+            return this.notifications.serverError(error);
+        }
+
+        try {
+            await this.session.authenticate('authenticator:fleetbase', { identity, password }, rememberMe);
+        } catch (error) {
+            this.failedAttempts++;
+
+            // Handle unverified user
+            if (error.toString().includes('not verified')) {
+                return this.sendUserForEmailVerification(identity);
+            }
+
+            return this.failure(error);
+        }
+
+        if (this.session.isAuthenticated) {
+            this.success();
+        }
+    }
+
+    /**
+     * Transition user to onboarding screen
+     */
+    @action transitionToOnboard() {
+        return this.router.transitionTo('onboard');
+    }
+
+    /**
+     * Transition to forgot password screen, if email is set - set it.
+     */
+    @action forgotPassword() {
+        return this.router.transitionTo('auth.forgot-password').then(() => {
+            if (this.email) {
+                this.forgotPasswordController.email = this.email;
+            }
+        });
+    }
+
+    /**
+     * Creates an email verification session and transitions user to verification route.
+     *
+     * @param {String} email
+     * @return {Promise<Transition>}
+     * @memberof AuthLoginController
+     */
+    sendUserForEmailVerification(email) {
+        return this.fetch.post('auth/create-verification-session', { email, send: true }).then(({ token }) => {
+            return this.session.store.persist({ email }).then(() => {
+                this.notifications.warning(this.intl.t('auth.login.unverified-notification'));
+                return this.router
+                    .transitionTo('auth.verification', {
+                        queryParams: {
+                            token,
+                        },
+                    })
+                    .then(() => {
+                        this.reset('error');
+                    });
+            });
+        });
+    }
+
+    /**
+     * Sets correct route to send user to after login.
+     *
+     * @void
+     */
+    setRedirect() {
+        const shift = this.urlSearchParams.get('shift');
+
+        if (shift) {
+            this.session.setRedirect(pathToRoute(shift));
+        }
+    }
+
+    /**
+     * Handles the authentication success
+     *
+     * @void
+     */
+    success() {
+        this.reset('success');
+    }
+
+    /**
+     * Handles the authentication failure
+     *
+     * @param {String} error An error message
+     * @void
+     */
+    failure(error) {
+        this.notifications.serverError(error);
+        this.reset('error');
+    }
+
+    /**
+     * Handles the request slow connection
+     *
+     * @void
+     */
+    slowConnection() {
+        this.notifications.error(this.intl.t('auth.login.slow-connection-message'));
+    }
+
+    /**
+     * Reset the login form
+     *
+     * @param {String} type
+     * @void
+     */
+    reset(type) {
+        // reset login form state
+        this.isLoading = false;
+        this.isSlowConnection = false;
+        // reset login form state depending on type of reset
+        switch (type) {
+            case 'success':
+                this.identity = null;
+                this.password = null;
+                this.isValidating = false;
+                break;
+            case 'error':
+            case 'fail':
+                this.password = null;
+                break;
+        }
+        // clearTimeout(this.timeout);
+    }
+}

console/app/controllers/auth/reset-password.js

@@ -0,0 +1,91 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class AuthResetPasswordController extends Controller {
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `router` service
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @service router;
+
+    /**
+     * Inject the `intl` service
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @service intl;
+
+    /**
+     * The code param.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @tracked code;
+
+    /**
+     * Users new password.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @tracked password;
+
+    /**
+     * Users new password confirmation.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @tracked password_confirmation;
+
+    /**
+     * Loading stae of password reset.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @tracked isLoading;
+
+    /**
+     * The reset password action.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @action resetPassword(event) {
+        // firefox patch
+        event.preventDefault();
+
+        const { code, password, password_confirmation } = this;
+        const { id } = this.model;
+
+        this.isLoading = true;
+
+        this.fetch
+            .post('auth/reset-password', { link: id, code, password, password_confirmation })
+            .then(() => {
+                this.notifications.success(this.intl.t('auth.reset-password.success-message'));
+
+                return this.router.transitionTo('auth.login');
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

console/app/controllers/auth/two-fa.js

@@ -0,0 +1,271 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+/**
+ * Controller responsible for handling two-factor authentication.
+ * @class AuthTwoFaController
+ * @extends Controller
+ */
+export default class AuthTwoFaController extends Controller {
+    /**
+     * Router service.
+     *
+     * @var {Service}
+     */
+    @service router;
+
+    /**
+     * Fetch service for making HTTP requests.
+     *
+     * @var {Service}
+     */
+    @service fetch;
+
+    /**
+     * Notifications service for handling notifications.
+     *
+     * @var {Service}
+     */
+    @service notifications;
+
+    /**
+     * Session service for managing user sessions.
+     *
+     * @var {Service}
+     */
+    @service session;
+
+    /**
+     * Internationalization service.
+     *
+     * @var {Service}
+     */
+    @service intl;
+
+    /**
+     * Tracked property for storing the verification token.
+     *
+     * @property {string} token
+     * @tracked
+     */
+    @tracked token;
+
+    /**
+     * The current 2FA identity in memory
+     */
+    @tracked identity;
+
+    /**
+     * Tracked property representing the client token from the validated 2fa session.
+     *
+     * @property {number} clientToken
+     * @tracked
+     * @default null
+     */
+    @tracked clientToken;
+
+    /**
+     * Tracked property for storing the verification code.
+     *
+     * @property {string} verificationCode
+     * @tracked
+     */
+    @tracked verificationCode = '';
+
+    /**
+     * Tracked property for storing the verification code.
+     *
+     * @property {string} verificationCode
+     * @tracked
+     */
+    @tracked otpValue = '';
+
+    /**
+     * Tracked property representing the date the 2fa session will expire
+     * @property {Date|null} twoFactorSessionExpiresAfter
+     * @tracked
+     * @default null
+     */
+    @tracked twoFactorSessionExpiresAfter;
+
+    /**
+     * Tracked property representing when the countdown is ready to start.
+     *
+     * @property {Boolean} countdownReady
+     * @tracked
+     * @default false
+     */
+    @tracked countdownReady = false;
+
+    /**
+     * Tracked property representing when verification code has expired.
+     *
+     * @property {Boolean} isCodeExpired
+     * @tracked
+     * @default false
+     */
+    @tracked isCodeExpired = false;
+
+    /**
+     * Query parameters for the controller.
+     *
+     * @property {Array} queryParams
+     */
+    queryParams = ['token', 'clientToken'];
+
+    /**
+     * Action method for verifying the entered verification code.
+     *
+     * @method verifyCode
+     * @action
+     */
+    @action async verifyCode(event) {
+        // prevent form default behaviour
+        if (event && typeof event.preventDefault === 'function') {
+            event.preventDefault();
+        }
+
+        try {
+            const { token, verificationCode, clientToken, identity } = this;
+
+            if (!clientToken) {
+                this.notifications.error(this.intl.t('auth.two-fa.verify-code.invalid-session-error-notification'));
+                return;
+            }
+
+            // Call the backend API to verify the entered verification code
+            const { authToken } = await this.fetch.post('two-fa/verify', {
+                token,
+                code: verificationCode,
+                clientToken,
+                identity,
+            });
+
+            // If verification is successful, transition to the desired route
+            this.notifications.success(this.intl.t('auth.two-fa.verify-code.verification-successful-notification'));
+
+            // authenticate user
+            return this.session.authenticate('authenticator:fleetbase', { authToken }).then(() => {
+                return this.router.transitionTo('console');
+            });
+        } catch (error) {
+            if (error.message.includes('Verification code has expired')) {
+                this.notifications.info(this.intl.t('auth.two-fa.verify-code.verification-code-expired-notification'));
+            } else {
+                this.notifications.error(this.intl.t('auth.two-fa.verify-code.verification-code-failed-notification'));
+            }
+        }
+    }
+
+    /**
+     * Resends the verification code for Two-Factor Authentication.
+     * Disables the countdown timer while processing and handles success or error notifications.
+     *
+     * @returns {Promise<void>}
+     * @action
+     */
+    @action async resendCode() {
+        // disable countdown timer
+        this.countdownReady = false;
+
+        try {
+            const { identity, token } = this;
+            const { clientToken } = await this.fetch.post('two-fa/resend', {
+                identity,
+                token,
+            });
+
+            if (clientToken) {
+                this.clientToken = clientToken;
+                this.twoFactorSessionExpiresAfter = this.getExpirationDateFromClientToken(clientToken);
+                this.countdownReady = true;
+                this.isCodeExpired = false;
+                this.notifications.success(this.intl.t('auth.two-fa.resend-code.verification-code-resent-notification'));
+            } else {
+                this.notifications.error(this.intl.t('auth.two-fa.resend-code.verification-code-resent-error-notification'));
+            }
+        } catch (error) {
+            // Handle errors, show error notifications, etc.
+            this.notifications.error(this.intl.t('auth.two-fa.resend-code.verification-code-resent-error-notification'));
+        }
+    }
+
+    /**
+     * Cancels the current Two-Fa session and redirects to login screen.
+     *
+     * @returns {Promise<Transition>}
+     * @memberof AuthTwoFaController
+     */
+    @action cancelTwoFactor() {
+        return this.fetch
+            .post('two-fa/invalidate', {
+                identity: this.identity,
+                token: this.token,
+            })
+            .then(() => {
+                return this.router.transitionTo('auth.login');
+            });
+    }
+
+    /**
+     * Set that the verification code has expired and allow user to resend.
+     *
+     * @memberof AuthTwoFaController
+     */
+    @action handleCodeExpired() {
+        this.isCodeExpired = true;
+        this.countdownReady = false;
+    }
+
+    /**
+     * Handles the input of the OTP (One-Time Password) and triggers the verification process.
+     *
+     * @param {string} otpValue - The OTP value entered by the user.
+     * @returns {void}
+     * @action
+     */
+    @action handleOtpInput(otpValue) {
+        this.verificationCode = otpValue;
+        this.verifyCode();
+    }
+
+    /**
+     * Converts a base64 encoded client token to a Date representing the expiration date.
+     *
+     * @method getExpirationDateFromClientToken
+     * @param {string} clientToken - Base64 encoded client token.
+     * @returns {Date|null} - Date representing the expiration date, or null if invalid.
+     */
+    getExpirationDateFromClientToken(clientToken) {
+        const decoder = new TextDecoder();
+        const binString = atob(clientToken);
+        const bytes = Uint8Array.from(binString, (m) => m.codePointAt(0));
+        const decodedString = decoder.decode(bytes);
+
+        if (typeof decodedString === 'string' && decodedString.includes('|')) {
+            const parts = decodedString.split('|');
+            const expiresAt = this.convertUtcToClientTime(parts[0]);
+
+            if (expiresAt instanceof Date) {
+                return expiresAt;
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Converts a UTC date-time string to client time zone.
+     *
+     * @method convertUtcToClientTime
+     * @param {string} utcDateTimeString - UTC date-time string.
+     * @returns {Date} - Date in client time zone.
+     */
+    convertUtcToClientTime(utcDateTimeString) {
+        const utcDate = new Date(utcDateTimeString);
+        const clientTimezoneOffset = new Date().getTimezoneOffset();
+        const clientDate = new Date(utcDate.getTime() - clientTimezoneOffset * 60 * 1000);
+        return clientDate;
+    }
+}

console/app/controllers/auth/verification.js

@@ -0,0 +1,230 @@
+import Controller from '@ember/controller';
+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';
+
+export default class AuthVerificationController extends Controller {
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `modalsManager` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service modalsManager;
+
+    /**
+     * Inject the `currentUser` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service currentUser;
+
+    /**
+     * Inject the `router` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service router;
+
+    /**
+     * Inject the `session` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service session;
+
+    /**
+     * The session paramerer.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @tracked hello;
+
+    /**
+     * The token paramerer.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @tracked token;
+
+    /**
+     * The loading state of the verification request.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @tracked isLoading = false;
+
+    /**
+     * 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 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);
+
+        later(
+            this,
+            () => {
+                this.stillWaiting = true;
+            },
+            this.waitTimeout
+        );
+    }
+
+    /**
+     * Validates the input
+     *
+     * @param {InputEvent} { target: { value } }
+     * @memberof OnboardVerifyEmailController
+     */
+    @action validateInput({ target: { value } }) {
+        if (value.length > 5) {
+            this.isReadyToSubmit = true;
+        } else {
+            this.isReadyToSubmit = false;
+        }
+    }
+
+    /**
+     * Submits to verify code.
+     *
+     * @return {Promise}
+     * @memberof OnboardVerifyEmailController
+     */
+    @action verifyCode() {
+        const { token, code, email } = this;
+
+        this.isLoading = true;
+
+        return this.fetch
+            .post('auth/verify-email', { token, code, email, authenticate: true })
+            .then(({ status, token }) => {
+                if (status === 'ok') {
+                    this.notifications.success('Email successfully verified!');
+
+                    if (token) {
+                        this.notifications.info('Welcome to Fleetbase!');
+                        this.session.manuallyAuthenticate(token);
+
+                        return this.router.transitionTo('console');
+                    }
+
+                    return this.router.transitionTo('auth.login');
+                }
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Action to resend verification code by SMS.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @action resendBySms() {
+        this.modalsManager.show('modals/verify-by-sms', {
+            title: 'Verify Account by Phone',
+            acceptButtonText: 'Send',
+            phone: this.currentUser.phone,
+            confirm: (modal) => {
+                modal.startLoading();
+                const phone = modal.getOption('phone');
+
+                return this.fetch
+                    .post('onboard/send-verification-sms', { phone, session: this.hello })
+                    .then(() => {
+                        this.notifications.success('Verification code SMS sent!');
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
+            },
+        });
+    }
+
+    /**
+     * Action to resend verification code by email.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @action resendEmail() {
+        this.modalsManager.show('modals/resend-verification-email', {
+            title: 'Resend Verification Code',
+            acceptButtonText: 'Send',
+            email: this.currentUser.email,
+            confirm: (modal) => {
+                modal.startLoading();
+                const email = modal.getOption('email');
+
+                return this.fetch
+                    .post('onboard/send-verification-email', { email, session: this.hello })
+                    .then(() => {
+                        this.notifications.success('Verification code email sent!');
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
+            },
+        });
+    }
+}

console/app/controllers/console.js

@@ -0,0 +1,303 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { getOwner } from '@ember/application';
+import { later } from '@ember/runloop';
+import { action, computed } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { isArray } from '@ember/array';
+import first from '@fleetbase/ember-core/utils/first';
+
+export default class ConsoleController extends Controller {
+    /**
+     * Inject the `currentUser` service.
+     *
+     * @var {Service}
+     */
+    @service currentUser;
+
+    /**
+     * Inject the `modalsManager` service.
+     *
+     * @var {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Inject the `session` service.
+     *
+     * @var {Service}
+     */
+    @service session;
+
+    /**
+     * Inject the `fetch` service.
+     *
+     * @var {Service}
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service.
+     *
+     * @var {Service}
+     */
+    @service notifications;
+
+    /**
+     * Inject the `router` service.
+     *
+     * @var {Service}
+     */
+    @service router;
+
+    /**
+     * Inject the `universe` service.
+     *
+     * @var {Service}
+     */
+    @service universe;
+
+    /**
+     * Authenticated user organizations.
+     *
+     * @var {Array}
+     */
+    @tracked organizations = [];
+
+    /**
+     * Sidebar Context Controls
+     *
+     * @var {SidebarContext}
+     */
+    @tracked sidebarContext;
+
+    /**
+     * State of sidebar toggle icon
+     *
+     * @var {SidebarContext}
+     */
+    @tracked sidebarToggleEnabled = true;
+
+    /**
+     * The sidebar toggle state.
+     *
+     * @var {SidebarContext}
+     */
+    @tracked sidebarToggleState = {};
+
+    /**
+     * Routes which should hide the sidebar menu.
+     *
+     * @var {Array}
+     */
+    @tracked hiddenSidebarRoutes = ['console.home', 'console.extensions', 'console.notifications'];
+
+    /**
+     * Installed extensions.
+     *
+     * @var {Array}
+     */
+    @computed() get extensions() {
+        return getOwner(this).application.extensions;
+    }
+
+    /**
+     * Get the currently authenticated user
+     *
+     * @var {Model}
+     */
+    @alias('currentUser.user') user;
+
+    /**
+     * Creates an instance of ConsoleController.
+     * @memberof ConsoleController
+     */
+    constructor() {
+        super(...arguments);
+        this.router.on('routeDidChange', (transition) => {
+            if (this.sidebarContext) {
+                // Determine if the new route should hide the sidebar
+                const shouldHideSidebar = this.hiddenSidebarRoutes.includes(transition.to.name);
+
+                // Check if the sidebar was manually toggled and is currently closed
+                const isSidebarManuallyClosed = this.sidebarToggleState.clicked && !this.sidebarToggleState.isOpen;
+
+                // Hide the sidebar if the current route is in hiddenSidebarRoutes
+                if (shouldHideSidebar) {
+                    this.sidebarContext.hideNow();
+                    this.sidebarToggleEnabled = false;
+                    return; // Exit early as no further action is required
+                }
+
+                // If the sidebar was manually closed and not on a hidden route, keep it closed
+                if (isSidebarManuallyClosed) {
+                    this.sidebarContext.hideNow();
+                } else {
+                    // Otherwise, show the sidebar
+                    this.sidebarContext.show();
+                }
+
+                // Ensure toggle is enabled unless on a hidden route
+                this.sidebarToggleEnabled = !shouldHideSidebar;
+            }
+        });
+    }
+
+    /**
+     * When sidebar is manually toggled
+     *
+     * @param {SidebarContext} sidebar
+     * @param {boolean} isOpen
+     * @memberof ConsoleController
+     */
+    @action onSidebarToggle(sidebar, isOpen) {
+        this.sidebarToggleState = {
+            clicked: true,
+            isOpen,
+        };
+    }
+
+    /**
+     * Sets the sidebar context
+     *
+     * @param {SidebarContext} sidebarContext
+     * @memberof ConsoleController
+     */
+    @action setSidebarContext(sidebarContext) {
+        this.sidebarContext = sidebarContext;
+        this.universe.sidebarContext = sidebarContext;
+
+        if (this.hiddenSidebarRoutes.includes(this.router.currentRouteName)) {
+            this.sidebarContext.hideNow();
+            this.sidebarToggleEnabled = false;
+        }
+    }
+
+    /**
+     * Action handler.
+     *
+     * @void
+     */
+    @action onAction(action, ...params) {
+        if (typeof this[action] === 'function') {
+            this[action](...params);
+        }
+    }
+
+    /**
+     * Action to invalidate and log user out
+     *
+     * @void
+     */
+    @action invalidateSession(noop, event) {
+        event.preventDefault();
+        this.session.invalidateWithLoader();
+    }
+
+    /**
+     * Action to invalidate and log user out
+     *
+     * @void
+     */
+    @action createOrJoinOrg() {
+        const currency = this.currentUser.currency;
+        const country = this.currentUser.country;
+
+        this.modalsManager.show('modals/create-or-join-org', {
+            title: 'Create or join a organization',
+            acceptButtonText: 'Confirm',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            action: 'join',
+            next: null,
+            name: null,
+            decription: null,
+            phone: null,
+            currency,
+            country,
+            timezone: null,
+            changeAction: (action) => {
+                this.modalsManager.setOption('action', action);
+            },
+            confirm: (modal) => {
+                modal.startLoading();
+
+                const { action, next, name, description, phone, currency, country, timezone } = modal.getOptions();
+
+                if (action === 'join') {
+                    return this.fetch.post('auth/join-organization', { next }).then(() => {
+                        this.fetch.flushRequestCache('auth/organizations');
+                        this.notifications.success('You have joined a new organization!');
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, 900);
+                    });
+                }
+
+                return this.fetch
+                    .post('auth/create-organization', {
+                        name,
+                        description,
+                        phone,
+                        currency,
+                        country,
+                        timezone,
+                    })
+                    .then(() => {
+                        this.fetch.flushRequestCache('auth/organizations');
+                        this.notifications.success('You have created a new organization!');
+                        later(
+                            this,
+                            () => {
+                                window.location.reload();
+                            },
+                            900
+                        );
+                    });
+            },
+        });
+    }
+
+    /**
+     * Confirm prompt for user to switch organization
+     *
+     * @void
+     */
+    @action switchOrganization(organization) {
+        if (isArray(organization)) {
+            organization = first(organization);
+        }
+
+        this.modalsManager.confirm({
+            title: `Are you sure you want to switch organization to ${organization.name}?`,
+            body: `By confirming your account will remain logged in, but your primary organization will be switched.`,
+            acceptButtonText: `Yes, I want to switch organization`,
+            acceptButtonScheme: 'primary',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.fetch
+                    .post('auth/switch-organization', { next: organization.uuid })
+                    .then(() => {
+                        this.fetch.flushRequestCache('auth/organizations');
+                        this.notifications.success('You have switched organizations');
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, 900);
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
+            },
+        });
+    }
+
+    @action viewChangelog() {
+        this.modalsManager.show('modals/changelog', {
+            title: 'Changelog',
+            acceptButtonText: 'OK',
+            hideDeclineButton: true,
+        });
+    }
+}

console/app/controllers/console/account.js

@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ConsoleAccountController extends Controller {
+    /**
+     * Inject the `universe` service.
+     *
+     * @memberof ConsoleAdminController
+     */
+    @service universe;
+}

console/app/controllers/console/account/auth.js

@@ -0,0 +1,248 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency-decorators';
+import getTwoFaMethods from '@fleetbase/console/utils/get-two-fa-methods';
+
+/**
+ * Controller for managing user authentication and password-related actions in the console.
+ *
+ * @class ConsoleAccountAuthController
+ * @extends Controller
+ */
+export default class ConsoleAccountAuthController extends Controller {
+    /**
+     * Service for handling data fetching.
+     *
+     * @type {fetch}
+     */
+    @service fetch;
+
+    /**
+     * Service for displaying notifications.
+     *
+     * @type {notifications}
+     */
+    @service notifications;
+
+    /**
+     * Service for managing application routing.
+     *
+     * @type {router}
+     */
+    @service router;
+
+    /**
+     * The user's current password.
+     * @type {string}
+     */
+    @tracked password;
+
+    /**
+     * The user's confirmation of the new password.
+     *
+     * @type {string}
+     */
+    @tracked confirmPassword;
+
+    /**
+     * The new password the user intends to set.
+     *
+     * @type {string}
+     */
+    @tracked newPassword;
+
+    /**
+     * The user's confirmation of the new password.
+     *
+     * @type {string}
+     */
+    @tracked newConfirmPassword;
+
+    /**
+     * Flag indicating whether the current password has been validated.
+     *
+     * @type {boolean}
+     */
+    @tracked isPasswordValidated = false;
+
+    /**
+     * System-wide two-factor authentication configuration.
+     *
+     * @type {Object}
+     */
+    @tracked twoFaConfig = {};
+
+    /**
+     * User-specific two-factor authentication settings.
+     *
+     * @type {Object}
+     */
+    @tracked twoFaSettings = {};
+
+    /**
+     * Flag indicating whether system-wide two-factor authentication is enabled.
+     *
+     * @type {boolean}
+     */
+    @tracked isSystemTwoFaEnabled = false;
+
+    /**
+     * Available two-factor authentication methods.
+     *
+     * @type {Array}
+     */
+    @tracked methods = getTwoFaMethods();
+
+    /**
+     * Constructor method for the ConsoleAccountAuthController.
+     *
+     * @constructor
+     */
+    constructor() {
+        super(...arguments);
+        this.loadSystemTwoFaConfig.perform();
+        this.loadUserTwoFaSettings.perform();
+    }
+
+    /**
+     * Validates the user's current password.
+     *
+     * @method validatePassword
+     * @param {Event} event - The event object triggering the action.
+     */
+    @action validatePassword(event) {
+        event.preventDefault();
+        this.validatePasswordTask.perform();
+    }
+
+    /**
+     * Initiates the task to change the user's password asynchronously.
+     *
+     * @method changeUserPasswordTask
+     * @param {Event} event - The event object triggering the action.
+     */
+    @action changeUserPassword(event) {
+        event.preventDefault();
+        this.changeUserPasswordTask.perform();
+    }
+
+    /**
+     * Handles the event when two-factor authentication is toggled.
+     *
+     * @method onTwoFaToggled
+     * @param {boolean} enabled - Whether two-factor authentication is enabled or not.
+     */
+    @action onTwoFaToggled(enabled) {
+        this.twoFaSettings = {
+            ...this.twoFaSettings,
+            enabled,
+        };
+    }
+
+    /**
+     * Handles the event when a two-factor authentication method is selected.
+     *
+     * @method onTwoFaMethodSelected
+     * @param {string} method - The selected two-factor authentication method.
+     */
+    @action onTwoFaMethodSelected(method) {
+        this.twoFaSettings = {
+            ...this.twoFaSettings,
+            method,
+        };
+    }
+
+    /**
+     * Initiates the task to save user-specific two-factor authentication settings asynchronously.
+     *
+     * @method saveTwoFactorAuthSettings
+     */
+    @action saveTwoFactorAuthSettings() {
+        this.saveUserTwoFaSettings.perform(this.twoFaSettings);
+    }
+
+    /**
+     * Initiates the task to save user-specific two-factor authentication settings asynchronously.
+     *
+     * @method saveUserTwoFaSettings
+     * @param {Object} twoFaSettings - User-specific two-factor authentication settings.
+     */
+    @task *saveUserTwoFaSettings(twoFaSettings = {}) {
+        yield this.fetch
+            .post('users/two-fa', { twoFaSettings })
+            .then(() => {
+                this.notifications.success('2FA Settings saved successfully.');
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            });
+    }
+
+    /**
+     * Initiates the task to load user-specific two-factor authentication settings asynchronously.
+     *
+     * @method loadUserTwoFaSettings
+     */
+    @task *loadUserTwoFaSettings() {
+        const twoFaSettings = yield this.fetch.get('users/two-fa');
+
+        if (twoFaSettings) {
+            this.isUserTwoFaEnabled = twoFaSettings.enabled;
+            this.twoFaSettings = twoFaSettings;
+        }
+        return twoFaSettings;
+    }
+
+    /**
+     * Initiates the task to load system-wide two-factor authentication configuration asynchronously.
+     *
+     * @method loadSystemTwoFaConfig
+     */
+    @task *loadSystemTwoFaConfig() {
+        const twoFaConfig = yield this.fetch.get('two-fa/config');
+
+        if (twoFaConfig) {
+            this.isSystemTwoFaEnabled = twoFaConfig.enabled;
+            this.twoFaConfig = twoFaConfig;
+        }
+        return twoFaConfig;
+    }
+
+    /**
+     * Initiates the task to validate the user's current password asynchronously.
+     *
+     * @method validatePasswordTask
+     */
+    @task *validatePasswordTask() {
+        try {
+            yield this.fetch.post('users/validate-password', {
+                password: this.password,
+                password_confirmation: this.confirmPassword,
+            });
+
+            this.isPasswordValidated = true;
+        } catch (error) {
+            this.notifications.serverError(error, 'Invalid current password.');
+        }
+    }
+
+    /**
+     * Initiates the task to change the user's password asynchronously.
+     *
+     * @method changeUserPasswordTask
+     */
+    @task *changeUserPasswordTask() {
+        try {
+            yield this.fetch.post('users/change-password', {
+                password: this.newPassword,
+                password_confirmation: this.newConfirmPassword,
+            });
+
+            this.notifications.success('Password change successfully.');
+        } catch (error) {
+            this.notifications.error('Failed to change password');
+        }
+    }
+}

console/app/controllers/console/account/index.js

@@ -0,0 +1,92 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+export default class ConsoleAccountIndexController extends Controller {
+    /**
+     * Inject the `currentUser` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service currentUser;
+
+    /**
+     * Inject the `fetch` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service fetch;
+    /**
+     * Inject the `notifications` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service notifications;
+
+    /**
+     * The loading state of request.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @tracked isLoading = false;
+
+    /**
+     * Alias to the currentUser service user record.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @alias('currentUser.user') user;
+
+    /**
+     * Handle upload of new photo
+     *
+     * @param {UploadFile} file
+     * @memberof ConsoleAccountIndexController
+     */
+    @action uploadNewPhoto(file) {
+        return this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.user.company_uuid}/users/${this.user.slug}`,
+                key_uuid: this.user.id,
+                key_type: `user`,
+                type: `user_avatar`,
+            },
+            (uploadedFile) => {
+                this.user.setProperties({
+                    avatar_uuid: uploadedFile.id,
+                    avatar_url: uploadedFile.url,
+                });
+
+                return this.user.save();
+            }
+        );
+    }
+
+    /**
+     * Save the Profile settings.
+     *
+     * @return {Promise}
+     * @memberof ConsoleAccountIndexController
+     */
+    @action saveProfile() {
+        const user = this.user;
+
+        this.isLoading = true;
+
+        return user
+            .save()
+            .then((user) => {
+                this.notifications.success('Profile changes saved.');
+                this.currentUser.set('user', user);
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

console/app/controllers/console/admin.js

@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ConsoleAdminController extends Controller {
+    /**
+     * Inject the `universe` service.
+     *
+     * @memberof ConsoleAdminController
+     */
+    @service universe;
+}

console/app/controllers/console/admin/branding.js

@@ -0,0 +1,168 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class ConsoleAdminBrandingController extends Controller {
+    /**
+     * Inject the `fetch` service.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `theme` service.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @service theme;
+
+    /**
+     * Status of loading process.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @tracked isLoading = false;
+
+    /**
+     * Theme options.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @tracked themeOptions = ['light', 'dark'];
+
+    /**
+     * Set the default theme
+     *
+     * @param {String} theme
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action setTheme(theme) {
+        this.model.default_theme = theme;
+        this.theme.setTheme(theme);
+    }
+
+    /**
+     * Unsets the value of a given key or array of keys on the model.
+     *
+     * @action
+     * @param {string | string[]} key - The key or keys to unset on the model.
+     * @param {*} [newValue=null] - The new value to set for the given key or keys. Defaults to null.
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action unset(key, newValue = null) {
+        if (isArray(key)) {
+            return key.forEach((k) => this.unset(k, undefined));
+        }
+
+        this.model.set(key, newValue);
+    }
+
+    /**
+     * Unsets the icon properties on the model.
+     *
+     * @action
+     * @returns {void} - No return value.
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action unsetIcon() {
+        this.unset(['icon_uuid', 'icon_url']);
+        this.model.set('icon_url', '/images/icon.png');
+    }
+
+    /**
+     * Unsets the logo properties on the model.
+     *
+     * @action
+     * @returns {void} - No return value.
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action unsetLogo() {
+        this.unset(['logo_uuid', 'logo_url']);
+        this.model.set('logo_url', '/images/fleetbase-logo-svg.svg');
+    }
+
+    /**
+     * Save branding settings.
+     *
+     * @return {Promise}
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action save() {
+        this.isLoading = true;
+
+        return this.model
+            .save()
+            .then(() => {
+                this.notifications.success('Branding settings saved.');
+
+                // if logo url is null
+                if (this.model.logo_url === null) {
+                    this.model.set('logo_url', '/images/fleetbase-logo-svg.svg');
+                }
+
+                // if icon url is null
+                if (this.model.icon_url === null) {
+                    this.model.set('icon_url', '/images/icon.png');
+                }
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Handle upload of new console icon
+     *
+     * @param {UploadFile} file
+     * @memberof ConsoleAccountIndexController
+     */
+    @action uploadIcon(file) {
+        this.isLoading = true;
+
+        return this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/system`,
+                type: `system`,
+            },
+            (uploadedFile) => {
+                this.model.icon_uuid = uploadedFile.id;
+                this.model.icon_url = uploadedFile.url;
+                this.isLoading = false;
+            }
+        );
+    }
+
+    /**
+     * Handle upload of new console logo
+     *
+     * @param {UploadFile} file
+     * @memberof ConsoleAccountIndexController
+     */
+    @action uploadLogo(file) {
+        this.isLoading = true;
+
+        return this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/system`,
+                type: `system`,
+            },
+            (uploadedFile) => {
+                this.model.logo_uuid = uploadedFile.id;
+                this.model.logo_url = uploadedFile.url;
+                this.isLoading = false;
+            }
+        );
+    }
+}

console/app/controllers/console/admin/config/cache.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigCacheController extends Controller {}

console/app/controllers/console/admin/config/database.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigDatabaseController extends Controller {}

console/app/controllers/console/admin/config/filesystem.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigFilesystemController extends Controller {}

console/app/controllers/console/admin/config/mail.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigMailController extends Controller {}

console/app/controllers/console/admin/config/notification-channels.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigNotificationChannelsController extends Controller {}

console/app/controllers/console/admin/config/queue.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigQueueController extends Controller {}

console/app/controllers/console/admin/config/services.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigServicesController extends Controller {}

console/app/controllers/console/admin/notifications.js

@@ -0,0 +1,136 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import createNotificationKey from '../../../utils/create-notification-key';
+
+export default class ConsoleAdminNotificationsController extends Controller {
+    /**
+     * Inject the notifications service.
+     *
+     * @memberof ConsoleAdminNotificationsController
+     */
+    @service notifications;
+
+    /**
+     * Inject the fetch service.
+     *
+     * @memberof ConsoleAdminNotificationsController
+     */
+    @service fetch;
+
+    /**
+     * The notification settings value JSON.
+     *
+     * @memberof ConsoleAdminNotificationsController
+     * @var {Object}
+     */
+    @tracked notificationSettings = {};
+
+    /**
+     * Notification transport methods enabled.
+     *
+     * @memberof ConsoleAdminNotificationsController
+     * @var {Array}
+     */
+    @tracked notificationTransportMethods = ['email', 'sms'];
+
+    /**
+     * Tracked property for the loading state
+     *
+     * @memberof ConsoleAdminNotificationsController
+     * @var {Boolean}
+     */
+    @tracked isLoading = false;
+
+    /**
+     * Creates an instance of ConsoleAdminNotificationsController.
+     * @memberof ConsoleAdminNotificationsController
+     */
+    constructor() {
+        super(...arguments);
+        this.getSettings();
+    }
+
+    /**
+     * Selectes notifiables for settings.
+     *
+     * @param {Object} notification
+     * @param {Array} notifiables
+     * @memberof ConsoleAdminNotificationsController
+     */
+    @action onSelectNotifiable(notification, notifiables) {
+        const notificationKey = createNotificationKey(notification.definition, notification.name);
+        const _notificationSettings = { ...this.notificationSettings };
+
+        if (!_notificationSettings[notificationKey]) {
+            _notificationSettings[notificationKey] = {};
+        }
+
+        _notificationSettings[notificationKey].notifiables = notifiables;
+        _notificationSettings[notificationKey].definition = notification.definition;
+        _notificationSettings[notificationKey].via = notifiables.map((notifiable) => {
+            return {
+                identifier: notifiable.value,
+                methods: this.notificationTransportMethods,
+            };
+        });
+
+        this.mutateNotificationSettings(_notificationSettings);
+    }
+
+    /**
+     * Mutates the notification settings property.
+     *
+     * @param {Object} [_notificationSettings={}]
+     * @memberof ConsoleAdminNotificationsController
+     */
+    mutateNotificationSettings(_notificationSettings = {}) {
+        this.notificationSettings = {
+            ...this.notificationSettings,
+            ..._notificationSettings,
+        };
+    }
+
+    /**
+     * Save notification settings to the server.
+     *
+     * @action
+     * @method saveSettings
+     * @returns {Promise}
+     * @memberof ConsoleAdminNotificationsController
+     */
+    @action saveSettings() {
+        const { notificationSettings } = this;
+
+        this.isLoading = true;
+
+        return this.fetch
+            .post('notifications/save-settings', { notificationSettings })
+            .then(() => {
+                this.notifications.success('Notification settings successfully saved.');
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Fetches and updates notification settings asynchronously.
+     *
+     * @returns {Promise<void>} A promise for successful retrieval and update, or an error on failure.
+     */
+    getSettings() {
+        return this.fetch
+            .get('notifications/get-settings')
+            .then(({ notificationSettings }) => {
+                this.notificationSettings = notificationSettings;
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            });
+    }
+}

console/app/controllers/console/admin/two-fa-settings.js

@@ -0,0 +1,172 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency-decorators';
+import getTwoFaMethods from '@fleetbase/console/utils/get-two-fa-methods';
+
+/**
+ * Controller responsible for handling Two-Factor Authentication settings in the admin console.
+ *
+ * @class ConsoleAdminTwoFaSettingsController
+ * @extends Controller
+ */
+export default class ConsoleAdminTwoFaSettingsController extends Controller {
+    /**
+     * Service for handling data fetching.
+     *
+     * @type {fetch}
+     */
+    @service fetch;
+
+    /**
+     * Service for displaying notifications.
+     *
+     * @type {notifications}
+     */
+    @service notifications;
+
+    /**
+     * System-wide two-factor authentication configuration.
+     *
+     * @type {Object}
+     */
+    @tracked twoFaConfig = {};
+
+    /**
+     * User-specific two-factor authentication settings.
+     *
+     * @type {Object}
+     */
+    @tracked twoFaSettings = {};
+
+    /**
+     * Flag indicating whether system-wide two-factor authentication is enabled.
+     *
+     * @type {boolean}
+     */
+    @tracked isSystemTwoFaEnabled = false;
+
+    /**
+     * Flag indicating whether 2FA enforcement is required.
+     *
+     * @type {boolean}
+     */
+    @tracked isTwoFaEnforced = false;
+
+    /**
+     * Available two-factor authentication methods.
+     *
+     * @type {Array}
+     */
+    @tracked methods = getTwoFaMethods();
+
+    /**
+     * Tracked property for the loading state
+     *
+     * @memberof ConsoleAdminTwoFaSettingsController
+     * @var {Boolean}
+     */
+    @tracked isLoading = false;
+
+    /**
+     * Constructor method for the ConsoleAccountAuthController.
+     *
+     * @constructor
+     */
+    constructor() {
+        super(...arguments);
+        this.loadSystemTwoFaConfig.perform();
+    }
+
+    /**
+     * Handles the event when two-factor authentication is toggled.
+     *
+     * @method onTwoFaToggled
+     * @param {boolean} enabled - Whether two-factor authentication is enabled or not.
+     */
+    @action onTwoFaToggled(enabled) {
+        this.twoFaSettings = {
+            ...this.twoFaSettings,
+            enabled,
+        };
+    }
+
+    /**
+     * Handles the event when a two-factor authentication method is selected.
+     *
+     * @method onTwoFaMethodSelected
+     * @param {string} method - The selected two-factor authentication method.
+     */
+    @action onTwoFaMethodSelected(method) {
+        this.twoFaSettings = {
+            ...this.twoFaSettings,
+            method,
+        };
+    }
+
+    /**
+     * Handles the event when two-factor authentication is toggled.
+     *
+     * @method onTwoFaToggled
+     * @param {boolean} enabled - Whether two-factor authentication is enforced or not.
+     */
+    @action onTwoFaEnforceToggled(enforced) {
+        this.twoFaSettings = {
+            ...this.twoFaSettings,
+            enforced,
+        };
+    }
+
+    /**
+     * Handles the event when 2FA enforcement is toggled.
+     *
+     * @method onTwoFaEnforceToggled
+     */
+
+    /**
+     * Initiates the task to save user-specific two-factor authentication settings asynchronously.
+     *
+     * @method saveTwoFactorAuthSettings
+     */
+    @action saveSettings() {
+        this.saveTwoFactorSettingsForAdmin.perform(this.twoFaSettings);
+    }
+
+    /**
+     * Initiates the task to load system-wide two-factor authentication configuration asynchronously.
+     *
+     * @method loadSystemTwoFaConfig
+     */
+
+    @task *loadSystemTwoFaConfig() {
+        const twoFaSettings = yield this.fetch.get('two-fa/config').catch((error) => {
+            this.notifications.serverError(error);
+        });
+        if (twoFaSettings) {
+            this.twoFaSettings = twoFaSettings;
+        }
+
+        return twoFaSettings;
+    }
+
+    /**
+     * Initiates the task to save user-specific two-factor authentication settings asynchronously.
+     *
+     * @method saveTwoFactorSettingsForAdmin
+     * @param {Object} twoFaSettings - User-specific two-factor authentication settings.
+     */
+    @task *saveTwoFactorSettingsForAdmin(twoFaSettings = {}) {
+        yield this.fetch
+            .post('two-fa/config', { twoFaSettings })
+            .then(() => {
+                this.notifications.success('2FA Settings saved for admin successfully.');
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

console/app/controllers/console/home.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleHomeController extends Controller {}

console/app/controllers/console/notifications.js

@@ -0,0 +1,188 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+/**
+ * Controller for managing notifications.
+ */
+export default class NotificationsController extends Controller {
+    /**
+     * Inject the `socket` service
+     *
+     * @memberof NotificationsController
+     */
+    @service socket;
+
+    /**
+     * Inject the `store` service
+     *
+     * @memberof NotificationsController
+     */
+    @service store;
+
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof NotificationsController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof NotificationsController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `universe` service
+     *
+     * @memberof NotificationsController
+     */
+    @service universe;
+
+    /**
+     * Inject the `router` service
+     *
+     * @memberof NotificationsController
+     */
+    @service router;
+
+    /**
+     * Queryable parameters for this controller's model
+     *
+     * @var {Array}
+     */
+    queryParams = ['page', 'limit', 'sort', 'query', 'created_at'];
+
+    /**
+     * The current page of data being viewed
+     *
+     * @var {Integer}
+     */
+    @tracked page = 1;
+
+    /**
+     * The maximum number of items to show per page
+     *
+     * @var {Integer}
+     */
+    @tracked limit = 20;
+
+    /**
+     * The param to sort the data on, the param with prepended `-` is descending
+     *
+     * @var {String}
+     */
+    @tracked sort = '-created_at';
+
+    /**
+     * The selected notifications.
+     *
+     * @tracked
+     * @var {Array}
+     * @memberof NotificationsController
+     */
+    @tracked selected = [];
+
+    /**
+     * Creates an instance of NotificationsController.
+     * @memberof NotificationsController
+     */
+    constructor() {
+        super(...arguments);
+
+        // listen for received notifications
+        this.universe.on('notification.received', () => {
+            this.router.refresh();
+        });
+    }
+
+    /**
+     * Action to select or deselect a notification.
+     *
+     * @param {NotificationModel} notification - The notification to select or deselect.
+     * @memberof NotificationsController
+     */
+    @action selectNotification(notification) {
+        if (this.selected.includes(notification)) {
+            this.selected.removeObject(notification);
+        } else {
+            this.selected.pushObject(notification);
+        }
+    }
+
+    /**
+     * Action to delete selected notifications.
+     *
+     * @memberof NotificationsController
+     */
+    @action delete() {
+        return this.fetch
+            .delete('notifications/bulk-delete', {
+                notifications: this.selected.map(({ id }) => id),
+            })
+            .then(() => {
+                this.notifications.success(`${this.selected.length} notifications deleted`);
+                this.universe.trigger('notifications.deleted', [...this.selected]);
+                this.selected.clear();
+
+                return this.router.refresh();
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            });
+    }
+
+    /**
+     * Action to mark selected notifications as read.
+     *
+     * @memberof NotificationsController
+     */
+    @action read() {
+        const unreadSelectedNotifications = this.selected.filter((notification) => notification.unread);
+
+        return this.fetch
+            .put('notifications/mark-as-read', {
+                notifications: unreadSelectedNotifications.map(({ id }) => id),
+            })
+            .then(() => {
+                this.notifications.success(`${unreadSelectedNotifications.length} notifications marked as read`);
+                this.universe.trigger('notifications.read', [...unreadSelectedNotifications]);
+                this.selected.clear();
+
+                return this.router.refresh();
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            });
+    }
+
+    /**
+     * Action to select all notifications.
+     *
+     * @memberof NotificationsController
+     */
+    @action selectAll() {
+        if (this.selected.length === this.model.length) {
+            this.selected.clear();
+        } else {
+            this.selected = this.model.toArray();
+        }
+    }
+
+    /**
+     * Action to mark a notification as read.
+     *
+     * @param {NotificationModel} notification
+     * @return {Promise}
+     * @memberof NotificationsController
+     */
+    @action markNotificationAsRead(notification) {
+        return notification.markAsRead().then(() => {
+            this.notifications.info('Notification marked as read.');
+            this.universe.trigger('notifications.read', [notification]);
+        });
+    }
+}

console/app/controllers/console/settings.js

@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ConsoleSettingsController extends Controller {
+    /**
+     * INject the `universe` service
+     *
+     * @memberof ConsoleSettingsController
+     */
+    @service universe;
+}

console/app/controllers/console/settings/auth.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleSettingsAuthController extends Controller {}

console/app/controllers/console/settings/index.js

@@ -0,0 +1,94 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class ConsoleSettingsIndexController extends Controller {
+    /**
+     * Inject the `currentUser` service
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @service currentUser;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @service fetch;
+
+    /**
+     * The request loading state.
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @tracked isLoading = false;
+
+    /**
+     * the upload queue.
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @tracked uploadQueue = [];
+
+    /**
+     * Uploaded files.
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @tracked uploadedFiles = [];
+
+    /**
+     * Save the organization settings.
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @action saveSettings(event) {
+        event.preventDefault();
+        this.isLoading = true;
+
+        this.model
+            .save()
+            .then(() => {
+                this.notifications.success('Organization changes successfully saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Upload file to company.
+     *
+     * @param {String} type
+     * @param {File} file
+     * @return {Promise}
+     * @memberof ConsoleSettingsIndexController
+     */
+    @action uploadFile(type, file) {
+        return this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/companies/${this.currentUser.companyId}/${type}`,
+                key_uuid: this.currentUser.companyId,
+                key_type: `company`,
+                type,
+            },
+            (uploadedFile) => {
+                this.model.setProperties({
+                    [`${type}_uuid`]: uploadedFile.id,
+                    [`${type}_url`]: uploadedFile.url,
+                    [type]: uploadedFile,
+                });
+            }
+        );
+    }
+}