monitor probe service

This commit refactors the Monitor.ts file to improve error handling. It removes commented out code and unused imports, ensuring a cleaner and more efficient codebase. This change enhances the maintainability and readability of the code.

.dockerignore

@@ -54,4 +54,6 @@ tests/coverage
 
 settings.json
 
-GoSDK/tester/
+GoSDK/tester/
+
+

.eslintignore

@@ -1,28 +0,0 @@
-*/node_modules/*
-*/build/*
-*/coverage/*
-
-*/dist/*
-
-*/public/*
-*/views/*
-
-*fonts*
-*logos*
-
-.*
-*.png
-*.sh
-*.txt
-*.snap
-*.enc
-Dockerfile
-CHANGELOG
-LICENSE
-
-marketing/*/*
-licenses/*
-certifications/*
-ApiReference/public/assets/*
-JavaScriptSDK/src/cli/server-monitor/out/scripts/prettify/*
-_test/*

.eslintrc.json

@@ -1,189 +0,0 @@
-{
-    "parserOptions": {
-        "ecmaVersion": 8,
-        "ecmaFeatures": {
-            "experimentalObjectRestSpread": true,
-            "jsx": true,
-            "tsx": true,
-            "spread": true
-        },
-        "sourceType": "module",
-        "project": [
-            "./tsconfig.json"
-        ]
-    },
-    "env": {
-        "browser": true,
-        "node": true,
-        "jquery": true,
-        "es6": true,
-        "jest": true,
-        "jasmine": true
-    },
-    "plugins": [
-        "react",
-        "jsx-a11y",
-        "progress",
-        "@typescript-eslint",
-        "unused-imports"
-    ],
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:prettier/recommended",
-        "prettier"
-    ],
-    "globals": {
-        "describe": true,
-        "context": true,
-        "before": true,
-        "beforeEach": true,
-        "after": true,
-        "afterEach": true,
-        "it": true,
-        "expect": true,
-        "workbox": true,
-        "importScripts": true,
-        "$TSFixMe": true,
-        "NodeJS": true,
-        "JSX": true
-    },
-    "parser": "@typescript-eslint/parser",
-    "rules": {
-        "no-fallthrough": "error",
-        "no-unreachable": "error",
-        "no-cond-assign": "error",
-        "valid-typeof": "error",
-        "no-func-assign": "error",
-        "curly": "error",
-        "no-extra-semi": "error",
-        "no-else-return": "error",
-        "no-div-regex": "error",
-        "no-octal": "error",
-        "no-extra-bind": "error",
-        "unicode-bom": "error",
-        "no-extra-boolean-cast": "error",
-        "wrap-regex": "error",
-        "wrap-iife": "error",
-        "yield-star-spacing": "error",
-        "no-implicit-coercion": "error",
-        "no-extra-label": "error",
-        "multiline-comment-style": "off",
-        "no-lonely-if": "error",
-        "no-floating-decimal": "error",
-        "eqeqeq": "error",
-        "dot-notation": "off", // Off because it messes up with typescript compiler.
-        "@typescript-eslint/dot-notation": "off", //temp off.
-        "progress/activate": 1,
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
-        "@typescript-eslint/no-empty-interface": [
-            "error",
-            {
-              "allowSingleExtends": true
-            }
-          ],
-        // https://www.npmjs.com/package/eslint-plugin-unused-imports
-        "no-unused-vars": "off",
-        "@typescript-eslint/no-unused-vars": ["error", {"argsIgnorePattern": "^_"}],
-        "@typescript-eslint/no-extra-non-null-assertion": "error",
-        "@typescript-eslint/no-floating-promises":"error",
-        "@typescript-eslint/await-thenable":"error",
-        "@typescript-eslint/no-non-null-asserted-optional-chain": "error",
-        "unused-imports/no-unused-imports": "error",
-        "unused-imports/no-unused-vars": [
-            "error",
-            {
-                "vars": "all",
-                "varsIgnorePattern": "^_",
-                "args": "after-used",
-                "argsIgnorePattern": "^_"
-            }
-        ],
-        "@typescript-eslint/explicit-member-accessibility": [
-            "error"
-        ],
-        "no-console": "error",
-        "no-undef": "error",
-        "no-empty": "error",
-        "prefer-arrow-callback": "error",
-        "constructor-super": "error",
-        "no-case-declarations": "error",
-        "no-mixed-spaces-and-tabs": "error",
-        "no-useless-escape": "error",
-        "prettier/prettier": "error",
-        "react/jsx-no-undef": "error",
-        "react/jsx-no-bind": [
-            "error",
-            {
-                "allowArrowFunctions": true,
-                "allowBind": false,
-                "ignoreRefs": false
-            }
-        ],
-        "react/no-children-prop": "error",
-        "react/no-deprecated": "error",
-        "react/boolean-prop-naming": "error",
-        "react/no-is-mounted": "error",
-        "react/no-find-dom-node": "error",
-        "one-var-declaration-per-line": "error",
-        "arrow-parens": "error",
-        "arrow-body-style": [
-            "error",
-            "always"
-        ],
-        "@typescript-eslint/typedef": [
-            "error",
-            {
-                "arrowParameter": true,
-                "variableDeclaration": true
-            }
-        ],
-        "@typescript-eslint/strict-boolean-expressions": "off", //Need to enable this very soon
-        "@typescript-eslint/explicit-function-return-type": [
-            "error",
-            {
-                "allowExpressions": true
-            }
-        ],
-        "react/no-did-update-set-state": "error",
-        "react/no-unknown-property": "error",
-        "react/no-unused-prop-types": "error",
-        "react/jsx-no-duplicate-props": "error",
-        "react/no-unused-state": "error",
-        "react/jsx-uses-vars": "error",
-        "react/prop-types": "error",
-        "react/react-in-jsx-scope": "error",
-        "react/no-string-refs": "error",
-        "jsx-a11y/href-no-hash": [
-            0
-        ],
-        "react/no-unescaped-entities": "error",
-        "react/display-name": "error",
-        "react/jsx-pascal-case": "error",
-        "array-callback-return": "error",
-        "no-loop-func": "error",
-        "no-duplicate-imports": "error",
-        "no-promise-executor-return": "error",
-        "capitalized-comments": "off", // this is turned off because come commented code should not be capitalized. 
-        "for-direction": "error",
-        "getter-return": "error",
-        "jsx-a11y/anchor-is-valid": "error",
-        "no-async-promise-executor": "error",
-        "prefer-const": [
-            "error",
-            {
-                "destructuring": "any",
-                "ignoreReadBeforeAssign": false
-            }
-        ],
-        "no-var": "error"
-    },
-    "settings": {
-        "react": {
-            "version": "18.1.0"
-        }
-    }
-}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,7 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: 'Bug: <Title of the issue>'
+title: '<Title of the issue>'
 labels: 'bug'
 assignees: ''
 
@@ -34,5 +34,8 @@ If applicable, add screenshots to help explain your problem.
  - Browser [e.g. stock browser, safari]
  - Version [e.g. 22]
 
+**Deployment Type**
+Is this issue on SaaS (at https://oneuptime.com) or self hosted (the version that you deployed on your server)? 
+
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,7 +1,7 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: 'Enhancement: <Title of the issue>'
+title: '<Title of the issue>'
 labels: 'enhancement'
 assignees: ''
 

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name:  Docker Build
+name: Build
 
 on:
   pull_request:
@@ -25,7 +25,7 @@ jobs:
       - name: build docker image
         run: sudo docker build -f ./Accounts/Dockerfile .
 
-  docker-build-link-shortener:
+  docker-build-isolated-vm:
     runs-on: ubuntu-latest
     env:
       CI_PIPELINE_ID: ${{github.run_number}}
@@ -38,7 +38,8 @@ jobs:
       
       # build image for accounts service
       - name: build docker image
-        run: sudo docker build -f ./LinkShortener/Dockerfile .
+        run: sudo docker build -f ./IsolatedVM/Dockerfile .
+
 
   docker-build-otel-collector:
     runs-on: ubuntu-latest
@@ -55,22 +56,7 @@ jobs:
       - name: build docker image
         run: sudo docker build -f ./OTelCollector/Dockerfile .
 
-  docker-build-api-reference:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - name: Checkout 
-        uses: actions/checkout@v2
-
-      - name: Preinstall 
-        run: npm run prerun
-        
-      # build image for home
-      - name: build docker image
-        run: sudo docker build -f ./ApiReference/Dockerfile .
-
-  docker-build-dashboard-api:
+  docker-build-app:
     runs-on: ubuntu-latest
     env:
       CI_PIPELINE_ID: ${{github.run_number}}
@@ -84,7 +70,39 @@ jobs:
         
       # build image for accounts service
       - name: build docker image
-        run: sudo docker build -f ./DashboardAPI/Dockerfile .
+        run: sudo docker build -f ./App/Dockerfile .
+
+
+  docker-build-copilot:
+    runs-on: ubuntu-latest
+    env:
+      CI_PIPELINE_ID: ${{github.run_number}}
+    steps:
+      - name: Checkout 
+        uses: actions/checkout@v2
+
+      - name: Preinstall 
+        run: npm run prerun
+
+      # build image for accounts service
+      - name: build docker image
+        run: sudo docker build -f ./Copilot/Dockerfile .
+
+  docker-build-e2e:
+    runs-on: ubuntu-latest
+    env:
+      CI_PIPELINE_ID: ${{github.run_number}}
+    steps:
+      - name: Checkout 
+        uses: actions/checkout@v2
+
+      - name: Preinstall 
+        run: npm run prerun
+
+        
+      # build image for accounts service
+      - name: build docker image
+        run: sudo docker build -f ./E2E/Dockerfile .
 
   docker-build-admin-dashboard:
     runs-on: ubuntu-latest
@@ -116,21 +134,6 @@ jobs:
       - name: build docker image
         run: sudo docker build -f ./Dashboard/Dockerfile .
 
-  docker-build-file:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - name: Checkout 
-        uses: actions/checkout@v2
-
-      - name: Preinstall 
-        run: npm run prerun
-
-      # build image for file
-      - name: build docker image
-        run: sudo docker build -f ./File/Dockerfile .
-
   docker-build-haraka:
     runs-on: ubuntu-latest
     env:
@@ -147,68 +150,6 @@ jobs:
         run: sudo docker build -f ./Haraka/Dockerfile .
 
 
-  docker-build-home:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - name: Checkout 
-        uses: actions/checkout@v2
-
-      - name: Preinstall 
-        run: npm run prerun
-        
-      # build image for home
-      - name: build docker image
-        run: sudo docker build -f ./Home/Dockerfile .
-
-  docker-build-identity:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - name: Checkout 
-        uses: actions/checkout@v2
-      
-      - name: Preinstall 
-        run: npm run prerun
-        
-      # build image for identity
-      - name: build docker image
-        run: sudo docker build -f ./Identity/Dockerfile .
-
-  docker-build-integrations:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - name: Checkout 
-        uses: actions/checkout@v2
-
-      - name: Preinstall 
-        run: npm run prerun
-        
-      # build image for integrations
-      - name: build docker image
-        run: sudo docker build -f ./Integration/Dockerfile .
-
-
-  docker-build-notification:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - name: Checkout 
-        uses: actions/checkout@v2
-
-      - name: Preinstall 
-        run: npm run prerun
-
-      # build image for mail service
-      - name: build docker image
-        run: sudo docker build -f ./Notification/Dockerfile .
-
-
   docker-build-probe:
     runs-on: ubuntu-latest
     env:
@@ -238,21 +179,21 @@ jobs:
       # build image probe api
       - name: build docker image
         run: sudo docker build -f ./Ingestor/Dockerfile .
-
-  docker-build-realtime:
+  
+  docker-build-telemetry-ingestor:
     runs-on: ubuntu-latest
     env:
       CI_PIPELINE_ID: ${{github.run_number}}
     steps:
       - name: Checkout 
         uses: actions/checkout@v2
-
+      
       - name: Preinstall 
         run: npm run prerun
-
-      # build image for home
+        
+      # build image probe api
       - name: build docker image
-        run: sudo docker build -f ./Realtime/Dockerfile .
+        run: sudo docker build -f ./TelemetryIngestor/Dockerfile .
 
   docker-build-status-page:
     runs-on: ubuntu-latest
@@ -269,38 +210,6 @@ jobs:
       - name: build docker image
         run: sudo docker build -f ./StatusPage/Dockerfile .
 
-  docker-build-workers:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - name: Checkout 
-        uses: actions/checkout@v2
-      
-      - name: Preinstall 
-        run: npm run prerun
-
-        
-      # build image for home
-      - name: build docker image
-        run: sudo docker build -f ./Workers/Dockerfile .
-
-  docker-build-workflow:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - name: Checkout 
-        uses: actions/checkout@v2
-
-      - name: Preinstall 
-        run: npm run prerun
-
-      # build image for mail service
-      - name: build docker image
-        run: sudo docker build -f ./Workflow/Dockerfile .
-
-
   docker-build-test-server:
     runs-on: ubuntu-latest
     env:
@@ -314,4 +223,4 @@ jobs:
 
       # build image for mail service
       - name: build docker image
-        run: sudo docker build -f ./TestServer/Dockerfile .
+        run: sudo docker build -f ./TestServer/Dockerfile .

.github/workflows/codeql-analysis.yml

@@ -34,7 +34,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: [ 'javascript', 'typescript', 'go' ]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://git.io/codeql-language-support
 

.github/workflows/compile.yml

@@ -23,9 +23,9 @@ jobs:
       - run: cd Model && npm install
       - run: cd CommonServer && npm install
       - run: cd CommonUI && npm install --force
-      - run: cd Accounts && npm install && npm run compile
+      - run: cd Accounts && npm install && npm run compile && npm run dep-check
 
-  compile-api-reference:
+  compile-isolated-vm:
     runs-on: ubuntu-latest
     env:
       CI_PIPELINE_ID: ${{github.run_number}}
@@ -35,23 +35,8 @@ jobs:
         with:
           node-version: 18.3.0
       - run: cd Common && npm install
-      - run: cd Model && npm install
       - run: cd CommonServer && npm install
-      - run: cd ApiReference && npm install && npm run compile
-
-  compile-link-shortener:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 18.3.0
-      - run: cd Common && npm install
-      - run: cd Model && npm install
-      - run: cd CommonServer && npm install
-      - run: cd LinkShortener && npm install && npm run compile
+      - run: cd IsolatedVM && npm install && npm run compile && npm run dep-check
 
   compile-common-server:
     runs-on: ubuntu-latest
@@ -64,7 +49,7 @@ jobs:
           node-version: 18.3.0
       - run: cd Common && npm install
       - run: cd Model && npm install
-      - run: cd CommonServer && npm install && npm run compile
+      - run: cd CommonServer && npm install && npm run compile && npm run dep-check
 
   compile-common-ui:
     runs-on: ubuntu-latest
@@ -77,7 +62,7 @@ jobs:
           node-version: 18.3.0
       - run: cd Common && npm install
       - run: cd Model && npm install
-      - run: cd CommonUI && npm install --force && npm run compile
+      - run: cd CommonUI && npm install --force && npm run compile && npm run dep-check
 
   compile-common:
     runs-on: ubuntu-latest
@@ -89,9 +74,9 @@ jobs:
         with:
           node-version: 18.3.0
       - run: cd Common && npm install
-      - run: cd Model && npm install && npm run compile
+      - run: cd Model && npm install && npm run compile && npm run dep-check
 
-  compile-dashboard-api:
+  compile-app:
     runs-on: ubuntu-latest
     env:
       CI_PIPELINE_ID: ${{github.run_number}}
@@ -104,7 +89,46 @@ jobs:
       - run: cd Model && npm install
       - run: cd CommonServer && npm install
       - run: cd CommonUI && npm install --force
-      - run: cd DashboardAPI && npm install && npm run compile
+      - run: cd App && npm install && npm run compile && npm run dep-check
+
+  compile-copilot:
+    runs-on: ubuntu-latest
+    env:
+      CI_PIPELINE_ID: ${{github.run_number}}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18.3.0
+      - run: cd Common && npm install
+      - run: cd Model && npm install
+      - run: cd CommonServer && npm install
+      - run: cd Copilot && npm install && npm run compile && npm run dep-check
+
+  compile-nginx:
+    runs-on: ubuntu-latest
+    env:
+      CI_PIPELINE_ID: ${{github.run_number}}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18.3.0
+      - run: cd Common && npm install
+      - run: cd Model && npm install
+      - run: cd CommonServer && npm install
+      - run: cd CommonUI && npm install --force
+      - run: cd Nginx && npm install && npm run compile && npm run dep-check
+
+  compile-infrastructure-agent:
+    runs-on: ubuntu-latest
+    env:
+      CI_PIPELINE_ID: ${{github.run_number}}
+    steps:
+      - uses: actions/checkout@v4
+      # Setup Go
+      - uses: actions/setup-go@v5
+      - run: cd InfrastructureAgent && go build .
   
 
   compile-admin-dashboard:
@@ -120,7 +144,7 @@ jobs:
       - run: cd Model && npm install
       - run: cd CommonServer && npm install
       - run: cd CommonUI && npm install --force
-      - run: cd AdminDashboard && npm install && npm run compile
+      - run: cd AdminDashboard && npm install && npm run compile && npm run dep-check
 
   compile-dashboard:
     runs-on: ubuntu-latest
@@ -135,77 +159,8 @@ jobs:
       - run: cd Model && npm install
       - run: cd CommonServer && npm install
       - run: cd CommonUI && npm install --force
-      - run: cd Dashboard && npm install && npm run compile
+      - run: cd Dashboard && npm install && npm run compile && npm run dep-check
 
-  compile-file:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 18.3.0
-      - run: cd Common && npm install
-      - run: cd Model && npm install
-      - run: cd CommonServer && npm install
-      - run: cd File && npm install && npm run compile
-
-  compile-home:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 18.3.0
-      - run: cd Common && npm install
-      - run: cd Model && npm install
-      - run: cd CommonServer && npm install
-      - run: cd Home && npm install && npm run compile
-
-  compile-identity:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 18.3.0
-      - run: cd Common && npm install
-      - run: cd Model && npm install
-      - run: cd CommonServer && npm install
-      - run: cd Identity && npm install && npm run compile
-
-  compile-integrations:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 18.3.0
-      - run: cd Common && npm install
-      - run: cd Model && npm install
-      - run: cd CommonServer && npm install
-      - run: cd Integration && npm install && npm run compile
-
-  compile-notification:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 18.3.0
-      - run: cd Common && npm install
-      - run: cd Model && npm install
-      - run: cd CommonServer && npm install
-      - run: cd Notification && npm install && npm run compile
 
   compile-model:
     runs-on: ubuntu-latest
@@ -218,7 +173,19 @@ jobs:
           node-version: 18.3.0
       - run: cd Common && npm install
       - run: cd Model && npm install
-      - run: cd Model && npm install && npm run compile
+      - run: cd Model && npm install && npm run compile && npm run dep-check
+
+  compile-e2e:
+    runs-on: ubuntu-latest
+    env:
+      CI_PIPELINE_ID: ${{github.run_number}}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18.3.0
+      - run: cd Common && npm install
+      - run: cd E2E && npm install && npm run compile && npm run dep-check
 
   compile-probe:
     runs-on: ubuntu-latest
@@ -232,7 +199,7 @@ jobs:
       - run: cd Common && npm install
       - run: cd Model && npm install
       - run: cd CommonServer && npm install
-      - run: cd Probe && npm install && npm run compile
+      - run: cd Probe && npm install && npm run compile && npm run dep-check
 
   compile-ingestor:
     runs-on: ubuntu-latest
@@ -246,10 +213,9 @@ jobs:
       - run: cd Common && npm install
       - run: cd Model && npm install
       - run: cd CommonServer && npm install
-      - run: cd Ingestor && npm install && npm run compile
-  
+      - run: cd Ingestor && npm install && npm run compile && npm run dep-check
 
-  compile-realtime:
+  compile-telemetry-ingestor:
     runs-on: ubuntu-latest
     env:
       CI_PIPELINE_ID: ${{github.run_number}}
@@ -261,7 +227,8 @@ jobs:
       - run: cd Common && npm install
       - run: cd Model && npm install
       - run: cd CommonServer && npm install
-      - run: cd Realtime && npm install && npm run compile
+      - run: cd TelemetryIngestor && npm install && npm run compile && npm run dep-check
+  
 
   compile-status-page:
     runs-on: ubuntu-latest
@@ -276,36 +243,7 @@ jobs:
       - run: cd Model && npm install
       - run: cd CommonServer && npm install
       - run: cd CommonUI && npm install --force
-      - run: cd StatusPage && npm install && npm run compile
-
-  compile-workers:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 18.3.0
-      - run: cd Common && npm install
-      - run: cd Model && npm install
-      - run: cd CommonServer && npm install
-      - run: cd CommonUI && npm install --force
-      - run: cd Workers && npm install && npm run compile
-
-  compile-workflow:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 18.3.0
-      - run: cd Common && npm install
-      - run: cd Model && npm install
-      - run: cd CommonServer && npm install
-      - run: cd Workflow && npm install && npm run compile
+      - run: cd StatusPage && npm install && npm run compile && npm run dep-check
 
   compile-test-server:
     runs-on: ubuntu-latest
@@ -319,4 +257,4 @@ jobs:
       - run: cd Common && npm install
       - run: cd Model && npm install
       - run: cd CommonServer && npm install
-      - run: cd TestServer && npm install && npm run compile
+      - run: cd TestServer && npm install && npm run compile && npm run dep-check

.github/workflows/misc.dependabot-automerge.yaml.skip

@@ -1,16 +0,0 @@
-name: Misc / Dependabot Automerge
-
-on:
-  pull_request:
-
-jobs:
-  merge:
-    runs-on: ubuntu-latest
-    env:
-      CI_PIPELINE_ID: ${{github.run_number}}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: ahmadnassri/action-dependabot-auto-merge@v2
-        with:
-          target: minor
-          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/playwright.yml.skip

@@ -1,31 +0,0 @@
-name: Playwright Tests
-on:
-  push:
-    branches: [ main, master ]
-  pull_request:
-    branches: [ main, master ]
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    env:
-      BASE_URL: http://localhost
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - name: Install dependencies
-      run: npm ci
-    - name: Run Server in Docker
-      run: npm run dev
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: cd Playwright  && npm install && npx playwright install && npx playwright test
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30

.github/workflows/reliability-copilot.yml

@@ -0,0 +1,40 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+name: "OneUptime Reliability Copilot"
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ master ]
+  schedule:
+    # Run every day at midnight UTC
+    - cron: '0 0 * * *'
+
+jobs:
+  analyze:
+    name: Analyze Code
+    runs-on: ubuntu-latest
+    env:
+      CI_PIPELINE_ID: ${{github.run_number}}
+    permissions:
+      actions: read
+      # We will never commit to the main/master branch. We will always create a PR.
+      contents: write
+      security-events: write
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Run Reliability Copilot in Doker Container
+    - name: Run Copilot
+      run: |
+        docker run --rm -v $(pwd):/repository -w /repository oneuptime/copilot:test \ 
+            -e ONEUPTIME_URL='https://test.oneuptime.com' \
+            -e ONEUPTIME_REPOSITORY_SECRET_KEY=${{ secrets.COPILOT_ONEUPTIME_REPOSITORY_SECRET_KEY }} \
+            -e GITHUB_TOKEN=${{ github.token }} \
+            -e GITHUB_USERNAME='simlarsen' \
+            -e ONEUPTIME_LLAMA_SERVER_URL='http://57.128.112.160:8547'

.github/workflows/test-app.yaml

@@ -1,4 +1,4 @@
-name: Home Test
+name: App Test
 
 on:
   pull_request: 
@@ -17,5 +17,4 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: 18.3.0
-      - run: cd Home && npm install && npm run test
-  
+      - run: cd App && npm install && npm run test

.github/workflows/test.common-server.yaml

@@ -19,5 +19,6 @@ jobs:
           node-version: 18.3.0
       - run: cd Common && npm install
       - run: cd Model && npm install
+      - run: cd CommonServer && npm install
       - run: cd CommonServer && bash test-setup.sh
-      - run: export $(grep -v '^#' config.env | xargs) && cd CommonServer && npm install && npm run test
+      - run: export $(grep -v '^#' config.env | xargs) && cd CommonServer && rm -rf build && npm run test

.github/workflows/test.e2e.yaml

@@ -0,0 +1,58 @@
+name: E2E Tests
+
+on:
+  pull_request: 
+  push:
+    branches-ignore:
+      - 'hotfix-*'   # excludes hotfix branches
+      - 'release'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    env:
+      CI_PIPELINE_ID: ${{github.run_number}}
+    steps:
+      # Docker compose needs a lot of space to build images, so we need to free up some space first in the GitHub Actions runner
+      - name: Free Disk Space (Ubuntu)
+        uses: jlumbroso/free-disk-space@main
+        with:
+          # this might remove tools that are actually needed,
+          # if set to "true" but frees about 6 GB
+          tool-cache: false
+          android: true
+          dotnet: true
+          haskell: true
+          large-packages: true
+          docker-images: true
+          swap-storage: true
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18.3.0
+      - run: npm run prerun && bash ./Tests/Scripts/enable-billing-env-var.sh
+      - run: npm run dev
+      - name: Wait for server to start
+        run:  bash ./Tests/Scripts/status-check.sh http://localhost
+      - name: Run E2E Tests. Run docker container e2e in docker compose file
+        run: export $(grep -v '^#' config.env | xargs) && docker compose -f docker-compose.dev.yml up --exit-code-from e2e --abort-on-container-exit e2e || (docker compose -f docker-compose.dev.yml logs e2e && exit 1)
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        # Run this on failure
+        if: failure()
+        with:
+          # Name of the artifact to upload.
+          # Optional. Default is 'artifact'
+          name: test-results
+      
+          # A file, directory or wildcard pattern that describes what to upload
+          # Required.
+          path: |
+            ./E2E
+      
+        
+          # Duration after which artifact will expire in days. 0 means using default retention.
+          # Minimum 1 day.
+          # Maximum 90 days unless changed from the repository settings page.
+          # Optional. Defaults to repository settings.
+          retention-days: 7

.github/workflows/test.ingestor.yaml

@@ -1,4 +1,4 @@
-name: Probe Api Test
+name: Ingestor Test
 
 on:
   pull_request: 

.github/workflows/test.probe.yaml

@@ -19,5 +19,6 @@ jobs:
           node-version: 18.3.0
       - run: cd Common && npm install
       - run: cd CommonServer && npm install
-      - run: cd Probe && npm install && npm run test
+      - run: cd Probe && npm install
+      - run: cd Probe && npm run test
   

.gitignore

@@ -13,7 +13,7 @@ node_modules
 
 .idea
 # testing
-/coverage
+**/coverage
 
 # production
 /build
@@ -92,3 +92,23 @@ Haraka/dkim/keys/public_base64.txt
 .eslintcache
 
 HelmChart/Values/*.values.yaml
+
+LLM/__pycache__/*
+
+LLM/Models/*
+
+Examples/otel-dotnet/obj/*
+
+InfrastructureAgent/sea-prep.blob
+InfrastructureAgent/InfrastructureAgent
+InfrastructureAgent/build/*
+
+
+InfrastructureAgent/err.log
+InfrastructureAgent/out.log
+InfrastructureAgent/daemon.pid
+App/greenlock/.greenlockrc
+App/greenlock/greenlock.d/config.json
+App/greenlock/greenlock.d/config.json.bak
+Examples/otel-dotnet/bin/Debug/net6.0/Grpc.Core.Api.dll.txt
+InfrastructureAgent/oneuptime-infrastructure-agent

.prettierignore

@@ -50,4 +50,7 @@ marketing/*/*
 licenses/*
 certifications/*
 ApiReference/public/assets/*
-JavaScriptSDK/src/cli/server-monitor/out/scripts/prettify/*
+JavaScriptSDK/src/cli/server-monitor/out/scripts/prettify/*
+
+
+CommonServer/Tests/TestingUtils/__mocks__/Stripe.mock.ts

.prettierrc.json

@@ -1,8 +0,0 @@
-{
-    "trailingComma": "es5",
-    "tabWidth": 4,
-    "semi": true,
-    "singleQuote": true,
-    "bracketSpacing": true,
-    "arrowParens": "avoid"
-}

.vscode/launch.json

@@ -19,6 +19,28 @@
         }
     ],
     "configurations": [
+        {
+            "name": "Debug: Copilot Locally",
+            "request": "launch",
+            "localRoot": "${workspaceFolder}/Copilot",
+            "runtimeArgs": [
+                "run-script",
+                "start"
+            ],
+            "runtimeExecutable": "npm",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node"
+        },
+        {
+            "name": "Debug Infrastructure Agent",
+            "type": "go",
+            "request": "launch",
+            "mode": "debug",
+            "program": "./InfrastructureAgent",
+            "args": ["start"],
+        },
         {
             "name": "Node.js - Debug Current File",
             "type": "node",
@@ -29,8 +51,8 @@
         },
         {
             "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/DashboardAPI",
-            "name": "Dashboard API: Debug with Docker",
+            "localRoot": "${workspaceFolder}/App",
+            "name": "App: Debug with Docker",
             "port": 9232,
             "remoteRoot": "/usr/src/app",
             "request": "attach",
@@ -41,34 +63,6 @@
             "restart": true,
             "autoAttachChildProcesses": true
         },
-        {
-            "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/ApiReference",
-            "name": "API Reference: Debug with Docker",
-            "port": 9178,
-            "remoteRoot": "/usr/src/app",
-            "request": "attach",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "type": "node",
-            "restart": true,
-            "autoAttachChildProcesses": true
-        },
-        {
-            "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/LinkShortener",
-            "name": "Link Shortener: Debug with Docker",
-            "port": 9826,
-            "remoteRoot": "/usr/src/app",
-            "request": "attach",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "type": "node",
-            "restart": true,
-            "autoAttachChildProcesses": true
-        },
         {
             "address": "127.0.0.1",
             "localRoot": "${workspaceFolder}/TestServer",
@@ -113,9 +107,9 @@
         },
         {
             "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/Workflow",
-            "name": "Workflow: Debug with Docker",
-            "port": 9212,
+            "localRoot": "${workspaceFolder}/IsolatedVM",
+            "name": "Isolated VM: Debug with Docker",
+            "port": 9974,
             "remoteRoot": "/usr/src/app",
             "request": "attach",
             "skipFiles": [
@@ -127,9 +121,9 @@
         },
         {
             "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/Notification",
-            "name": "Notification: Debug with Docker",
-            "port": 9111,
+            "localRoot": "${workspaceFolder}/Workflow",
+            "name": "Workflow: Debug with Docker",
+            "port": 9212,
             "remoteRoot": "/usr/src/app",
             "request": "attach",
             "skipFiles": [
@@ -181,90 +175,6 @@
             "restart": true,
             "autoAttachChildProcesses": true
         },
-        {
-            "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/Ingestor",
-            "name": "Probe API: Debug with Docker",
-            "port": 9251,
-            "remoteRoot": "/usr/src/app",
-            "request": "attach",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "type": "node",
-            "restart": true,
-            "autoAttachChildProcesses": true
-        },
-        {
-            "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/Identity",
-            "name": "Identity: Debug with Docker",
-            "port": 9132,
-            "remoteRoot": "/usr/src/app",
-            "request": "attach",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "type": "node",
-            "restart": true,
-            "autoAttachChildProcesses": true
-        },
-        {
-            "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/Identity",
-            "name": "File: Debug with Docker",
-            "port": 9012,
-            "remoteRoot": "/usr/src/app",
-            "request": "attach",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "type": "node",
-            "restart": true,
-            "autoAttachChildProcesses": true
-        },
-        {
-            "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/Alert",
-            "name": "Alert: Debug with Docker",
-            "port": 9133,
-            "remoteRoot": "/usr/src/app",
-            "request": "attach",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "type": "node",
-            "restart": true,
-            "autoAttachChildProcesses": true
-        },
-        {
-            "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/Alert",
-            "name": "Integration: Debug with Docker",
-            "port": 9134,
-            "remoteRoot": "/usr/src/app",
-            "request": "attach",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "type": "node",
-            "restart": true,
-            "autoAttachChildProcesses": true
-        },
-        {
-            "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/licensing",
-            "name": "Licensing: Debug with Docker",
-            "port": 9233,
-            "remoteRoot": "/usr/src/app",
-            "request": "attach",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "type": "node",
-            "restart": true,
-            "autoAttachChildProcesses": true
-        },
         {
             "address": "127.0.0.1",
             "localRoot": "${workspaceFolder}/HttpTestServer",
@@ -279,20 +189,6 @@
             "restart": true,
             "autoAttachChildProcesses": true
         },
-        {
-            "address": "127.0.0.1",
-            "localRoot": "${workspaceFolder}/home",
-            "name": "Home: Debug with Docker",
-            "port": 9235,
-            "remoteRoot": "/usr/src/app",
-            "request": "attach",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "type": "node",
-            "restart": true,
-            "autoAttachChildProcesses": true
-        },
         {
             "address": "127.0.0.1",
             "localRoot": "${workspaceFolder}/script-runnner",

Accounts/Dockerfile.tpl

@@ -3,8 +3,7 @@
 #
 
 # Pull base image nodejs image.
-FROM node:current-alpine
-USER root
+FROM node:21.7.3-alpine3.18
 RUN mkdir /tmp/npm &&  chmod 2777 /tmp/npm && chown 1000:1000 /tmp/npm && npm config set cache /tmp/npm --global
 
 
@@ -15,6 +14,10 @@ ENV GIT_SHA=${GIT_SHA}
 ENV APP_VERSION=${APP_VERSION}
 
 
+# IF APP_VERSION is not set, set it to 1.0.0
+RUN if [ -z "$APP_VERSION" ]; then export APP_VERSION=1.0.0; fi
+
+
 # Install bash. 
 RUN apk add bash && apk add curl
 
@@ -26,6 +29,8 @@ RUN mkdir /usr/src
 
 WORKDIR /usr/src/Common
 COPY ./Common/package*.json /usr/src/Common/
+# Set version in ./Common/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/Common/package.json
 RUN npm install
 COPY ./Common /usr/src/Common
 
@@ -33,6 +38,8 @@ COPY ./Common /usr/src/Common
 
 WORKDIR /usr/src/Model
 COPY ./Model/package*.json /usr/src/Model/
+# Set version in ./Model/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/Model/package.json
 RUN npm install
 COPY ./Model /usr/src/Model
 
@@ -40,6 +47,8 @@ COPY ./Model /usr/src/Model
 
 WORKDIR /usr/src/CommonServer
 COPY ./CommonServer/package*.json /usr/src/CommonServer/
+# Set version in ./CommonServer/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/CommonServer/package.json
 RUN npm install
 COPY ./CommonServer /usr/src/CommonServer
 
@@ -50,6 +59,8 @@ COPY ./CommonServer /usr/src/CommonServer
 
 WORKDIR /usr/src/CommonUI
 COPY ./CommonUI/package*.json /usr/src/CommonUI/
+# Set version in ./CommonUI/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/CommonUI/package.json
 RUN npm install --force
 COPY ./CommonUI /usr/src/CommonUI
 
@@ -69,17 +80,20 @@ RUN npm install
 #   - 3003:  accounts
 EXPOSE 3003
 
-
+RUN npm i -D webpack-cli
 
 {{ if eq .Env.ENVIRONMENT "development" }}
 RUN mkdir /usr/src/app/dev-env
 RUN touch /usr/src/app/dev-env/.env
+RUN npm i -D webpack-dev-server
+
 #Run the app
 CMD [ "npm", "run", "dev" ]
 {{ else }}
 # Copy app source
 COPY ./Accounts /usr/src/app
 # Bundle app source
+
 RUN npm run build
 #Run the app
 CMD [ "npm", "start" ]

Accounts/Serve.ts

@@ -1,27 +1,37 @@
-import App from 'CommonServer/Utils/StartServer';
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import Express, { ExpressApplication } from "CommonServer/Utils/Express";
+import logger from "CommonServer/Utils/Logger";
+import App from "CommonServer/Utils/StartServer";
 
-import Express, { ExpressApplication } from 'CommonServer/Utils/Express';
-import logger from 'CommonServer/Utils/Logger';
-
-export const APP_NAME: string = 'accounts';
+export const APP_NAME: string = "accounts";
 
 const app: ExpressApplication = Express.getExpressApp();
 
-const init: () => Promise<void> = async (): Promise<void> => {
-    try {
-        // init the app
-        await App(APP_NAME, undefined, true);
-    } catch (err) {
-        logger.error('App Init Failed:');
-        logger.error(err);
-        throw err;
-    }
+const init: PromiseVoidFunction = async (): Promise<void> => {
+  try {
+    // init the app
+    await App.init({
+      appName: APP_NAME,
+      port: undefined,
+      isFrontendApp: true,
+      statusOptions: {
+        liveCheck: async () => {},
+        readyCheck: async () => {},
+      },
+    });
+    // add default routes
+    await App.addDefaultRoutes();
+  } catch (err) {
+    logger.error("App Init Failed:");
+    logger.error(err);
+    throw err;
+  }
 };
 
 init().catch((err: Error) => {
-    logger.error(err);
-    logger.info('Exiting node process');
-    process.exit(1);
+  logger.error(err);
+  logger.error("Exiting node process");
+  process.exit(1);
 });
 
 export default app;

Accounts/index.d.ts

@@ -1,4 +1,4 @@
-declare module '*.png';
-declare module '*.svg';
-declare module '*.jpg';
-declare module '*.gif';
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpg";
+declare module "*.gif";

Accounts/nodemon.json

@@ -1,4 +1,4 @@
 {
     "watch": ["webpack.config.js"],
-    "exec": "export DEBUG=express:* && printenv > /usr/src/app/dev-env/.env && echo 'HOST=localhost' >> /usr/src/app/dev-env/.env && echo 'USE_HTTPS=false' >> /usr/src/app/dev-env/.env && webpack-dev-server --port=3003 --mode=development"
+    "exec": "export DEBUG=express:* && printenv > /usr/src/app/dev-env/.env && echo 'USE_HTTPS=false' >> /usr/src/app/dev-env/.env && webpack-dev-server --port=3003 --mode=development"
 }

Accounts/package.json

@@ -1,32 +1,17 @@
 {
-    "name": "accounts",
+    "name": "@oneuptime/accounts",
     "version": "0.1.0",
     "private": false,
-    "dependencies": {
-        "Common": "file:../Common",
-        "CommonServer": "file:../CommonServer",
-        "CommonUI": "file:../CommonUI",
-        "crypto-js": "^4.1.1",
-        "formik": "^2.2.9",
-        "Model": "file:../Model",
-        "react": "^18.1.0",
-        "react-dom": "^18.1.0",
-        "react-router": "^6.3.0",
-        "react-router-dom": "^6.3.0",
-        "react-scripts": "5.0.1",
-        "the-new-css-reset": "^1.7.3",
-        "typescript": "^4.6.4",
-        "use-async-effect": "^2.2.7"
-    },
     "scripts": {
         "dev": "npx nodemon",
         "build": "webpack build --mode=production",
         "test": "",
         "compile": "tsc",
+        "clear-modules": "rm -rf node_modules && rm package-lock.json && npm install",
         "start": "node --require ts-node/register Serve.ts",
         "audit": "npm audit --audit-level=low",
         "configure": "npx npm-force-resolutions || echo 'No package-lock.json file. Skipping force resolutions'",
-        "dep-check": "depcheck ./ --skip-missing=true'"
+        "dep-check": "npm install -g depcheck && depcheck ./ --skip-missing=true"
     },
     "browserslist": {
         "production": [
@@ -40,27 +25,30 @@
             "last 1 safari version"
         ]
     },
+    "dependencies": {
+        "Common": "file:../Common",
+        "CommonServer": "file:../CommonServer",
+        "CommonUI": "file:../CommonUI",
+        "css-loader": "^6.11.0",
+        "dotenv": "^16.4.5",
+        "express": "^4.19.2",
+        "file-loader": "^6.2.0",
+        "Model": "file:../Model",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.23.1",
+        "sass-loader": "^13.3.3",
+        "style-loader": "^3.3.4",
+        "ts-loader": "^9.5.1",
+        "use-async-effect": "^2.2.7"
+    },
     "devDependencies": {
-        "@testing-library/jest-dom": "^5.16.4",
-        "@testing-library/react": "^13.2.0",
-        "@testing-library/user-event": "^13.5.0",
-        "@types/jest": "^27.5.1",
         "@types/node": "^16.11.35",
-        "@types/react": "^18.0.9",
+        "@types/react": "^18.2.38",
         "@types/react-dom": "^18.0.4",
         "@types/react-router-dom": "^5.3.3",
-        "css-loader": "^6.7.1",
-        "customize-cra": "^1.0.0",
-        "dotenv-webpack": "^7.1.0",
         "nodemon": "^2.0.20",
-        "process": "0.11.10",
-        "react-app-rewired": "^2.2.1",
-        "sass": "^1.51.0",
-        "sass-loader": "^12.6.0",
-        "ts-loader": "^9.3.0",
         "ts-node": "^10.9.1",
-        "webpack": "^5.76.0",
-        "webpack-cli": "^4.9.2",
-        "webpack-dev-server": "^4.9.0"
+        "webpack": "^5.76.0"
     }
 }

Accounts/src/App.tsx

@@ -1,47 +1,47 @@
-import React, { ReactElement } from 'react';
+import ForgotPasswordPage from "./Pages/ForgotPassword";
+import LoginPage from "./Pages/Login";
+import LoginWithSSO from "./Pages/LoginWithSSO";
+import NotFound from "./Pages/NotFound";
+import RegisterPage from "./Pages/Register";
+import ResetPasswordPage from "./Pages/ResetPassword";
+import VerifyEmail from "./Pages/VerifyEmail";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import React, { ReactElement } from "react";
 import {
-    Routes,
-    Route,
-    useNavigate,
-    useLocation,
-    useParams,
-} from 'react-router-dom';
-import LoginPage from './Pages/Login';
-import NotFound from './Pages/NotFound';
-import ForgotPasswordPage from './Pages/ForgotPassword';
-import RegisterPage from './Pages/Register';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import VerifyEmail from './Pages/VerifyEmail';
-import ResetPasswordPage from './Pages/ResetPassword';
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "react-router-dom";
 
 function App(): ReactElement {
-    Navigation.setNavigateHook(useNavigate());
-    Navigation.setLocation(useLocation());
-    Navigation.setParams(useParams());
+  Navigation.setNavigateHook(useNavigate());
+  Navigation.setLocation(useLocation());
+  Navigation.setParams(useParams());
 
-    return (
-        <div className="m-auto h-screen">
-            <Routes>
-                <Route path="/accounts" element={<LoginPage />} />
-                <Route path="/accounts/login" element={<LoginPage />} />
-                <Route
-                    path="/accounts/forgot-password"
-                    element={<ForgotPasswordPage />}
-                />
-                <Route
-                    path="/accounts/reset-password/:token"
-                    element={<ResetPasswordPage />}
-                />
-                <Route path="/accounts/register" element={<RegisterPage />} />
-                <Route
-                    path="/accounts/verify-email/:token"
-                    element={<VerifyEmail />}
-                />
-                {/* 👇️ only match this when no other routes match */}
-                <Route path="*" element={<NotFound />} />
-            </Routes>
-        </div>
-    );
+  return (
+    <div className="m-auto h-screen">
+      <Routes>
+        <Route path="/accounts" element={<LoginPage />} />
+        <Route path="/accounts/login" element={<LoginPage />} />
+
+        <Route path="/accounts/sso" element={<LoginWithSSO />} />
+        <Route
+          path="/accounts/forgot-password"
+          element={<ForgotPasswordPage />}
+        />
+        <Route
+          path="/accounts/reset-password/:token"
+          element={<ResetPasswordPage />}
+        />
+        <Route path="/accounts/register" element={<RegisterPage />} />
+        <Route path="/accounts/verify-email/:token" element={<VerifyEmail />} />
+        {/* 👇️ only match this when no other routes match */}
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </div>
+  );
 }
 
 export default App;

Accounts/src/Footer.tsx

@@ -1,20 +1,20 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
 
 const Footer: () => JSX.Element = () => {
-    return (
-        <div className="footer">
-            <p>
-                <Link to="/">&copy; OneUptime</Link>
-            </p>
-            <p>
-                <Link to="/">Contact</Link>
-            </p>
-            <p>
-                <Link to="/">Privacy &amp; terms</Link>
-            </p>
-        </div>
-    );
+  return (
+    <div className="footer">
+      <p>
+        <Link to="/">&copy; OneUptime</Link>
+      </p>
+      <p>
+        <Link to="/">Contact</Link>
+      </p>
+      <p>
+        <Link to="/">Privacy &amp; terms</Link>
+      </p>
+    </div>
+  );
 };
 
 export default Footer;

Accounts/src/Index.tsx

@@ -1,14 +1,19 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import { BrowserRouter } from 'react-router-dom';
+import App from "./App";
+import Telemetry from "CommonUI/src/Utils/Telemetry";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+
+Telemetry.init({
+  serviceName: "Accounts",
+});
 
 const root: any = ReactDOM.createRoot(
-    document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 
 root.render(
-    <BrowserRouter>
-        <App />
-    </BrowserRouter>
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
 );

Accounts/src/Pages/ForgotPassword.tsx

@@ -1,99 +1,99 @@
-import React, { useState } from 'react';
-import ModelForm, { FormType } from 'CommonUI/src/Components/Forms/ModelForm';
-import User from 'Model/Models/User';
-import Route from 'Common/Types/API/Route';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import OneUptimeLogo from 'CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg';
-import Link from 'CommonUI/src/Components/Link/Link';
-import { FORGOT_PASSWORD_API_URL } from '../Utils/ApiPaths';
-import URL from 'Common/Types/API/URL';
+import { FORGOT_PASSWORD_API_URL } from "../Utils/ApiPaths";
+import Route from "Common/Types/API/Route";
+import URL from "Common/Types/API/URL";
+import ModelForm, { FormType } from "CommonUI/src/Components/Forms/ModelForm";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import Link from "CommonUI/src/Components/Link/Link";
+import OneUptimeLogo from "CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg";
+import User from "Model/Models/User";
+import React, { useState } from "react";
 
 const ForgotPassword: () => JSX.Element = () => {
-    const apiUrl: URL = FORGOT_PASSWORD_API_URL;
+  const apiUrl: URL = FORGOT_PASSWORD_API_URL;
 
-    const [isSuccess, setIsSuccess] = useState<boolean>(false);
+  const [isSuccess, setIsSuccess] = useState<boolean>(false);
 
-    return (
-        <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-            <div className="sm:mx-auto sm:w-full sm:max-w-md">
-                <img
-                    className="mx-auto h-12 w-auto"
-                    src={OneUptimeLogo}
-                    alt="Your Company"
-                />
-                <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
-                    Forgot your password
-                </h2>
+  return (
+    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <img
+          className="mx-auto h-12 w-auto"
+          src={OneUptimeLogo}
+          alt="Your Company"
+        />
+        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+          Forgot your password
+        </h2>
 
-                {!isSuccess && (
-                    <p className="mt-2 text-center text-sm text-gray-600">
-                        Please enter your email and the password reset link will
-                        be sent to you.
-                    </p>
-                )}
+        {!isSuccess && (
+          <p className="mt-2 text-center text-sm text-gray-600">
+            Please enter your email and the password reset link will be sent to
+            you.
+          </p>
+        )}
 
-                {isSuccess && (
-                    <p className="mt-2 text-center text-sm text-gray-600">
-                        We have emailed you the password reset link. Please do
-                        not forget to check spam.
-                    </p>
-                )}
-            </div>
+        {isSuccess && (
+          <p className="mt-2 text-center text-sm text-gray-600">
+            We have emailed you the password reset link. Please do not forget to
+            check spam.
+          </p>
+        )}
+      </div>
 
-            <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-                {!isSuccess && (
-                    <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-                        <ModelForm<User>
-                            modelType={User}
-                            name="Forgot Password"
-                            id="login-form"
-                            apiUrl={apiUrl}
-                            fields={[
-                                {
-                                    field: {
-                                        email: true,
-                                    },
-                                    title: 'Email',
-                                    fieldType: FormFieldSchemaType.Email,
-                                    required: true,
-                                },
-                            ]}
-                            onSuccess={() => {
-                                setIsSuccess(true);
-                            }}
-                            submitButtonText={'Send Password Reset Link'}
-                            formType={FormType.Create}
-                            maxPrimaryButtonWidth={true}
-                            footer={
-                                <div className="actions pointer text-center mt-4 hover:underline fw-semibold">
-                                    <p>
-                                        <Link
-                                            to={new Route('/accounts/login')}
-                                            className="text-indigo-500 hover:text-indigo-900 cursor-pointer text-sm"
-                                        >
-                                            Return to Sign in.
-                                        </Link>
-                                    </p>
-                                </div>
-                            }
-                        />
-                    </div>
-                )}
-
-                <div className="mt-5 text-center">
-                    <p className="text-muted mb-0 text-gray-500">
-                        Remember your password?{' '}
-                        <Link
-                            to={new Route('/accounts/login')}
-                            className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
-                        >
-                            Login.
-                        </Link>
-                    </p>
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        {!isSuccess && (
+          <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+            <ModelForm<User>
+              modelType={User}
+              name="Forgot Password"
+              id="login-form"
+              createOrUpdateApiUrl={apiUrl}
+              fields={[
+                {
+                  field: {
+                    email: true,
+                  },
+                  title: "Email",
+                  fieldType: FormFieldSchemaType.Email,
+                  required: true,
+                },
+              ]}
+              onSuccess={() => {
+                setIsSuccess(true);
+              }}
+              submitButtonText={"Send Password Reset Link"}
+              formType={FormType.Create}
+              maxPrimaryButtonWidth={true}
+              footer={
+                <div className="actions pointer text-center mt-4 hover:underline fw-semibold">
+                  <p>
+                    <Link
+                      to={new Route("/accounts/login")}
+                      className="text-indigo-500 hover:text-indigo-900 cursor-pointer text-sm"
+                    >
+                      Return to Sign in.
+                    </Link>
+                  </p>
                 </div>
-            </div>
+              }
+            />
+          </div>
+        )}
+
+        <div className="mt-5 text-center">
+          <p className="text-muted mb-0 text-gray-500">
+            Remember your password?{" "}
+            <Link
+              to={new Route("/accounts/login")}
+              className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
+            >
+              Login.
+            </Link>
+          </p>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default ForgotPassword;

Accounts/src/Pages/Login.tsx

@@ -1,152 +1,132 @@
-import React, { useState } from 'react';
-import User from 'Model/Models/User';
-import Route from 'Common/Types/API/Route';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import OneUptimeLogo from 'CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg';
-import Link from 'CommonUI/src/Components/Link/Link';
-import ModelForm, { FormType } from 'CommonUI/src/Components/Forms/ModelForm';
-import { LOGIN_API_URL } from '../Utils/ApiPaths';
-import URL from 'Common/Types/API/URL';
-import { JSONObject } from 'Common/Types/JSON';
-import LoginUtil from '../Utils/Login';
-import UserUtil from 'CommonUI/src/Utils/User';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import { DASHBOARD_URL } from 'CommonUI/src/Config';
-import Alert, { AlertType } from 'CommonUI/src/Components/Alerts/Alert';
-import UiAnalytics from 'CommonUI/src/Utils/Analytics';
+import { LOGIN_API_URL } from "../Utils/ApiPaths";
+import Route from "Common/Types/API/Route";
+import URL from "Common/Types/API/URL";
+import { JSONObject } from "Common/Types/JSON";
+import ModelForm, { FormType } from "CommonUI/src/Components/Forms/ModelForm";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import Link from "CommonUI/src/Components/Link/Link";
+import { DASHBOARD_URL } from "CommonUI/src/Config";
+import OneUptimeLogo from "CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg";
+import UiAnalytics from "CommonUI/src/Utils/Analytics";
+import LoginUtil from "CommonUI/src/Utils/Login";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import UserUtil from "CommonUI/src/Utils/User";
+import User from "Model/Models/User";
+import React from "react";
+import useAsyncEffect from "use-async-effect";
 
 const LoginPage: () => JSX.Element = () => {
-    const apiUrl: URL = LOGIN_API_URL;
+  const apiUrl: URL = LOGIN_API_URL;
 
-    if (UserUtil.isLoggedIn()) {
-        Navigation.navigate(DASHBOARD_URL);
+  if (UserUtil.isLoggedIn()) {
+    Navigation.navigate(DASHBOARD_URL);
+  }
+
+  const [initialValues, setInitialValues] = React.useState<JSONObject>({});
+
+  useAsyncEffect(async () => {
+    if (Navigation.getQueryStringByName("email")) {
+      setInitialValues({
+        email: Navigation.getQueryStringByName("email"),
+      });
     }
+  }, []);
 
-    const showSsoMessage: boolean = Boolean(
-        Navigation.getQueryStringByName('sso')
-    );
+  return (
+    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="">
+        <img
+          className="mx-auto h-12 w-auto"
+          src={OneUptimeLogo}
+          alt="OneUptime"
+        />
+        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+          Sign in to your account
+        </h2>
+        <p className="mt-2 text-center text-sm text-gray-600">
+          Join thousands of business that use OneUptime to help them stay online
+          all the time.
+        </p>
+      </div>
 
-    const [showSsoTip, setShowSSOTip] = useState<boolean>(false);
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <ModelForm<User>
+            modelType={User}
+            id="login-form"
+            name="Login"
+            fields={[
+              {
+                field: {
+                  email: true,
+                },
+                fieldType: FormFieldSchemaType.Email,
+                placeholder: "jeff@example.com",
+                required: true,
+                disabled: Boolean(initialValues && initialValues["email"]),
+                title: "Email",
+                dataTestId: "email",
+              },
+              {
+                field: {
+                  password: true,
+                },
+                title: "Password",
+                required: true,
+                validation: {
+                  minLength: 6,
+                },
+                fieldType: FormFieldSchemaType.Password,
+                sideLink: {
+                  text: "Forgot password?",
+                  url: new Route("/accounts/forgot-password"),
+                  openLinkInNewTab: false,
+                },
+                dataTestId: "password",
+              },
+            ]}
+            createOrUpdateApiUrl={apiUrl}
+            formType={FormType.Create}
+            submitButtonText={"Login"}
+            onSuccess={(value: User, miscData: JSONObject | undefined) => {
+              if (value && value.email) {
+                UiAnalytics.userAuth(value.email);
+                UiAnalytics.capture("accounts/login");
+              }
 
-    return (
-        <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-            <div className="">
-                <img
-                    className="mx-auto h-12 w-auto"
-                    src={OneUptimeLogo}
-                    alt="OneUptime"
-                />
-                <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
-                    Sign in to your account
-                </h2>
-                <p className="mt-2 text-center text-sm text-gray-600">
-                    Join thousands of business that use OneUptime to help them
-                    stay online all the time.
-                </p>
-            </div>
-
-            {showSsoMessage && (
-                <div className="sm:mx-auto sm:w-full sm:max-w-md mt-8">
-                    {' '}
-                    <Alert
-                        type={AlertType.DANGER}
-                        title="You must be logged into OneUptime account to use single sign-on (SSO) for your project. Logging in to OneUptime account and single sign on (SSO) for your project are two separate steps. Please use the form below to log in to your OneUptime account before you use SSO."
-                    />{' '}
-                </div>
-            )}
-
-            <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-                <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-                    <ModelForm<User>
-                        modelType={User}
-                        id="login-form"
-                        name="Login"
-                        fields={[
-                            {
-                                field: {
-                                    email: true,
-                                },
-                                title: 'Email',
-                                fieldType: FormFieldSchemaType.Email,
-                                required: true,
-                            },
-                            {
-                                field: {
-                                    password: true,
-                                },
-                                title: 'Password',
-                                required: true,
-                                validation: {
-                                    minLength: 6,
-                                },
-                                fieldType: FormFieldSchemaType.Password,
-                                sideLink: {
-                                    text: 'Forgot password?',
-                                    url: new Route('/accounts/forgot-password'),
-                                    openLinkInNewTab: false,
-                                },
-                            },
-                        ]}
-                        apiUrl={apiUrl}
-                        formType={FormType.Create}
-                        submitButtonText={'Login'}
-                        onSuccess={(
-                            value: User,
-                            miscData: JSONObject | undefined
-                        ) => {
-                            if (value && value.email) {
-                                UiAnalytics.userAuth(value.email);
-                                UiAnalytics.capture('accounts/login');
-                            }
-
-                            LoginUtil.login({
-                                user: value,
-                                token: miscData ? miscData['token'] : undefined,
-                            });
-                        }}
-                        maxPrimaryButtonWidth={true}
-                        footer={
-                            <div className="actions pointer text-center mt-4 hover:underline fw-semibold">
-                                <div>
-                                    {!showSsoTip && (
-                                        <div
-                                            onClick={() => {
-                                                setShowSSOTip(true);
-                                            }}
-                                            className="text-indigo-500 hover:text-indigo-900 cursor-pointer text-sm"
-                                        >
-                                            Use single sign-on (SSO) instead
-                                        </div>
-                                    )}
-
-                                    {showSsoTip && (
-                                        <div className="text-gray-500 text-sm">
-                                            Please sign in with your username
-                                            and password. Once you have signed
-                                            in, you&apos;ll be able to sign in
-                                            via SSO that&apos;s configured for
-                                            your project.
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
-                        }
-                    />
-                </div>
-                <div className="mt-10 text-center">
-                    <div className="text-muted mb-0 text-gray-500">
-                        Don&apos;t have an account?{' '}
-                        <Link
-                            to={new Route('/accounts/register')}
-                            className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
-                        >
-                            Register.
-                        </Link>
+              LoginUtil.login({
+                user: value,
+                token: miscData ? miscData["token"] : undefined,
+              });
+            }}
+            maxPrimaryButtonWidth={true}
+            footer={
+              <div className="actions text-center mt-4 hover:underline fw-semibold">
+                <div>
+                  <Link to={new Route("/accounts/sso")}>
+                    <div className="text-indigo-500 hover:text-indigo-900 cursor-pointer text-sm">
+                      Use single sign-on (SSO) instead
                     </div>
+                  </Link>
                 </div>
-            </div>
+              </div>
+            }
+          />
         </div>
-    );
+        <div className="mt-10 text-center">
+          <div className="text-muted mb-0 text-gray-500">
+            Don&apos;t have an account?{" "}
+            <Link
+              to={new Route("/accounts/register")}
+              className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
+            >
+              Register.
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default LoginPage;

Accounts/src/Pages/LoginWithSSO.tsx

@@ -0,0 +1,235 @@
+import { SERVICE_PROVIDER_LOGIN_URL } from "../Utils/ApiPaths";
+import Route from "Common/Types/API/Route";
+import URL from "Common/Types/API/URL";
+import { JSONArray, JSONObject } from "Common/Types/JSON";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import Link from "CommonUI/src/Components/Link/Link";
+import { DASHBOARD_URL, IDENTITY_URL } from "CommonUI/src/Config";
+import OneUptimeLogo from "CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import UserUtil from "CommonUI/src/Utils/User";
+import User from "Model/Models/User";
+import React, { ReactElement, useState } from "react";
+import ProjectSSO from "Model/Models/ProjectSso";
+import PageLoader from "CommonUI/src/Components/Loader/PageLoader";
+import API from "CommonUI/src/Utils/API/API";
+import BasicForm from "CommonUI/src/Components/Forms/BasicForm";
+import Email from "Common/Types/Email";
+import HTTPErrorResponse from "Common/Types/API/HTTPErrorResponse";
+import HTTPResponse from "Common/Types/API/HTTPResponse";
+import StaticModelList from "CommonUI/src/Components/ModelList/StaticModelList";
+
+const LoginPage: () => JSX.Element = () => {
+  const apiUrl: URL = SERVICE_PROVIDER_LOGIN_URL;
+
+  if (UserUtil.isLoggedIn()) {
+    Navigation.navigate(DASHBOARD_URL);
+  }
+
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [projectSsoConfigList, setProjectSsoConfigList] = useState<
+    Array<ProjectSSO>
+  >([]);
+
+  type FetchSSOConfigsFunction = (email: Email) => Promise<void>;
+
+  const fetchSsoConfigs: FetchSSOConfigsFunction = async (
+    email: Email,
+  ): Promise<void> => {
+    if (email) {
+      setIsLoading(true);
+      try {
+        // get sso config by email.
+        const listResult: HTTPErrorResponse | HTTPResponse<JSONArray> =
+          await API.get(
+            URL.fromString(apiUrl.toString()).addQueryParam(
+              "email",
+              email.toString(),
+            ),
+          );
+
+        if (listResult instanceof HTTPErrorResponse) {
+          throw listResult;
+        }
+
+        if (!listResult.data || (listResult.data as JSONArray).length === 0) {
+          setError(
+            "No SSO configuration found for the email: " + email.toString(),
+          );
+        } else {
+          setProjectSsoConfigList(
+            ProjectSSO.fromJSONArray(listResult["data"], ProjectSSO),
+          );
+        }
+      } catch (error) {
+        setError(API.getFriendlyErrorMessage(error as Error));
+      }
+    } else {
+      setError("Email is required to perform this action");
+    }
+
+    setIsLoading(false);
+  };
+
+  type GetSsoConfigModelListFunction = (
+    configs: Array<ProjectSSO>,
+  ) => ReactElement;
+
+  const getSsoConfigModelList: GetSsoConfigModelListFunction = (
+    configs: Array<ProjectSSO>,
+  ): ReactElement => {
+    return (
+      <StaticModelList<ProjectSSO>
+        list={configs}
+        titleField="name"
+        selectedItems={[]}
+        descriptionField="description"
+        onClick={(item: ProjectSSO) => {
+          setIsLoading(true);
+          Navigation.navigate(
+            URL.fromURL(IDENTITY_URL).addRoute(
+              new Route(
+                `/sso/${item.projectId?.toString()}/${item.id?.toString()}`,
+              ),
+            ),
+          );
+        }}
+      />
+    );
+  };
+
+  if (isLoading) {
+    return <PageLoader isVisible={true} />;
+  }
+
+  type GetProjectNameFunction = (projectId: string) => string;
+
+  const getProjectName: GetProjectNameFunction = (
+    projectId: string,
+  ): string => {
+    const projectNames: Array<string | undefined> = projectSsoConfigList
+      .filter((config: ProjectSSO) => {
+        return config.projectId?.toString() === projectId.toString();
+      })
+      .map((config: ProjectSSO) => {
+        return config.project?.name;
+      });
+    return projectNames[0] || "Project";
+  };
+
+  if (projectSsoConfigList.length > 0 && !error && !isLoading) {
+    const projectIds: Array<string> = projectSsoConfigList.map(
+      (config: ProjectSSO) => {
+        return config.projectId?.toString() as string;
+      },
+    );
+
+    return (
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+          <div className="">
+            <img
+              className="mx-auto h-12 w-auto"
+              src={OneUptimeLogo}
+              alt="OneUptime"
+            />
+            <h2 className="mt-10 text-center text-xl tracking-tight text-gray-900">
+              Select Project
+            </h2>
+            <p className="mt-2 text-center text-sm text-gray-600">
+              Select the project you want to login to.
+            </p>
+          </div>
+
+          {projectIds.map((projectId: string) => {
+            return (
+              <div key={projectId}>
+                <h3 className="mt-6 font-medium  tracking-tight">
+                  {getProjectName(projectId)}
+                </h3>
+                {getSsoConfigModelList(
+                  projectSsoConfigList.filter((config: ProjectSSO) => {
+                    return (
+                      config.projectId?.toString() === projectId.toString()
+                    );
+                  }),
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="">
+        <img
+          className="mx-auto h-12 w-auto"
+          src={OneUptimeLogo}
+          alt="OneUptime"
+        />
+        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+          Login with SSO
+        </h2>
+        <p className="mt-2 text-center text-sm text-gray-600">
+          Login with your SSO provider to access your account.
+        </p>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <BasicForm
+            modelType={User}
+            id="login-form"
+            error={error}
+            name="Login"
+            fields={[
+              {
+                field: {
+                  email: true,
+                },
+                fieldType: FormFieldSchemaType.Email,
+                placeholder: "jeff@example.com",
+                required: true,
+                title: "Email",
+                dataTestId: "email",
+              },
+            ]}
+            maxPrimaryButtonWidth={true}
+            submitButtonText="Login with SSO"
+            onSubmit={async (data: JSONObject) => {
+              await fetchSsoConfigs(data["email"] as Email);
+            }}
+            footer={
+              <div className="actions text-center mt-4 hover:underline fw-semibold">
+                <div>
+                  <Link to={new Route("/accounts/login")}>
+                    <div className="text-indigo-500 hover:text-indigo-900 cursor-pointer text-sm">
+                      Use username and password insead.
+                    </div>
+                  </Link>
+                </div>
+              </div>
+            }
+          />
+        </div>
+        <div className="mt-10 text-center">
+          <div className="text-muted mb-0 text-gray-500">
+            Don&apos;t have an account?{" "}
+            <Link
+              to={new Route("/accounts/register")}
+              className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
+            >
+              Register.
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

Accounts/src/Pages/NotFound.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
+import React from "react";
 
 const LoginPage: () => JSX.Element = () => {
-    return (
-        <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-            <div className="sm:mx-auto sm:w-full sm:max-w-md">
-                <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
-                    Page not found
-                </h2>
-                <p className="mt-2 text-center text-sm text-gray-600">
-                    Page you are looking for does not exist.
-                </p>
-            </div>
-        </div>
-    );
+  return (
+    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+          Page not found
+        </h2>
+        <p className="mt-2 text-center text-sm text-gray-600">
+          Page you are looking for does not exist.
+        </p>
+      </div>
+    </div>
+  );
 };
 
 export default LoginPage;

Accounts/src/Pages/Register.tsx

@@ -1,268 +1,267 @@
-import React, { useState } from 'react';
-import ModelForm, { FormType } from 'CommonUI/src/Components/Forms/ModelForm';
-import User from 'Model/Models/User';
-import Link from 'CommonUI/src/Components/Link/Link';
-import Route from 'Common/Types/API/Route';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import OneUptimeLogo from 'CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg';
-import LoginUtil from '../Utils/Login';
-import { JSONObject } from 'Common/Types/JSON';
-import UserUtil from 'CommonUI/src/Utils/User';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import { BILLING_ENABLED, DASHBOARD_URL } from 'CommonUI/src/Config';
-import URL from 'Common/Types/API/URL';
-import { SIGNUP_API_URL } from '../Utils/ApiPaths';
-import Fields from 'CommonUI/src/Components/Forms/Types/Fields';
-import Dictionary from 'Common/Types/Dictionary';
-import UiAnalytics from 'CommonUI/src/Utils/Analytics';
-import LocalStorage from 'CommonUI/src/Utils/LocalStorage';
-import Reseller from 'Model/Models/Reseller';
-import ModelAPI, { ListResult } from 'CommonUI/src/Utils/ModelAPI/ModelAPI';
-import BaseAPI from 'CommonUI/src/Utils/API/API';
-import ErrorMessage from 'CommonUI/src/Components/ErrorMessage/ErrorMessage';
-import PageLoader from 'CommonUI/src/Components/Loader/PageLoader';
-import useAsyncEffect from 'use-async-effect';
+import { SIGNUP_API_URL } from "../Utils/ApiPaths";
+import Route from "Common/Types/API/Route";
+import URL from "Common/Types/API/URL";
+import Dictionary from "Common/Types/Dictionary";
+import { JSONObject } from "Common/Types/JSON";
+import ErrorMessage from "CommonUI/src/Components/ErrorMessage/ErrorMessage";
+import ModelForm, { FormType } from "CommonUI/src/Components/Forms/ModelForm";
+import Fields from "CommonUI/src/Components/Forms/Types/Fields";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import Link from "CommonUI/src/Components/Link/Link";
+import PageLoader from "CommonUI/src/Components/Loader/PageLoader";
+import { BILLING_ENABLED, DASHBOARD_URL } from "CommonUI/src/Config";
+import OneUptimeLogo from "CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg";
+import BaseAPI from "CommonUI/src/Utils/API/API";
+import UiAnalytics from "CommonUI/src/Utils/Analytics";
+import LocalStorage from "CommonUI/src/Utils/LocalStorage";
+import LoginUtil from "CommonUI/src/Utils/Login";
+import ModelAPI, { ListResult } from "CommonUI/src/Utils/ModelAPI/ModelAPI";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import UserUtil from "CommonUI/src/Utils/User";
+import Reseller from "Model/Models/Reseller";
+import User from "Model/Models/User";
+import React, { useState } from "react";
+import useAsyncEffect from "use-async-effect";
 
 const RegisterPage: () => JSX.Element = () => {
-    const apiUrl: URL = SIGNUP_API_URL;
+  const apiUrl: URL = SIGNUP_API_URL;
 
-    const [initialValues, setInitialValues] = React.useState<JSONObject>({});
+  const [initialValues, setInitialValues] = React.useState<JSONObject>({});
 
-    const [error, setError] = useState<string>('');
+  const [error, setError] = useState<string>("");
 
-    const [isLoading, setIsLoading] = React.useState<boolean>(false);
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
 
-    const [reseller, setResller] = React.useState<Reseller | undefined>(
-        undefined
-    );
+  const [reseller, setResller] = React.useState<Reseller | undefined>(
+    undefined,
+  );
 
-    if (UserUtil.isLoggedIn()) {
-        Navigation.navigate(DASHBOARD_URL);
+  if (UserUtil.isLoggedIn()) {
+    Navigation.navigate(DASHBOARD_URL);
+  }
+
+  type FetchResellerFunction = (resellerId: string) => Promise<void>;
+
+  const fetchReseller: FetchResellerFunction = async (
+    resellerId: string,
+  ): Promise<void> => {
+    setIsLoading(true);
+
+    try {
+      const reseller: ListResult<Reseller> = await ModelAPI.getList<Reseller>({
+        modelType: Reseller,
+        query: {
+          resellerId: resellerId,
+        },
+        limit: 1,
+        skip: 0,
+        select: {
+          hidePhoneNumberOnSignup: true,
+        },
+        sort: {},
+        requestOptions: {},
+      });
+
+      if (reseller.data.length > 0) {
+        setResller(reseller.data[0]);
+      }
+    } catch (err) {
+      setError(BaseAPI.getFriendlyMessage(err));
     }
 
-    const fetchReseller: Function = async (
-        resellerId: string
-    ): Promise<void> => {
-        setIsLoading(true);
+    setIsLoading(false);
+  };
 
-        try {
-            const reseller: ListResult<Reseller> =
-                await ModelAPI.getList<Reseller>(
-                    Reseller,
-                    {
-                        resellerId: resellerId,
-                    },
-                    1,
-                    0,
-                    {
-                        hidePhoneNumberOnSignup: true,
-                    },
-                    {},
-                    {}
-                );
-
-            if (reseller.data.length > 0) {
-                setResller(reseller.data[0]);
-            }
-        } catch (err) {
-            setError(BaseAPI.getFriendlyMessage(err));
-        }
-
-        setIsLoading(false);
-    };
-
-    useAsyncEffect(async () => {
-        // if promo code is found, please save it in localstorage.
-        if (Navigation.getQueryStringByName('promoCode')) {
-            LocalStorage.setItem(
-                'promoCode',
-                Navigation.getQueryStringByName('promoCode')
-            );
-        }
-
-        if (Navigation.getQueryStringByName('email')) {
-            setInitialValues({
-                email: Navigation.getQueryStringByName('email'),
-            });
-        }
-
-        // if promo code is found, please save it in localstorage.
-        if (Navigation.getQueryStringByName('partnerId')) {
-            await fetchReseller(Navigation.getQueryStringByName('partnerId')!);
-        }
-    }, []);
-
-    let formFields: Fields<User> = [
-        {
-            field: {
-                email: true,
-            },
-            fieldType: FormFieldSchemaType.Email,
-            placeholder: 'jeff@example.com',
-            required: true,
-            disabled: Boolean(initialValues && initialValues['email']),
-            title: 'Email',
-        },
-        {
-            field: {
-                name: true,
-            },
-            fieldType: FormFieldSchemaType.Text,
-            placeholder: 'Jeff Smith',
-            required: true,
-            title: 'Full Name',
-        },
-    ];
-
-    if (BILLING_ENABLED) {
-        formFields = formFields.concat([
-            {
-                field: {
-                    companyName: true,
-                },
-                fieldType: FormFieldSchemaType.Text,
-                placeholder: 'Acme, Inc.',
-                required: true,
-                title: 'Company Name',
-            },
-        ]);
-
-        // If reseller wants to hide phone number on sign up, we hide it.
-        if (!reseller || !reseller.hidePhoneNumberOnSignup) {
-            formFields.push({
-                field: {
-                    companyPhoneNumber: true,
-                },
-                fieldType: FormFieldSchemaType.Phone,
-                required: true,
-                placeholder: '+11234567890',
-                title: 'Phone Number',
-            });
-        }
+  useAsyncEffect(async () => {
+    // if promo code is found, please save it in localstorage.
+    if (Navigation.getQueryStringByName("promoCode")) {
+      LocalStorage.setItem(
+        "promoCode",
+        Navigation.getQueryStringByName("promoCode"),
+      );
     }
 
+    if (Navigation.getQueryStringByName("email")) {
+      setInitialValues({
+        email: Navigation.getQueryStringByName("email"),
+      });
+    }
+
+    // if promo code is found, please save it in localstorage.
+    if (Navigation.getQueryStringByName("partnerId")) {
+      await fetchReseller(Navigation.getQueryStringByName("partnerId")!);
+    }
+  }, []);
+
+  let formFields: Fields<User> = [
+    {
+      field: {
+        email: true,
+      },
+      fieldType: FormFieldSchemaType.Email,
+      placeholder: "jeff@example.com",
+      required: true,
+      disabled: Boolean(initialValues && initialValues["email"]),
+      title: "Email",
+      dataTestId: "email",
+    },
+    {
+      field: {
+        name: true,
+      },
+      fieldType: FormFieldSchemaType.Text,
+      placeholder: "Jeff Smith",
+      required: true,
+      title: "Full Name",
+      dataTestId: "name",
+    },
+  ];
+
+  if (BILLING_ENABLED) {
     formFields = formFields.concat([
-        {
-            field: {
-                password: true,
-            },
-            fieldType: FormFieldSchemaType.Password,
-            validation: {
-                minLength: 6,
-            },
-            placeholder: 'Password',
-            title: 'Password',
-            required: true,
-        },
-        {
-            field: {
-                confirmPassword: true,
-            } as any,
-            validation: {
-                minLength: 6,
-                toMatchField: 'password',
-            },
-            fieldType: FormFieldSchemaType.Password,
-            placeholder: 'Confirm Password',
-            title: 'Confirm Password',
-            overrideFieldKey: 'confirmPassword',
-            required: true,
-            forceShow: true,
+      {
+        field: {
+          companyName: true,
         },
+        fieldType: FormFieldSchemaType.Text,
+        placeholder: "Acme, Inc.",
+        required: true,
+        title: "Company Name",
+        dataTestId: "companyName",
+      },
     ]);
 
-    if (error) {
-        return <ErrorMessage error={error} />;
+    // If reseller wants to hide phone number on sign up, we hide it.
+    if (!reseller || !reseller.hidePhoneNumberOnSignup) {
+      formFields.push({
+        field: {
+          companyPhoneNumber: true,
+        },
+        fieldType: FormFieldSchemaType.Phone,
+        required: true,
+        placeholder: "+11234567890",
+        title: "Phone Number",
+        dataTestId: "companyPhoneNumber",
+      });
     }
+  }
 
-    if (isLoading) {
-        return <PageLoader isVisible={true} />;
-    }
+  formFields = formFields.concat([
+    {
+      field: {
+        password: true,
+      },
+      fieldType: FormFieldSchemaType.Password,
+      validation: {
+        minLength: 6,
+      },
+      placeholder: "Password",
+      title: "Password",
+      required: true,
+      dataTestId: "password",
+    },
+    {
+      field: {
+        confirmPassword: true,
+      } as any,
+      validation: {
+        minLength: 6,
+        toMatchField: "password",
+      },
+      fieldType: FormFieldSchemaType.Password,
+      placeholder: "Confirm Password",
+      title: "Confirm Password",
+      overrideFieldKey: "confirmPassword",
+      required: true,
+      showEvenIfPermissionDoesNotExist: true,
+      dataTestId: "confirmPassword",
+    },
+  ]);
 
-    return (
-        <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-            <div className="sm:mx-auto sm:w-full sm:max-w-md">
-                <img
-                    className="mx-auto h-12 w-auto"
-                    src={OneUptimeLogo}
-                    alt="OneUptime"
-                />
-                <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
-                    Create your OneUptime account
-                </h2>
-                <p className="mt-2 text-center text-sm text-gray-600">
-                    Join thousands of business that use OneUptime to help them
-                    stay online all the time.
-                </p>
-                <p className="mt-2 text-center text-sm text-gray-600">
-                    No credit card required.
-                </p>
-            </div>
+  if (error) {
+    return <ErrorMessage error={error} />;
+  }
 
-            <div className="mt-8 lg:mx-auto lg:w-full lg:max-w-2xl">
-                <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-                    <ModelForm<User>
-                        modelType={User}
-                        id="register-form"
-                        showAsColumns={reseller ? 1 : 2}
-                        name="Register"
-                        initialValues={initialValues}
-                        maxPrimaryButtonWidth={true}
-                        fields={formFields}
-                        apiUrl={apiUrl}
-                        onBeforeCreate={(item: User): Promise<User> => {
-                            const utmParams: Dictionary<string> =
-                                UserUtil.getUtmParams();
+  if (isLoading) {
+    return <PageLoader isVisible={true} />;
+  }
 
-                            if (
-                                utmParams &&
-                                Object.keys(utmParams).length > 0
-                            ) {
-                                item.utmSource = utmParams['utmSource'] || '';
-                                item.utmMedium = utmParams['utmMedium'] || '';
-                                item.utmCampaign =
-                                    utmParams['utmCampaign'] || '';
-                                item.utmTerm = utmParams['utmTerm'] || '';
-                                item.utmContent = utmParams['utmContent'] || '';
-                                item.utmUrl = utmParams['utmUrl'] || '';
+  return (
+    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <img
+          className="mx-auto h-12 w-auto"
+          src={OneUptimeLogo}
+          alt="OneUptime"
+        />
+        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+          Create your OneUptime account
+        </h2>
+        <p className="mt-2 text-center text-sm text-gray-600">
+          Join thousands of business that use OneUptime to help them stay online
+          all the time.
+        </p>
+        <p className="mt-2 text-center text-sm text-gray-600">
+          No credit card required.
+        </p>
+      </div>
 
-                                UiAnalytics.capture('utm_event', utmParams);
-                            }
+      <div className="mt-8 lg:mx-auto lg:w-full lg:max-w-2xl">
+        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <ModelForm<User>
+            modelType={User}
+            id="register-form"
+            showAsColumns={reseller ? 1 : 2}
+            name="Register"
+            initialValues={initialValues}
+            maxPrimaryButtonWidth={true}
+            fields={formFields}
+            createOrUpdateApiUrl={apiUrl}
+            onBeforeCreate={(item: User): Promise<User> => {
+              const utmParams: Dictionary<string> = UserUtil.getUtmParams();
 
-                            return Promise.resolve(item);
-                        }}
-                        formType={FormType.Create}
-                        submitButtonText={'Sign Up'}
-                        onSuccess={(
-                            value: User,
-                            miscData: JSONObject | undefined
-                        ) => {
-                            if (value && value.email) {
-                                UiAnalytics.userAuth(value.email);
-                                UiAnalytics.capture('accounts/register');
-                            }
+              if (utmParams && Object.keys(utmParams).length > 0) {
+                item.utmSource = utmParams["utmSource"] || "";
+                item.utmMedium = utmParams["utmMedium"] || "";
+                item.utmCampaign = utmParams["utmCampaign"] || "";
+                item.utmTerm = utmParams["utmTerm"] || "";
+                item.utmContent = utmParams["utmContent"] || "";
+                item.utmUrl = utmParams["utmUrl"] || "";
 
-                            LoginUtil.login({
-                                user: value,
-                                token: miscData ? miscData['token'] : undefined,
-                            });
-                        }}
-                    />
-                </div>
-                <div className="mt-5 text-center text-gray-500">
-                    <p className="text-muted mb-0">
-                        Already have an account?{' '}
-                        <Link
-                            to={new Route('/accounts/login')}
-                            className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
-                        >
-                            Log in.
-                        </Link>
-                    </p>
-                </div>
-            </div>
+                UiAnalytics.capture("utm_event", utmParams);
+              }
+
+              return Promise.resolve(item);
+            }}
+            formType={FormType.Create}
+            submitButtonText={"Sign Up"}
+            onSuccess={(value: User, miscData: JSONObject | undefined) => {
+              if (value && value.email) {
+                UiAnalytics.userAuth(value.email);
+                UiAnalytics.capture("accounts/register");
+              }
+
+              LoginUtil.login({
+                user: value,
+                token: miscData ? miscData["token"] : undefined,
+              });
+            }}
+          />
         </div>
-    );
+        <div className="mt-5 text-center text-gray-500">
+          <p className="text-muted mb-0">
+            Already have an account?{" "}
+            <Link
+              to={new Route("/accounts/login")}
+              className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
+            >
+              Log in.
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default RegisterPage;

Accounts/src/Pages/ResetPassword.tsx

@@ -1,114 +1,114 @@
-import React, { useState } from 'react';
-import ModelForm, { FormType } from 'CommonUI/src/Components/Forms/ModelForm';
-import User from 'Model/Models/User';
-import Link from 'CommonUI/src/Components/Link/Link';
-import Route from 'Common/Types/API/Route';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import OneUptimeLogo from 'CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg';
-
-import URL from 'Common/Types/API/URL';
-import { RESET_PASSWORD_API_URL } from '../Utils/ApiPaths';
-import Navigation from 'CommonUI/src/Utils/Navigation';
+import { RESET_PASSWORD_API_URL } from "../Utils/ApiPaths";
+import Route from "Common/Types/API/Route";
+import URL from "Common/Types/API/URL";
+import ModelForm, { FormType } from "CommonUI/src/Components/Forms/ModelForm";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import Link from "CommonUI/src/Components/Link/Link";
+import OneUptimeLogo from "CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import User from "Model/Models/User";
+import React, { useState } from "react";
 
 const RegisterPage: () => JSX.Element = () => {
-    const apiUrl: URL = RESET_PASSWORD_API_URL;
-    const [isSuccess, setIsSuccess] = useState<boolean>(false);
+  const apiUrl: URL = RESET_PASSWORD_API_URL;
+  const [isSuccess, setIsSuccess] = useState<boolean>(false);
 
-    return (
-        <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-            <div className="sm:mx-auto sm:w-full sm:max-w-md">
-                <img
-                    className="mx-auto h-12 w-auto"
-                    src={OneUptimeLogo}
-                    alt="Your Company"
-                />
-                <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
-                    Reset your password
-                </h2>
+  return (
+    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <img
+          className="mx-auto h-12 w-auto"
+          src={OneUptimeLogo}
+          alt="Your Company"
+        />
+        <h2 className="mt-6 text-center text-2xl  tracking-tight text-gray-900">
+          Reset your password
+        </h2>
 
-                {!isSuccess && (
-                    <p className="mt-2 text-center text-sm text-gray-600">
-                        Please enter your new password and we will have it
-                        updated.{' '}
-                    </p>
-                )}
+        {!isSuccess && (
+          <p className="mt-2 text-center text-sm text-gray-600">
+            Please enter your new password and we will have it updated.{" "}
+          </p>
+        )}
 
-                {isSuccess && (
-                    <p className="mt-2 text-center text-sm text-gray-600">
-                        Your password has been updated. Please log in.
-                    </p>
-                )}
-            </div>
+        {isSuccess && (
+          <p className="mt-2 text-center text-sm text-gray-600">
+            Your password has been updated. Please log in.
+          </p>
+        )}
+      </div>
 
-            <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-                {!isSuccess && (
-                    <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-                        <ModelForm<User>
-                            modelType={User}
-                            id="register-form"
-                            name="Reset Password"
-                            onBeforeCreate={(item: User): Promise<User> => {
-                                item.resetPasswordToken =
-                                    Navigation.getLastParam()
-                                        ?.toString()
-                                        .replace('/', '')
-                                        .toString() || '';
-                                return Promise.resolve(item);
-                            }}
-                            showAsColumns={1}
-                            maxPrimaryButtonWidth={true}
-                            fields={[
-                                {
-                                    field: {
-                                        password: true,
-                                    },
-                                    fieldType: FormFieldSchemaType.Password,
-                                    validation: {
-                                        minLength: 6,
-                                    },
-                                    placeholder: 'New Password',
-                                    title: 'New Password',
-                                    required: true,
-                                },
-                                {
-                                    field: {
-                                        password: true,
-                                    },
-                                    validation: {
-                                        minLength: 6,
-                                        toMatchField: 'password',
-                                    },
-                                    fieldType: FormFieldSchemaType.Password,
-                                    placeholder: 'Confirm Password',
-                                    title: 'Confirm Password',
-                                    overrideFieldKey: 'confirmPassword',
-                                    required: true,
-                                },
-                            ]}
-                            apiUrl={apiUrl}
-                            formType={FormType.Create}
-                            submitButtonText={'Reset Password'}
-                            onSuccess={() => {
-                                setIsSuccess(true);
-                            }}
-                        />
-                    </div>
-                )}
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        {!isSuccess && (
+          <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+            <ModelForm<User>
+              modelType={User}
+              id="register-form"
+              name="Reset Password"
+              onBeforeCreate={(item: User): Promise<User> => {
+                item.resetPasswordToken =
+                  Navigation.getLastParam()
+                    ?.toString()
+                    .replace("/", "")
+                    .toString() || "";
+                return Promise.resolve(item);
+              }}
+              showAsColumns={1}
+              maxPrimaryButtonWidth={true}
+              fields={[
+                {
+                  field: {
+                    password: true,
+                  },
+                  fieldType: FormFieldSchemaType.Password,
+                  validation: {
+                    minLength: 6,
+                  },
+                  placeholder: "New Password",
+                  title: "New Password",
+                  required: true,
+                  showEvenIfPermissionDoesNotExist: true,
+                },
+                {
+                  field: {
+                    confirmPassword: true,
+                  } as any,
+                  validation: {
+                    minLength: 6,
+                    toMatchField: "password",
+                  },
+                  fieldType: FormFieldSchemaType.Password,
+                  placeholder: "Confirm Password",
+                  title: "Confirm Password",
+                  overrideFieldKey: "confirmPassword",
+                  required: true,
+                  showEvenIfPermissionDoesNotExist: true,
+                },
+              ]}
+              createOrUpdateApiUrl={apiUrl}
+              formType={FormType.Create}
+              submitButtonText={"Reset Password"}
+              onSuccess={() => {
+                setIsSuccess(true);
+              }}
+            />
+          </div>
+        )}
 
-                <div className="mt-5 text-center">
-                    <p className="text-muted mb-0 text-gray-500">
-                        Know your password?{' '}
-                        <Link
-                            to={new Route('/accounts/login')}
-                            className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
-                        >
-                            Log in.
-                        </Link>
-                    </p>
-                </div>
-            </div>
+        <div className="mt-5 text-center">
+          <p className="text-muted mb-0 text-gray-500">
+            Know your password?{" "}
+            <Link
+              to={new Route("/accounts/login")}
+              className="text-indigo-500 hover:text-indigo-900 cursor-pointer"
+            >
+              Log in.
+            </Link>
+          </p>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default RegisterPage;

Accounts/src/Pages/VerifyEmail.tsx

@@ -1,131 +1,121 @@
-import React, { useEffect, useState } from 'react';
-import Route from 'Common/Types/API/Route';
-import OneUptimeLogo from 'CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg';
-import Link from 'CommonUI/src/Components/Link/Link';
-import PageLoader from 'CommonUI/src/Components/Loader/PageLoader';
-import ModelAPI from 'CommonUI/src/Utils/ModelAPI/ModelAPI';
-import EmailVerificationToken from 'Model/Models/EmailVerificationToken';
-import { VERIFY_EMAIL_API_URL } from '../Utils/ApiPaths';
-import { FormType } from 'CommonUI/src/Components/Forms/ModelForm';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import ObjectID from 'Common/Types/ObjectID';
-import URL from 'Common/Types/API/URL';
-import API from 'CommonUI/src/Utils/API/API';
+import { VERIFY_EMAIL_API_URL } from "../Utils/ApiPaths";
+import Route from "Common/Types/API/Route";
+import URL from "Common/Types/API/URL";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import ObjectID from "Common/Types/ObjectID";
+import { FormType } from "CommonUI/src/Components/Forms/ModelForm";
+import Link from "CommonUI/src/Components/Link/Link";
+import PageLoader from "CommonUI/src/Components/Loader/PageLoader";
+import OneUptimeLogo from "CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg";
+import API from "CommonUI/src/Utils/API/API";
+import ModelAPI from "CommonUI/src/Utils/ModelAPI/ModelAPI";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import EmailVerificationToken from "Model/Models/EmailVerificationToken";
+import React, { useEffect, useState } from "react";
 
 const VerifyEmail: () => JSX.Element = () => {
-    const apiUrl: URL = VERIFY_EMAIL_API_URL;
-    const [error, setError] = useState<string>('');
-    const [isLoading, setIsLoading] = useState<boolean>(true);
+  const apiUrl: URL = VERIFY_EMAIL_API_URL;
+  const [error, setError] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
-    const init: () => Promise<void> = async (): Promise<void> => {
-        // Ping an API here.
-        setError('');
-        setIsLoading(true);
+  const init: PromiseVoidFunction = async (): Promise<void> => {
+    // Ping an API here.
+    setError("");
+    setIsLoading(true);
 
-        try {
-            // strip data.
-            const emailverificationToken: EmailVerificationToken =
-                new EmailVerificationToken();
-            emailverificationToken.token = new ObjectID(
-                Navigation.getLastParam()?.toString().replace('/', '') || ''
-            );
+    try {
+      // strip data.
+      const emailverificationToken: EmailVerificationToken =
+        new EmailVerificationToken();
+      emailverificationToken.token = new ObjectID(
+        Navigation.getLastParam()?.toString().replace("/", "") || "",
+      );
 
-            await ModelAPI.createOrUpdate<EmailVerificationToken>(
-                emailverificationToken,
-                EmailVerificationToken,
-                FormType.Create,
-                {},
-                {
-                    overrideRequestUrl: apiUrl,
-                }
-            );
-        } catch (err) {
-            setError(API.getFriendlyMessage(err));
-        }
-
-        setIsLoading(false);
-    };
-
-    useEffect(() => {
-        init().catch((err: Error) => {
-            setError(err.toString());
-        });
-    }, []);
-
-    if (isLoading) {
-        return <PageLoader isVisible={true} />;
+      await ModelAPI.createOrUpdate<EmailVerificationToken>({
+        model: emailverificationToken,
+        modelType: EmailVerificationToken,
+        formType: FormType.Create,
+        miscDataProps: {},
+        requestOptions: {
+          overrideRequestUrl: apiUrl,
+        },
+      });
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
     }
 
-    return (
-        <div className="auth-page">
-            <div className="container-fluid p-0">
-                <div className="row g-0">
-                    <div className="col-xxl-4 col-lg-4 col-md-3"></div>
+    setIsLoading(false);
+  };
 
-                    <div className="col-xxl-4 col-lg-4 col-md-6">
-                        <div className="auth-full-page-content d-flex p-sm-5 p-4">
-                            <div className="w-100">
-                                <div className="d-flex flex-column h-100">
-                                    <div className="auth-content my-auto">
-                                        <div
-                                            className="mt-4 text-center flex justify-center"
-                                            style={{ marginBottom: '40px' }}
-                                        >
-                                            <img
-                                                style={{ height: '50px' }}
-                                                src={`${OneUptimeLogo}`}
-                                            />
-                                        </div>
-                                        {!error && (
-                                            <div className="text-center">
-                                                <h5 className="mb-0">
-                                                    Your email is verified.
-                                                </h5>
-                                                <p className="text-muted mt-2 mb-0">
-                                                    Thank you for verifying your
-                                                    email. You can now log in to
-                                                    OneUptime.{' '}
-                                                </p>
-                                            </div>
-                                        )}
+  useEffect(() => {
+    init().catch((err: Error) => {
+      setError(err.toString());
+    });
+  }, []);
 
-                                        {error && (
-                                            <div className="text-center">
-                                                <h5 className="mb-0">
-                                                    Sorry, something went wrong!
-                                                </h5>
-                                                <p className="text-muted mt-2 mb-0">
-                                                    {error}
-                                                </p>
-                                            </div>
-                                        )}
+  if (isLoading) {
+    return <PageLoader isVisible={true} />;
+  }
 
-                                        <div className="mt-5 text-center">
-                                            <p className="text-muted mb-0">
-                                                Return to sign in?{' '}
-                                                <Link
-                                                    to={
-                                                        new Route(
-                                                            '/accounts/login'
-                                                        )
-                                                    }
-                                                    className="hover:underline text-primary fw-semibold"
-                                                >
-                                                    Login.
-                                                </Link>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+  return (
+    <div className="auth-page">
+      <div className="container-fluid p-0">
+        <div className="row g-0">
+          <div className="col-xxl-4 col-lg-4 col-md-3"></div>
+
+          <div className="col-xxl-4 col-lg-4 col-md-6">
+            <div className="auth-full-page-content d-flex p-sm-5 p-4">
+              <div className="w-100">
+                <div className="d-flex flex-column h-100">
+                  <div className="auth-content my-auto">
+                    <div
+                      className="mt-4 text-center flex justify-center"
+                      style={{ marginBottom: "40px" }}
+                    >
+                      <img
+                        style={{ height: "50px" }}
+                        src={`${OneUptimeLogo}`}
+                      />
                     </div>
+                    {!error && (
+                      <div className="text-center">
+                        <h5 className="mb-0">Your email is verified.</h5>
+                        <p className="text-muted mt-2 mb-0">
+                          Thank you for verifying your email. You can now log in
+                          to OneUptime.{" "}
+                        </p>
+                      </div>
+                    )}
 
-                    <div className="col-xxl-4 col-lg-4 col-md-3"></div>
+                    {error && (
+                      <div className="text-center">
+                        <h5 className="mb-0">Sorry, something went wrong!</h5>
+                        <p className="text-muted mt-2 mb-0">{error}</p>
+                      </div>
+                    )}
+
+                    <div className="mt-5 text-center">
+                      <p className="text-muted mb-0">
+                        Return to sign in?{" "}
+                        <Link
+                          to={new Route("/accounts/login")}
+                          className="hover:underline text-primary fw-semibold"
+                        >
+                          Login.
+                        </Link>
+                      </p>
+                    </div>
+                  </div>
                 </div>
+              </div>
             </div>
+          </div>
+
+          <div className="col-xxl-4 col-lg-4 col-md-3"></div>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default VerifyEmail;

Accounts/src/Utils/ApiPaths.ts

@@ -1,22 +1,26 @@
-import Route from 'Common/Types/API/Route';
-import URL from 'Common/Types/API/URL';
-import { IDENTITY_URL } from 'CommonUI/src/Config';
+import Route from "Common/Types/API/Route";
+import URL from "Common/Types/API/URL";
+import { IDENTITY_URL } from "CommonUI/src/Config";
 
 export const SIGNUP_API_URL: URL = URL.fromURL(IDENTITY_URL).addRoute(
-    new Route('/signup')
+  new Route("/signup"),
 );
 export const LOGIN_API_URL: URL = URL.fromURL(IDENTITY_URL).addRoute(
-    new Route('/login')
+  new Route("/login"),
 );
 
+export const SERVICE_PROVIDER_LOGIN_URL: URL = URL.fromURL(
+  IDENTITY_URL,
+).addRoute(new Route("/service-provider-login"));
+
 export const FORGOT_PASSWORD_API_URL: URL = URL.fromURL(IDENTITY_URL).addRoute(
-    new Route('/forgot-password')
+  new Route("/forgot-password"),
 );
 
 export const VERIFY_EMAIL_API_URL: URL = URL.fromURL(IDENTITY_URL).addRoute(
-    new Route('/verify-email')
+  new Route("/verify-email"),
 );
 
 export const RESET_PASSWORD_API_URL: URL = URL.fromURL(IDENTITY_URL).addRoute(
-    new Route('/reset-password')
+  new Route("/reset-password"),
 );

Accounts/src/Utils/Login.ts

@@ -1,33 +0,0 @@
-import UserUtil from 'CommonUI/src/Utils/User';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import Email from 'Common/Types/Email';
-import ObjectID from 'Common/Types/ObjectID';
-import Name from 'Common/Types/Name';
-import { DASHBOARD_URL } from 'CommonUI/src/Config';
-import { JSONObject } from 'Common/Types/JSON';
-import User from 'Model/Models/User';
-import JSONFunctions from 'Common/Types/JSONFunctions';
-import Analytics from 'CommonUI/src/Utils/Analytics';
-
-export default abstract class LoginUtil {
-    public static login(value: JSONObject): void {
-        const user: User = JSONFunctions.fromJSON(
-            value['user'] as JSONObject,
-            User
-        ) as User;
-
-        UserUtil.setEmail(user.email as Email);
-        UserUtil.setUserId(user.id as ObjectID);
-        UserUtil.setName(user.name || new Name(''));
-        UserUtil.setIsMasterAdmin(user.isMasterAdmin as boolean);
-
-        if (user.profilePictureId) {
-            UserUtil.setProfilePicId(user.profilePictureId);
-        }
-
-        Analytics.userAuth(user.email!);
-
-        // go to dashboard, user should be logged in.
-        Navigation.navigate(DASHBOARD_URL);
-    }
-}

Accounts/tsconfig.json

@@ -3,11 +3,13 @@
         // these options are overrides used only by ts-node
         // same as the --compilerOptions flag and the TS_NODE_COMPILER_OPTIONS environment variable
         "compilerOptions": {
-            "module": "commonjs"
+            "module": "commonjs",
+            "resolveJsonModule": true, 
         }
     },
     "compilerOptions": {
         /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
         /* Projects */
         // "incremental": true,                              /* Enable incremental compilation */
         // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
@@ -15,43 +17,47 @@
         // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
         // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
         // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
         /* Language and Environment */
         "target": "es2017" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
         // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
         "jsx": "react" /* Specify what JSX code is generated. */,
-        "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
-        "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
+        "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+        "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
         // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
         // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
         // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
         // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
         // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
         // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+
         /* Modules */
         "module": "es2022" /* Specify what module code is generated. */,
         // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-        "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
+        "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
         // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
         // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
         // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-        "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */
-        "types": [
-            "node"
-        ], /* Specify type package names to be included without being referenced in a source file. */
+        "typeRoots": [
+            "./node_modules/@types"
+        ], /* Specify multiple folders that act like `./node_modules/@types`. */
+        "types": ["node"],                                      /* Specify type package names to be included without being referenced in a source file. */
         // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
         // "resolveJsonModule": true,                        /* Enable importing .json files */
         // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
+
         /* JavaScript Support */
         // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
         // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
         // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
+
         /* Emit */
         // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
         // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
         // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-        "sourceMap": true, /* Create source map files for emitted JavaScript files. */
+        "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
         // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
-        "outDir": "./build/dist", /* Specify an output folder for all emitted files. */
+        "outDir": "./build/dist",                                   /* Specify an output folder for all emitted files. */
         // "removeComments": true,                           /* Disable emitting comments. */
         // "noEmit": true,                                   /* Disable emitting files from a compilation. */
         // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
@@ -69,34 +75,38 @@
         // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
         // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
         // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
         /* Interop Constraints */
         // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
         // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
         "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
         // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
         "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
         /* Type Checking */
         "strict": true /* Enable all strict type-checking options. */,
-        "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */
-        "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */
-        "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-        "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
-        "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
-        "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */
-        "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
-        "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
-        "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */
-        "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */
-        "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
-        "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
-        "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
-        "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
-        "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
-        "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */
+         "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
+        "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
+       "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+        "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
+        "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+        "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
+        "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
+        "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+        "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
+        "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
+       "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+        "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+        "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+        "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
+        "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+         "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
         // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
         // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
         /* Completeness */
         // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-        "skipLibCheck": true /* Skip type checking all .d.ts files. */
+                "skipLibCheck": true, /* Skip type checking all .d.ts files. */
+        "resolveJsonModule": true
     }
-}
+}

Accounts/webpack.config.js

@@ -1,78 +1,84 @@
+require("ts-loader");
+require("file-loader");
+require("style-loader");
+require("css-loader");
+require("sass-loader");
 const path = require("path");
 const webpack = require("webpack");
-const dotenv = require('dotenv');
-const express = require('express');
+const dotenv = require("dotenv");
+const express = require("express");
 
 const readEnvFile = (pathToFile) => {
+  const parsed = dotenv.config({ path: pathToFile }).parsed;
 
-    const parsed = dotenv.config({ path: pathToFile }).parsed;
+  const env = {};
 
-    const env = {
-    };
+  for (const key in parsed) {
+    env[key] = JSON.stringify(parsed[key]);
+  }
 
-    for (const key in parsed) {
-        env[key] = JSON.stringify(parsed[key]);
-    }
-
-    return env;
-}
+  return env;
+};
 
 module.exports = {
-    entry: "./src/Index.tsx",
-    mode: "development",
-    output: {
-        filename: "bundle.js",
-        path: path.resolve(__dirname, "public", "dist"),
-        publicPath: "/accounts/dist/",
+  entry: "./src/Index.tsx",
+  mode: "development",
+  output: {
+    filename: "bundle.js",
+    path: path.resolve(__dirname, "public", "dist"),
+    publicPath: "/accounts/dist/",
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".css", ".scss"],
+    alias: {
+      react: path.resolve("./node_modules/react"),
     },
-    resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.css', '.scss'],
-        alias: {
-            react: path.resolve('./node_modules/react'),
-        }
-    },
-    externals: {
-        'react-native-sqlite-storage': 'react-native-sqlite-storage'
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process': {
-                'env': {
-                    ...readEnvFile('/usr/src/app/dev-env/.env')
-                }
-            }
-        }),
-    ],
-    module: {
-        rules: [
-            {
-                test: /\.(ts|tsx)$/,
-                use: 'ts-loader'
-            },
-            {
-                test: /\.s[ac]ss$/i,
-                use: ['style-loader', 'css-loader', "sass-loader"]
-            },
-            {
-                test: /\.css$/i,
-                use: ['style-loader', 'css-loader']
-            },
-            {
-                test: /\.(jpe?g|png|gif|svg)$/i,
-                loader: 'file-loader'
-            }
-        ],
-    },
-    devServer: {
-        historyApiFallback: true,
-        devMiddleware: {
-            writeToDisk: true,
+  },
+  externals: {
+    "react-native-sqlite-storage": "react-native-sqlite-storage",
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      process: {
+        env: {
+          ...readEnvFile("/usr/src/app/dev-env/.env"),
         },
-        allowedHosts: "all",
-        setupMiddlewares: (middlewares, devServer) => {
-            devServer.app.use('/accounts/assets', express.static(path.resolve(__dirname, 'public', 'assets')));
-            return middlewares;
-        }
+      },
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        use: "ts-loader",
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        use: ["style-loader", "css-loader", "sass-loader"],
+      },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        loader: "file-loader",
+      },
+    ],
+  },
+  devServer: {
+    historyApiFallback: true,
+    devMiddleware: {
+      writeToDisk: true,
     },
-    devtool: 'eval-source-map',
-}
+    allowedHosts: "all",
+    setupMiddlewares: (middlewares, devServer) => {
+      devServer.app.use(
+        "/accounts/assets",
+        express.static(path.resolve(__dirname, "public", "assets")),
+      );
+      return middlewares;
+    },
+  },
+  devtool: "eval-source-map",
+};

AdminDashboard/Dockerfile.tpl

@@ -3,8 +3,7 @@
 #
 
 # Pull base image nodejs image.
-FROM node:current-alpine
-USER root
+FROM node:21.7.3-alpine3.18
 RUN mkdir /tmp/npm &&  chmod 2777 /tmp/npm && chown 1000:1000 /tmp/npm && npm config set cache /tmp/npm --global
 
 
@@ -15,6 +14,10 @@ ENV GIT_SHA=${GIT_SHA}
 ENV APP_VERSION=${APP_VERSION}
 
 
+# IF APP_VERSION is not set, set it to 1.0.0
+RUN if [ -z "$APP_VERSION" ]; then export APP_VERSION=1.0.0; fi
+
+
 # Install bash. 
 RUN apk add bash && apk add curl
 
@@ -26,12 +29,16 @@ RUN mkdir /usr/src
 
 WORKDIR /usr/src/Common
 COPY ./Common/package*.json /usr/src/Common/
+# Set version in ./Common/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/Common/package.json
 RUN npm install
 COPY ./Common /usr/src/Common
 
 
 WORKDIR /usr/src/Model
 COPY ./Model/package*.json /usr/src/Model/
+# Set version in ./Model/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/Model/package.json
 RUN npm install
 COPY ./Model /usr/src/Model
 
@@ -39,6 +46,8 @@ COPY ./Model /usr/src/Model
 
 WORKDIR /usr/src/CommonServer
 COPY ./CommonServer/package*.json /usr/src/CommonServer/
+# Set version in ./CommonServer/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/CommonServer/package.json
 RUN npm install
 COPY ./CommonServer /usr/src/CommonServer
 
@@ -49,6 +58,8 @@ COPY ./CommonServer /usr/src/CommonServer
 
 WORKDIR /usr/src/CommonUI
 COPY ./CommonUI/package*.json /usr/src/CommonUI/
+# Set version in ./CommonUI/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/CommonUI/package.json
 RUN npm install --force
 COPY ./CommonUI /usr/src/CommonUI
 
@@ -67,10 +78,13 @@ RUN npm install
 #   - 3158:  AdminDashboard
 EXPOSE 3158
 
+RUN npm i -D webpack-cli
+
 {{ if eq .Env.ENVIRONMENT "development" }}
 #Run the app
 RUN mkdir /usr/src/app/dev-env
 RUN touch /usr/src/app/dev-env/.env
+RUN npm i -D webpack-dev-server
 CMD [ "npm", "run", "dev" ]
 {{ else }}
 # Copy app source

AdminDashboard/Serve.ts

@@ -1,26 +1,38 @@
-import App from 'CommonServer/Utils/StartServer';
-import Express, { ExpressApplication } from 'CommonServer/Utils/Express';
-import logger from 'CommonServer/Utils/Logger';
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import Express, { ExpressApplication } from "CommonServer/Utils/Express";
+import logger from "CommonServer/Utils/Logger";
+import App from "CommonServer/Utils/StartServer";
 
-export const APP_NAME: string = 'admin';
+export const APP_NAME: string = "admin";
 
 const app: ExpressApplication = Express.getExpressApp();
 
-const init: () => Promise<void> = async (): Promise<void> => {
-    try {
-        // init the app
-        await App(APP_NAME, undefined, true);
-    } catch (err) {
-        logger.error('App Init Failed:');
-        logger.error(err);
-        throw err;
-    }
+const init: PromiseVoidFunction = async (): Promise<void> => {
+  try {
+    // init the app
+    await App.init({
+      appName: APP_NAME,
+      port: undefined,
+      isFrontendApp: true,
+      statusOptions: {
+        liveCheck: async () => {},
+        readyCheck: async () => {},
+      },
+    });
+
+    // add default routes
+    await App.addDefaultRoutes();
+  } catch (err) {
+    logger.error("App Init Failed:");
+    logger.error(err);
+    throw err;
+  }
 };
 
 init().catch((err: Error) => {
-    logger.error(err);
-    logger.info('Exiting node process');
-    process.exit(1);
+  logger.error(err);
+  logger.error("Exiting node process");
+  process.exit(1);
 });
 
 export default app;

AdminDashboard/index.d.ts

@@ -1,4 +1,4 @@
-declare module '*.png';
-declare module '*.svg';
-declare module '*.jpg';
-declare module '*.gif';
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpg";
+declare module "*.gif";

AdminDashboard/nodemon.json

@@ -1,4 +1,4 @@
 {
     "watch": ["webpack.config.js"],
-    "exec": "export DEBUG=express:* && printenv > /usr/src/app/dev-env/.env && echo 'HOST=localhost' >> /usr/src/app/dev-env/.env && echo 'USE_HTTPS=false' >> /usr/src/app/dev-env/.env && webpack-dev-server --port=3158 --mode=development"
+    "exec": "export DEBUG=express:* && printenv > /usr/src/app/dev-env/.env && echo 'USE_HTTPS=false' >> /usr/src/app/dev-env/.env && webpack-dev-server --port=3158 --mode=development"
 }

AdminDashboard/package.json

@@ -1,28 +1,18 @@
 {
-    "name": "admin-dashboard",
+    "name": "@oneuptime/admin-dashboard",
     "version": "0.1.0",
     "private": false,
     "dependencies": {
-        "@headlessui/react": "^1.7.7",
-        "@heroicons/react": "^2.0.13",
-        "@stripe/react-stripe-js": "^1.15.0",
-        "@stripe/stripe-js": "^1.44.1",
         "Common": "file:../Common",
         "CommonServer": "file:../CommonServer",
         "CommonUI": "file:../CommonUI",
+        "dotenv": "^16.4.5",
+        "file-loader": "^6.2.0",
         "Model": "file:../Model",
-        "react": "^18.1.0",
-        "react-dnd": "^16.0.1",
-        "react-dnd-html5-backend": "^16.0.1",
-        "react-dom": "^18.1.0",
-        "react-icons": "^4.4.0",
-        "react-router": "^6.3.0",
-        "react-router-dom": "^6.3.0",
-        "reactflow": "^11.5.3",
-        "stripe": "^11.0.0",
-        "the-new-css-reset": "^1.7.3",
-        "typescript": "^4.6.4",
-        "use-async-effect": "^2.2.6"
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.23.1",
+        "style-loader": "^3.3.4"
     },
     "scripts": {
         "dev": "npx nodemon",
@@ -30,10 +20,11 @@
         "test": "react-app-rewired test",
         "eject": "webpack eject",
         "compile": "tsc",
+        "clear-modules": "rm -rf node_modules && rm package-lock.json && npm install",
         "start": "node --require ts-node/register Serve.ts",
         "audit": "npm audit --audit-level=low",
         "configure": "npx npm-force-resolutions || echo 'No package-lock.json file. Skipping force resolutions'",
-        "dep-check": "depcheck ./ --skip-missing=true'"
+        "dep-check": "npm install -g depcheck && depcheck ./ --skip-missing=true"
     },
     "browserslist": {
         "production": [
@@ -48,24 +39,17 @@
         ]
     },
     "devDependencies": {
-        "@testing-library/jest-dom": "^5.16.4",
-        "@testing-library/react": "^13.2.0",
-        "@testing-library/user-event": "^13.5.0",
-        "@types/jest": "^27.5.1",
         "@types/node": "^16.11.35",
-        "@types/react": "^18.0.9",
+        "@types/react": "^18.2.38",
         "@types/react-dom": "^18.0.4",
         "@types/react-router-dom": "^5.3.3",
-        "css-loader": "^6.7.1",
-        "customize-cra": "^1.0.0",
+        "css-loader": "^6.8.1",
         "nodemon": "^2.0.20",
         "react-app-rewired": "^2.2.1",
         "sass": "^1.51.0",
         "sass-loader": "^12.6.0",
-        "ts-loader": "^9.3.0",
+        "ts-loader": "^9.5.1",
         "ts-node": "^10.9.1",
-        "webpack": "^5.76.0",
-        "webpack-cli": "^4.9.2",
-        "webpack-dev-server": "^4.9.0"
+        "webpack": "^5.76.0"
     }
 }

AdminDashboard/src/App.tsx

@@ -1,113 +1,103 @@
-import React from 'react';
-import {
-    Routes,
-    Route as PageRoute,
-    useNavigate,
-    useLocation,
-    useParams,
-} from 'react-router-dom';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import User from 'CommonUI/src/Utils/User';
-import URL from 'Common/Types/API/URL';
-import { ACCOUNTS_URL, DASHBOARD_URL } from 'CommonUI/src/Config';
-import MasterPage from './Components/MasterPage/MasterPage';
-import RouteMap from './Utils/RouteMap';
-import PageMap from './Utils/PageMap';
-import Init from './Pages/Init/Init';
-import Projects from './Pages/Projects/Index';
-import Users from './Pages/Users/Index';
-import Logout from './Pages/Logout/Logout';
-
+import MasterPage from "./Components/MasterPage/MasterPage";
+import Init from "./Pages/Init/Init";
+import Logout from "./Pages/Logout/Logout";
+import Projects from "./Pages/Projects/Index";
+import SettingsAPIKey from "./Pages/Settings/APIKey/Index";
+import SettingsAuthentication from "./Pages/Settings/Authentication/Index";
+import SettingsCallSMS from "./Pages/Settings/CallSMS/Index";
 // Settings Pages.
-import SettingsEmail from './Pages/Settings/SMTP/Index';
-import SettingsCallSMS from './Pages/Settings/CallSMS/Index';
-import SettingsProbes from './Pages/Settings/Probes/Index';
-import SettingsAuthentication from './Pages/Settings/Authentication/Index';
-import SettingsAPIKey from './Pages/Settings/APIKey/Index';
+import SettingsEmail from "./Pages/Settings/Email/Index";
+import SettingsProbes from "./Pages/Settings/Probes/Index";
+import Users from "./Pages/Users/Index";
+import PageMap from "./Utils/PageMap";
+import RouteMap from "./Utils/RouteMap";
+import URL from "Common/Types/API/URL";
+import { ACCOUNTS_URL, DASHBOARD_URL } from "CommonUI/src/Config";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import User from "CommonUI/src/Utils/User";
+import React from "react";
+import {
+  Route as PageRoute,
+  Routes,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "react-router-dom";
 
 const App: () => JSX.Element = () => {
-    Navigation.setNavigateHook(useNavigate());
-    Navigation.setLocation(useLocation());
-    Navigation.setParams(useParams());
+  Navigation.setNavigateHook(useNavigate());
+  Navigation.setLocation(useLocation());
+  Navigation.setParams(useParams());
 
-    if (!User.isLoggedIn()) {
-        if (Navigation.getQueryStringByName('sso_token')) {
-            Navigation.navigate(
-                URL.fromString(ACCOUNTS_URL.toString()).addQueryParam(
-                    'sso',
-                    'true'
-                )
-            );
-        } else {
-            Navigation.navigate(URL.fromString(ACCOUNTS_URL.toString()));
-        }
+  if (!User.isLoggedIn()) {
+    if (Navigation.getQueryStringByName("sso_token")) {
+      Navigation.navigate(
+        URL.fromString(ACCOUNTS_URL.toString()).addQueryParam("sso", "true"),
+      );
+    } else {
+      Navigation.navigate(URL.fromString(ACCOUNTS_URL.toString()));
     }
+  }
 
-    if (!User.isMasterAdmin()) {
-        Navigation.navigate(URL.fromString(DASHBOARD_URL.toString()));
-    }
+  if (!User.isMasterAdmin()) {
+    Navigation.navigate(URL.fromString(DASHBOARD_URL.toString()));
+  }
 
-    return (
-        <MasterPage>
-            <Routes>
-                <PageRoute
-                    path={RouteMap[PageMap.INIT]?.toString() || ''}
-                    element={<Init />}
-                />
+  return (
+    <MasterPage>
+      <Routes>
+        <PageRoute
+          path={RouteMap[PageMap.INIT]?.toString() || ""}
+          element={<Init />}
+        />
 
-                <PageRoute
-                    path={RouteMap[PageMap.PROJECTS]?.toString() || ''}
-                    element={<Projects />}
-                />
+        <PageRoute
+          path={RouteMap[PageMap.PROJECTS]?.toString() || ""}
+          element={<Projects />}
+        />
 
-                <PageRoute
-                    path={RouteMap[PageMap.USERS]?.toString() || ''}
-                    element={<Users />}
-                />
+        <PageRoute
+          path={RouteMap[PageMap.USERS]?.toString() || ""}
+          element={<Users />}
+        />
 
-                <PageRoute
-                    path={RouteMap[PageMap.LOGOUT]?.toString() || ''}
-                    element={<Logout />}
-                />
+        <PageRoute
+          path={RouteMap[PageMap.LOGOUT]?.toString() || ""}
+          element={<Logout />}
+        />
 
-                <PageRoute
-                    path={RouteMap[PageMap.SETTINGS]?.toString() || ''}
-                    element={<SettingsAuthentication />}
-                />
+        <PageRoute
+          path={RouteMap[PageMap.SETTINGS]?.toString() || ""}
+          element={<SettingsAuthentication />}
+        />
 
-                <PageRoute
-                    path={RouteMap[PageMap.SETTINGS_SMTP]?.toString() || ''}
-                    element={<SettingsEmail />}
-                />
+        <PageRoute
+          path={RouteMap[PageMap.SETTINGS_SMTP]?.toString() || ""}
+          element={<SettingsEmail />}
+        />
 
-                <PageRoute
-                    path={
-                        RouteMap[PageMap.SETTINGS_CALL_AND_SMS]?.toString() ||
-                        ''
-                    }
-                    element={<SettingsCallSMS />}
-                />
+        <PageRoute
+          path={RouteMap[PageMap.SETTINGS_CALL_AND_SMS]?.toString() || ""}
+          element={<SettingsCallSMS />}
+        />
 
-                <PageRoute
-                    path={RouteMap[PageMap.SETTINGS_PROBES]?.toString() || ''}
-                    element={<SettingsProbes />}
-                />
+        <PageRoute
+          path={RouteMap[PageMap.SETTINGS_PROBES]?.toString() || ""}
+          element={<SettingsProbes />}
+        />
 
-                <PageRoute
-                    path={
-                        RouteMap[PageMap.SETTINGS_AUTHENTICATION]?.toString() ||
-                        ''
-                    }
-                    element={<SettingsAuthentication />}
-                />
+        <PageRoute
+          path={RouteMap[PageMap.SETTINGS_AUTHENTICATION]?.toString() || ""}
+          element={<SettingsAuthentication />}
+        />
 
-                <PageRoute
-                    path={RouteMap[PageMap.SETTINGS_API_KEY]?.toString() || ''}
-                    element={<SettingsAPIKey />}
-                />
-            </Routes>
-        </MasterPage>
-    );
+        <PageRoute
+          path={RouteMap[PageMap.SETTINGS_API_KEY]?.toString() || ""}
+          element={<SettingsAPIKey />}
+        />
+      </Routes>
+    </MasterPage>
+  );
 };
 
 export default App;

AdminDashboard/src/Components/Footer/Footer.tsx

@@ -1,129 +1,114 @@
-import React from 'react';
-import Footer from 'CommonUI/src/Components/Footer/Footer';
-import URL from 'Common/Types/API/URL';
-import API from 'Common/Utils/API';
-import { HOST, HTTP_PROTOCOL } from 'CommonUI/src/Config';
-import { JSONObject } from 'Common/Types/JSON';
-import BadDataException from 'Common/Types/Exception/BadDataException';
-import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal';
-import Dictionary from 'Common/Types/Dictionary';
-import HTTPResponse from 'Common/Types/API/HTTPResponse';
+import HTTPResponse from "Common/Types/API/HTTPResponse";
+import URL from "Common/Types/API/URL";
+import Dictionary from "Common/Types/Dictionary";
+import BadDataException from "Common/Types/Exception/BadDataException";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import { JSONObject } from "Common/Types/JSON";
+import API from "Common/Utils/API";
+import Footer from "CommonUI/src/Components/Footer/Footer";
+import ConfirmModal from "CommonUI/src/Components/Modal/ConfirmModal";
+import { HOST, HTTP_PROTOCOL } from "CommonUI/src/Config";
+import React from "react";
 
 const DashboardFooter: () => JSX.Element = () => {
-    const [showAboutModal, setShowAboutModal] = React.useState<boolean>(false);
-    const [isAboutModalLoading, setIsAboutModalLoading] =
-        React.useState<boolean>(false);
-    const [versionText, setVersionText] = React.useState<Dictionary<string>>(
-        {}
+  const [showAboutModal, setShowAboutModal] = React.useState<boolean>(false);
+  const [isAboutModalLoading, setIsAboutModalLoading] =
+    React.useState<boolean>(false);
+  const [versionText, setVersionText] = React.useState<Dictionary<string>>({});
+
+  const fetchVersions: PromiseVoidFunction = async (): Promise<void> => {
+    setIsAboutModalLoading(true);
+
+    try {
+      const verText: Dictionary<string> = {};
+      const apps: Array<{
+        name: string;
+        path: string;
+      }> = [
+        {
+          name: "API",
+          path: "/api",
+        },
+        {
+          name: "Dashboard",
+          path: "/dashboard",
+        },
+      ];
+
+      for (const app of apps) {
+        const version: JSONObject = await fetchAppVersion(app.path);
+        verText[app.name] =
+          `${app.name}: ${version["version"]} (${version["commit"]})`;
+      }
+
+      setVersionText(verText);
+    } catch (err) {
+      setVersionText({
+        error: "Version data is not available: " + (err as Error).message,
+      });
+    }
+
+    setIsAboutModalLoading(false);
+  };
+
+  const fetchAppVersion: (appName: string) => Promise<JSONObject> = async (
+    appName: string,
+  ): Promise<JSONObject> => {
+    const response: HTTPResponse<JSONObject> = await API.get<JSONObject>(
+      URL.fromString(`${HTTP_PROTOCOL}/${HOST}${appName}/version`),
     );
 
-    const fetchVersions: () => Promise<void> = async (): Promise<void> => {
-        setIsAboutModalLoading(true);
+    if (response.data) {
+      return response.data as JSONObject;
+    }
+    throw new BadDataException("Version data is not available");
+  };
 
-        try {
-            const verText: Dictionary<string> = {};
-            const apps: Array<{
-                name: string;
-                path: string;
-            }> = [
-                {
-                    name: 'API',
-                    path: '/api',
-                },
-                {
-                    name: 'Dashboard',
-                    path: '/dashboard',
-                },
-                {
-                    name: 'Notification',
-                    path: '/notification',
-                },
-                {
-                    name: 'Identity Service',
-                    path: '/identity',
-                },
-            ];
+  return (
+    <>
+      <Footer
+        className="bg-white h-16 inset-x-0 bottom-0 px-8"
+        copyright="HackerBay, Inc."
+        links={[
+          {
+            title: "Help and Support",
+            to: URL.fromString("https://oneuptime.com/support"),
+          },
+          {
+            title: "Legal",
+            to: URL.fromString("https://oneuptime.com/legal"),
+          },
+          {
+            title: "Version",
+            onClick: async () => {
+              setShowAboutModal(true);
+              await fetchVersions();
+            },
+          },
+        ]}
+      />
 
-            for (const app of apps) {
-                const version: JSONObject = await fetchAppVersion(app.path);
-                verText[
-                    app.name
-                ] = `${app.name}: ${version['version']} (${version['commit']})`;
-            }
-
-            setVersionText(verText);
-        } catch (err) {
-            setVersionText({
-                error:
-                    'Version data is not available: ' + (err as Error).message,
-            });
-        }
-
-        setIsAboutModalLoading(false);
-    };
-
-    const fetchAppVersion: (appName: string) => Promise<JSONObject> = async (
-        appName: string
-    ): Promise<JSONObject> => {
-        const response: HTTPResponse<JSONObject> = await API.get<JSONObject>(
-            URL.fromString(`${HTTP_PROTOCOL}/${HOST}${appName}/version`)
-        );
-
-        if (response.data) {
-            return response.data as JSONObject;
-        }
-        throw new BadDataException('Version data is not available');
-    };
-
-    return (
-        <>
-            <Footer
-                className="bg-white h-16 inset-x-0 bottom-0 px-8"
-                copyright="HackerBay, Inc."
-                links={[
-                    {
-                        title: 'Help and Support',
-                        to: URL.fromString('https://oneuptime.com/support'),
-                    },
-                    {
-                        title: 'Legal',
-                        to: URL.fromString('https://oneuptime.com/legal'),
-                    },
-                    {
-                        title: 'Version',
-                        onClick: async () => {
-                            setShowAboutModal(true);
-                            await fetchVersions();
-                        },
-                    },
-                ]}
-            />
-
-            {showAboutModal ? (
-                <ConfirmModal
-                    title={`OneUptime Version`}
-                    description={
-                        <div>
-                            {Object.keys(versionText).map(
-                                (key: string, i: number) => {
-                                    return (
-                                        <div key={i}>{versionText[key]}</div>
-                                    );
-                                }
-                            )}
-                        </div>
-                    }
-                    isLoading={isAboutModalLoading}
-                    submitButtonText={'Close'}
-                    onSubmit={() => {
-                        return setShowAboutModal(false);
-                    }}
-                />
-            ) : (
-                <></>
-            )}
-        </>
-    );
+      {showAboutModal ? (
+        <ConfirmModal
+          title={`OneUptime Version`}
+          description={
+            <div>
+              {Object.keys(versionText).map((key: string, i: number) => {
+                return <div key={i}>{versionText[key]}</div>;
+              })}
+            </div>
+          }
+          isLoading={isAboutModalLoading}
+          submitButtonText={"Close"}
+          onSubmit={() => {
+            return setShowAboutModal(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+    </>
+  );
 };
 
 export default DashboardFooter;

AdminDashboard/src/Components/Header/Header.tsx

@@ -1,46 +1,46 @@
-import React, { FunctionComponent, ReactElement } from 'react';
-import Help from './Help';
-import Header from 'CommonUI/src/Components/Header/Header';
-import Logo from './Logo';
-import Button, { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import { DASHBOARD_URL } from 'CommonUI/src/Config';
-import UserProfile from './UserProfile';
+import Help from "./Help";
+import Logo from "./Logo";
+import UserProfile from "./UserProfile";
+import Button, { ButtonStyleType } from "CommonUI/src/Components/Button/Button";
+import Header from "CommonUI/src/Components/Header/Header";
+import { DASHBOARD_URL } from "CommonUI/src/Config";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import React, { FunctionComponent, ReactElement } from "react";
 
 const DashboardHeader: FunctionComponent = (): ReactElement => {
-    return (
-        <>
-            <Header
-                leftComponents={
-                    <>
-                        <Logo onClick={() => {}} />
-                    </>
-                }
-                centerComponents={
-                    <>
-                        {/* <SearchBox
+  return (
+    <>
+      <Header
+        leftComponents={
+          <>
+            <Logo onClick={() => {}} />
+          </>
+        }
+        centerComponents={
+          <>
+            {/* <SearchBox
                             key={2}
                             selectedProject={props.selectedProject}
                             onChange={(_value: string) => { }}
                         />{' '} */}
-                    </>
-                }
-                rightComponents={
-                    <>
-                        <Button
-                            title="Exit Admin"
-                            buttonStyle={ButtonStyleType.NORMAL}
-                            onClick={() => {
-                                Navigation.navigate(DASHBOARD_URL);
-                            }}
-                        />
-                        <Help />
-                        <UserProfile />
-                    </>
-                }
+          </>
+        }
+        rightComponents={
+          <>
+            <Button
+              title="Exit Admin"
+              buttonStyle={ButtonStyleType.NORMAL}
+              onClick={() => {
+                Navigation.navigate(DASHBOARD_URL);
+              }}
             />
-        </>
-    );
+            <Help />
+            <UserProfile />
+          </>
+        }
+      />
+    </>
+  );
 };
 
 export default DashboardHeader;

AdminDashboard/src/Components/Header/Help.tsx

@@ -1,60 +1,58 @@
-import React, { ReactElement, useState } from 'react';
-import HeaderIconDropdownButton from 'CommonUI/src/Components/Header/HeaderIconDropdownButton';
-import IconDropdownItem from 'CommonUI/src/Components/Header/IconDropdown/IconDropdownItem';
-import IconDropdownMenu from 'CommonUI/src/Components/Header/IconDropdown/IconDropdownMenu';
-import IconDropdownRow from 'CommonUI/src/Components/Header/IconDropdown/IconDropdownRow';
-import IconProp from 'Common/Types/Icon/IconProp';
-import URL from 'Common/Types/API/URL';
+import URL from "Common/Types/API/URL";
+import IconProp from "Common/Types/Icon/IconProp";
+import HeaderIconDropdownButton from "CommonUI/src/Components/Header/HeaderIconDropdownButton";
+import IconDropdownItem from "CommonUI/src/Components/Header/IconDropdown/IconDropdownItem";
+import IconDropdownMenu from "CommonUI/src/Components/Header/IconDropdown/IconDropdownMenu";
+import IconDropdownRow from "CommonUI/src/Components/Header/IconDropdown/IconDropdownRow";
+import React, { ReactElement, useState } from "react";
 
 const Help: () => JSX.Element = (): ReactElement => {
-    const [isDropdownVisible, setIsDropdownVisible] = useState<boolean>(false);
+  const [isDropdownVisible, setIsDropdownVisible] = useState<boolean>(false);
 
-    return (
-        <HeaderIconDropdownButton
-            icon={IconProp.Help}
-            name="Help"
-            showDropdown={isDropdownVisible}
+  return (
+    <HeaderIconDropdownButton
+      icon={IconProp.Help}
+      name="Help"
+      showDropdown={isDropdownVisible}
+      onClick={() => {
+        setIsDropdownVisible(true);
+      }}
+    >
+      <IconDropdownMenu>
+        <IconDropdownRow>
+          <IconDropdownItem
+            title="Support Email"
+            icon={IconProp.Email}
+            openInNewTab={true}
+            url={URL.fromString("mailto:support@oneuptime.com")}
             onClick={() => {
-                setIsDropdownVisible(true);
+              setIsDropdownVisible(false);
             }}
-        >
-            <IconDropdownMenu>
-                <IconDropdownRow>
-                    <IconDropdownItem
-                        title="Support Email"
-                        icon={IconProp.Email}
-                        openInNewTab={true}
-                        url={URL.fromString('mailto:support@oneuptime.com')}
-                        onClick={() => {
-                            setIsDropdownVisible(false);
-                        }}
-                    />
-                    <IconDropdownItem
-                        title="Chat on Slack"
-                        icon={IconProp.Slack}
-                        openInNewTab={true}
-                        onClick={() => {
-                            setIsDropdownVisible(false);
-                        }}
-                        url={URL.fromString(
-                            'https://join.slack.com/t/oneuptimesupport/shared_invite/zt-1kavkds2f-gegm_wePorvwvM3M_SaoCQ'
-                        )}
-                    />
-                    <IconDropdownItem
-                        title="Request Demo"
-                        icon={IconProp.Window}
-                        onClick={() => {
-                            setIsDropdownVisible(false);
-                        }}
-                        openInNewTab={true}
-                        url={URL.fromString(
-                            'https://oneuptime.com/enterprise/demo'
-                        )}
-                    />
-                </IconDropdownRow>
-            </IconDropdownMenu>
-        </HeaderIconDropdownButton>
-    );
+          />
+          <IconDropdownItem
+            title="Chat on Slack"
+            icon={IconProp.Slack}
+            openInNewTab={true}
+            onClick={() => {
+              setIsDropdownVisible(false);
+            }}
+            url={URL.fromString(
+              "https://join.slack.com/t/oneuptimesupport/shared_invite/zt-1kavkds2f-gegm_wePorvwvM3M_SaoCQ",
+            )}
+          />
+          <IconDropdownItem
+            title="Request Demo"
+            icon={IconProp.Window}
+            onClick={() => {
+              setIsDropdownVisible(false);
+            }}
+            openInNewTab={true}
+            url={URL.fromString("https://oneuptime.com/enterprise/demo")}
+          />
+        </IconDropdownRow>
+      </IconDropdownMenu>
+    </HeaderIconDropdownButton>
+  );
 };
 
 export default Help;

AdminDashboard/src/Components/Header/Logo.tsx

@@ -1,31 +1,30 @@
 // Tailwind
-
-import React, { FunctionComponent, ReactElement } from 'react';
-import Image from 'CommonUI/src/Components/Image/Image';
-import OneUptimeLogo from 'CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg';
-import Route from 'Common/Types/API/Route';
+import Route from "Common/Types/API/Route";
+import Image from "CommonUI/src/Components/Image/Image";
+import OneUptimeLogo from "CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg";
+import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
-    onClick: () => void;
+  onClick: () => void;
 }
 
 const Logo: FunctionComponent<ComponentProps> = (
-    props: ComponentProps
+  props: ComponentProps,
 ): ReactElement => {
-    return (
-        <div className="relative z-10 flex px-2 lg:px-0">
-            <div className="flex flex-shrink-0 items-center">
-                <Image
-                    className="block h-8 w-auto"
-                    onClick={() => {
-                        props.onClick && props.onClick();
-                    }}
-                    imageUrl={Route.fromString(`${OneUptimeLogo}`)}
-                    alt={'OneUptime'}
-                />
-            </div>
-        </div>
-    );
+  return (
+    <div className="relative z-10 flex px-2 lg:px-0">
+      <div className="flex flex-shrink-0 items-center">
+        <Image
+          className="block h-8 w-auto"
+          onClick={() => {
+            props.onClick && props.onClick();
+          }}
+          imageUrl={Route.fromString(`${OneUptimeLogo}`)}
+          alt={"OneUptime"}
+        />
+      </div>
+    </div>
+  );
 };
 
 export default Logo;

AdminDashboard/src/Components/Header/Notifications.tsx

@@ -1,35 +1,35 @@
-import React, { ReactElement, useState } from 'react';
-import HeaderIconDropdownButton from 'CommonUI/src/Components/Header/HeaderIconDropdownButton';
-import Notifications from 'CommonUI/src/Components/Header/Notifications/Notifications';
-import NotificationItem from 'CommonUI/src/Components/Header/Notifications/NotificationItem';
-import IconProp from 'Common/Types/Icon/IconProp';
+import IconProp from "Common/Types/Icon/IconProp";
+import HeaderIconDropdownButton from "CommonUI/src/Components/Header/HeaderIconDropdownButton";
+import NotificationItem from "CommonUI/src/Components/Header/Notifications/NotificationItem";
+import Notifications from "CommonUI/src/Components/Header/Notifications/Notifications";
+import React, { ReactElement, useState } from "react";
 
 const DashboardHeader: () => JSX.Element = (): ReactElement => {
-    const [isDropdownVisible, setIsDropdownVisible] = useState<boolean>(false);
+  const [isDropdownVisible, setIsDropdownVisible] = useState<boolean>(false);
 
-    return (
-        <HeaderIconDropdownButton
-            name="Notifications"
-            onClick={() => {
-                setIsDropdownVisible(true);
-            }}
-            showDropdown={isDropdownVisible}
-            icon={IconProp.Notification}
-            badge={4}
-        >
-            <Notifications>
-                <NotificationItem
-                    title="Sample Title"
-                    description="Sample Description"
-                    createdAt={new Date()}
-                    icon={IconProp.Home}
-                    onClick={() => {
-                        setIsDropdownVisible(false);
-                    }}
-                />
-            </Notifications>
-        </HeaderIconDropdownButton>
-    );
+  return (
+    <HeaderIconDropdownButton
+      name="Notifications"
+      onClick={() => {
+        setIsDropdownVisible(true);
+      }}
+      showDropdown={isDropdownVisible}
+      icon={IconProp.Notification}
+      badge={4}
+    >
+      <Notifications>
+        <NotificationItem
+          title="Sample Title"
+          description="Sample Description"
+          createdAt={new Date()}
+          icon={IconProp.Home}
+          onClick={() => {
+            setIsDropdownVisible(false);
+          }}
+        />
+      </Notifications>
+    </HeaderIconDropdownButton>
+  );
 };
 
 export default DashboardHeader;

AdminDashboard/src/Components/Header/ProjectPicker.tsx

@@ -1,285 +1,273 @@
+import SubscriptionPlan from "Common/Types/Billing/SubscriptionPlan";
+import IconProp from "Common/Types/Icon/IconProp";
+import { FormType } from "CommonUI/src/Components/Forms/ModelForm";
+import Field from "CommonUI/src/Components/Forms/Types/Field";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import ProjectPicker from "CommonUI/src/Components/Header/ProjectPicker/ProjectPicker";
+import ModelFormModal from "CommonUI/src/Components/ModelFormModal/ModelFormModal";
+import { RadioButton } from "CommonUI/src/Components/RadioButtons/GroupRadioButtons";
+import Toggle from "CommonUI/src/Components/Toggle/Toggle";
+import { BILLING_ENABLED, getAllEnvVars } from "CommonUI/src/Config";
+import { GetReactElementFunction } from "CommonUI/src/Types/FunctionTypes";
+import ProjectUtil from "CommonUI/src/Utils/Project";
+import Project from "Model/Models/Project";
 import React, {
-    FunctionComponent,
-    ReactElement,
-    useState,
-    useEffect,
-} from 'react';
-import ProjectPicker from 'CommonUI/src/Components/Header/ProjectPicker/ProjectPicker';
-import IconProp from 'Common/Types/Icon/IconProp';
-import Project from 'Model/Models/Project';
-import ModelFormModal from 'CommonUI/src/Components/ModelFormModal/ModelFormModal';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import { FormType } from 'CommonUI/src/Components/Forms/ModelForm';
-import ProjectUtil from 'CommonUI/src/Utils/Project';
-import { BILLING_ENABLED, getAllEnvVars } from 'CommonUI/src/Config';
-import SubscriptionPlan from 'Common/Types/Billing/SubscriptionPlan';
-import Field from 'CommonUI/src/Components/Forms/Types/Field';
-import { RadioButton } from 'CommonUI/src/Components/RadioButtons/RadioButtons';
-import Toggle from 'CommonUI/src/Components/Toggle/Toggle';
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
 
 export interface ComponentProps {
-    projects: Array<Project>;
-    onProjectSelected: (project: Project) => void;
-    showProjectModal: boolean;
-    onProjectModalClose: () => void;
+  projects: Array<Project>;
+  onProjectSelected: (project: Project) => void;
+  showProjectModal: boolean;
+  onProjectModalClose: () => void;
 }
 
 const DashboardProjectPicker: FunctionComponent<ComponentProps> = (
-    props: ComponentProps
+  props: ComponentProps,
 ): ReactElement => {
-    const [showModal, setShowModal] = useState<boolean>(false);
-    const [selectedProject, setSelectedProject] = useState<Project | null>(
-        null
-    );
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
 
-    const getFooter: Function = (): ReactElement => {
-        if (!BILLING_ENABLED) {
-            return <></>;
-        }
-
-        return (
-            <Toggle
-                title="Yearly Plan"
-                initialValue={isSubscriptionPlanYearly}
-                description="(Save 20%)"
-                onChange={(value: boolean) => {
-                    setIsSubscriptionPlanYearly(value);
-                }}
-            />
-        );
-    };
-
-    const [isSubscriptionPlanYearly, setIsSubscriptionPlanYearly] =
-        useState<boolean>(true);
-
-    const [fields, setFields] = useState<Array<Field<Project>>>([]);
-
-    useEffect(() => {
-        if (props.showProjectModal) {
-            setShowModal(true);
-        }
-    }, [props.showProjectModal]);
-
-    useEffect(() => {
-        const currentProject: Project | null = ProjectUtil.getCurrentProject();
-        setSelectedProject(currentProject);
-        if (currentProject && props.onProjectSelected) {
-            props.onProjectSelected(currentProject);
-        }
-    }, []);
-
-    useEffect(() => {
-        if (selectedProject) {
-            ProjectUtil.setCurrentProject(selectedProject);
-            if (props.onProjectSelected) {
-                props.onProjectSelected(selectedProject);
-            }
-        }
-    }, [selectedProject]);
-
-    useEffect(() => {
-        if (
-            props.projects &&
-            props.projects.length > 0 &&
-            !selectedProject &&
-            props.projects[0]
-        ) {
-            const currentProject: Project | null =
-                ProjectUtil.getCurrentProject();
-
-            if (!currentProject) {
-                setSelectedProject(props.projects[0]);
-            } else if (
-                props.projects.filter((project: Project) => {
-                    return project._id === currentProject._id;
-                }).length > 0
-            ) {
-                setSelectedProject(
-                    props.projects.filter((project: Project) => {
-                        return project._id === currentProject._id;
-                    })[0] as Project
-                );
-            } else {
-                setSelectedProject(props.projects[0]);
-            }
-        }
-    }, [props.projects]);
-
-    useEffect(() => {
-        refreshFields();
-    }, [isSubscriptionPlanYearly]);
-
-    const refreshFields: Function = (): void => {
-        let formFields: Array<Field<Project>> = [
-            {
-                field: {
-                    name: true,
-                },
-                validation: {
-                    minLength: 4,
-                },
-                fieldType: FormFieldSchemaType.Text,
-                placeholder: 'My Project',
-                description: 'Pick a friendly name.',
-                title: 'Project Name',
-                required: true,
-                stepId: BILLING_ENABLED ? 'basic' : undefined,
-            },
-        ];
-
-        if (BILLING_ENABLED) {
-            formFields = [
-                ...formFields,
-                {
-                    field: {
-                        paymentProviderPlanId: true,
-                    },
-                    stepId: 'plan',
-                    validation: {
-                        minLength: 6,
-                    },
-                    footerElement: getFooter(),
-                    fieldType: FormFieldSchemaType.RadioButton,
-                    radioButtonOptions: SubscriptionPlan.getSubscriptionPlans(
-                        getAllEnvVars()
-                    ).map((plan: SubscriptionPlan): RadioButton => {
-                        let description: string = plan.isCustomPricing()
-                            ? `Our sales team will contact you soon.`
-                            : `Billed ${
-                                  isSubscriptionPlanYearly
-                                      ? 'yearly'
-                                      : 'monthly'
-                              }. ${
-                                  plan.getTrialPeriod() > 0
-                                      ? `Free ${plan.getTrialPeriod()} days trial.`
-                                      : ''
-                              }`;
-
-                        if (
-                            isSubscriptionPlanYearly &&
-                            plan.getYearlySubscriptionAmountInUSD() === 0
-                        ) {
-                            description = 'This plan is free, forever. ';
-                        }
-
-                        if (
-                            !isSubscriptionPlanYearly &&
-                            plan.getMonthlySubscriptionAmountInUSD() === 0
-                        ) {
-                            description = 'This plan is free, forever. ';
-                        }
-
-                        return {
-                            value: isSubscriptionPlanYearly
-                                ? plan.getYearlyPlanId()
-                                : plan.getMonthlyPlanId(),
-                            title: plan.getName(),
-                            description: description,
-                            sideTitle: plan.isCustomPricing()
-                                ? 'Custom Price'
-                                : isSubscriptionPlanYearly
-                                ? '$' +
-                                  plan
-                                      .getYearlySubscriptionAmountInUSD()
-                                      .toString() +
-                                  '/mo billed yearly'
-                                : '$' +
-                                  plan
-                                      .getMonthlySubscriptionAmountInUSD()
-                                      .toString(),
-                            sideDescription: plan.isCustomPricing()
-                                ? ''
-                                : isSubscriptionPlanYearly
-                                ? `~ $${
-                                      plan.getYearlySubscriptionAmountInUSD() *
-                                      12
-                                  } per user / year`
-                                : `/month per user`,
-                        };
-                    }),
-                    title: 'Please select a plan.',
-                    required: true,
-                },
-                {
-                    field: {
-                        paymentProviderPromoCode: true,
-                    },
-                    fieldType: FormFieldSchemaType.Text,
-                    placeholder: 'Promo Code (Optional)',
-                    description: 'If you have a coupon code, enter it here.',
-                    title: 'Promo Code',
-                    required: false,
-                    stepId: 'plan',
-                },
-            ];
-        }
-
-        setFields(formFields);
-    };
+  const getFooter: GetReactElementFunction = (): ReactElement => {
+    if (!BILLING_ENABLED) {
+      return <></>;
+    }
 
     return (
-        <>
-            {props.projects.length !== 0 && (
-                <ProjectPicker
-                    selectedProjectName={selectedProject?.name || ''}
-                    selectedProjectIcon={IconProp.Folder}
-                    projects={props.projects}
-                    onCreateProjectButtonClicked={() => {
-                        setShowModal(true);
-                        props.onProjectModalClose();
-                    }}
-                    onProjectSelected={(project: Project) => {
-                        setSelectedProject(project);
-                    }}
-                />
-            )}
-            {showModal ? (
-                <ModelFormModal<Project>
-                    modelType={Project}
-                    name="Create New Project"
-                    title="Create New Project"
-                    description="Please create a new OneUptime project to get started."
-                    onClose={() => {
-                        setShowModal(false);
-                        props.onProjectModalClose();
-                    }}
-                    submitButtonText="Create Project"
-                    onSuccess={(project: Project | null) => {
-                        setSelectedProject(project);
-                        if (project && props.onProjectSelected) {
-                            props.onProjectSelected(project);
-                        }
-                        setShowModal(false);
-                        props.onProjectModalClose();
-                    }}
-                    formProps={{
-                        name: 'Create New Project',
-                        steps: BILLING_ENABLED
-                            ? [
-                                  {
-                                      title: 'Basic',
-                                      id: 'basic',
-                                  },
-                                  {
-                                      title: 'Select Plan',
-                                      id: 'plan',
-                                  },
-                              ]
-                            : undefined,
-                        saveRequestOptions: {
-                            isMultiTenantRequest: true, // because this is a tenant request, we do not have to include the header in the request
-                        },
-                        modelType: Project,
-                        id: 'create-project-from',
-                        fields: [...fields],
-                        formType: FormType.Create,
-                    }}
-                />
-            ) : (
-                <></>
-            )}
-        </>
+      <Toggle
+        title="Yearly Plan"
+        value={isSubscriptionPlanYearly}
+        description="(Save 20%)"
+        onChange={(value: boolean) => {
+          setIsSubscriptionPlanYearly(value);
+        }}
+      />
     );
+  };
+
+  const [isSubscriptionPlanYearly, setIsSubscriptionPlanYearly] =
+    useState<boolean>(true);
+
+  const [fields, setFields] = useState<Array<Field<Project>>>([]);
+
+  useEffect(() => {
+    if (props.showProjectModal) {
+      setShowModal(true);
+    }
+  }, [props.showProjectModal]);
+
+  useEffect(() => {
+    const currentProject: Project | null = ProjectUtil.getCurrentProject();
+    setSelectedProject(currentProject);
+    if (currentProject && props.onProjectSelected) {
+      props.onProjectSelected(currentProject);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (selectedProject) {
+      ProjectUtil.setCurrentProject(selectedProject);
+      if (props.onProjectSelected) {
+        props.onProjectSelected(selectedProject);
+      }
+    }
+  }, [selectedProject]);
+
+  useEffect(() => {
+    if (
+      props.projects &&
+      props.projects.length > 0 &&
+      !selectedProject &&
+      props.projects[0]
+    ) {
+      const currentProject: Project | null = ProjectUtil.getCurrentProject();
+
+      if (!currentProject) {
+        setSelectedProject(props.projects[0]);
+      } else if (
+        props.projects.filter((project: Project) => {
+          return project._id === currentProject._id;
+        }).length > 0
+      ) {
+        setSelectedProject(
+          props.projects.filter((project: Project) => {
+            return project._id === currentProject._id;
+          })[0] as Project,
+        );
+      } else {
+        setSelectedProject(props.projects[0]);
+      }
+    }
+  }, [props.projects]);
+
+  useEffect(() => {
+    refreshFields();
+  }, [isSubscriptionPlanYearly]);
+
+  const refreshFields: VoidFunction = (): void => {
+    let formFields: Array<Field<Project>> = [
+      {
+        field: {
+          name: true,
+        },
+        validation: {
+          minLength: 4,
+        },
+        fieldType: FormFieldSchemaType.Text,
+        placeholder: "My Project",
+        description: "Pick a friendly name.",
+        title: "Project Name",
+        required: true,
+        stepId: BILLING_ENABLED ? "basic" : undefined,
+      },
+    ];
+
+    if (BILLING_ENABLED) {
+      formFields = [
+        ...formFields,
+        {
+          field: {
+            paymentProviderPlanId: true,
+          },
+          stepId: "plan",
+          validation: {
+            minLength: 6,
+          },
+          footerElement: getFooter(),
+          fieldType: FormFieldSchemaType.RadioButton,
+          radioButtonOptions: SubscriptionPlan.getSubscriptionPlans(
+            getAllEnvVars(),
+          ).map((plan: SubscriptionPlan): RadioButton => {
+            let description: string = plan.isCustomPricing()
+              ? `Our sales team will contact you soon.`
+              : `Billed ${isSubscriptionPlanYearly ? "yearly" : "monthly"}. ${
+                  plan.getTrialPeriod() > 0
+                    ? `Free ${plan.getTrialPeriod()} days trial.`
+                    : ""
+                }`;
+
+            if (
+              isSubscriptionPlanYearly &&
+              plan.getYearlySubscriptionAmountInUSD() === 0
+            ) {
+              description = "This plan is free, forever. ";
+            }
+
+            if (
+              !isSubscriptionPlanYearly &&
+              plan.getMonthlySubscriptionAmountInUSD() === 0
+            ) {
+              description = "This plan is free, forever. ";
+            }
+
+            return {
+              value: isSubscriptionPlanYearly
+                ? plan.getYearlyPlanId()
+                : plan.getMonthlyPlanId(),
+              title: plan.getName(),
+              description: description,
+              sideTitle: plan.isCustomPricing()
+                ? "Custom Price"
+                : isSubscriptionPlanYearly
+                  ? "$" +
+                    plan.getYearlySubscriptionAmountInUSD().toString() +
+                    "/mo billed yearly"
+                  : "$" + plan.getMonthlySubscriptionAmountInUSD().toString(),
+              sideDescription: plan.isCustomPricing()
+                ? ""
+                : isSubscriptionPlanYearly
+                  ? `~ $${
+                      plan.getYearlySubscriptionAmountInUSD() * 12
+                    } per user / year`
+                  : `/month per user`,
+            };
+          }),
+          title: "Please select a plan.",
+          required: true,
+        },
+        {
+          field: {
+            paymentProviderPromoCode: true,
+          },
+          fieldType: FormFieldSchemaType.Text,
+          placeholder: "Promo Code (Optional)",
+          description: "If you have a coupon code, enter it here.",
+          title: "Promo Code",
+          required: false,
+          stepId: "plan",
+        },
+      ];
+    }
+
+    setFields(formFields);
+  };
+
+  return (
+    <>
+      {props.projects.length !== 0 && (
+        <ProjectPicker
+          selectedProjectName={selectedProject?.name || ""}
+          selectedProjectIcon={IconProp.Folder}
+          projects={props.projects}
+          onCreateProjectButtonClicked={() => {
+            setShowModal(true);
+            props.onProjectModalClose();
+          }}
+          onProjectSelected={(project: Project) => {
+            setSelectedProject(project);
+          }}
+        />
+      )}
+      {showModal ? (
+        <ModelFormModal<Project>
+          modelType={Project}
+          name="Create New Project"
+          title="Create New Project"
+          description="Please create a new OneUptime project to get started."
+          onClose={() => {
+            setShowModal(false);
+            props.onProjectModalClose();
+          }}
+          submitButtonText="Create Project"
+          onSuccess={(project: Project | null) => {
+            setSelectedProject(project);
+            if (project && props.onProjectSelected) {
+              props.onProjectSelected(project);
+            }
+            setShowModal(false);
+            props.onProjectModalClose();
+          }}
+          formProps={{
+            name: "Create New Project",
+            steps: BILLING_ENABLED
+              ? [
+                  {
+                    title: "Basic",
+                    id: "basic",
+                  },
+                  {
+                    title: "Select Plan",
+                    id: "plan",
+                  },
+                ]
+              : undefined,
+            saveRequestOptions: {
+              isMultiTenantRequest: true, // because this is a tenant request, we do not have to include the header in the request
+            },
+            modelType: Project,
+            id: "create-project-from",
+            fields: [...fields],
+            formType: FormType.Create,
+          }}
+        />
+      ) : (
+        <></>
+      )}
+    </>
+  );
 };
 
 export default DashboardProjectPicker;

AdminDashboard/src/Components/Header/SearchBox.tsx

@@ -1,20 +1,20 @@
-import React, { FunctionComponent, ReactElement } from 'react';
-import SearchBox from 'CommonUI/src/Components/Header/SearchBox';
-import Project from 'Model/Models/Project';
+import SearchBox from "CommonUI/src/Components/Header/SearchBox";
+import Project from "Model/Models/Project";
+import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
-    onChange: (search: string) => void;
-    selectedProject: Project | null;
+  onChange: (search: string) => void;
+  selectedProject: Project | null;
 }
 
 const Search: FunctionComponent<ComponentProps> = (
-    props: ComponentProps
+  props: ComponentProps,
 ): ReactElement => {
-    if (!props.selectedProject) {
-        return <></>;
-    }
+  if (!props.selectedProject) {
+    return <></>;
+  }
 
-    return <SearchBox key={2} onChange={props.onChange} />;
+  return <SearchBox key={2} onChange={props.onChange} />;
 };
 
 export default Search;

AdminDashboard/src/Components/Header/UserProfile.tsx

@@ -1,57 +1,57 @@
-import React, { FunctionComponent, ReactElement, useState } from 'react';
-import IconProp from 'Common/Types/Icon/IconProp';
-import Route from 'Common/Types/API/Route';
-import RouteMap, { RouteUtil } from '../../Utils/RouteMap';
-import PageMap from '../../Utils/PageMap';
-import BlankProfilePic from 'CommonUI/src/Images/users/blank-profile.svg';
-import HeaderIconDropdownButton from 'CommonUI/src/Components/Header/HeaderIconDropdownButton';
-import IconDropdownItem from 'CommonUI/src/Components/Header/IconDropdown/IconDropdownItem';
-import IconDropdownMenu from 'CommonUI/src/Components/Header/IconDropdown/IconDropdownMenu';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import { DASHBOARD_URL } from 'CommonUI/src/Config';
-import User from 'CommonUI/src/Utils/User';
+import PageMap from "../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
+import Route from "Common/Types/API/Route";
+import IconProp from "Common/Types/Icon/IconProp";
+import HeaderIconDropdownButton from "CommonUI/src/Components/Header/HeaderIconDropdownButton";
+import IconDropdownItem from "CommonUI/src/Components/Header/IconDropdown/IconDropdownItem";
+import IconDropdownMenu from "CommonUI/src/Components/Header/IconDropdown/IconDropdownMenu";
+import { DASHBOARD_URL } from "CommonUI/src/Config";
+import BlankProfilePic from "CommonUI/src/Images/users/blank-profile.svg";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import User from "CommonUI/src/Utils/User";
+import React, { FunctionComponent, ReactElement, useState } from "react";
 
 const DashboardUserProfile: FunctionComponent = (): ReactElement => {
-    const [isDropdownVisible, setIsDropdownVisible] = useState<boolean>(false);
+  const [isDropdownVisible, setIsDropdownVisible] = useState<boolean>(false);
 
-    return (
-        <>
-            <HeaderIconDropdownButton
-                iconImageUrl={BlankProfilePic}
-                name="User Profile"
-                showDropdown={isDropdownVisible}
-                onClick={() => {
-                    setIsDropdownVisible(true);
-                }}
-            >
-                <IconDropdownMenu>
-                    {User.isMasterAdmin() ? (
-                        <IconDropdownItem
-                            title="Exit Admin"
-                            onClick={() => {
-                                setIsDropdownVisible(false);
-                                Navigation.navigate(DASHBOARD_URL);
-                            }}
-                            icon={IconProp.ExternalLink}
-                        />
-                    ) : (
-                        <></>
-                    )}
+  return (
+    <>
+      <HeaderIconDropdownButton
+        iconImageUrl={BlankProfilePic}
+        name="User Profile"
+        showDropdown={isDropdownVisible}
+        onClick={() => {
+          setIsDropdownVisible(true);
+        }}
+      >
+        <IconDropdownMenu>
+          {User.isMasterAdmin() ? (
+            <IconDropdownItem
+              title="Exit Admin"
+              onClick={() => {
+                setIsDropdownVisible(false);
+                Navigation.navigate(DASHBOARD_URL);
+              }}
+              icon={IconProp.ExternalLink}
+            />
+          ) : (
+            <></>
+          )}
 
-                    <IconDropdownItem
-                        title="Log out"
-                        onClick={() => {
-                            setIsDropdownVisible(false);
-                        }}
-                        url={RouteUtil.populateRouteParams(
-                            RouteMap[PageMap.LOGOUT] as Route
-                        )}
-                        icon={IconProp.Logout}
-                    />
-                </IconDropdownMenu>
-            </HeaderIconDropdownButton>
-        </>
-    );
+          <IconDropdownItem
+            title="Log out"
+            onClick={() => {
+              setIsDropdownVisible(false);
+            }}
+            url={RouteUtil.populateRouteParams(
+              RouteMap[PageMap.LOGOUT] as Route,
+            )}
+            icon={IconProp.Logout}
+          />
+        </IconDropdownMenu>
+      </HeaderIconDropdownButton>
+    </>
+  );
 };
 
 export default DashboardUserProfile;

AdminDashboard/src/Components/MasterPage/MasterPage.tsx

@@ -1,35 +1,35 @@
-import MasterPage from 'CommonUI/src/Components/MasterPage/MasterPage';
-import Footer from '../Footer/Footer';
-import Header from '../Header/Header';
-import NavBar from '../NavBar/NavBar';
-import React, { FunctionComponent, ReactElement } from 'react';
-import TopAlert from 'CommonUI/src/Components/TopAlert/TopAlert';
+import Footer from "../Footer/Footer";
+import Header from "../Header/Header";
+import NavBar from "../NavBar/NavBar";
+import MasterPage from "CommonUI/src/Components/MasterPage/MasterPage";
+import TopAlert from "CommonUI/src/Components/TopAlert/TopAlert";
+import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
-    children: ReactElement | Array<ReactElement>;
+  children: ReactElement | Array<ReactElement>;
 }
 
 const DashboardMasterPage: FunctionComponent<ComponentProps> = (
-    props: ComponentProps
+  props: ComponentProps,
 ): ReactElement => {
-    return (
-        <div>
-            <TopAlert
-                title="OneUptime Admin Dashboard"
-                description="You can perform your OneUptime server related tasks on this dashboard."
-            />
-            <MasterPage
-                footer={<Footer />}
-                header={<Header />}
-                navBar={<NavBar />}
-                isLoading={false}
-                error={''}
-                className="flex flex-col h-screen justify-between"
-            >
-                {props.children}
-            </MasterPage>
-        </div>
-    );
+  return (
+    <div>
+      <TopAlert
+        title="OneUptime Admin Dashboard"
+        description="You can perform your OneUptime server related tasks on this dashboard."
+      />
+      <MasterPage
+        footer={<Footer />}
+        header={<Header />}
+        navBar={<NavBar />}
+        isLoading={false}
+        error={""}
+        className="flex flex-col h-screen justify-between"
+      >
+        {props.children}
+      </MasterPage>
+    </div>
+  );
 };
 
 export default DashboardMasterPage;

AdminDashboard/src/Components/NavBar/NavBar.tsx

@@ -1,39 +1,37 @@
-import React, { FunctionComponent, ReactElement } from 'react';
-import NavBar from 'CommonUI/src/Components/Navbar/NavBar';
-import NavBarItem from 'CommonUI/src/Components/Navbar/NavBarItem';
-import Route from 'Common/Types/API/Route';
-import IconProp from 'Common/Types/Icon/IconProp';
-import PageMap from '../../Utils/PageMap';
-import RouteMap, { RouteUtil } from '../../Utils/RouteMap';
+import PageMap from "../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
+import Route from "Common/Types/API/Route";
+import IconProp from "Common/Types/Icon/IconProp";
+import NavBar from "CommonUI/src/Components/Navbar/NavBar";
+import NavBarItem from "CommonUI/src/Components/Navbar/NavBarItem";
+import React, { FunctionComponent, ReactElement } from "react";
 
 const DashboardNavbar: FunctionComponent = (): ReactElement => {
-    return (
-        <NavBar>
-            <NavBarItem
-                title="Users"
-                icon={IconProp.User}
-                route={RouteUtil.populateRouteParams(
-                    RouteMap[PageMap.USERS] as Route
-                )}
-            ></NavBarItem>
+  return (
+    <NavBar>
+      <NavBarItem
+        title="Users"
+        icon={IconProp.User}
+        route={RouteUtil.populateRouteParams(RouteMap[PageMap.USERS] as Route)}
+      ></NavBarItem>
 
-            <NavBarItem
-                title="Projects"
-                icon={IconProp.Folder}
-                route={RouteUtil.populateRouteParams(
-                    RouteMap[PageMap.PROJECTS] as Route
-                )}
-            ></NavBarItem>
+      <NavBarItem
+        title="Projects"
+        icon={IconProp.Folder}
+        route={RouteUtil.populateRouteParams(
+          RouteMap[PageMap.PROJECTS] as Route,
+        )}
+      ></NavBarItem>
 
-            <NavBarItem
-                title="Settings"
-                icon={IconProp.Settings}
-                route={RouteUtil.populateRouteParams(
-                    RouteMap[PageMap.SETTINGS] as Route
-                )}
-            ></NavBarItem>
-        </NavBar>
-    );
+      <NavBarItem
+        title="Settings"
+        icon={IconProp.Settings}
+        route={RouteUtil.populateRouteParams(
+          RouteMap[PageMap.SETTINGS] as Route,
+        )}
+      ></NavBarItem>
+    </NavBar>
+  );
 };
 
 export default DashboardNavbar;

AdminDashboard/src/Index.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import { BrowserRouter } from 'react-router-dom';
-// import 'the-new-css-reset/css/reset.css';
+import App from "./App";
+import Telemetry from "CommonUI/src/Utils/Telemetry";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+
+Telemetry.init({
+  serviceName: "AdminDashboard",
+});
 
 const root: any = ReactDOM.createRoot(
-    document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 
 root.render(
-    <BrowserRouter>
-        <App />
-    </BrowserRouter>
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
 );

AdminDashboard/src/Pages/Init/Init.tsx

@@ -1,22 +1,22 @@
-import PageLoader from 'CommonUI/src/Components/Loader/PageLoader';
-import Page from 'CommonUI/src/Components/Page/Page';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import React, { FunctionComponent, ReactElement, useEffect } from 'react';
-import RouteMap from '../../Utils/RouteMap';
-import PageMap from '../../Utils/PageMap';
+import PageMap from "../../Utils/PageMap";
+import RouteMap from "../../Utils/RouteMap";
+import PageLoader from "CommonUI/src/Components/Loader/PageLoader";
+import Page from "CommonUI/src/Components/Page/Page";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
 
 const Init: FunctionComponent = (): ReactElement => {
-    useEffect(() => {
-        Navigation.navigate(RouteMap[PageMap.USERS]!, {
-            forceNavigate: true,
-        });
-    }, []);
+  useEffect(() => {
+    Navigation.navigate(RouteMap[PageMap.USERS]!, {
+      forceNavigate: true,
+    });
+  }, []);
 
-    return (
-        <Page title={''} breadcrumbLinks={[]}>
-            <PageLoader isVisible={true} />
-        </Page>
-    );
+  return (
+    <Page title={""} breadcrumbLinks={[]}>
+      <PageLoader isVisible={true} />
+    </Page>
+  );
 };
 
 export default Init;

AdminDashboard/src/Pages/Logout/Logout.tsx

@@ -1,53 +1,49 @@
-import React, { FunctionComponent, ReactElement, useEffect } from 'react';
-
-import Page from 'CommonUI/src/Components/Page/Page';
-import Route from 'Common/Types/API/Route';
-import RouteMap, { RouteUtil } from '../../Utils/RouteMap';
-import PageMap from '../../Utils/PageMap';
-import PageLoader from 'CommonUI/src/Components/Loader/PageLoader';
-import UserUtil from 'CommonUI/src/Utils/User';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import { ACCOUNTS_URL } from 'CommonUI/src/Config';
-import UiAnalytics from 'CommonUI/src/Utils/Analytics';
-import ErrorMessage from 'CommonUI/src/Components/ErrorMessage/ErrorMessage';
+import PageMap from "../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
+import Route from "Common/Types/API/Route";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import ErrorMessage from "CommonUI/src/Components/ErrorMessage/ErrorMessage";
+import PageLoader from "CommonUI/src/Components/Loader/PageLoader";
+import Page from "CommonUI/src/Components/Page/Page";
+import { ACCOUNTS_URL } from "CommonUI/src/Config";
+import UiAnalytics from "CommonUI/src/Utils/Analytics";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import UserUtil from "CommonUI/src/Utils/User";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
 
 const Logout: FunctionComponent = (): ReactElement => {
-    const [error, setError] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
 
-    const logout: Function = async () => {
-        UiAnalytics.logout();
-        await UserUtil.logout();
-        Navigation.navigate(ACCOUNTS_URL);
-    };
+  const logout: PromiseVoidFunction = async (): Promise<void> => {
+    UiAnalytics.logout();
+    await UserUtil.logout();
+    Navigation.navigate(ACCOUNTS_URL);
+  };
 
-    useEffect(() => {
-        logout().catch((error: Error) => {
-            setError(error.message || error.toString());
-        });
-    }, []);
+  useEffect(() => {
+    logout().catch((error: Error) => {
+      setError(error.message || error.toString());
+    });
+  }, []);
 
-    return (
-        <Page
-            title={'Logout'}
-            breadcrumbLinks={[
-                {
-                    title: 'Admin Dashboard',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.INIT] as Route
-                    ),
-                },
-                {
-                    title: 'Logout',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.LOGOUT] as Route
-                    ),
-                },
-            ]}
-        >
-            {!error ? <PageLoader isVisible={true} /> : <></>}
-            {error ? <ErrorMessage error={error} /> : <></>}
-        </Page>
-    );
+  return (
+    <Page
+      title={"Logout"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.INIT] as Route),
+        },
+        {
+          title: "Logout",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.LOGOUT] as Route),
+        },
+      ]}
+    >
+      {!error ? <PageLoader isVisible={true} /> : <></>}
+      {error ? <ErrorMessage error={error} /> : <></>}
+    </Page>
+  );
 };
 
 export default Logout;

AdminDashboard/src/Pages/Projects/Index.tsx

@@ -1,249 +1,251 @@
-import Route from 'Common/Types/API/Route';
-import Page from 'CommonUI/src/Components/Page/Page';
+import AdminModelAPI from "../../Utils/ModelAPI";
+import PageMap from "../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
+import Route from "Common/Types/API/Route";
+import SubscriptionPlan from "Common/Types/Billing/SubscriptionPlan";
+import Field from "CommonUI/src/Components/Forms/Types/Field";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import ModelTable from "CommonUI/src/Components/ModelTable/ModelTable";
+import Page from "CommonUI/src/Components/Page/Page";
+import { RadioButton } from "CommonUI/src/Components/RadioButtons/GroupRadioButtons";
+import Toggle from "CommonUI/src/Components/Toggle/Toggle";
+import FieldType from "CommonUI/src/Components/Types/FieldType";
+import { BILLING_ENABLED, getAllEnvVars } from "CommonUI/src/Config";
+import { GetReactElementFunction } from "CommonUI/src/Types/FunctionTypes";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import Project from "Model/Models/Project";
+import User from "Model/Models/User";
 import React, {
-    FunctionComponent,
-    ReactElement,
-    useEffect,
-    useState,
-} from 'react';
-import PageMap from '../../Utils/PageMap';
-import RouteMap, { RouteUtil } from '../../Utils/RouteMap';
-import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable';
-import FieldType from 'CommonUI/src/Components/Types/FieldType';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import Project from 'Model/Models/Project';
-import User from 'Model/Models/User';
-import { BILLING_ENABLED, getAllEnvVars } from 'CommonUI/src/Config';
-import Field from 'CommonUI/src/Components/Forms/Types/Field';
-import SubscriptionPlan from 'Common/Types/Billing/SubscriptionPlan';
-import { RadioButton } from 'CommonUI/src/Components/RadioButtons/RadioButtons';
-import Toggle from 'CommonUI/src/Components/Toggle/Toggle';
-import AdminModelAPI from '../../Utils/ModelAPI';
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
 
 const Projects: FunctionComponent = (): ReactElement => {
-    const [isSubscriptionPlanYearly, setIsSubscriptionPlanYearly] =
-        useState<boolean>(true);
+  const [isSubscriptionPlanYearly, setIsSubscriptionPlanYearly] =
+    useState<boolean>(true);
 
-    useEffect(() => {
-        refreshFields();
-    }, [isSubscriptionPlanYearly]);
+  useEffect(() => {
+    refreshFields();
+  }, [isSubscriptionPlanYearly]);
 
-    const refreshFields: Function = (): void => {
-        let formFields: Array<Field<Project>> = [
-            {
-                field: {
-                    name: true,
-                },
-                validation: {
-                    minLength: 4,
-                },
-                fieldType: FormFieldSchemaType.Text,
-                placeholder: 'My Project',
-                description: 'Pick a friendly name.',
-                title: 'Project Name',
-                required: true,
-                stepId: BILLING_ENABLED ? 'basic' : undefined,
-            },
-            {
-                field: {
-                    createdByUser: true,
-                },
-                title: 'Owner',
-                description:
-                    'Who would you like the owner of this project to be? If you leave this blank - you will be the owner of the project',
-                fieldType: FormFieldSchemaType.Dropdown,
-                stepId: BILLING_ENABLED ? 'basic' : undefined,
-                dropdownModal: {
-                    type: User,
-                    labelField: 'email',
-                    valueField: '_id',
-                },
-            },
-        ];
+  const refreshFields: VoidFunction = (): void => {
+    let formFields: Array<Field<Project>> = [
+      {
+        field: {
+          name: true,
+        },
+        validation: {
+          minLength: 4,
+        },
+        fieldType: FormFieldSchemaType.Text,
+        placeholder: "My Project",
+        description: "Pick a friendly name.",
+        title: "Project Name",
+        required: true,
+        stepId: BILLING_ENABLED ? "basic" : undefined,
+      },
+      {
+        field: {
+          createdByUser: true,
+        },
+        title: "Owner",
+        description:
+          "Who would you like the owner of this project to be? If you leave this blank - you will be the owner of the project",
+        fieldType: FormFieldSchemaType.Dropdown,
+        stepId: BILLING_ENABLED ? "basic" : undefined,
+        dropdownModal: {
+          type: User,
+          labelField: "email",
+          valueField: "_id",
+        },
+      },
+    ];
 
-        if (BILLING_ENABLED) {
-            formFields = [
-                ...formFields,
-                {
-                    field: {
-                        paymentProviderPlanId: true,
-                    },
-                    stepId: 'plan',
-                    validation: {
-                        minLength: 6,
-                    },
-                    footerElement: getFooter(),
-                    fieldType: FormFieldSchemaType.RadioButton,
-                    radioButtonOptions: SubscriptionPlan.getSubscriptionPlans(
-                        getAllEnvVars()
-                    ).map((plan: SubscriptionPlan): RadioButton => {
-                        let description: string = plan.isCustomPricing()
-                            ? `Our sales team will contact you soon.`
-                            : `Billed ${
-                                  isSubscriptionPlanYearly
-                                      ? 'yearly'
-                                      : 'monthly'
-                              }. ${
-                                  plan.getTrialPeriod() > 0
-                                      ? `Free ${plan.getTrialPeriod()} days trial.`
-                                      : ''
-                              }`;
+    if (BILLING_ENABLED) {
+      formFields = [
+        ...formFields,
+        {
+          field: {
+            paymentProviderPlanId: true,
+          },
+          stepId: "plan",
+          validation: {
+            minLength: 6,
+          },
+          footerElement: getFooter(),
+          fieldType: FormFieldSchemaType.RadioButton,
+          radioButtonOptions: SubscriptionPlan.getSubscriptionPlans(
+            getAllEnvVars(),
+          ).map((plan: SubscriptionPlan): RadioButton => {
+            let description: string = plan.isCustomPricing()
+              ? `Our sales team will contact you soon.`
+              : `Billed ${isSubscriptionPlanYearly ? "yearly" : "monthly"}. ${
+                  plan.getTrialPeriod() > 0
+                    ? `Free ${plan.getTrialPeriod()} days trial.`
+                    : ""
+                }`;
 
-                        if (
-                            isSubscriptionPlanYearly &&
-                            plan.getYearlySubscriptionAmountInUSD() === 0
-                        ) {
-                            description = 'This plan is free, forever. ';
-                        }
+            if (
+              isSubscriptionPlanYearly &&
+              plan.getYearlySubscriptionAmountInUSD() === 0
+            ) {
+              description = "This plan is free, forever. ";
+            }
 
-                        if (
-                            !isSubscriptionPlanYearly &&
-                            plan.getMonthlySubscriptionAmountInUSD() === 0
-                        ) {
-                            description = 'This plan is free, forever. ';
-                        }
+            if (
+              !isSubscriptionPlanYearly &&
+              plan.getMonthlySubscriptionAmountInUSD() === 0
+            ) {
+              description = "This plan is free, forever. ";
+            }
 
-                        return {
-                            value: isSubscriptionPlanYearly
-                                ? plan.getYearlyPlanId()
-                                : plan.getMonthlyPlanId(),
-                            title: plan.getName(),
-                            description: description,
-                            sideTitle: plan.isCustomPricing()
-                                ? 'Custom Price'
-                                : isSubscriptionPlanYearly
-                                ? '$' +
-                                  plan
-                                      .getYearlySubscriptionAmountInUSD()
-                                      .toString() +
-                                  '/mo billed yearly'
-                                : '$' +
-                                  plan
-                                      .getMonthlySubscriptionAmountInUSD()
-                                      .toString(),
-                            sideDescription: plan.isCustomPricing()
-                                ? ''
-                                : isSubscriptionPlanYearly
-                                ? `~ $${
-                                      plan.getYearlySubscriptionAmountInUSD() *
-                                      12
-                                  } per user / year`
-                                : `/month per user`,
-                        };
-                    }),
-                    title: 'Please select a plan.',
-                    required: true,
-                },
-                {
-                    field: {
-                        paymentProviderPromoCode: true,
-                    },
-                    fieldType: FormFieldSchemaType.Text,
-                    placeholder: 'Promo Code (Optional)',
-                    description: 'If you have a coupon code, enter it here.',
-                    title: 'Promo Code',
-                    required: false,
-                    stepId: 'plan',
-                    disabled: false,
-                },
-            ];
-        }
+            return {
+              value: isSubscriptionPlanYearly
+                ? plan.getYearlyPlanId()
+                : plan.getMonthlyPlanId(),
+              title: plan.getName(),
+              description: description,
+              sideTitle: plan.isCustomPricing()
+                ? "Custom Price"
+                : isSubscriptionPlanYearly
+                  ? "$" +
+                    plan.getYearlySubscriptionAmountInUSD().toString() +
+                    "/mo billed yearly"
+                  : "$" + plan.getMonthlySubscriptionAmountInUSD().toString(),
+              sideDescription: plan.isCustomPricing()
+                ? ""
+                : isSubscriptionPlanYearly
+                  ? `~ $${
+                      plan.getYearlySubscriptionAmountInUSD() * 12
+                    } per user / year`
+                  : `/month per user`,
+            };
+          }),
+          title: "Please select a plan.",
+          required: true,
+        },
+        {
+          field: {
+            paymentProviderPromoCode: true,
+          },
+          fieldType: FormFieldSchemaType.Text,
+          placeholder: "Promo Code (Optional)",
+          description: "If you have a coupon code, enter it here.",
+          title: "Promo Code",
+          required: false,
+          stepId: "plan",
+          disabled: false,
+        },
+      ];
+    }
 
-        setFields(formFields);
-    };
+    setFields(formFields);
+  };
 
-    const [fields, setFields] = useState<Array<Field<Project>>>([]);
+  const [fields, setFields] = useState<Array<Field<Project>>>([]);
 
-    const getFooter: Function = (): ReactElement => {
-        if (!BILLING_ENABLED) {
-            return <></>;
-        }
-
-        return (
-            <Toggle
-                title="Yearly Plan"
-                initialValue={isSubscriptionPlanYearly}
-                description="(Save 20%)"
-                onChange={(value: boolean) => {
-                    setIsSubscriptionPlanYearly(value);
-                }}
-            />
-        );
-    };
+  const getFooter: GetReactElementFunction = (): ReactElement => {
+    if (!BILLING_ENABLED) {
+      return <></>;
+    }
 
     return (
-        <Page
-            title={'Projects'}
-            breadcrumbLinks={[
-                {
-                    title: 'Admin Dashboard',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.HOME] as Route
-                    ),
-                },
-                {
-                    title: 'Projects',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.PROJECTS] as Route
-                    ),
-                },
-            ]}
-        >
-            <ModelTable<Project>
-                modelType={Project}
-                modelAPI={AdminModelAPI}
-                id="projects-table"
-                isDeleteable={false}
-                isEditable={false}
-                isCreateable={true}
-                name="Projects"
-                isViewable={false}
-                cardProps={{
-                    title: 'Projects',
-                    description: 'Here is a list of proejcts in OneUptime.',
-                }}
-                showViewIdButton={true}
-                formSteps={
-                    BILLING_ENABLED
-                        ? [
-                              {
-                                  title: 'Basic',
-                                  id: 'basic',
-                              },
-                              {
-                                  title: 'Select Plan',
-                                  id: 'plan',
-                              },
-                          ]
-                        : undefined
-                }
-                noItemsMessage={'No projects found.'}
-                formFields={fields}
-                showRefreshButton={true}
-                showFilterButton={true}
-                viewPageRoute={Navigation.getCurrentRoute()}
-                columns={[
-                    {
-                        field: {
-                            name: true,
-                        },
-                        title: 'Name',
-                        type: FieldType.Text,
-                        isFilterable: true,
-                    },
-                    {
-                        field: {
-                            createdAt: true,
-                        },
-                        title: 'Created At',
-                        type: FieldType.DateTime,
-                        isFilterable: true,
-                    },
-                ]}
-            />
-        </Page>
+      <Toggle
+        title="Yearly Plan"
+        value={isSubscriptionPlanYearly}
+        description="(Save 20%)"
+        onChange={(value: boolean) => {
+          setIsSubscriptionPlanYearly(value);
+        }}
+      />
     );
+  };
+
+  return (
+    <Page
+      title={"Projects"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.HOME] as Route),
+        },
+        {
+          title: "Projects",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.PROJECTS] as Route,
+          ),
+        },
+      ]}
+    >
+      <ModelTable<Project>
+        modelType={Project}
+        modelAPI={AdminModelAPI}
+        id="projects-table"
+        isDeleteable={false}
+        isEditable={false}
+        isCreateable={true}
+        name="Projects"
+        isViewable={false}
+        cardProps={{
+          title: "Projects",
+          description: "Here is a list of proejcts in OneUptime.",
+        }}
+        showViewIdButton={true}
+        formSteps={
+          BILLING_ENABLED
+            ? [
+                {
+                  title: "Basic",
+                  id: "basic",
+                },
+                {
+                  title: "Select Plan",
+                  id: "plan",
+                },
+              ]
+            : undefined
+        }
+        noItemsMessage={"No projects found."}
+        formFields={fields}
+        showRefreshButton={true}
+        viewPageRoute={Navigation.getCurrentRoute()}
+        filters={[
+          {
+            field: {
+              name: true,
+            },
+            title: "Name",
+            type: FieldType.Text,
+          },
+          {
+            field: {
+              createdAt: true,
+            },
+            title: "Created At",
+            type: FieldType.DateTime,
+          },
+        ]}
+        columns={[
+          {
+            field: {
+              name: true,
+            },
+            title: "Name",
+            type: FieldType.Text,
+          },
+          {
+            field: {
+              createdAt: true,
+            },
+            title: "Created At",
+            type: FieldType.DateTime,
+          },
+        ]}
+      />
+    </Page>
+  );
 };
 
 export default Projects;

AdminDashboard/src/Pages/Settings/APIKey/Index.tsx

@@ -1,102 +1,100 @@
-import Route from 'Common/Types/API/Route';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import CardModelDetail from 'CommonUI/src/Components/ModelDetail/CardModelDetail';
-import Page from 'CommonUI/src/Components/Page/Page';
-import React, { FunctionComponent, ReactElement } from 'react';
-import PageMap from '../../../Utils/PageMap';
-import RouteMap, { RouteUtil } from '../../../Utils/RouteMap';
-import DashboardSideMenu from '../SideMenu';
-import GlobalConfig from 'Model/Models/GlobalConfig';
-import ObjectID from 'Common/Types/ObjectID';
-import FieldType from 'CommonUI/src/Components/Types/FieldType';
+import PageMap from "../../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../../Utils/RouteMap";
+import DashboardSideMenu from "../SideMenu";
+import Route from "Common/Types/API/Route";
+import ObjectID from "Common/Types/ObjectID";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import CardModelDetail from "CommonUI/src/Components/ModelDetail/CardModelDetail";
+import Page from "CommonUI/src/Components/Page/Page";
+import FieldType from "CommonUI/src/Components/Types/FieldType";
+import GlobalConfig from "Model/Models/GlobalConfig";
+import React, { FunctionComponent, ReactElement } from "react";
 
 const Settings: FunctionComponent = (): ReactElement => {
-    return (
-        <Page
-            title={'Admin Settings'}
-            breadcrumbLinks={[
-                {
-                    title: 'Admin Dashboard',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.HOME] as Route
-                    ),
-                },
-                {
-                    title: 'Settings',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.SETTINGS] as Route
-                    ),
-                },
-                {
-                    title: 'API Key',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.SETTINGS_HOST] as Route
-                    ),
-                },
-            ]}
-            sideMenu={<DashboardSideMenu />}
-        >
-            {/* Project Settings View  */}
-            <CardModelDetail
-                name="API Key Settings"
-                cardProps={{
-                    title: 'Master API Key Settings',
-                    description:
-                        'This API key has root access to all the resources in all the projects on OneUptime.',
-                }}
-                isEditable={true}
-                editButtonText="Edit API Key Settings"
-                formFields={[
-                    {
-                        field: {
-                            masterApiKey: true,
-                        },
-                        title: 'Master API Key',
-                        fieldType: FormFieldSchemaType.ObjectID,
-                        required: false,
-                    },
-                    {
-                        field: {
-                            isMasterApiKeyEnabled: true,
-                        },
-                        title: 'Enabled',
-                        fieldType: FormFieldSchemaType.Toggle,
-                        required: false,
-                    },
-                ]}
-                modelDetailProps={{
-                    modelType: GlobalConfig,
-                    id: 'model-detail-global-config',
-                    fields: [
-                        {
-                            field: {
-                                masterApiKey: true,
-                            },
-                            title: 'Master API Key',
-                            description:
-                                'This API key has root access to all the resources in all the projects on OneUptime.',
-                            fieldType: FieldType.HiddenText,
-                            opts: {
-                                isCopyable: true,
-                            },
-                            placeholder: 'API Key not generated yet.',
-                        },
-                        {
-                            field: {
-                                isMasterApiKeyEnabled: true,
-                            },
-                            title: 'Enabled',
-                            description:
-                                'Enable or disable the master API key. If disabled, all requests using this key will fail.',
-                            fieldType: FieldType.Boolean,
-                            placeholder: 'Not Enabled',
-                        },
-                    ],
-                    modelId: ObjectID.getZeroObjectID(),
-                }}
-            />
-        </Page>
-    );
+  return (
+    <Page
+      title={"Admin Settings"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.HOME] as Route),
+        },
+        {
+          title: "Settings",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS] as Route,
+          ),
+        },
+        {
+          title: "API Key",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS_HOST] as Route,
+          ),
+        },
+      ]}
+      sideMenu={<DashboardSideMenu />}
+    >
+      {/* Project Settings View  */}
+      <CardModelDetail
+        name="API Key Settings"
+        cardProps={{
+          title: "Master API Key Settings",
+          description:
+            "This API key has root access to all the resources in all the projects on OneUptime.",
+        }}
+        isEditable={true}
+        editButtonText="Edit API Key Settings"
+        formFields={[
+          {
+            field: {
+              masterApiKey: true,
+            },
+            title: "Master API Key",
+            fieldType: FormFieldSchemaType.ObjectID,
+            required: false,
+          },
+          {
+            field: {
+              isMasterApiKeyEnabled: true,
+            },
+            title: "Enabled",
+            fieldType: FormFieldSchemaType.Toggle,
+            required: false,
+          },
+        ]}
+        modelDetailProps={{
+          modelType: GlobalConfig,
+          id: "model-detail-global-config",
+          fields: [
+            {
+              field: {
+                masterApiKey: true,
+              },
+              title: "Master API Key",
+              description:
+                "This API key has root access to all the resources in all the projects on OneUptime.",
+              fieldType: FieldType.HiddenText,
+              opts: {
+                isCopyable: true,
+              },
+              placeholder: "API Key not generated yet.",
+            },
+            {
+              field: {
+                isMasterApiKeyEnabled: true,
+              },
+              title: "Enabled",
+              description:
+                "Enable or disable the master API key. If disabled, all requests using this key will fail.",
+              fieldType: FieldType.Boolean,
+              placeholder: "Not Enabled",
+            },
+          ],
+          modelId: ObjectID.getZeroObjectID(),
+        }}
+      />
+    </Page>
+  );
 };
 
 export default Settings;

AdminDashboard/src/Pages/Settings/Authentication/Index.tsx

@@ -1,83 +1,80 @@
-import Route from 'Common/Types/API/Route';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import CardModelDetail from 'CommonUI/src/Components/ModelDetail/CardModelDetail';
-import Page from 'CommonUI/src/Components/Page/Page';
-import React, { FunctionComponent, ReactElement } from 'react';
-import PageMap from '../../../Utils/PageMap';
-import RouteMap, { RouteUtil } from '../../../Utils/RouteMap';
-import DashboardSideMenu from '../SideMenu';
-import GlobalConfig from 'Model/Models/GlobalConfig';
-import ObjectID from 'Common/Types/ObjectID';
-import FieldType from 'CommonUI/src/Components/Types/FieldType';
+import PageMap from "../../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../../Utils/RouteMap";
+import DashboardSideMenu from "../SideMenu";
+import Route from "Common/Types/API/Route";
+import ObjectID from "Common/Types/ObjectID";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import CardModelDetail from "CommonUI/src/Components/ModelDetail/CardModelDetail";
+import Page from "CommonUI/src/Components/Page/Page";
+import FieldType from "CommonUI/src/Components/Types/FieldType";
+import GlobalConfig from "Model/Models/GlobalConfig";
+import React, { FunctionComponent, ReactElement } from "react";
 
 const Settings: FunctionComponent = (): ReactElement => {
-    return (
-        <Page
-            title={'Admin Settings'}
-            breadcrumbLinks={[
-                {
-                    title: 'Admin Dashboard',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.HOME] as Route
-                    ),
-                },
-                {
-                    title: 'Settings',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.SETTINGS] as Route
-                    ),
-                },
-                {
-                    title: 'Authentication',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.SETTINGS_AUTHENTICATION] as Route
-                    ),
-                },
-            ]}
-            sideMenu={<DashboardSideMenu />}
-        >
-            {/* Project Settings View  */}
-            <CardModelDetail
-                name="Authentication Settings"
-                cardProps={{
-                    title: 'Authentication Settings',
-                    description:
-                        'Authentication Settings for this OneUptime Server instance.',
-                }}
-                isEditable={true}
-                editButtonText="Edit Settings"
-                formFields={[
-                    {
-                        field: {
-                            disableSignup: true,
-                        },
-                        title: 'Disable Sign Up',
-                        fieldType: FormFieldSchemaType.Toggle,
-                        required: false,
-                        description:
-                            'Should we disable sign up of new users to OneUptime?',
-                    },
-                ]}
-                modelDetailProps={{
-                    modelType: GlobalConfig,
-                    id: 'model-detail-global-config',
-                    fields: [
-                        {
-                            field: {
-                                disableSignup: true,
-                            },
-                            fieldType: FieldType.Boolean,
-                            title: 'Disable Sign Up',
-                            placeholder: 'No',
-                            description:
-                                'Should we disable sign up of new users to OneUptime?',
-                        },
-                    ],
-                    modelId: ObjectID.getZeroObjectID(),
-                }}
-            />
-        </Page>
-    );
+  return (
+    <Page
+      title={"Admin Settings"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.HOME] as Route),
+        },
+        {
+          title: "Settings",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS] as Route,
+          ),
+        },
+        {
+          title: "Authentication",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS_AUTHENTICATION] as Route,
+          ),
+        },
+      ]}
+      sideMenu={<DashboardSideMenu />}
+    >
+      {/* Project Settings View  */}
+      <CardModelDetail
+        name="Authentication Settings"
+        cardProps={{
+          title: "Authentication Settings",
+          description:
+            "Authentication Settings for this OneUptime Server instance.",
+        }}
+        isEditable={true}
+        editButtonText="Edit Settings"
+        formFields={[
+          {
+            field: {
+              disableSignup: true,
+            },
+            title: "Disable Sign Up",
+            fieldType: FormFieldSchemaType.Toggle,
+            required: false,
+            description: "Should we disable sign up of new users to OneUptime?",
+          },
+        ]}
+        modelDetailProps={{
+          modelType: GlobalConfig,
+          id: "model-detail-global-config",
+          fields: [
+            {
+              field: {
+                disableSignup: true,
+              },
+              fieldType: FieldType.Boolean,
+              title: "Disable Sign Up",
+              placeholder: "No",
+              description:
+                "Should we disable sign up of new users to OneUptime?",
+            },
+          ],
+          modelId: ObjectID.getZeroObjectID(),
+        }}
+      />
+    </Page>
+  );
 };
 
 export default Settings;

AdminDashboard/src/Pages/Settings/CallSMS/Index.tsx

@@ -1,119 +1,114 @@
-import Route from 'Common/Types/API/Route';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import CardModelDetail from 'CommonUI/src/Components/ModelDetail/CardModelDetail';
-import Page from 'CommonUI/src/Components/Page/Page';
-import React, { FunctionComponent, ReactElement } from 'react';
-import PageMap from '../../../Utils/PageMap';
-import RouteMap, { RouteUtil } from '../../../Utils/RouteMap';
-import DashboardSideMenu from '../SideMenu';
-import GlobalConfig from 'Model/Models/GlobalConfig';
-import ObjectID from 'Common/Types/ObjectID';
-import FieldType from 'CommonUI/src/Components/Types/FieldType';
+import PageMap from "../../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../../Utils/RouteMap";
+import DashboardSideMenu from "../SideMenu";
+import Route from "Common/Types/API/Route";
+import ObjectID from "Common/Types/ObjectID";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import CardModelDetail from "CommonUI/src/Components/ModelDetail/CardModelDetail";
+import Page from "CommonUI/src/Components/Page/Page";
+import FieldType from "CommonUI/src/Components/Types/FieldType";
+import GlobalConfig from "Model/Models/GlobalConfig";
+import React, { FunctionComponent, ReactElement } from "react";
 
 const Settings: FunctionComponent = (): ReactElement => {
-    return (
-        <Page
-            title={'Admin Settings'}
-            breadcrumbLinks={[
-                {
-                    title: 'Admin Dashboard',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.HOME] as Route
-                    ),
-                },
-                {
-                    title: 'Settings',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.SETTINGS] as Route
-                    ),
-                },
-                {
-                    title: 'Calls and SMS',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.SETTINGS_CALL_AND_SMS] as Route
-                    ),
-                },
-            ]}
-            sideMenu={<DashboardSideMenu />}
-        >
-            {/* Project Settings View  */}
-            <CardModelDetail
-                name="Call and SMS Settings"
-                cardProps={{
-                    title: 'Twilio Config',
-                    description: 'This will be used to make Call and send SMS.',
-                }}
-                isEditable={true}
-                editButtonText="Edit Twilio Config"
-                formFields={[
-                    {
-                        field: {
-                            twilioAccountSID: true,
-                        },
-                        title: 'Twilio Account SID',
-                        fieldType: FormFieldSchemaType.Text,
-                        required: true,
-                        description:
-                            'You can find this in your Twilio console.',
-                        placeholder: '',
-                        validation: {
-                            minLength: 2,
-                        },
-                    },
-                    {
-                        field: {
-                            twilioAuthToken: true,
-                        },
-                        title: 'Twilio Auth Token',
-                        fieldType: FormFieldSchemaType.Password,
-                        required: true,
-                        description:
-                            'You can find this in your Twilio console.',
-                        placeholder: '',
-                        validation: {
-                            minLength: 2,
-                        },
-                    },
-                    {
-                        field: {
-                            twilioPhoneNumber: true,
-                        },
-                        title: 'Twilio Phone Number',
-                        fieldType: FormFieldSchemaType.Phone,
-                        required: true,
-                        description:
-                            'You can find this in your Twilio console.',
-                        placeholder: '',
-                        validation: {
-                            minLength: 2,
-                        },
-                    },
-                ]}
-                modelDetailProps={{
-                    modelType: GlobalConfig,
-                    id: 'model-detail-global-config',
-                    fields: [
-                        {
-                            field: {
-                                twilioAccountSID: true,
-                            },
-                            title: 'Twilio Account SID',
-                            placeholder: 'None',
-                        },
-                        {
-                            field: {
-                                twilioPhoneNumber: true,
-                            },
-                            title: 'Twilio Phone Number',
-                            fieldType: FieldType.Phone,
-                            placeholder: 'None',
-                        },
-                    ],
-                    modelId: ObjectID.getZeroObjectID(),
-                }}
-            />
-        </Page>
-    );
+  return (
+    <Page
+      title={"Admin Settings"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.HOME] as Route),
+        },
+        {
+          title: "Settings",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS] as Route,
+          ),
+        },
+        {
+          title: "Calls and SMS",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS_CALL_AND_SMS] as Route,
+          ),
+        },
+      ]}
+      sideMenu={<DashboardSideMenu />}
+    >
+      {/* Project Settings View  */}
+      <CardModelDetail
+        name="Call and SMS Settings"
+        cardProps={{
+          title: "Twilio Config",
+          description: "This will be used to make Call and send SMS.",
+        }}
+        isEditable={true}
+        editButtonText="Edit Twilio Config"
+        formFields={[
+          {
+            field: {
+              twilioAccountSID: true,
+            },
+            title: "Twilio Account SID",
+            fieldType: FormFieldSchemaType.Text,
+            required: true,
+            description: "You can find this in your Twilio console.",
+            placeholder: "",
+            validation: {
+              minLength: 2,
+            },
+          },
+          {
+            field: {
+              twilioAuthToken: true,
+            },
+            title: "Twilio Auth Token",
+            fieldType: FormFieldSchemaType.Text,
+            required: true,
+            description: "You can find this in your Twilio console.",
+            placeholder: "",
+            validation: {
+              minLength: 2,
+            },
+          },
+          {
+            field: {
+              twilioPhoneNumber: true,
+            },
+            title: "Twilio Phone Number",
+            fieldType: FormFieldSchemaType.Phone,
+            required: true,
+            description: "You can find this in your Twilio console.",
+            placeholder: "",
+            validation: {
+              minLength: 2,
+            },
+          },
+        ]}
+        modelDetailProps={{
+          modelType: GlobalConfig,
+          id: "model-detail-global-config",
+          fields: [
+            {
+              field: {
+                twilioAccountSID: true,
+              },
+              title: "Twilio Account SID",
+              placeholder: "None",
+            },
+            {
+              field: {
+                twilioPhoneNumber: true,
+              },
+              title: "Twilio Phone Number",
+              fieldType: FieldType.Phone,
+              placeholder: "None",
+            },
+          ],
+          modelId: ObjectID.getZeroObjectID(),
+        }}
+      />
+    </Page>
+  );
 };
 
 export default Settings;

AdminDashboard/src/Pages/Settings/Email/Index.tsx

@@ -0,0 +1,419 @@
+import PageMap from "../../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../../Utils/RouteMap";
+import DashboardSideMenu from "../SideMenu";
+import Route from "Common/Types/API/Route";
+import { Green, Red } from "Common/Types/BrandColors";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import ObjectID from "Common/Types/ObjectID";
+import ErrorMessage from "CommonUI/src/Components/ErrorMessage/ErrorMessage";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import PageLoader from "CommonUI/src/Components/Loader/PageLoader";
+import CardModelDetail from "CommonUI/src/Components/ModelDetail/CardModelDetail";
+import Page from "CommonUI/src/Components/Page/Page";
+import Pill from "CommonUI/src/Components/Pill/Pill";
+import FieldType from "CommonUI/src/Components/Types/FieldType";
+import DropdownUtil from "CommonUI/src/Utils/Dropdown";
+import ModelAPI from "CommonUI/src/Utils/ModelAPI/ModelAPI";
+import GlobalConfig, { EmailServerType } from "Model/Models/GlobalConfig";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+
+const Settings: FunctionComponent = (): ReactElement => {
+  const [emailServerType, setemailServerType] = React.useState<EmailServerType>(
+    EmailServerType.Internal,
+  );
+
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+
+  const [error, setError] = React.useState<string>("");
+
+  const fetchItem: PromiseVoidFunction = async (): Promise<void> => {
+    setIsLoading(true);
+
+    const globalConfig: GlobalConfig | null =
+      await ModelAPI.getItem<GlobalConfig>({
+        modelType: GlobalConfig,
+        id: ObjectID.getZeroObjectID(),
+        select: {
+          _id: true,
+          emailServerType: true,
+        },
+      });
+
+    if (globalConfig) {
+      setemailServerType(
+        globalConfig.emailServerType || EmailServerType.Internal,
+      );
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchItem().catch((err: Error) => {
+      setError(err.message);
+    });
+  }, []);
+
+  if (isLoading) {
+    return <PageLoader isVisible={true} />;
+  }
+
+  if (error) {
+    return <ErrorMessage error={error} />;
+  }
+
+  return (
+    <Page
+      title={"Admin Settings"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.HOME] as Route),
+        },
+        {
+          title: "Settings",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS] as Route,
+          ),
+        },
+        {
+          title: "Email Settings",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS_SMTP] as Route,
+          ),
+        },
+      ]}
+      sideMenu={<DashboardSideMenu />}
+    >
+      {/* Project Settings View  */}
+
+      <CardModelDetail
+        name="Admin Notification Email"
+        cardProps={{
+          title: "Admin Notification Email",
+          description:
+            "Enter the email address where you would like to receive admin-level notifications.",
+        }}
+        isEditable={true}
+        editButtonText="Edit Email"
+        formFields={[
+          {
+            field: {
+              adminNotificationEmail: true,
+            },
+            title: "Admin Notification Email",
+            fieldType: FormFieldSchemaType.Email,
+            required: false,
+          },
+        ]}
+        modelDetailProps={{
+          modelType: GlobalConfig,
+          id: "model-detail-global-config",
+          fields: [
+            {
+              field: {
+                adminNotificationEmail: true,
+              },
+              title: "Admin Notification Email",
+              fieldType: FieldType.Email,
+              placeholder: "None",
+            },
+          ],
+          modelId: ObjectID.getZeroObjectID(),
+        }}
+      />
+
+      <CardModelDetail
+        name="Internal SMTP Settings"
+        cardProps={{
+          title: "Email Server Settings",
+          description:
+            "Pick which email server you would like to use to send emails.",
+        }}
+        isEditable={true}
+        editButtonText="Edit Server"
+        onSaveSuccess={() => {
+          window.location.reload();
+        }}
+        formFields={[
+          {
+            field: {
+              emailServerType: true,
+            },
+            title: "Email Server Type",
+            fieldType: FormFieldSchemaType.Dropdown,
+            dropdownOptions:
+              DropdownUtil.getDropdownOptionsFromEnum(EmailServerType),
+            required: true,
+          },
+        ]}
+        modelDetailProps={{
+          modelType: GlobalConfig,
+          id: "model-detail-global-config",
+          fields: [
+            {
+              field: {
+                emailServerType: true,
+              },
+              title: "Email Server Type",
+              fieldType: FieldType.Text,
+            },
+          ],
+          modelId: ObjectID.getZeroObjectID(),
+        }}
+      />
+
+      {emailServerType === EmailServerType.CustomSMTP ? (
+        <CardModelDetail
+          name="Host Settings"
+          cardProps={{
+            title: "Custom Email and SMTP Settings",
+            description:
+              "If you have not enabled Internal SMTP server to send emails. Please configure your SMTP server here.",
+          }}
+          isEditable={true}
+          editButtonText="Edit SMTP Config"
+          formSteps={[
+            {
+              title: "SMTP Server",
+              id: "server-info",
+            },
+            {
+              title: "Authentication",
+              id: "authentication",
+            },
+            {
+              title: "Email",
+              id: "email-info",
+            },
+          ]}
+          formFields={[
+            {
+              field: {
+                smtpHost: true,
+              },
+              title: "Hostname",
+              stepId: "server-info",
+              fieldType: FormFieldSchemaType.Hostname,
+              required: true,
+              placeholder: "smtp.server.com",
+            },
+            {
+              field: {
+                smtpPort: true,
+              },
+              title: "Port",
+              stepId: "server-info",
+              fieldType: FormFieldSchemaType.Port,
+              required: true,
+              placeholder: "587",
+            },
+            {
+              field: {
+                isSMTPSecure: true,
+              },
+              title: "Use SSL / TLS",
+              stepId: "server-info",
+              fieldType: FormFieldSchemaType.Toggle,
+              description:
+                "If you use port 465, please enable this. Do not enable this if you use port 587.",
+            },
+            {
+              field: {
+                smtpUsername: true,
+              },
+              title: "Username",
+              stepId: "authentication",
+              fieldType: FormFieldSchemaType.Text,
+              required: false,
+              placeholder: "emailuser",
+            },
+            {
+              field: {
+                smtpPassword: true,
+              },
+              title: "Password",
+              stepId: "authentication",
+              fieldType: FormFieldSchemaType.EncryptedText,
+              required: false,
+              placeholder: "Password",
+            },
+            {
+              field: {
+                smtpFromEmail: true,
+              },
+              title: "Email From",
+              stepId: "email-info",
+              fieldType: FormFieldSchemaType.Email,
+              required: true,
+              description:
+                "This is the display email your team and customers see, when they receive emails from OneUptime.",
+              placeholder: "email@company.com",
+            },
+            {
+              field: {
+                smtpFromName: true,
+              },
+              title: "From Name",
+              stepId: "email-info",
+              fieldType: FormFieldSchemaType.Text,
+              required: true,
+              description:
+                "This is the display name your team and customers see, when they receive emails from OneUptime.",
+              placeholder: "Company, Inc.",
+            },
+          ]}
+          modelDetailProps={{
+            modelType: GlobalConfig,
+            id: "model-detail-global-config",
+            fields: [
+              {
+                field: {
+                  smtpHost: true,
+                },
+                title: "SMTP Host",
+                placeholder: "None",
+              },
+              {
+                field: {
+                  smtpPort: true,
+                },
+                title: "SMTP Port",
+                placeholder: "None",
+              },
+              {
+                field: {
+                  smtpUsername: true,
+                },
+                title: "SMTP Username",
+                placeholder: "None",
+              },
+              {
+                field: {
+                  smtpFromEmail: true,
+                },
+                title: "SMTP Email",
+                placeholder: "None",
+                fieldType: FieldType.Email,
+              },
+              {
+                field: {
+                  smtpFromName: true,
+                },
+                title: "SMTP From Name",
+                placeholder: "None",
+              },
+              {
+                field: {
+                  isSMTPSecure: true,
+                },
+                title: "Use SSL/TLS",
+                placeholder: "No",
+                fieldType: FieldType.Boolean,
+              },
+            ],
+            modelId: ObjectID.getZeroObjectID(),
+          }}
+        />
+      ) : (
+        <></>
+      )}
+
+      {emailServerType === EmailServerType.Sendgrid ? (
+        <CardModelDetail<GlobalConfig>
+          name="Sendgrid Settings"
+          cardProps={{
+            title: "Sendgrid Settings",
+            description:
+              "Enter your Sendgrid API key to send emails through Sendgrid.",
+          }}
+          isEditable={true}
+          editButtonText="Edit API Key"
+          formFields={[
+            {
+              field: {
+                sendgridApiKey: true,
+              },
+              title: "Sendgrid API Key",
+              fieldType: FormFieldSchemaType.Text,
+              required: true,
+              placeholder: "Sendgrid API Key",
+            },
+            {
+              field: {
+                sendgridFromEmail: true,
+              },
+              title: "From Email",
+              fieldType: FormFieldSchemaType.Email,
+              required: true,
+              placeholder: "email@yourcompany.com",
+            },
+            {
+              field: {
+                sendgridFromName: true,
+              },
+              title: "From Name",
+              fieldType: FormFieldSchemaType.Text,
+              required: true,
+              placeholder: "Acme, Inc.",
+            },
+          ]}
+          modelDetailProps={{
+            modelType: GlobalConfig,
+            id: "model-detail-global-config",
+            selectMoreFields: {
+              sendgridFromEmail: true,
+              sendgridFromName: true,
+            },
+            fields: [
+              {
+                field: {
+                  sendgridApiKey: true,
+                },
+                title: "",
+                placeholder: "None",
+                getElement: (item: GlobalConfig) => {
+                  if (
+                    item["sendgridApiKey"] &&
+                    item["sendgridFromEmail"] &&
+                    item["sendgridFromName"]
+                  ) {
+                    return <Pill text="Enabled" color={Green} />;
+                  } else if (!item["sendgridApiKey"]) {
+                    return (
+                      <Pill
+                        text="Not Enabled. Please add the API key."
+                        color={Red}
+                      />
+                    );
+                  } else if (!item["sendgridFromEmail"]) {
+                    return (
+                      <Pill
+                        text="Not Enabled. Please add the From Email."
+                        color={Red}
+                      />
+                    );
+                  } else if (!item["sendgridFromName"]) {
+                    return (
+                      <Pill
+                        text="Not Enabled. Please add the From Name."
+                        color={Red}
+                      />
+                    );
+                  }
+
+                  return <></>;
+                },
+              },
+            ],
+            modelId: ObjectID.getZeroObjectID(),
+          }}
+        />
+      ) : (
+        <></>
+      )}
+    </Page>
+  );
+};
+
+export default Settings;

AdminDashboard/src/Pages/Settings/Probes/Index.tsx

@@ -1,241 +1,243 @@
-import Route from 'Common/Types/API/Route';
-import Page from 'CommonUI/src/Components/Page/Page';
-import React, { FunctionComponent, ReactElement, useState } from 'react';
-import PageMap from '../../../Utils/PageMap';
-import RouteMap, { RouteUtil } from '../../../Utils/RouteMap';
-import DashboardSideMenu from '../SideMenu';
-import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable';
-import Probe from 'Model/Models/Probe';
-import FieldType from 'CommonUI/src/Components/Types/FieldType';
-import { JSONObject } from 'Common/Types/JSON';
-import OneUptimeDate from 'Common/Types/Date';
-import { Green, Red } from 'Common/Types/BrandColors';
-import Statusbubble from 'CommonUI/src/Components/StatusBubble/StatusBubble';
-import ProbeElement from 'CommonUI/src/Components/Probe/Probe';
-import IsNull from 'Common/Types/Database/IsNull';
-import Banner from 'CommonUI/src/Components/Banner/Banner';
-import URL from 'Common/Types/API/URL';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
-import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal';
-import AdminModelAPI from '../../../Utils/ModelAPI';
+import AdminModelAPI from "../../../Utils/ModelAPI";
+import PageMap from "../../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../../Utils/RouteMap";
+import DashboardSideMenu from "../SideMenu";
+import Route from "Common/Types/API/Route";
+import IsNull from "Common/Types/BaseDatabase/IsNull";
+import { Green, Red } from "Common/Types/BrandColors";
+import OneUptimeDate from "Common/Types/Date";
+import { ErrorFunction, VoidFunction } from "Common/Types/FunctionTypes";
+import Banner from "CommonUI/src/Components/Banner/Banner";
+import { ButtonStyleType } from "CommonUI/src/Components/Button/Button";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import ConfirmModal from "CommonUI/src/Components/Modal/ConfirmModal";
+import ModelTable from "CommonUI/src/Components/ModelTable/ModelTable";
+import Page from "CommonUI/src/Components/Page/Page";
+import ProbeElement from "CommonUI/src/Components/Probe/Probe";
+import Statusbubble from "CommonUI/src/Components/StatusBubble/StatusBubble";
+import FieldType from "CommonUI/src/Components/Types/FieldType";
+import Probe from "Model/Models/Probe";
+import React, { FunctionComponent, ReactElement, useState } from "react";
 
 const Settings: FunctionComponent = (): ReactElement => {
-    const [showKeyModal, setShowKeyModal] = useState<boolean>(false);
+  const [showKeyModal, setShowKeyModal] = useState<boolean>(false);
 
-    const [currentProbe, setCurrentProbe] = useState<JSONObject | null>(null);
+  const [currentProbe, setCurrentProbe] = useState<Probe | null>(null);
 
-    return (
-        <Page
-            title={'Admin Settings'}
-            breadcrumbLinks={[
-                {
-                    title: 'Admin Dashboard',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.HOME] as Route
-                    ),
-                },
-                {
-                    title: 'Settings',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.SETTINGS] as Route
-                    ),
-                },
-                {
-                    title: 'Global Probes',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.SETTINGS_PROBES] as Route
-                    ),
-                },
-            ]}
-            sideMenu={<DashboardSideMenu />}
-        >
-            {/* Project Settings View  */}
+  return (
+    <Page
+      title={"Admin Settings"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.HOME] as Route),
+        },
+        {
+          title: "Settings",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS] as Route,
+          ),
+        },
+        {
+          title: "Global Probes",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.SETTINGS_PROBES] as Route,
+          ),
+        },
+      ]}
+      sideMenu={<DashboardSideMenu />}
+    >
+      {/* Project Settings View  */}
 
-            <Banner
-                openInNewTab={true}
-                title="Need help with setting up Global Probes?"
-                description="Here is a guide which will help you get set up"
-                link={URL.fromString(
-                    'https://github.com/OneUptime/oneuptime/blob/master/Docs/Probe/CustomProbe.md'
-                )}
-            />
+      <Banner
+        openInNewTab={true}
+        title="Need help with setting up Global Probes?"
+        description="Here is a guide which will help you get set up"
+        link={Route.fromString("/docs/probe/custom-probe")}
+      />
 
-            <ModelTable<Probe>
-                modelType={Probe}
-                id="probes-table"
-                name="Settings > Global Probes"
-                isDeleteable={true}
-                isEditable={true}
-                isCreateable={true}
-                cardProps={{
-                    title: 'Global Probes',
-                    description:
-                        'Global Probes help you monitor external resources from different locations around the world.',
-                }}
-                query={{
-                    projectId: new IsNull(),
-                    isGlobalProbe: true,
-                }}
-                modelAPI={AdminModelAPI}
-                noItemsMessage={'No probes found.'}
-                showRefreshButton={true}
-                showFilterButton={true}
-                onBeforeCreate={(item: Probe) => {
-                    item.isGlobalProbe = true;
-                    return Promise.resolve(item);
-                }}
-                formFields={[
-                    {
-                        field: {
-                            name: true,
-                        },
-                        title: 'Name',
-                        fieldType: FormFieldSchemaType.Text,
-                        required: true,
-                        placeholder: 'internal-probe',
-                        validation: {
-                            minLength: 2,
-                        },
-                    },
+      <ModelTable<Probe>
+        modelType={Probe}
+        id="probes-table"
+        name="Settings > Global Probes"
+        isDeleteable={true}
+        isEditable={true}
+        isCreateable={true}
+        cardProps={{
+          title: "Global Probes",
+          description:
+            "Global Probes help you monitor external resources from different locations around the world.",
+        }}
+        query={{
+          projectId: new IsNull(),
+          isGlobalProbe: true,
+        }}
+        modelAPI={AdminModelAPI}
+        noItemsMessage={"No probes found."}
+        showRefreshButton={true}
+        onBeforeCreate={(item: Probe) => {
+          item.isGlobalProbe = true;
+          return Promise.resolve(item);
+        }}
+        formFields={[
+          {
+            field: {
+              name: true,
+            },
+            title: "Name",
+            fieldType: FormFieldSchemaType.Text,
+            required: true,
+            placeholder: "internal-probe",
+            validation: {
+              minLength: 2,
+            },
+          },
 
-                    {
-                        field: {
-                            description: true,
-                        },
-                        title: 'Description',
-                        fieldType: FormFieldSchemaType.LongText,
-                        required: true,
-                        placeholder:
-                            'This probe is to monitor all the internal services.',
-                    },
+          {
+            field: {
+              description: true,
+            },
+            title: "Description",
+            fieldType: FormFieldSchemaType.LongText,
+            required: true,
+            placeholder: "This probe is to monitor all the internal services.",
+          },
 
-                    {
-                        field: {
-                            iconFile: true,
-                        },
-                        title: 'Probe Logo',
-                        fieldType: FormFieldSchemaType.ImageFile,
-                        required: false,
-                        placeholder: 'Upload logo',
-                    },
-                ]}
-                selectMoreFields={{
-                    key: true,
-                    iconFileId: true,
-                }}
-                actionButtons={[
-                    {
-                        title: 'Show ID and Key',
-                        buttonStyleType: ButtonStyleType.NORMAL,
-                        onClick: async (
-                            item: JSONObject,
-                            onCompleteAction: Function,
-                            onError: (err: Error) => void
-                        ) => {
-                            try {
-                                setCurrentProbe(item);
-                                setShowKeyModal(true);
+          {
+            field: {
+              iconFile: true,
+            },
+            title: "Probe Logo",
+            fieldType: FormFieldSchemaType.ImageFile,
+            required: false,
+            placeholder: "Upload logo",
+          },
+        ]}
+        selectMoreFields={{
+          key: true,
+          iconFileId: true,
+        }}
+        actionButtons={[
+          {
+            title: "Show ID and Key",
+            buttonStyleType: ButtonStyleType.NORMAL,
+            onClick: async (
+              item: Probe,
+              onCompleteAction: VoidFunction,
+              onError: ErrorFunction,
+            ) => {
+              try {
+                setCurrentProbe(item);
+                setShowKeyModal(true);
 
-                                onCompleteAction();
-                            } catch (err) {
-                                onCompleteAction();
-                                onError(err as Error);
-                            }
-                        },
-                    },
-                ]}
-                columns={[
-                    {
-                        field: {
-                            name: true,
-                        },
-                        title: 'Name',
-                        type: FieldType.Text,
-                        isFilterable: true,
-                        getElement: (item: JSONObject): ReactElement => {
-                            return <ProbeElement probe={item} />;
-                        },
-                    },
-                    {
-                        field: {
-                            description: true,
-                        },
-                        title: 'Description',
-                        type: FieldType.Text,
-                        isFilterable: true,
-                    },
-                    {
-                        field: {
-                            lastAlive: true,
-                        },
-                        title: 'Status',
-                        type: FieldType.Text,
-                        isFilterable: false,
-                        getElement: (item: JSONObject): ReactElement => {
-                            if (
-                                item &&
-                                item['lastAlive'] &&
-                                OneUptimeDate.getNumberOfMinutesBetweenDates(
-                                    OneUptimeDate.fromString(
-                                        item['lastAlive'] as string
-                                    ),
-                                    OneUptimeDate.getCurrentDate()
-                                ) < 5
-                            ) {
-                                return (
-                                    <Statusbubble
-                                        text={'Connected'}
-                                        color={Green}
-                                    />
-                                );
-                            }
+                onCompleteAction();
+              } catch (err) {
+                onCompleteAction();
+                onError(err as Error);
+              }
+            },
+          },
+        ]}
+        filters={[
+          {
+            field: {
+              name: true,
+            },
+            title: "Name",
+            type: FieldType.Text,
+          },
+          {
+            field: {
+              description: true,
+            },
+            title: "Description",
+            type: FieldType.Text,
+          },
+        ]}
+        columns={[
+          {
+            field: {
+              name: true,
+            },
+            title: "Name",
+            type: FieldType.Text,
 
-                            return (
-                                <Statusbubble
-                                    text={'Disconnected'}
-                                    color={Red}
-                                />
-                            );
-                        },
-                    },
-                ]}
-            />
+            getElement: (item: Probe): ReactElement => {
+              return <ProbeElement probe={item} />;
+            },
+          },
+          {
+            field: {
+              description: true,
+            },
+            title: "Description",
+            type: FieldType.Text,
+          },
+          {
+            field: {
+              lastAlive: true,
+            },
+            title: "Status",
+            type: FieldType.Text,
+            getElement: (item: Probe): ReactElement => {
+              if (
+                item &&
+                item["lastAlive"] &&
+                OneUptimeDate.getNumberOfMinutesBetweenDates(
+                  OneUptimeDate.fromString(item["lastAlive"]),
+                  OneUptimeDate.getCurrentDate(),
+                ) < 5
+              ) {
+                return (
+                  <Statusbubble
+                    text={"Connected"}
+                    color={Green}
+                    shouldAnimate={true}
+                  />
+                );
+              }
 
-            {showKeyModal && currentProbe ? (
-                <ConfirmModal
-                    title={`Probe Key`}
-                    description={
-                        <div>
-                            <span>
-                                Here is your probe key. Please keep this a
-                                secret.
-                            </span>
-                            <br />
-                            <br />
-                            <span>
-                                <b>Probe ID: </b>{' '}
-                                {currentProbe['_id']?.toString()}
-                            </span>
-                            <br />
-                            <br />
-                            <span>
-                                <b>Probe Key: </b>{' '}
-                                {currentProbe['key']?.toString()}
-                            </span>
-                        </div>
-                    }
-                    submitButtonText={'Close'}
-                    submitButtonType={ButtonStyleType.NORMAL}
-                    onSubmit={async () => {
-                        setShowKeyModal(false);
-                    }}
+              return (
+                <Statusbubble
+                  text={"Disconnected"}
+                  color={Red}
+                  shouldAnimate={false}
                 />
-            ) : (
-                <></>
-            )}
-        </Page>
-    );
+              );
+            },
+          },
+        ]}
+      />
+
+      {showKeyModal && currentProbe ? (
+        <ConfirmModal
+          title={`Probe Key`}
+          description={
+            <div>
+              <span>Here is your probe key. Please keep this a secret.</span>
+              <br />
+              <br />
+              <span>
+                <b>Probe ID: </b> {currentProbe["_id"]?.toString()}
+              </span>
+              <br />
+              <br />
+              <span>
+                <b>Probe Key: </b> {currentProbe["key"]?.toString()}
+              </span>
+            </div>
+          }
+          submitButtonText={"Close"}
+          submitButtonType={ButtonStyleType.NORMAL}
+          onSubmit={async () => {
+            setShowKeyModal(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+    </Page>
+  );
 };
 
 export default Settings;

AdminDashboard/src/Pages/Settings/SMTP/Index.tsx

@@ -1,390 +0,0 @@
-import Route from 'Common/Types/API/Route';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import CardModelDetail from 'CommonUI/src/Components/ModelDetail/CardModelDetail';
-import Page from 'CommonUI/src/Components/Page/Page';
-import React, { FunctionComponent, ReactElement, useEffect } from 'react';
-import PageMap from '../../../Utils/PageMap';
-import RouteMap, { RouteUtil } from '../../../Utils/RouteMap';
-import DashboardSideMenu from '../SideMenu';
-import GlobalConfig, { EmailServerType } from 'Model/Models/GlobalConfig';
-import ObjectID from 'Common/Types/ObjectID';
-import FieldType from 'CommonUI/src/Components/Types/FieldType';
-import ModelAPI from 'CommonUI/src/Utils/ModelAPI/ModelAPI';
-import PageLoader from 'CommonUI/src/Components/Loader/PageLoader';
-import ErrorMessage from 'CommonUI/src/Components/ErrorMessage/ErrorMessage';
-import { JSONObject } from 'Common/Types/JSON';
-import DropdownUtil from 'CommonUI/src/Utils/Dropdown';
-import Pill from 'CommonUI/src/Components/Pill/Pill';
-import { Green, Red } from 'Common/Types/BrandColors';
-
-const Settings: FunctionComponent = (): ReactElement => {
-    const [emailServerType, setemailServerType] =
-        React.useState<EmailServerType>(EmailServerType.Internal);
-
-    const [isLoading, setIsLoading] = React.useState<boolean>(true);
-
-    const [error, setError] = React.useState<string>('');
-
-    const fetchItem: Function = async (): Promise<void> => {
-        setIsLoading(true);
-
-        const globalConfig: GlobalConfig | null =
-            await ModelAPI.getItem<GlobalConfig>(
-                GlobalConfig,
-                ObjectID.getZeroObjectID(),
-                {
-                    _id: true,
-                    emailServerType: true,
-                }
-            );
-
-        if (globalConfig) {
-            setemailServerType(
-                globalConfig.emailServerType || EmailServerType.Internal
-            );
-        }
-
-        setIsLoading(false);
-    };
-
-    useEffect(() => {
-        fetchItem().catch((err: Error) => {
-            setError(err.message);
-        });
-    }, []);
-
-    if (isLoading) {
-        return <PageLoader isVisible={true} />;
-    }
-
-    if (error) {
-        return <ErrorMessage error={error} />;
-    }
-
-    return (
-        <Page
-            title={'Admin Settings'}
-            breadcrumbLinks={[
-                {
-                    title: 'Admin Dashboard',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.HOME] as Route
-                    ),
-                },
-                {
-                    title: 'Settings',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.SETTINGS] as Route
-                    ),
-                },
-                {
-                    title: 'Email Settings',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.SETTINGS_SMTP] as Route
-                    ),
-                },
-            ]}
-            sideMenu={<DashboardSideMenu />}
-        >
-            {/* Project Settings View  */}
-
-            <CardModelDetail
-                name="Internal SMTP Settings"
-                cardProps={{
-                    title: 'Email Server Settings',
-                    description:
-                        'Pick which email server you would like to use to send emails.',
-                }}
-                isEditable={true}
-                editButtonText="Edit Server"
-                onSaveSuccess={() => {
-                    window.location.reload();
-                }}
-                formFields={[
-                    {
-                        field: {
-                            emailServerType: true,
-                        },
-                        title: 'Email Server Type',
-                        fieldType: FormFieldSchemaType.Dropdown,
-                        dropdownOptions:
-                            DropdownUtil.getDropdownOptionsFromEnum(
-                                EmailServerType
-                            ),
-                        required: true,
-                    },
-                ]}
-                modelDetailProps={{
-                    modelType: GlobalConfig,
-                    id: 'model-detail-global-config',
-                    fields: [
-                        {
-                            field: {
-                                emailServerType: true,
-                            },
-                            title: 'Email Server Type',
-                            fieldType: FieldType.Text,
-                        },
-                    ],
-                    modelId: ObjectID.getZeroObjectID(),
-                }}
-            />
-
-            {emailServerType === EmailServerType.CustomSMTP ? (
-                <CardModelDetail
-                    name="Host Settings"
-                    cardProps={{
-                        title: 'Custom Email and SMTP Settings',
-                        description:
-                            'If you have not enabled Internal SMTP server to send emails. Please configure your SMTP server here.',
-                    }}
-                    isEditable={true}
-                    editButtonText="Edit SMTP Config"
-                    formSteps={[
-                        {
-                            title: 'SMTP Server',
-                            id: 'server-info',
-                        },
-                        {
-                            title: 'Authentication',
-                            id: 'authentication',
-                        },
-                        {
-                            title: 'Email',
-                            id: 'email-info',
-                        },
-                    ]}
-                    formFields={[
-                        {
-                            field: {
-                                smtpHost: true,
-                            },
-                            title: 'Hostname',
-                            stepId: 'server-info',
-                            fieldType: FormFieldSchemaType.Hostname,
-                            required: true,
-                            placeholder: 'smtp.server.com',
-                        },
-                        {
-                            field: {
-                                smtpPort: true,
-                            },
-                            title: 'Port',
-                            stepId: 'server-info',
-                            fieldType: FormFieldSchemaType.Port,
-                            required: true,
-                            placeholder: '587',
-                        },
-                        {
-                            field: {
-                                isSMTPSecure: true,
-                            },
-                            title: 'Use SSL / TLS',
-                            stepId: 'server-info',
-                            fieldType: FormFieldSchemaType.Toggle,
-                            description: 'Make email communication secure?',
-                        },
-                        {
-                            field: {
-                                smtpUsername: true,
-                            },
-                            title: 'Username',
-                            stepId: 'authentication',
-                            fieldType: FormFieldSchemaType.Text,
-                            required: false,
-                            placeholder: 'emailuser',
-                        },
-                        {
-                            field: {
-                                smtpPassword: true,
-                            },
-                            title: 'Password',
-                            stepId: 'authentication',
-                            fieldType: FormFieldSchemaType.EncryptedText,
-                            required: false,
-                            placeholder: 'Password',
-                        },
-                        {
-                            field: {
-                                smtpFromEmail: true,
-                            },
-                            title: 'Email From',
-                            stepId: 'email-info',
-                            fieldType: FormFieldSchemaType.Email,
-                            required: true,
-                            description:
-                                'This is the display email your team and customers see, when they receive emails from OneUptime.',
-                            placeholder: 'email@company.com',
-                        },
-                        {
-                            field: {
-                                smtpFromName: true,
-                            },
-                            title: 'From Name',
-                            stepId: 'email-info',
-                            fieldType: FormFieldSchemaType.Text,
-                            required: true,
-                            description:
-                                'This is the display name your team and customers see, when they receive emails from OneUptime.',
-                            placeholder: 'Company, Inc.',
-                        },
-                    ]}
-                    modelDetailProps={{
-                        modelType: GlobalConfig,
-                        id: 'model-detail-global-config',
-                        fields: [
-                            {
-                                field: {
-                                    smtpHost: true,
-                                },
-                                title: 'SMTP Host',
-                                placeholder: 'None',
-                            },
-                            {
-                                field: {
-                                    smtpPort: true,
-                                },
-                                title: 'SMTP Port',
-                                placeholder: 'None',
-                            },
-                            {
-                                field: {
-                                    smtpUsername: true,
-                                },
-                                title: 'SMTP Username',
-                                placeholder: 'None',
-                            },
-                            {
-                                field: {
-                                    smtpFromEmail: true,
-                                },
-                                title: 'SMTP Email',
-                                placeholder: 'None',
-                                fieldType: FieldType.Email,
-                            },
-                            {
-                                field: {
-                                    smtpFromName: true,
-                                },
-                                title: 'SMTP From Name',
-                                placeholder: 'None',
-                            },
-                            {
-                                field: {
-                                    isSMTPSecure: true,
-                                },
-                                title: 'Use SSL/TLS',
-                                placeholder: 'No',
-                                fieldType: FieldType.Boolean,
-                            },
-                        ],
-                        modelId: ObjectID.getZeroObjectID(),
-                    }}
-                />
-            ) : (
-                <></>
-            )}
-
-            {emailServerType === EmailServerType.Sendgrid ? (
-                <CardModelDetail
-                    name="Sendgrid Settings"
-                    cardProps={{
-                        title: 'Sendgrid Settings',
-                        description:
-                            'Enter your Sendgrid API key to send emails through Sendgrid.',
-                    }}
-                    isEditable={true}
-                    editButtonText="Edit API Key"
-                    formFields={[
-                        {
-                            field: {
-                                sendgridApiKey: true,
-                            },
-                            title: 'Sendgrid API Key',
-                            fieldType: FormFieldSchemaType.Text,
-                            required: true,
-                            placeholder: 'Sendgrid API Key',
-                        },
-                        {
-                            field: {
-                                sendgridFromEmail: true,
-                            },
-                            title: 'From Email',
-                            fieldType: FormFieldSchemaType.Email,
-                            required: true,
-                            placeholder: 'email@yourcompany.com',
-                        },
-                        {
-                            field: {
-                                sendgridFromName: true,
-                            },
-                            title: 'From Name',
-                            fieldType: FormFieldSchemaType.Text,
-                            required: true,
-                            placeholder: 'Acme, Inc.',
-                        },
-                    ]}
-                    modelDetailProps={{
-                        modelType: GlobalConfig,
-                        id: 'model-detail-global-config',
-                        selectMoreFields: {
-                            sendgridFromEmail: true,
-                            sendgridFromName: true,
-                        },
-                        fields: [
-                            {
-                                field: {
-                                    sendgridApiKey: true,
-                                },
-                                title: '',
-                                placeholder: 'None',
-                                getElement: (item: JSONObject) => {
-                                    if (
-                                        item['sendgridApiKey'] &&
-                                        item['sendgridFromEmail'] &&
-                                        item['sendgridFromName']
-                                    ) {
-                                        return (
-                                            <Pill
-                                                text="Enabled"
-                                                color={Green}
-                                            />
-                                        );
-                                    } else if (!item['sendgridApiKey']) {
-                                        return (
-                                            <Pill
-                                                text="Not Enabled. Please add the API key."
-                                                color={Red}
-                                            />
-                                        );
-                                    } else if (!item['sendgridFromEmail']) {
-                                        return (
-                                            <Pill
-                                                text="Not Enabled. Please add the From Email."
-                                                color={Red}
-                                            />
-                                        );
-                                    } else if (!item['sendgridFromName']) {
-                                        return (
-                                            <Pill
-                                                text="Not Enabled. Please add the From Name."
-                                                color={Red}
-                                            />
-                                        );
-                                    }
-
-                                    return <></>;
-                                },
-                            },
-                        ],
-                        modelId: ObjectID.getZeroObjectID(),
-                    }}
-                />
-            ) : (
-                <></>
-            )}
-        </Page>
-    );
-};
-
-export default Settings;

AdminDashboard/src/Pages/Settings/SideMenu.tsx

@@ -1,17 +1,17 @@
-import React, { ReactElement } from 'react';
-import Route from 'Common/Types/API/Route';
-import IconProp from 'Common/Types/Icon/IconProp';
-import SideMenu from 'CommonUI/src/Components/SideMenu/SideMenu';
-import SideMenuItem from 'CommonUI/src/Components/SideMenu/SideMenuItem';
-import SideMenuSection from 'CommonUI/src/Components/SideMenu/SideMenuSection';
-import RouteMap, { RouteUtil } from '../../Utils/RouteMap';
-import PageMap from '../../Utils/PageMap';
+import PageMap from "../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
+import Route from "Common/Types/API/Route";
+import IconProp from "Common/Types/Icon/IconProp";
+import SideMenu from "CommonUI/src/Components/SideMenu/SideMenu";
+import SideMenuItem from "CommonUI/src/Components/SideMenu/SideMenuItem";
+import SideMenuSection from "CommonUI/src/Components/SideMenu/SideMenuSection";
+import React, { ReactElement } from "react";
 
 const DashboardSideMenu: () => JSX.Element = (): ReactElement => {
-    return (
-        <SideMenu>
-            <SideMenuSection title="Basic">
-                {/* <SideMenuItem
+  return (
+    <SideMenu>
+      <SideMenuSection title="Basic">
+        {/* <SideMenuItem
                     link={{
                         title: 'Host',
                         to: RouteUtil.populateRouteParams(
@@ -20,62 +20,62 @@ const DashboardSideMenu: () => JSX.Element = (): ReactElement => {
                     }}
                     icon={IconProp.Globe}
                 /> */}
-                <SideMenuItem
-                    link={{
-                        title: 'Authentication',
-                        to: RouteUtil.populateRouteParams(
-                            RouteMap[PageMap.SETTINGS_AUTHENTICATION] as Route
-                        ),
-                    }}
-                    icon={IconProp.Lock}
-                />
-            </SideMenuSection>
+        <SideMenuItem
+          link={{
+            title: "Authentication",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.SETTINGS_AUTHENTICATION] as Route,
+            ),
+          }}
+          icon={IconProp.Lock}
+        />
+      </SideMenuSection>
 
-            <SideMenuSection title="Notifications">
-                <SideMenuItem
-                    link={{
-                        title: 'Emails',
-                        to: RouteUtil.populateRouteParams(
-                            RouteMap[PageMap.SETTINGS_SMTP] as Route
-                        ),
-                    }}
-                    icon={IconProp.Email}
-                />
-                <SideMenuItem
-                    link={{
-                        title: 'Call and SMS',
-                        to: RouteUtil.populateRouteParams(
-                            RouteMap[PageMap.SETTINGS_CALL_AND_SMS] as Route
-                        ),
-                    }}
-                    icon={IconProp.Call}
-                />
-            </SideMenuSection>
+      <SideMenuSection title="Notifications">
+        <SideMenuItem
+          link={{
+            title: "Emails",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.SETTINGS_SMTP] as Route,
+            ),
+          }}
+          icon={IconProp.Email}
+        />
+        <SideMenuItem
+          link={{
+            title: "Call and SMS",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.SETTINGS_CALL_AND_SMS] as Route,
+            ),
+          }}
+          icon={IconProp.Call}
+        />
+      </SideMenuSection>
 
-            <SideMenuSection title="Monitoring">
-                <SideMenuItem
-                    link={{
-                        title: 'Global Probes',
-                        to: RouteUtil.populateRouteParams(
-                            RouteMap[PageMap.SETTINGS_PROBES] as Route
-                        ),
-                    }}
-                    icon={IconProp.Signal}
-                />
-            </SideMenuSection>
-            <SideMenuSection title="API and Integrations">
-                <SideMenuItem
-                    link={{
-                        title: 'API Key',
-                        to: RouteUtil.populateRouteParams(
-                            RouteMap[PageMap.SETTINGS_API_KEY] as Route
-                        ),
-                    }}
-                    icon={IconProp.Code}
-                />
-            </SideMenuSection>
-        </SideMenu>
-    );
+      <SideMenuSection title="Monitoring">
+        <SideMenuItem
+          link={{
+            title: "Global Probes",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.SETTINGS_PROBES] as Route,
+            ),
+          }}
+          icon={IconProp.Signal}
+        />
+      </SideMenuSection>
+      <SideMenuSection title="API and Integrations">
+        <SideMenuItem
+          link={{
+            title: "API Key",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.SETTINGS_API_KEY] as Route,
+            ),
+          }}
+          icon={IconProp.Code}
+        />
+      </SideMenuSection>
+    </SideMenu>
+  );
 };
 
 export default DashboardSideMenu;

AdminDashboard/src/Pages/Users/Index.tsx

@@ -1,108 +1,218 @@
-import Route from 'Common/Types/API/Route';
-import Page from 'CommonUI/src/Components/Page/Page';
-import React, { FunctionComponent, ReactElement } from 'react';
-import PageMap from '../../Utils/PageMap';
-import RouteMap, { RouteUtil } from '../../Utils/RouteMap';
-import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable';
-import FieldType from 'CommonUI/src/Components/Types/FieldType';
-import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
-import Navigation from 'CommonUI/src/Utils/Navigation';
-import User from 'Model/Models/User';
+import PageMap from "../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
+import Route from "Common/Types/API/Route";
+import { ErrorFunction } from "Common/Types/FunctionTypes";
+import { ButtonStyleType } from "CommonUI/src/Components/Button/Button";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import ConfirmModal from "CommonUI/src/Components/Modal/ConfirmModal";
+import ModelTable from "CommonUI/src/Components/ModelTable/ModelTable";
+import Page from "CommonUI/src/Components/Page/Page";
+import FieldType from "CommonUI/src/Components/Types/FieldType";
+import API from "CommonUI/src/Utils/API/API";
+import ModelAPI from "CommonUI/src/Utils/ModelAPI/ModelAPI";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import User from "Model/Models/User";
+import React, { FunctionComponent, ReactElement, useState } from "react";
 
 const Users: FunctionComponent = (): ReactElement => {
-    return (
-        <Page
-            title={'Users'}
-            breadcrumbLinks={[
-                {
-                    title: 'Admin Dashboard',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.HOME] as Route
-                    ),
+  const [showConfirmVerifyEmailModal, setShowConfirmVerifyEmailModal] =
+    useState<boolean>(false);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const [isConfimModalLoading, setIsConfirmModalLoading] =
+    useState<boolean>(false);
+
+  const [refreshItemsTrigger, setRefreshItemsTrigger] =
+    useState<boolean>(false);
+
+  return (
+    <Page
+      title={"Users"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.HOME] as Route),
+        },
+        {
+          title: "Users",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.USERS] as Route),
+        },
+      ]}
+    >
+      <ModelTable<User>
+        modelType={User}
+        id="users-table"
+        isDeleteable={false}
+        isEditable={false}
+        showViewIdButton={true}
+        refreshToggle={refreshItemsTrigger}
+        isCreateable={true}
+        name="Users"
+        isViewable={false}
+        cardProps={{
+          title: "Users",
+          description: "Here is a list of users in OneUptime.",
+        }}
+        actionButtons={[
+          {
+            title: "Verify Email",
+            buttonStyleType: ButtonStyleType.NORMAL,
+            isVisible: (item: User) => {
+              return !item.isEmailVerified;
+            },
+            onClick: async (
+              item: User,
+              onCompleteAction: VoidFunction,
+              onError: ErrorFunction,
+            ) => {
+              try {
+                setSelectedUser(item);
+                setShowConfirmVerifyEmailModal(true);
+
+                onCompleteAction();
+              } catch (err) {
+                onCompleteAction();
+                onError(err as Error);
+              }
+            },
+          },
+        ]}
+        noItemsMessage={"No users found."}
+        formFields={[
+          {
+            field: {
+              email: true,
+            },
+            title: "Email",
+            fieldType: FormFieldSchemaType.Email,
+            required: true,
+            placeholder: "email@company.com",
+          },
+          {
+            field: {
+              password: true,
+            },
+            title: "Password",
+            fieldType: FormFieldSchemaType.Password,
+            required: true,
+            placeholder: "Password",
+          },
+          {
+            field: {
+              name: true,
+            },
+            title: "Full Name",
+            fieldType: FormFieldSchemaType.Text,
+            required: true,
+            placeholder: "John Smith",
+          },
+        ]}
+        showRefreshButton={true}
+        viewPageRoute={Navigation.getCurrentRoute()}
+        filters={[
+          {
+            field: {
+              name: true,
+            },
+            title: "Full Name",
+            type: FieldType.Text,
+          },
+          {
+            field: {
+              email: true,
+            },
+            title: "Email",
+            type: FieldType.Email,
+          },
+          {
+            field: {
+              createdAt: true,
+            },
+            title: "Created At",
+            type: FieldType.DateTime,
+          },
+        ]}
+        columns={[
+          {
+            field: {
+              name: true,
+            },
+            title: "Full Name",
+            type: FieldType.Text,
+          },
+          {
+            field: {
+              email: true,
+            },
+            title: "Email",
+            type: FieldType.Email,
+          },
+          {
+            field: {
+              isEmailVerified: true,
+            },
+            title: "Email Verified",
+            type: FieldType.Boolean,
+          },
+          {
+            field: {
+              createdAt: true,
+            },
+            title: "Created At",
+            type: FieldType.DateTime,
+          },
+        ]}
+      />
+
+      {error ? (
+        <ConfirmModal
+          title={`Error`}
+          description={error}
+          submitButtonText={"Close"}
+          onSubmit={async () => {
+            setError(null);
+          }}
+          submitButtonType={ButtonStyleType.NORMAL}
+        />
+      ) : (
+        <></>
+      )}
+
+      {showConfirmVerifyEmailModal && selectedUser ? (
+        <ConfirmModal
+          title={`Verify Email`}
+          description={`Are you sure you want to verify the email - ${selectedUser.email}?`}
+          isLoading={isConfimModalLoading}
+          submitButtonText={"Verify Email"}
+          onClose={async () => {
+            setShowConfirmVerifyEmailModal(false);
+            setSelectedUser(null);
+          }}
+          onSubmit={async () => {
+            try {
+              setIsConfirmModalLoading(true);
+              await ModelAPI.updateById<User>({
+                modelType: User,
+                id: selectedUser.id!,
+                data: {
+                  isEmailVerified: true,
                 },
-                {
-                    title: 'Users',
-                    to: RouteUtil.populateRouteParams(
-                        RouteMap[PageMap.USERS] as Route
-                    ),
-                },
-            ]}
-        >
-            <ModelTable<User>
-                modelType={User}
-                id="users-table"
-                isDeleteable={false}
-                isEditable={false}
-                showViewIdButton={true}
-                isCreateable={true}
-                name="Users"
-                isViewable={false}
-                cardProps={{
-                    title: 'Users',
-                    description: 'Here is a list of users in OneUptime.',
-                }}
-                noItemsMessage={'No users found.'}
-                formFields={[
-                    {
-                        field: {
-                            email: true,
-                        },
-                        title: 'Email',
-                        fieldType: FormFieldSchemaType.Email,
-                        required: true,
-                        placeholder: 'email@company.com',
-                    },
-                    {
-                        field: {
-                            password: true,
-                        },
-                        title: 'Password',
-                        fieldType: FormFieldSchemaType.Password,
-                        required: true,
-                        placeholder: 'Password',
-                    },
-                    {
-                        field: {
-                            name: true,
-                        },
-                        title: 'Full Name',
-                        fieldType: FormFieldSchemaType.Text,
-                        required: true,
-                        placeholder: 'John Smith',
-                    },
-                ]}
-                showRefreshButton={true}
-                showFilterButton={true}
-                viewPageRoute={Navigation.getCurrentRoute()}
-                columns={[
-                    {
-                        field: {
-                            name: true,
-                        },
-                        title: 'Full Name',
-                        type: FieldType.Text,
-                        isFilterable: true,
-                    },
-                    {
-                        field: {
-                            email: true,
-                        },
-                        title: 'Email',
-                        type: FieldType.Email,
-                        isFilterable: true,
-                    },
-                    {
-                        field: {
-                            createdAt: true,
-                        },
-                        title: 'Created At',
-                        type: FieldType.DateTime,
-                        isFilterable: true,
-                    },
-                ]}
-            />
-        </Page>
-    );
+              });
+            } catch (err) {
+              setError(API.getFriendlyMessage(err as Error));
+            }
+
+            setRefreshItemsTrigger(!refreshItemsTrigger);
+            setIsConfirmModalLoading(false);
+            setShowConfirmVerifyEmailModal(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+    </Page>
+  );
 };
 
 export default Users;

AdminDashboard/src/Utils/ModelAPI.ts

@@ -1,8 +1,8 @@
-import Dictionary from 'Common/Types/Dictionary';
-import ModelAPI from 'CommonUI/src/Utils/ModelAPI/ModelAPI';
+import Dictionary from "Common/Types/Dictionary";
+import ModelAPI from "CommonUI/src/Utils/ModelAPI/ModelAPI";
 
 export default class AdminModelAPI extends ModelAPI {
-    public static override getCommonHeaders(): Dictionary<string> {
-        return {};
-    }
+  public static override getCommonHeaders(): Dictionary<string> {
+    return {};
+  }
 }

AdminDashboard/src/Utils/PageMap.ts

@@ -1,17 +1,17 @@
 enum PageMap {
-    INIT = 'INIT',
-    HOME = 'HOME',
-    LOGOUT = 'LOGOUT',
-    SETTINGS = 'SETTINGS',
-    USERS = 'USERS',
-    PROJECTS = 'PROJECTS',
+  INIT = "INIT",
+  HOME = "HOME",
+  LOGOUT = "LOGOUT",
+  SETTINGS = "SETTINGS",
+  USERS = "USERS",
+  PROJECTS = "PROJECTS",
 
-    SETTINGS_HOST = 'SETTINGS_HOST',
-    SETTINGS_SMTP = 'SETTINGS_SMTP',
-    SETTINGS_CALL_AND_SMS = 'SETTINGS_CALL_AND_SMS',
-    SETTINGS_PROBES = 'SETTINGS_PROBES',
-    SETTINGS_AUTHENTICATION = 'SETTINGS_AUTHENTICATION',
-    SETTINGS_API_KEY = 'SETTINGS_API_KEY',
+  SETTINGS_HOST = "SETTINGS_HOST",
+  SETTINGS_SMTP = "SETTINGS_SMTP",
+  SETTINGS_CALL_AND_SMS = "SETTINGS_CALL_AND_SMS",
+  SETTINGS_PROBES = "SETTINGS_PROBES",
+  SETTINGS_AUTHENTICATION = "SETTINGS_AUTHENTICATION",
+  SETTINGS_API_KEY = "SETTINGS_API_KEY",
 }
 
 export default PageMap;

AdminDashboard/src/Utils/RouteMap.ts

@@ -1,54 +1,54 @@
-import Route from 'Common/Types/API/Route';
-import Dictionary from 'Common/Types/Dictionary';
-import PageMap from './PageMap';
-import RouteParams from './RouteParams';
-import ObjectID from 'Common/Types/ObjectID';
+import PageMap from "./PageMap";
+import RouteParams from "./RouteParams";
+import Route from "Common/Types/API/Route";
+import Dictionary from "Common/Types/Dictionary";
+import ObjectID from "Common/Types/ObjectID";
 
 const RouteMap: Dictionary<Route> = {
-    [PageMap.INIT]: new Route(`/admin`),
-    [PageMap.HOME]: new Route(`/admin`),
-    [PageMap.LOGOUT]: new Route(`/admin/logout`),
-    [PageMap.SETTINGS]: new Route(`/admin/settings/host`),
-    [PageMap.PROJECTS]: new Route(`/admin/projects`),
-    [PageMap.USERS]: new Route(`/admin/users`),
-    [PageMap.SETTINGS_HOST]: new Route(`/admin/settings/host`),
-    [PageMap.SETTINGS_SMTP]: new Route(`/admin/settings/smtp`),
-    [PageMap.SETTINGS_CALL_AND_SMS]: new Route(`/admin/settings/call-and-sms`),
-    [PageMap.SETTINGS_PROBES]: new Route(`/admin/settings/probes`),
-    [PageMap.SETTINGS_AUTHENTICATION]: new Route(
-        `/admin/settings/authentication`
-    ),
-    [PageMap.SETTINGS_API_KEY]: new Route(`/admin/settings/api-key`),
+  [PageMap.INIT]: new Route(`/admin`),
+  [PageMap.HOME]: new Route(`/admin`),
+  [PageMap.LOGOUT]: new Route(`/admin/logout`),
+  [PageMap.SETTINGS]: new Route(`/admin/settings/host`),
+  [PageMap.PROJECTS]: new Route(`/admin/projects`),
+  [PageMap.USERS]: new Route(`/admin/users`),
+  [PageMap.SETTINGS_HOST]: new Route(`/admin/settings/host`),
+  [PageMap.SETTINGS_SMTP]: new Route(`/admin/settings/smtp`),
+  [PageMap.SETTINGS_CALL_AND_SMS]: new Route(`/admin/settings/call-and-sms`),
+  [PageMap.SETTINGS_PROBES]: new Route(`/admin/settings/probes`),
+  [PageMap.SETTINGS_AUTHENTICATION]: new Route(
+    `/admin/settings/authentication`,
+  ),
+  [PageMap.SETTINGS_API_KEY]: new Route(`/admin/settings/api-key`),
 };
 
 export class RouteUtil {
-    public static populateRouteParams(
-        route: Route,
-        props?: {
-            modelId?: ObjectID;
-            subModelId?: ObjectID;
-        }
-    ): Route {
-        // populate projectid
+  public static populateRouteParams(
+    route: Route,
+    props?: {
+      modelId?: ObjectID;
+      subModelId?: ObjectID;
+    },
+  ): Route {
+    // populate projectid
 
-        const tempRoute: Route = new Route(route.toString());
+    const tempRoute: Route = new Route(route.toString());
 
-        if (props && props.modelId) {
-            route = tempRoute.addRouteParam(
-                RouteParams.ModelID,
-                props.modelId.toString()
-            );
-        }
-
-        if (props && props.subModelId) {
-            route = tempRoute.addRouteParam(
-                RouteParams.SubModelID,
-                props.subModelId.toString()
-            );
-        }
-
-        return tempRoute;
+    if (props && props.modelId) {
+      route = tempRoute.addRouteParam(
+        RouteParams.ModelID,
+        props.modelId.toString(),
+      );
     }
+
+    if (props && props.subModelId) {
+      route = tempRoute.addRouteParam(
+        RouteParams.SubModelID,
+        props.subModelId.toString(),
+      );
+    }
+
+    return tempRoute;
+  }
 }
 
 export default RouteMap;

AdminDashboard/src/Utils/RouteParams.ts

@@ -1,6 +1,6 @@
 enum RouteParams {
-    ModelID = ':id',
-    SubModelID = ':subModelId',
+  ModelID = ":id",
+  SubModelID = ":subModelId",
 }
 
 export default RouteParams;

AdminDashboard/tsconfig.json

@@ -3,7 +3,8 @@
         // these options are overrides used only by ts-node
         // same as the --compilerOptions flag and the TS_NODE_COMPILER_OPTIONS environment variable
         "compilerOptions": {
-            "module": "commonjs"
+            "module": "commonjs",
+            "resolveJsonModule": true, 
         }
     },
     "compilerOptions": {
@@ -38,7 +39,7 @@
         // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
         // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
         "typeRoots": [
-         
+            "./node_modules/@types"
         ], /* Specify multiple folders that act like `./node_modules/@types`. */
         "types": ["node"],                                      /* Specify type package names to be included without being referenced in a source file. */
         // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
@@ -105,6 +106,7 @@
 
         /* Completeness */
         // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-        "skipLibCheck": true /* Skip type checking all .d.ts files. */
+                "skipLibCheck": true, /* Skip type checking all .d.ts files. */
+        "resolveJsonModule": true
     }
 }

AdminDashboard/webpack.config.js

@@ -1,77 +1,84 @@
+require("ts-loader");
+require("file-loader");
+require("style-loader");
+require("css-loader");
+require("sass-loader");
 const path = require("path");
 const webpack = require("webpack");
-const dotenv = require('dotenv');
-const express = require('express');
+const dotenv = require("dotenv");
+const express = require("express");
 
 const readEnvFile = (pathToFile) => {
+  const parsed = dotenv.config({ path: pathToFile }).parsed;
 
-    const parsed = dotenv.config({ path: pathToFile }).parsed;
+  const env = {};
 
-    const env = {};
+  for (const key in parsed) {
+    env[key] = JSON.stringify(parsed[key]);
+  }
 
-    for (const key in parsed) {
-        env[key] = JSON.stringify(parsed[key]);
-    }
-
-    return env;
-}
+  return env;
+};
 
 module.exports = {
-    entry: "./src/Index.tsx",
-    mode: "development",
-    output: {
-        filename: "bundle.js",
-        path: path.resolve(__dirname, "public", "dist"),
-        publicPath: "/admin/dist/",
+  entry: "./src/Index.tsx",
+  mode: "development",
+  output: {
+    filename: "bundle.js",
+    path: path.resolve(__dirname, "public", "dist"),
+    publicPath: "/admin/dist/",
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".css", ".scss"],
+    alias: {
+      react: path.resolve("./node_modules/react"),
     },
-    resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.css', '.scss'],
-        alias: {
-            react: path.resolve('./node_modules/react'),
-        }
-    },
-    externals: {
-        'react-native-sqlite-storage': 'react-native-sqlite-storage'
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process': {
-                'env': {
-                    ...readEnvFile('/usr/src/app/dev-env/.env')
-                }
-            }
-        }),
-    ],
-    module: {
-        rules: [
-            {
-                test: /\.(ts|tsx)$/,
-                use: 'ts-loader'
-            },
-            {
-                test: /\.s[ac]ss$/i,
-                use: ['style-loader', 'css-loader', "sass-loader"]
-            },
-            {
-                test: /\.css$/i,
-                use: ['style-loader', 'css-loader']
-            },
-            {
-                test: /\.(jpe?g|png|gif|svg)$/i,
-                loader: 'file-loader'
-            }
-        ],
-    },
-    devServer: {
-        historyApiFallback: true,
-        devMiddleware: {
-            writeToDisk: true,
+  },
+  externals: {
+    "react-native-sqlite-storage": "react-native-sqlite-storage",
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      process: {
+        env: {
+          ...readEnvFile("/usr/src/app/dev-env/.env"),
         },
-        allowedHosts: "all",
-        setupMiddlewares: (middlewares, devServer) => {
-            devServer.app.use('/admin/assets', express.static(path.resolve(__dirname, 'public', 'assets')));
-            return middlewares;
-        }
+      },
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        use: "ts-loader",
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        use: ["style-loader", "css-loader", "sass-loader"],
+      },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        loader: "file-loader",
+      },
+    ],
+  },
+  devServer: {
+    historyApiFallback: true,
+    devMiddleware: {
+      writeToDisk: true,
     },
-    devtool: 'eval-source-map',
-}
+    allowedHosts: "all",
+    setupMiddlewares: (middlewares, devServer) => {
+      devServer.app.use(
+        "/admin/assets",
+        express.static(path.resolve(__dirname, "public", "assets")),
+      );
+      return middlewares;
+    },
+  },
+  devtool: "eval-source-map",
+};

ApiReference/.gitignore

@@ -1,2 +0,0 @@
-node_modules
-npm-debug.log

ApiReference/Dockerfile.tpl

@@ -1,72 +0,0 @@
-# Pull base image nodejs image.
-FROM node:current-alpine
-USER root
-RUN mkdir /tmp/npm &&  chmod 2777 /tmp/npm && chown 1000:1000 /tmp/npm && npm config set cache /tmp/npm --global
-
-
-ARG GIT_SHA
-ARG APP_VERSION
-
-ENV GIT_SHA=${GIT_SHA}
-ENV APP_VERSION=${APP_VERSION}
-
-
-# Install bash. 
-RUN apk add bash && apk add curl
-
-#Use bash shell by default
-SHELL ["/bin/bash", "-c"]
-
-
-RUN mkdir /usr/src
-
-WORKDIR /usr/src/Common
-COPY ./Common/package*.json /usr/src/Common/
-RUN npm install
-COPY ./Common /usr/src/Common
-
-
-WORKDIR /usr/src/Model
-COPY ./Model/package*.json /usr/src/Model/
-RUN npm install
-COPY ./Model /usr/src/Model
-
-
-
-WORKDIR /usr/src/CommonServer
-COPY ./CommonServer/package*.json /usr/src/CommonServer/
-RUN npm install
-COPY ./CommonServer /usr/src/CommonServer
-
-
-
-# Install app
-
-
-
-ENV PRODUCTION=true
-ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
-
-WORKDIR /usr/src/app
-
-# Install app dependencies
-COPY ./ApiReference/package*.json /usr/src/app/
-RUN npm install
-
-
-# Expose ports.
-#   - 1445: OneUptime Docs
-EXPOSE 1445
-
-
-{{ if eq .Env.ENVIRONMENT "development" }}
-#Run the app
-CMD [ "npm", "run", "dev" ]
-{{ else }}
-# Copy app source
-COPY ./ApiReference /usr/src/app
-# Bundle app source
-RUN npm run compile
-#Run the app
-CMD [ "npm", "start" ]
-{{ end }}

ApiReference/Index.ts

@@ -1,106 +0,0 @@
-import Express, {
-    ExpressApplication,
-    ExpressRequest,
-    ExpressResponse,
-    ExpressStatic,
-} from 'CommonServer/Utils/Express';
-import logger from 'CommonServer/Utils/Logger';
-import App from 'CommonServer/Utils/StartServer';
-import path from 'path';
-import ResourceUtil, { ModelDocumentation } from './Utils/Resources';
-import IntroductionServiceHandler from './Service/Introduction';
-import ErrorServiceHandler from './Service/Errors';
-import PermissionServiceHandler from './Service/Permissions';
-import AuthenticationServiceHandler from './Service/Authentication';
-import PageNotFoundServiceHandler from './Service/PageNotFound';
-import ModelServiceHandler from './Service/Model';
-import PaginationServiceHandler from './Service/Pagination';
-import StatusServiceHandler from './Service/Status';
-import DataTypeServiceHandler from './Service/DataType';
-import Dictionary from 'Common/Types/Dictionary';
-
-const ResourceDictionary: Dictionary<ModelDocumentation> =
-    ResourceUtil.getResourceDictionaryByPath();
-
-const APP_NAME: string = 'reference';
-
-const app: ExpressApplication = Express.getExpressApp();
-
-// Set the view engine to ejs
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'ejs');
-
-// Public static files
-app.use(ExpressStatic(path.join(__dirname, 'public'), { maxAge: 2592000 }));
-
-app.use(
-    '/reference',
-    ExpressStatic(path.join(__dirname, 'public'), { maxAge: 2592000 })
-);
-
-// Index page
-app.get(['/reference'], (_req: ExpressRequest, res: ExpressResponse) => {
-    return res.redirect('/reference/introduction');
-});
-
-app.get(
-    ['/reference/page-not-found'],
-    (req: ExpressRequest, res: ExpressResponse) => {
-        return PageNotFoundServiceHandler.executeResponse(req, res);
-    }
-);
-
-// All Pages
-app.get(['/reference/:page'], (req: ExpressRequest, res: ExpressResponse) => {
-    const page: string | undefined = req.params['page'];
-
-    if (!page) {
-        return PageNotFoundServiceHandler.executeResponse(req, res);
-    }
-
-    const currentResource: ModelDocumentation | undefined =
-        ResourceDictionary[page];
-
-    if (req.params['page'] === 'permissions') {
-        return PermissionServiceHandler.executeResponse(req, res);
-    } else if (req.params['page'] === 'authentication') {
-        return AuthenticationServiceHandler.executeResponse(req, res);
-    } else if (req.params['page'] === 'pagination') {
-        return PaginationServiceHandler.executeResponse(req, res);
-    } else if (req.params['page'] === 'errors') {
-        return ErrorServiceHandler.executeResponse(req, res);
-    } else if (req.params['page'] === 'introduction') {
-        return IntroductionServiceHandler.executeResponse(req, res);
-    } else if (req.params['page'] === 'status') {
-        return StatusServiceHandler.executeResponse(req, res);
-    } else if (req.params['page'] === 'data-types') {
-        return DataTypeServiceHandler.executeResponse(req, res);
-    } else if (currentResource) {
-        return ModelServiceHandler.executeResponse(req, res);
-    }
-    // page not found
-    return PageNotFoundServiceHandler.executeResponse(req, res);
-});
-
-app.get('/*', (req: ExpressRequest, res: ExpressResponse) => {
-    return PageNotFoundServiceHandler.executeResponse(req, res);
-});
-
-const init: () => Promise<void> = async (): Promise<void> => {
-    try {
-        // init the app
-        await App(APP_NAME);
-    } catch (err) {
-        logger.error('App Init Failed:');
-        logger.error(err);
-        throw err;
-    }
-};
-
-init().catch((err: Error) => {
-    logger.error(err);
-    logger.info('Exiting node process');
-    process.exit(1);
-});
-
-export default app;

ApiReference/README.md

@@ -1,9 +0,0 @@
-# OneUptime API Documentation
-
-[![Build Status](https://travis-ci.org/OneUptime/ApiReference.svg?branch=master)](https://travis-ci.org/OneUptime/ApiReference)
-
-This is the API Reference for OneUptime which is hosted at [https://oneuptime.com/reference](https://oneuptime.com/reference).
-
-# Contribute
-
-Feel free to send PR's and contribute. Please send PR's to master and we'll have our team review them for you.

ApiReference/Service/Authentication.ts

@@ -1,28 +0,0 @@
-import { ExpressRequest, ExpressResponse } from 'CommonServer/Utils/Express';
-import ResourceUtil, { ModelDocumentation } from '../Utils/Resources';
-
-const Resources: Array<ModelDocumentation> = ResourceUtil.getResources();
-
-export default class ServiceHandler {
-    public static async executeResponse(
-        req: ExpressRequest,
-        res: ExpressResponse
-    ): Promise<void> {
-        let pageTitle: string = '';
-        let pageDescription: string = '';
-        const page: string | undefined = req.params['page'];
-        const pageData: any = {};
-
-        pageTitle = 'Authentication';
-        pageDescription =
-            'Learn how to authenticate requests with OneUptime API';
-
-        return res.render('pages/index', {
-            page: page,
-            resources: Resources,
-            pageTitle: pageTitle,
-            pageDescription: pageDescription,
-            pageData: pageData,
-        });
-    }
-}

ApiReference/Service/DataType.ts

@@ -1,135 +0,0 @@
-import LocalCache from 'CommonServer/Infrastructure/LocalCache';
-import { ExpressRequest, ExpressResponse } from 'CommonServer/Utils/Express';
-import LocalFile from 'CommonServer/Utils/LocalFile';
-import ResourceUtil, { ModelDocumentation } from '../Utils/Resources';
-
-const Resources: Array<ModelDocumentation> = ResourceUtil.getResources();
-
-export default class ServiceHandler {
-    public static async executeResponse(
-        _req: ExpressRequest,
-        res: ExpressResponse
-    ): Promise<void> {
-        const pageData: any = {};
-
-        pageData.selectCode = await LocalCache.getOrSetString(
-            'data-type',
-            'select',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/Select.md'
-                );
-            }
-        );
-
-        pageData.sortCode = await LocalCache.getOrSetString(
-            'data-type',
-            'sort',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/Sort.md'
-                );
-            }
-        );
-
-        pageData.equalToCode = await LocalCache.getOrSetString(
-            'data-type',
-            'equal-to',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/EqualTo.md'
-                );
-            }
-        );
-
-        pageData.equalToOrNullCode = await LocalCache.getOrSetString(
-            'data-type',
-            'equal-to-or-null',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/EqualToOrNull.md'
-                );
-            }
-        );
-
-        pageData.greaterThanCode = await LocalCache.getOrSetString(
-            'data-type',
-            'greater-than',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/GreaterThan.md'
-                );
-            }
-        );
-
-        pageData.greaterThanOrEqualCode = await LocalCache.getOrSetString(
-            'data-type',
-            'greater-than-or-equal',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/GreaterThanOrEqual.md'
-                );
-            }
-        );
-
-        pageData.lessThanCode = await LocalCache.getOrSetString(
-            'data-type',
-            'less-than',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/LessThan.md'
-                );
-            }
-        );
-
-        pageData.lessThanOrEqualCode = await LocalCache.getOrSetString(
-            'data-type',
-            'less-than-or-equal',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/LessThanOrEqual.md'
-                );
-            }
-        );
-
-        pageData.isNullCode = await LocalCache.getOrSetString(
-            'data-type',
-            'is-null',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/IsNull.md'
-                );
-            }
-        );
-
-        pageData.notNullCode = await LocalCache.getOrSetString(
-            'data-type',
-            'not-null',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/NotNull.md'
-                );
-            }
-        );
-
-        pageData.notEqualToCode = await LocalCache.getOrSetString(
-            'data-type',
-            'not-equals',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/DataTypes/NotEqualTo.md'
-                );
-            }
-        );
-
-        res.status(200);
-        return res.render('pages/index', {
-            page: 'data-types',
-            pageTitle: 'Data Types',
-            pageDescription:
-                'Data Types that can be used to interact with OneUptime API',
-            resources: Resources,
-            pageData: pageData,
-        });
-    }
-}

ApiReference/Service/Errors.ts

@@ -1,27 +0,0 @@
-import { ExpressRequest, ExpressResponse } from 'CommonServer/Utils/Express';
-import ResourceUtil, { ModelDocumentation } from '../Utils/Resources';
-
-const Resources: Array<ModelDocumentation> = ResourceUtil.getResources();
-
-export default class ServiceHandler {
-    public static async executeResponse(
-        req: ExpressRequest,
-        res: ExpressResponse
-    ): Promise<void> {
-        let pageTitle: string = '';
-        let pageDescription: string = '';
-        const page: string | undefined = req.params['page'];
-        const pageData: any = {};
-
-        pageTitle = 'Errors';
-        pageDescription = 'Learn more about how we return errors from API';
-
-        return res.render('pages/index', {
-            page: page,
-            resources: Resources,
-            pageTitle: pageTitle,
-            pageDescription: pageDescription,
-            pageData: pageData,
-        });
-    }
-}

ApiReference/Service/Introduction.ts

@@ -1,30 +0,0 @@
-import { ExpressRequest, ExpressResponse } from 'CommonServer/Utils/Express';
-import ResourceUtil, { ModelDocumentation } from '../Utils/Resources';
-
-const Resources: Array<ModelDocumentation> = ResourceUtil.getResources();
-const FeaturedResources: Array<ModelDocumentation> =
-    ResourceUtil.getFeaturedResources();
-
-export default class ServiceHandler {
-    public static async executeResponse(
-        req: ExpressRequest,
-        res: ExpressResponse
-    ): Promise<void> {
-        let pageTitle: string = '';
-        let pageDescription: string = '';
-        const page: string | undefined = req.params['page'];
-        const pageData: any = {};
-
-        pageData.featuredResources = FeaturedResources;
-        pageTitle = 'Introduction';
-        pageDescription = 'API Documentation for OneUptime';
-
-        return res.render('pages/index', {
-            page: page,
-            resources: Resources,
-            pageTitle: pageTitle,
-            pageDescription: pageDescription,
-            pageData: pageData,
-        });
-    }
-}

ApiReference/Service/Model.ts

@@ -1,243 +0,0 @@
-import { ColumnAccessControl } from 'Common/Types/BaseDatabase/AccessControl';
-import { getTableColumns } from 'Common/Types/Database/TableColumn';
-import Dictionary from 'Common/Types/Dictionary';
-import ObjectID from 'Common/Types/ObjectID';
-import Permission, {
-    PermissionHelper,
-    PermissionProps,
-} from 'Common/Types/Permission';
-import { DashboardApiRoute } from 'Common/ServiceRoute';
-import LocalCache from 'CommonServer/Infrastructure/LocalCache';
-import { ExpressRequest, ExpressResponse } from 'CommonServer/Utils/Express';
-import LocalFile from 'CommonServer/Utils/LocalFile';
-import ResourceUtil, { ModelDocumentation } from '../Utils/Resources';
-import PageNotFoundServiceHandler from './PageNotFound';
-
-const Resources: Array<ModelDocumentation> = ResourceUtil.getResources();
-const ResourceDictionary: Dictionary<ModelDocumentation> =
-    ResourceUtil.getResourceDictionaryByPath();
-
-const PermissionDictionary: Dictionary<PermissionProps> =
-    PermissionHelper.getAllPermissionPropsAsDictionary();
-
-export default class ServiceHandler {
-    public static async executeResponse(
-        req: ExpressRequest,
-        res: ExpressResponse
-    ): Promise<void> {
-        let pageTitle: string = '';
-        let pageDescription: string = '';
-        let page: string | undefined = req.params['page'];
-        const pageData: any = {};
-
-        if (!page) {
-            return PageNotFoundServiceHandler.executeResponse(req, res);
-        }
-
-        const currentResource: ModelDocumentation | undefined =
-            ResourceDictionary[page];
-
-        if (!currentResource) {
-            return PageNotFoundServiceHandler.executeResponse(req, res);
-        }
-
-        // Resource Page.
-        pageTitle = currentResource.name;
-        pageDescription = currentResource.description;
-
-        page = 'model';
-
-        const tableColumns: any = getTableColumns(currentResource.model);
-
-        for (const key in tableColumns) {
-            const accessControl: ColumnAccessControl | null =
-                currentResource.model.getColumnAccessControlFor(key);
-
-            if (!accessControl) {
-                // remove columns with no access
-                delete tableColumns[key];
-                continue;
-            }
-
-            if (
-                accessControl?.create.length === 0 &&
-                accessControl?.read.length === 0 &&
-                accessControl?.update.length === 0
-            ) {
-                // remove columns with no access
-                delete tableColumns[key];
-                continue;
-            }
-
-            tableColumns[key].permissions = accessControl;
-        }
-
-        delete tableColumns['deletedAt'];
-        delete tableColumns['deletedByUserId'];
-        delete tableColumns['deletedByUser'];
-        delete tableColumns['version'];
-
-        pageData.title = currentResource.model.singularName;
-        pageData.description = currentResource.model.tableDescription;
-        pageData.columns = tableColumns;
-        pageData.tablePermissions = {
-            read: currentResource.model.readRecordPermissions.map(
-                (permission: Permission) => {
-                    return PermissionDictionary[permission];
-                }
-            ),
-            update: currentResource.model.updateRecordPermissions.map(
-                (permission: Permission) => {
-                    return PermissionDictionary[permission];
-                }
-            ),
-            delete: currentResource.model.deleteRecordPermissions.map(
-                (permission: Permission) => {
-                    return PermissionDictionary[permission];
-                }
-            ),
-            create: currentResource.model.createRecordPermissions.map(
-                (permission: Permission) => {
-                    return PermissionDictionary[permission];
-                }
-            ),
-        };
-
-        pageData.listRequest = await LocalCache.getOrSetString(
-            'model',
-            'list-request',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/ListRequest.md'
-                );
-            }
-        );
-
-        pageData.itemRequest = await LocalCache.getOrSetString(
-            'model',
-            'item-request',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/ItemRequest.md'
-                );
-            }
-        );
-
-        pageData.itemResponse = await LocalCache.getOrSetString(
-            'model',
-            'item-response',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/ItemResponse.md'
-                );
-            }
-        );
-
-        pageData.countRequest = await LocalCache.getOrSetString(
-            'model',
-            'count-request',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/CountRequest.md'
-                );
-            }
-        );
-
-        pageData.countResponse = await LocalCache.getOrSetString(
-            'model',
-            'count-response',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/CountResponse.md'
-                );
-            }
-        );
-
-        pageData.updateRequest = await LocalCache.getOrSetString(
-            'model',
-            'update-request',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/UpdateRequest.md'
-                );
-            }
-        );
-
-        pageData.updateResponse = await LocalCache.getOrSetString(
-            'model',
-            'update-response',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/UpdateResponse.md'
-                );
-            }
-        );
-
-        pageData.createRequest = await LocalCache.getOrSetString(
-            'model',
-            'create-request',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/CreateRequest.md'
-                );
-            }
-        );
-
-        pageData.createResponse = await LocalCache.getOrSetString(
-            'model',
-            'create-response',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/CreateResponse.md'
-                );
-            }
-        );
-
-        pageData.deleteRequest = await LocalCache.getOrSetString(
-            'model',
-            'delete-request',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/DeleteRequest.md'
-                );
-            }
-        );
-
-        pageData.deleteResponse = await LocalCache.getOrSetString(
-            'model',
-            'delete-response',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/DeleteResponse.md'
-                );
-            }
-        );
-
-        pageData.listResponse = await LocalCache.getOrSetString(
-            'model',
-            'list-response',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Model/ListResponse.md'
-                );
-            }
-        );
-
-        pageData.exampleObjectID = ObjectID.generate();
-
-        pageData.apiPath =
-            DashboardApiRoute.toString() +
-            currentResource.model.crudApiPath?.toString();
-
-        pageData.isMasterAdminApiDocs =
-            currentResource.model.isMasterAdminApiDocs;
-
-        return res.render('pages/index', {
-            page: page,
-            resources: Resources,
-            pageTitle: pageTitle,
-            pageDescription: pageDescription,
-            pageData: pageData,
-        });
-    }
-}

ApiReference/Service/PageNotFound.ts

@@ -1,20 +0,0 @@
-import { ExpressRequest, ExpressResponse } from 'CommonServer/Utils/Express';
-import ResourceUtil, { ModelDocumentation } from '../Utils/Resources';
-
-const Resources: Array<ModelDocumentation> = ResourceUtil.getResources();
-
-export default class ServiceHandler {
-    public static async executeResponse(
-        _req: ExpressRequest,
-        res: ExpressResponse
-    ): Promise<void> {
-        res.status(404);
-        return res.render('pages/index', {
-            page: '404',
-            pageTitle: 'Page Not Found',
-            pageDescription: "Page you're looking for is not found.",
-            resources: Resources,
-            pageData: {},
-        });
-    }
-}

ApiReference/Service/Pagination.ts

@@ -1,49 +0,0 @@
-import { ExpressRequest, ExpressResponse } from 'CommonServer/Utils/Express';
-import ResourceUtil, { ModelDocumentation } from '../Utils/Resources';
-import LocalFile from 'CommonServer/Utils/LocalFile';
-import LocalCache from 'CommonServer/Infrastructure/LocalCache';
-
-const Resources: Array<ModelDocumentation> = ResourceUtil.getResources();
-
-export default class ServiceHandler {
-    public static async executeResponse(
-        req: ExpressRequest,
-        res: ExpressResponse
-    ): Promise<void> {
-        let pageTitle: string = '';
-        let pageDescription: string = '';
-        const page: string | undefined = req.params['page'];
-        const pageData: any = {};
-
-        pageTitle = 'Pagination';
-        pageDescription = 'Learn how to paginate requests with OneUptime API';
-
-        pageData.responseCode = await LocalCache.getOrSetString(
-            'pagination',
-            'response',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Pagination/Response.md'
-                );
-            }
-        );
-
-        pageData.requestCode = await LocalCache.getOrSetString(
-            'pagination',
-            'request',
-            async () => {
-                return await LocalFile.read(
-                    '/usr/src/app/CodeExamples/Pagination/Request.md'
-                );
-            }
-        );
-
-        return res.render('pages/index', {
-            page: page,
-            resources: Resources,
-            pageTitle: pageTitle,
-            pageDescription: pageDescription,
-            pageData: pageData,
-        });
-    }
-}

ApiReference/Service/Permissions.ts

@@ -1,34 +0,0 @@
-import { PermissionHelper, PermissionProps } from 'Common/Types/Permission';
-import { ExpressRequest, ExpressResponse } from 'CommonServer/Utils/Express';
-import ResourceUtil, { ModelDocumentation } from '../Utils/Resources';
-
-const Resources: Array<ModelDocumentation> = ResourceUtil.getResources();
-
-export default class ServiceHandler {
-    public static async executeResponse(
-        req: ExpressRequest,
-        res: ExpressResponse
-    ): Promise<void> {
-        let pageTitle: string = '';
-        let pageDescription: string = '';
-        const page: string | undefined = req.params['page'];
-        const pageData: any = {};
-
-        pageTitle = 'Permissions';
-        pageDescription = 'Learn how permissions work with OneUptime';
-
-        pageData.permissions = PermissionHelper.getAllPermissionProps().filter(
-            (i: PermissionProps) => {
-                return i.isAssignableToTenant;
-            }
-        );
-
-        return res.render('pages/index', {
-            page: page,
-            resources: Resources,
-            pageTitle: pageTitle,
-            pageDescription: pageDescription,
-            pageData: pageData,
-        });
-    }
-}

ApiReference/Service/Status.ts

@@ -1,20 +0,0 @@
-import { ExpressRequest, ExpressResponse } from 'CommonServer/Utils/Express';
-import ResourceUtil, { ModelDocumentation } from '../Utils/Resources';
-
-const Resources: Array<ModelDocumentation> = ResourceUtil.getResources();
-
-export default class ServiceHandler {
-    public static async executeResponse(
-        _req: ExpressRequest,
-        res: ExpressResponse
-    ): Promise<void> {
-        res.status(200);
-        return res.render('pages/index', {
-            page: 'status',
-            pageTitle: 'Status',
-            pageDescription: '200 - Success',
-            resources: Resources,
-            pageData: {},
-        });
-    }
-}

ApiReference/Utils/Resources.ts

@@ -1,74 +0,0 @@
-import BaseModel from 'Common/Models/BaseModel';
-import Models from 'Model/Models/Index';
-import ArrayUtil from 'Common/Types/ArrayUtil';
-import Dictionary from 'Common/Types/Dictionary';
-import { IsBillingEnabled } from 'CommonServer/EnvironmentConfig';
-
-export interface ModelDocumentation {
-    name: string;
-    path: string;
-    model: BaseModel;
-    description: string;
-}
-
-export default class ResourceUtil {
-    public static getResources(): Array<ModelDocumentation> {
-        const resources: Array<ModelDocumentation> = Models.filter(
-            (model: typeof BaseModel) => {
-                const modelInstance: BaseModel = new model();
-                let showDocs: boolean = modelInstance.enableDocumentation;
-
-                if (modelInstance.isMasterAdminApiDocs && IsBillingEnabled) {
-                    showDocs = false;
-                }
-
-                return showDocs;
-            }
-        )
-            .map((model: typeof BaseModel) => {
-                const modelInstance: BaseModel = new model();
-
-                return {
-                    name: modelInstance.singularName!,
-                    path: modelInstance.getAPIDocumentationPath(),
-                    model: modelInstance,
-                    description: modelInstance.tableDescription!,
-                };
-            })
-            .sort(ArrayUtil.sortByFieldName('name'));
-
-        return resources;
-    }
-
-    public static getFeaturedResources(): Array<ModelDocumentation> {
-        const featuredResources: Array<string> = [
-            'Monitor',
-            'Scheduled Maintenance Event',
-            'Status Page',
-            'Incident',
-            'Team',
-            'On-Call Duty',
-            'Label',
-            'Team Member',
-        ];
-
-        return ResourceUtil.getResources().filter(
-            (resource: ModelDocumentation) => {
-                return featuredResources.includes(resource.name);
-            }
-        );
-    }
-
-    public static getResourceDictionaryByPath(): Dictionary<ModelDocumentation> {
-        const dict: Dictionary<ModelDocumentation> = {};
-
-        const resources: Array<ModelDocumentation> =
-            ResourceUtil.getResources();
-
-        for (const resource of resources) {
-            dict[resource.path] = resource;
-        }
-
-        return dict;
-    }
-}

ApiReference/nodemon.json

@@ -1,5 +0,0 @@
-{
-    "watch": ["./", "../Common", "../CommonServer", "../Model"],
-    "ext": "ts,json,tsx,env,js,jsx,ejs",
-    "exec": "node --inspect=0.0.0.0:9229 --require ts-node/register Index.ts"
-}

ApiReference/package.json

@@ -1,55 +0,0 @@
-{
-    "name": "oneuptime-homepage",
-    "version": "3.0.0",
-    "scripts": {
-        "configure": "npx npm-force-resolutions || echo 'No package-lock.json file. Skipping force resolutions'",
-        "start": "node --require ts-node/register Index.ts",
-        "compile": "tsc",
-        "dev": "npx nodemon",
-        "test": "jest",
-        "lighthouse-test": "jest --forceExit lighthouse-tests/test/index.test.js --env=node",
-        "lighthouse": "start-server-and-test http://localhost:1444",
-        "smoketest": "jest --forceExit smoketest/index.test.js --env=node",
-        "audit": "npm audit --audit-level=low",
-        "light-house": "node lighthouse.js --web",
-        "light-house-mobile": "node lighthouse.js --mobile",
-        "dep-check": "depcheck ./ --skip-missing=true --ignores='ejs,puppeteer'"
-    },
-    "dependencies": {
-        "@types/body-parser": "^1.19.2",
-        "@types/cli-table": "^0.3.0",
-        "@types/compression": "^1.7.2",
-        "@types/ejs": "^3.1.1",
-        "@types/minify": "^8.0.0",
-        "@types/try-to-catch": "^3.0.0",
-        "axios": "^0.26.1",
-        "body-parser": "^1.19.2",
-        "cli-table": "^0.3.11",
-        "Common": "file:../Common",
-        "CommonServer": "file:../CommonServer",
-        "compression": "^1.7.4",
-        "ejs": "^3.1.8",
-        "express": "^4.18.1",
-        "Model": "file:../Model",
-        "ts-node": "^10.9.1",
-        "xmlbuilder2": "^3.0.2"
-    },
-    "resolutions": {},
-    "devDependencies": {
-        "@types/jest": "^27.5.1",
-        "@types/node": "^17.0.22",
-        "chrome-launcher": "^0.15.0",
-        "commander": "^9.1.0",
-        "depcheck": "^1.4.3",
-        "jest": "^28.1.0",
-        "lighthouse": "^9.5.0",
-        "nodemon": "^2.0.20",
-        "npm-force-resolutions": "0.0.10",
-        "ora": "^6.1.0",
-        
-        "start-server-and-test": "^1.14.0",
-        "ts-jest": "^28.0.2",
-        "ts-node-dev": "^1.1.8",
-        "typescript": "^4.6.4"
-    }
-}

ApiReference/views/main/model.ejs

@@ -1,599 +0,0 @@
-<main class="py-16">
-   <article class="prose ">
-      <h1>
-         <%= pageData.title -%>
-      </h1>
-      <p class="lead">
-         <%= pageData.description -%>
-      </p>
-
-
-      <h2>Permissions</h2>
-
-      <% if(!pageData.isMasterAdminApiDocs){ %>
-       <p class="lead"> Your API Token needs permissions to create, update, read or delete this resource. If you do not have permissions to make a request a <code class="inline-code">4xx</code> status will be sent as response. </p>
-     
-
-
-   
-       <h3 id="consuming-webhooks" >
-         Read Permissions
-       </h3>
-       <p>You need one of these permissions to read <%= pageData.title -%>:</p>
-       <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10">
-          <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-             <div class="my-6">
-                <ul role="list" class="m-0 w-full">
-                  <% for(var i=0; i<pageData.tablePermissions.read.length; i++) {%>
-                   <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                      <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                         <dt class="sr-only">Name</dt>
-                         <dd><code class="inline-code"> <%= pageData.tablePermissions.read[i].permission -%></code></dd>
-                         <dt class="sr-only">Type</dt>
-                         <dd class="font-mono text-xs text-zinc-400 "><%= pageData.tablePermissions.read[i].title -%></dd>
-                         <dt class="sr-only">Description</dt>
-                         <dd class="w-full text-sm flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                            <p><%= pageData.tablePermissions.read[i].description -%></p>
-                         </dd>
-                      </dl>
-                   </li>
-                   <% } %>
-
-                   
-                </ul>
-             </div>
-          </div>
-      
-       </div>
-
-
-       <h3 id="consuming-webhooks" >
-         Create Permissions
-       </h3>
-       <p>You need one of these permissions to create <%= pageData.title -%>:</p>
-       <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10">
-          <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-             <div class="my-6">
-                <ul role="list" class="m-0 w-full">
-                  <% for(var i=0; i<pageData.tablePermissions.create.length; i++) {%>
-                   <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                      <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                         <dt class="sr-only">Name</dt>
-                         <dd><code class="inline-code"> <%= pageData.tablePermissions.create[i].permission -%></code></dd>
-                         <dt class="sr-only">Type</dt>
-                         <dd class="font-mono text-xs text-zinc-400 "><%= pageData.tablePermissions.create[i].title -%></dd>
-                         <dt class="sr-only">Description</dt>
-                         <dd class="w-full text-sm flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                            <p><%= pageData.tablePermissions.create[i].description -%></p>
-                         </dd>
-                      </dl>
-                   </li>
-                   <% } %>
-
-                   
-                </ul>
-             </div>
-          </div>
-      
-       </div>
-
-
-
-
-       <h3 id="consuming-webhooks" >
-         Update Permissions
-       </h3>
-       <p>You need one of these permissions to update <%= pageData.title -%>:</p>
-       <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10">
-          <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-             <div class="my-6">
-                <ul role="list" class="m-0 w-full">
-                  <% for(var i=0; i<pageData.tablePermissions.update.length; i++) {%>
-                   <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                      <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                         <dt class="sr-only">Name</dt>
-                         <dd><code class="inline-code"> <%= pageData.tablePermissions.update[i].permission -%></code></dd>
-                         <dt class="sr-only">Type</dt>
-                         <dd class="font-mono text-xs text-zinc-400 "><%= pageData.tablePermissions.update[i].title -%></dd>
-                         <dt class="sr-only">Description</dt>
-                         <dd class="w-full flex-none text-sm [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                            <p><%= pageData.tablePermissions.update[i].description -%></p>
-                         </dd>
-                      </dl>
-                   </li>
-                   <% } %>
-
-                   
-                </ul>
-             </div>
-          </div>
-      
-       </div>
-
-
-
-       <h3 id="consuming-webhooks" >
-         Delete Permissions
-       </h3>
-       <p>You need one of these permissions to delete <%= pageData.title -%>:</p>
-       <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10">
-          <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-             <div class="my-6">
-                <ul role="list" class="m-0 w-full">
-                  <% for(var i=0; i<pageData.tablePermissions.delete.length; i++) {%>
-                   <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                      <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                         <dt class="sr-only">Name</dt>
-                         <dd><code class="inline-code"> <%= pageData.tablePermissions.delete[i].permission -%></code></dd>
-                         <dt class="sr-only">Type</dt>
-                         <dd class="font-mono text-xs text-zinc-400 "><%= pageData.tablePermissions.delete[i].title -%></dd>
-                         <dt class="sr-only">Description</dt>
-                         <dd class="w-full text-sm flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                            <p><%= pageData.tablePermissions.delete[i].description -%></p>
-                         </dd>
-                      </dl>
-                   </li>
-                   <% } %>
-
-                   
-                </ul>
-             </div>
-          </div>
-      
-       </div>
-
-       <% } %>
-
-       <% if(pageData.isMasterAdminApiDocs){ %>
-        
-
-          <div class="border-l-4 border-yellow-400 bg-yellow-50 p-4">
-            <div class="flex">
-              <div class="flex-shrink-0">
-                <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
-                </svg>
-              </div>
-              <div class="ml-3">
-                <div class="text-sm font-medium text-yellow-700 mb-0">
-                  This API can only be accessed through a Master API Token. You can create one on the Admin Dashboard. Please add the token to the <code class="inline-code">ApiKey</code> header to make the request.
-                </div>
-              </div>
-            </div>
-          </div>
-
-         <% } %>
-
-
-      <h2 id="the-contact-model" class="scroll-mt-24">
-         The <%= pageData.title -%> model
-      </h2>
-
-      <h3>Properties</h3>
-      <div class="my-6">
-         <ul role="list"
-            class="m-0 w-full list-none divide-y divide-zinc-900/5 p-0 ">
-            <% for(var i=0; i<Object.keys(pageData.columns).length; i++) {%>
-               <li class="m-0 px-0 py-4 first:pt-0 last:pb-0 mt-5">
-                  <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                     <dt class="sr-only">Name</dt>
-                     <dd><code class="inline-code"><%= Object.keys(pageData.columns)[i] -%></code></dd>
-                     <dt class="sr-only">Type</dt>
-                     <dd class="font-mono text-xs text-zinc-400 ">
-
-                        <%= pageData.columns[Object.keys(pageData.columns)[i]].type -%>
-
-                           <% if(pageData.columns[Object.keys(pageData.columns)[i]].required){ %>
-                              (Required)
-                              <% } %>
-
-
-                     </dd>
-                     <dt class="sr-only">Description</dt>
-                     <dd class="w-full flex-none text-sm [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                        <p>
-                          <%= pageData.columns[Object.keys(pageData.columns)[i]].description -%>
-                        </p>
-                     </dd>
-                     <dd class="font-mono text-xs ">
-
-                        <div class="mb-3 mt-3">
-                           <span class="text-gray-700  text-xs">Permissions to Create:&nbsp;</span>
-
-                           <% for(var j=0; j < pageData.columns[Object.keys(pageData.columns)[i]].permissions.create.length; j++) {%>
-                              <span class="rounded-xl p-0.5 px-1 text-xs text-slate-500 bg-slate-100 border-2 border-slate-200"> <%= pageData.columns[Object.keys(pageData.columns)[i]].permissions.create[j] -%></span>
-                              
-                              <% if(j !== pageData.columns[Object.keys(pageData.columns)[i]].permissions.create.length-1){ %>
-                              <span class="text-gray-400 text-xs ml-1 mr-1">or</span>
-                              <% } %>
-                              
-                              <% } %>
-
-                              <% if(pageData.columns[Object.keys(pageData.columns)[i]].permissions.create.length === 0){ %>
-                                 <span class="p-0.5 px-1 text-xs text-rose-400"> This property is autogenerated. </span>
-                                 <% } %>
-   
-
-                        </div>
-
-                        <div class="mb-3 mt-3">
-                           <span class="text-gray-700  text-xs">Permissions to Read:&nbsp;</span>
-
-                           <% for(var j=0; j < pageData.columns[Object.keys(pageData.columns)[i]].permissions.read.length; j++) {%>
-                              <span class="rounded-xl p-0.5 px-1 text-xs text-slate-500 bg-slate-100 border-2 border-slate-200"> <%= pageData.columns[Object.keys(pageData.columns)[i]].permissions.read[j] -%></span>
-                              
-                              <% if(j !== pageData.columns[Object.keys(pageData.columns)[i]].permissions.read.length-1){ %>
-                                 <span class="text-gray-400 text-xs ml-1 mr-1">or</span>
-                                 <% } %>
-                             
-                              <% } %>
-
-                              <% if(pageData.columns[Object.keys(pageData.columns)[i]].permissions.read.length === 0){ %>
-                                 <span class="p-0.5 px-1 text-xs text-rose-400"> This property cannot be read. </span>
-                                 <% } %>
-   
-
-                        </div>
-
-                        <div class="mb-3 mt-3">
-                           <span class="text-gray-700 text-xs">Permissions to Update:&nbsp;</span>
-
-                           <% for(var j=0; j < pageData.columns[Object.keys(pageData.columns)[i]].permissions.update.length; j++) {%>
-                              <span class="rounded-xl p-0.5 px-1 text-xs text-slate-500 bg-slate-100 border-2 border-slate-200"> <%= pageData.columns[Object.keys(pageData.columns)[i]].permissions.update[j] -%></span>
-                             
-                              <% if(j !== pageData.columns[Object.keys(pageData.columns)[i]].permissions.update.length-1){ %>
-                                 <span class="text-gray-400 text-xs ml-1 mr-1">or</span>
-                                 <% } %>
-                             
-                              <% } %>
-
-
-                           <% if(pageData.columns[Object.keys(pageData.columns)[i]].permissions.update.length === 0){ %>
-                              <span class="p-0.5 px-1 text-xs text-rose-400"> This property cannot be updated. </span>
-                              <% } %>
-
-                        </div>
-
-
-                  
-
-                     </dd>
-                  </dl>
-               </li>
-               <% } %>
-         </ul>
-      </div>
-
-
-<div class="mt-10">
-      <hr>
-      <div class="flex items-center gap-x-3 mt-10"><span
-            class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-emerald-300  bg-emerald-400/10 text-emerald-500 ">GET</span> <span
-            class="font-mono text-xs text-zinc-400">or</span> <span
-            class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-sky-300  bg-sky-400/10 text-sky-500 ">POST</span><span
-            class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span
-           class="font-mono text-xs text-zinc-400"><%= pageData.apiPath -%>/get-list</span></div>
-           <div class="-mt-20">
-      <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span class="group text-inherit no-underline hover:text-inherit">List</span></h2>
-
-            <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
-               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                  <p>This endpoint allows you to retrieve a paginated list of all your <%= pageData.title -%>. By default, a maximum of ten
-                     <%= pageData.title -%> are shown per page.</p>
-                     <h3>Optional Query Params</h3>
-                  <div class="my-6">
-                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
-                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                           
-                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                              <dt class="sr-only">Limit</dt>
-                              <dd><code class="inline-code">limit</code></dd>
-                              <dt class="sr-only">Type</dt>
-                              <dd class="font-mono text-xs text-zinc-400 ">number</dd>
-                              <dt class="sr-only">Description</dt>
-                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                                 <p>Number of objects to fetch. By default 10, you can increase this count up to 100</p>
-                              </dd>
-                           </dl>
-                        </li>
-                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                              <dt class="sr-only">Skip</dt>
-                              <dd><code class="inline-code">skip</code></dd>
-                              <dt class="sr-only">Type</dt>
-                              <dd class="font-mono text-xs text-zinc-400 ">number</dd>
-                              <dt class="sr-only">Description</dt>
-                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                                 <p>Number of objects to skip. This can be useful in pagination</p>
-                              </dd>
-                           </dl>
-                        </li>
-                     </ul>
-                  </div>
-                  <h3>Optional Request Body</h3>
-                  <div class="my-6">
-                     <ul role="list"
-                        class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
-                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                              <dt class="sr-only">Query</dt>
-                              <dd><code class="inline-code">query</code></dd>
-                              <dt class="sr-only">Type</dt>
-                              <dd class="font-mono text-xs text-zinc-400 ">query</dd>
-                              <dt class="sr-only">Description</dt>
-                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                                 <p>If you would like to filter on <%= pageData.title -%>. You can specify include a query here. For more information, <a class="link" target="_blank" href="/reference/data-types#queries">please check out writing queries here.</a></p>
-                              </dd>
-                           </dl>
-                          
-                        </li>
-                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                        <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                           <dt class="sr-only">Select</dt>
-                           <dd><code class="inline-code">select</code></dd>
-                           <dt class="sr-only">Type</dt>
-                           <dd class="font-mono text-xs text-zinc-400 ">select</dd>
-                           <dt class="sr-only">Description</dt>
-                           <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                              <p> By default you will only retrieve ID of objects, to retrieve more fields you need to select them. For more information, <a class="link" target="_blank" href="/reference/data-types#select">please check how to select here.</a></p>
-                           </dd>
-                        </dl>
-                        </li>
-                        <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                        <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                           <dt class="sr-only">Sort</dt>
-                           <dd><code class="inline-code">sort</code></dd>
-                           <dt class="sr-only">Type</dt>
-                           <dd class="font-mono text-xs text-zinc-400 ">sort</dd>
-                           <dt class="sr-only">Description</dt>
-                           <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                              <p> Objects will be sorted based on created date by default. You can change the sort order by passing  <a class="link" target="_blank" href="/reference/data-types#select">please check how to select here.</a></p>
-                           </dd>
-                        </dl>
-                        </li>
-                     </ul>
-                  </div>
-               </div>
-
-               <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
-                  <%- include('../partials/code', {title: "Example List Request", requestUrl: pageData.apiPath+"/get-list?skip=0&limit=10", code:  pageData.listRequest, requestType: "POST" }) -%>
-                  <%- include('../partials/code', {title: "Example List Response", code: pageData.listResponse, requestType: "" }) -%>
-               </div>
-            </div>
-         </div>
-      </div>
-
-         <div class="mt-10">
-         <hr>
-         <div class="flex items-center gap-x-3 mt-10"><span
-               class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-emerald-300  bg-emerald-400/10 text-emerald-500 ">GET</span> <span
-               class="font-mono text-xs text-zinc-400">or</span> <span
-               class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-sky-300  bg-sky-400/10 text-sky-500 ">POST</span><span
-               class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span
-              class="font-mono text-xs text-zinc-400"><%= pageData.apiPath -%>/:id/get-item</span></div>
-              <div class="-mt-20">
-         <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span class="group text-inherit no-underline hover:text-inherit"
-               >Get item by ID</span></h2>
-   
-               <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
-                  <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                     <p>This endpoint allows you to retrieve <%= pageData.title -%> by ID.
-                        <h3>Required Query Params</h3>
-                     <div class="my-6">
-                        <ul role="list"
-                           class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
-                           <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                              
-                              <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                                 <dt class="sr-only">ID</dt>
-                                 <dd><code class="inline-code">id</code></dd>
-                                 <dt class="sr-only">Type</dt>
-                                 <dd class="font-mono text-xs text-zinc-400 ">text</dd>
-                                 <dt class="sr-only">Description</dt>
-                                 <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                                    <p>ID of the Object</p>
-                                 </dd>
-                              </dl>
-                           </li>
-                        </ul>
-                     </div>
-                     <h3>Optional Request Body</h3>
-                     <div class="my-6">
-                        <ul role="list"
-                           class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
-                           
-                           <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                           <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                              <dt class="sr-only">Select</dt>
-                              <dd><code class="inline-code">select</code></dd>
-                              <dt class="sr-only">Type</dt>
-                              <dd class="font-mono text-xs text-zinc-400 ">select</dd>
-                              <dt class="sr-only">Description</dt>
-                              <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                                 <p> By default you will only retrieve ID of objects, to retrieve more fields you need to select them. For more information, <a class="link" target="_blank" href="/reference/data-types#select">please check how to select here.</a></p>
-                              </dd>
-                           </dl>
-                           </li>
-                           
-                        </ul>
-                     </div>
-                  </div>
-   
-                  <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
-                     <%- include('../partials/code', {title: "Example Item Request", requestUrl: pageData.apiPath+"/3599ee69-43a7-42d7/get-item", code:  pageData.itemRequest, requestType: "POST" }) -%>
-                     <%- include('../partials/code', {title: "Example Item Response", code: pageData.itemResponse, requestType: "" }) -%>
-                  </div>
-               </div>
-            </div>
-         </div>
-
-
-
-
-            <div class="mt-10">
-            <hr>
-            <div class="flex items-center gap-x-3 mt-10"><span
-                  class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-sky-300  bg-sky-400/10 text-sky-500 ">POST</span><span
-                  class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span
-                 class="font-mono text-xs text-zinc-400"><%= pageData.apiPath -%>/count</span></div>
-                 <div class="-mt-20">
-            <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span class="group text-inherit no-underline hover:text-inherit"
-                  >Count</span></h2>
-      
-                  <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
-                     <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                        <p>This endpoint allows you to retrieve the count of all your <%= pageData.title -%>. </p>
-
-                         
-                        <h3>Optional Request Body</h3>
-                        <div class="my-6">
-                           <ul role="list"
-                              class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
-                              <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                                 <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                                    <dt class="sr-only">Query</dt>
-                                    <dd><code class="inline-code">query</code></dd>
-                                    <dt class="sr-only">Type</dt>
-                                    <dd class="font-mono text-xs text-zinc-400 ">query</dd>
-                                    <dt class="sr-only">Description</dt>
-                                    <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                                       <p>If you would like to filter on <%= pageData.title -%>. You can specify include a query here. For more information, <a class="link" target="_blank" href="/reference/data-types#queries">please check out writing queries here.</a></p>
-                                    </dd>
-                                 </dl>
-                                
-                              </li>
-                              
-                           </ul>
-                        </div>
-                     </div>
-      
-                     <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
-                        <%- include('../partials/code', {title: "Example Count Request", requestUrl: pageData.apiPath+"/count", code:  pageData.countRequest, requestType: "POST" }) -%>
-                        <%- include('../partials/code', {title: "Example Count Response", code: pageData.countResponse, requestType: "" }) -%>
-                     </div>
-                  </div>
-               </div>
-            </div>
-
-
-            <div class="mt-10">
-               <hr>
-               <div class="flex items-center gap-x-3 mt-10"><span
-                     class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-sky-300  bg-sky-400/10 text-sky-500 ">POST</span><span
-                     class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span
-                    class="font-mono text-xs text-zinc-400"><%= pageData.apiPath -%></span></div>
-                    <div class="-mt-20">
-               <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span class="group text-inherit no-underline hover:text-inherit"
-                     >Create <%= pageData.title -%> </span></h2>
-         
-                     <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
-                        <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                           <p>This endpoint allows you to create a new object. </p>
-   
-                            
-                           <h3>Request Body</h3>
-                           <div class="my-6">
-                              <ul role="list"
-                                 class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
-                                 <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                                    <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                                       <dt class="sr-only">Data</dt>
-                                       <dd><code class="inline-code">data</code></dd>
-                                       <dt class="sr-only">Type</dt>
-                                       <dd class="font-mono text-xs text-zinc-400 ">JSON</dd>
-                                       <dt class="sr-only">Description</dt>
-                                       <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                                          <p>Object to update as JSON</p>
-                                       </dd>
-                                    </dl>
-      
-                                 </li>
-                                 
-                              </ul>
-                           </div>
-                        </div>
-         
-                        <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
-                           <%- include('../partials/code', {title: "Example Create Request", requestUrl: pageData.apiPath, code:  pageData.createRequest, requestType: "POST" }) -%>
-                           <%- include('../partials/code', {title: "Example Create Response", code: pageData.createResponse, requestType: "" }) -%>
-                        </div>
-                     </div>
-                  </div>
-               </div>
-
-
-
-            <div class="mt-10">
-               <hr>
-               <div class="flex items-center gap-x-3 mt-10"><span
-                     class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-amber-300  bg-amber-400/10 text-amber-500 ">PUT</span><span
-                     class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span
-                    class="font-mono text-xs text-zinc-400"><%= pageData.apiPath -%>/:id</span></div>
-                    <div class="-mt-20">
-               <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span class="group text-inherit no-underline hover:text-inherit"
-                     >Update by ID</span></h2>
-         
-                     <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
-                        <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                           <p>This endpoint allows you to update object by its ID. </p>
-   
-                            
-                           <h3>Request Body</h3>
-                           <div class="my-6">
-                              <ul role="list"
-                                 class="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 ">
-                                 <li class="m-0 px-0 py-4 first:pt-0 last:pb-0">
-                                    <dl class="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
-                                       <dt class="sr-only">Data</dt>
-                                       <dd><code class="inline-code">data</code></dd>
-                                       <dt class="sr-only">Type</dt>
-                                       <dd class="font-mono text-xs text-zinc-400 ">JSON</dd>
-                                       <dt class="sr-only">Description</dt>
-                                       <dd class="w-full flex-none [&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                                          <p>Object to update as JSON</p>
-                                       </dd>
-                                    </dl>
-      
-                                 </li>
-                                 
-                              </ul>
-                           </div>
-                        </div>
-         
-                        <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
-                           <%- include('../partials/code', {title: "Example Update Request", requestUrl: pageData.apiPath+"/3599ee69-43a7-42d7", code:  pageData.updateRequest, requestType: "PUT" }) -%>
-                           <%- include('../partials/code', {title: "Example Update Response", code: pageData.updateResponse, requestType: "" }) -%>
-                        </div>
-                     </div>
-                  </div>
-               </div>
-
-
-               <div class="mt-10">
-                  <hr>
-                  <div class="flex items-center gap-x-3 mt-10"><span
-                        class="font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-red-300  bg-red-400/10 text-red-500 ">DELETE</span><span
-                        class="h-0.5 w-0.5 rounded-full bg-zinc-300 "></span><span
-                       class="font-mono text-xs text-zinc-400"><%= pageData.apiPath -%>/:id</span></div>
-                       <div class="-mt-20">
-                  <h2 id="list-all-contacts" class="mt-2 scroll-mt-32"><span class="group text-inherit no-underline hover:text-inherit"
-                        >Delete by ID</span></h2>
-            
-                        <div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
-                           <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0">
-                              <p>This endpoint allows you to delete object by its ID. </p>
-      
-                     
-                           </div>
-            
-                           <div class="[&amp;>:first-child]:mt-0 [&amp;>:last-child]:mb-0 xl:sticky xl:top-24">
-                              <%- include('../partials/code', {title: "Example Delete Request", requestUrl: pageData.apiPath+"/3599ee69-43a7-42d7", code:  pageData.deleteRequest, requestType: "DELETE" }) -%>
-                              <%- include('../partials/code', {title: "Example Delete Response", code: pageData.deleteResponse, requestType: "" }) -%>
-                           </div>
-                        </div>
-                     </div>
-                  </div>
-     
-   </article>
-</main>

App/.gitignore

@@ -26,4 +26,5 @@ container_security_dir
 /.nyc_output
 
 /greenlock.d/config.json
-/greenlock.d/config.json.bak
+/greenlock.d/config.json.bak
+/.greenlockrc

App/Dockerfile.tpl

@@ -1,10 +1,9 @@
 #
-# OneUptime-DashboardAPI Dockerfile
+# OneUptime-App Dockerfile
 #
 
 # Pull base image nodejs image.
-FROM node:current-alpine
-USER root
+FROM node:21.2-alpine3.18
 RUN mkdir /tmp/npm &&  chmod 2777 /tmp/npm && chown 1000:1000 /tmp/npm && npm config set cache /tmp/npm --global
 
 
@@ -15,6 +14,10 @@ ENV GIT_SHA=${GIT_SHA}
 ENV APP_VERSION=${APP_VERSION}
 
 
+# IF APP_VERSION is not set, set it to 1.0.0
+RUN if [ -z "$APP_VERSION" ]; then export APP_VERSION=1.0.0; fi
+
+
 # Install bash. 
 RUN apk add bash && apk add curl
 
@@ -30,12 +33,16 @@ RUN mkdir /usr/src
 
 WORKDIR /usr/src/Common
 COPY ./Common/package*.json /usr/src/Common/
+# Set version in ./Common/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/Common/package.json
 RUN npm install
 COPY ./Common /usr/src/Common
 
 
 WORKDIR /usr/src/Model
 COPY ./Model/package*.json /usr/src/Model/
+# Set version in ./Model/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/Model/package.json
 RUN npm install
 COPY ./Model /usr/src/Model
 
@@ -43,6 +50,8 @@ COPY ./Model /usr/src/Model
 
 WORKDIR /usr/src/CommonServer
 COPY ./CommonServer/package*.json /usr/src/CommonServer/
+# Set version in ./CommonServer/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/CommonServer/package.json
 RUN npm install
 COPY ./CommonServer /usr/src/CommonServer
 
@@ -53,7 +62,9 @@ ENV PRODUCTION=true
 WORKDIR /usr/src/app
 
 # Install app dependencies
-COPY ./DashboardAPI/package*.json /usr/src/app/
+COPY ./App/package*.json /usr/src/app/
+# Set version in ./App/package.json to the APP_VERSION
+RUN sed -i "s/\"version\": \".*\"/\"version\": \"$APP_VERSION\"/g" /usr/src/app/package.json
 RUN npm install
 
 # Expose ports.
@@ -65,7 +76,7 @@ EXPOSE 3002
 CMD [ "npm", "run", "dev" ]
 {{ else }}
 # Copy app source
-COPY ./DashboardAPI /usr/src/app
+COPY ./App /usr/src/app
 # Bundle app source
 RUN npm run compile
 #Run the app