Replace policy type authentication with password login

Author: marickvantuil

README.md

@@ -103,15 +103,10 @@ To make use of it, publish its assets:
 php artisan vendor:publish --tag=cloud-tasks-assets
 ```
 
-We expose a dashboard at the /cloud-tasks URI. By default, you will only be able to access this dashboard in the local environment. However, within your app/Providers/AppServiceProvider.php file, there is an authorization gate definition. This authorization gate controls access to Cloud Tasks in non-local environments. You are free to modify this gate as needed to restrict access to your Cloud Tasks installation:
+We expose a dashboard at the /cloud-tasks URI.
 
 
 ```php
-Gate::define('viewCloudTasks', function ($user) {
-    return in_array($user->email, [
-        '[email protected]',
-    ]);
-});
 ```
 
 # Authentication

config/cloud-tasks.php

@@ -5,5 +5,6 @@
 return [
     'monitor' => [
         'enabled' => env('CLOUD_TASKS_MONITOR_ENABLED', false),
+        'password' => env('CLOUD_TASKS_MONITOR_PASSWORD', '$2a$12$q3pRT5jjjjPlTSaGhoy.gupULnK.5lQEiquK5RVaWbGw9nYRy7gwi') // MyPassword1!
     ],
 ];

dashboard/.prettierignore

@@ -0,0 +1,6 @@
+# Ignore artifacts:
+build
+coverage
+.vscode
+node_modules
+.idea

dashboard/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

dashboard/src/App.vue

@@ -24,9 +24,6 @@
   --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
 }
 </style>
-<script>
+<script setup>
 import Menu from './components/Menu.vue'
-export default {
-  components: { Menu },
-}
 </script>

dashboard/src/api.js

@@ -1,7 +1,39 @@
 import { onUnmounted, watch } from 'vue'
 import { onBeforeRouteUpdate } from 'vue-router'
 
-export async function fetchTasks(into, query = {}) {
+export async function callApi({
+  endpoint,
+  router,
+  body = null,
+  method = 'GET',
+  login = false,
+} = {}) {
+  const response = await fetch(
+    `${import.meta.env.VITE_API_URL || ''}/cloud-tasks-api/${endpoint}`,
+    {
+      method,
+      ...(body ? { body } : {}),
+      headers: {
+        ...(!login
+          ? {
+              Authorization: `Bearer ${localStorage.getItem(
+                'cloud-tasks-token'
+              )}`,
+            }
+          : {}),
+      },
+    }
+  )
+
+  if (response.status === 403 && !login) {
+    localStorage.removeItem('cloud-tasks-token')
+    router.push({ name: 'login' })
+  }
+
+  return login ? await response.text() : await response.json()
+}
+
+export async function fetchTasks(into, query = {}, router) {
   let paused = false
 
   const f = async function (into) {
@@ -17,14 +49,11 @@ export async function fetchTasks(into, query = {}) {
     }
 
     paused = true
-    fetch(
-      `${import.meta.env.VITE_API_URL || ''}/cloud-tasks-api/tasks?${queryParams.toString()}`
-    )
-      .then((response) => response.json())
-      .then((response) => {
-        into.value = response
-        paused = false
-      })
+    into.value = await callApi({
+      endpoint: `tasks?${queryParams.toString()}`,
+      router,
+    })
+    paused = false
   }
 
   f(into)

dashboard/src/components/Dashboard.vue

@@ -1,6 +1,9 @@
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { callApi } from '../api'
 
+const router = useRouter()
 const dashboard = ref({
   recent: {
     this_minute: '...',
@@ -14,11 +17,12 @@ const dashboard = ref({
   },
 })
 
-const tsLoaded = Math.floor(Date.now() / 1000)
-
-fetch(`${import.meta.env.VITE_API_URL || ''}/cloud-tasks-api/dashboard`)
-  .then((response) => response.json())
-  .then((response) => (dashboard.value = response))
+onMounted(async () => {
+  dashboard.value = await callApi({
+    endpoint: 'dashboard',
+    router,
+  })
+})
 </script>
 
 <template>

dashboard/src/components/Failed.vue

@@ -2,16 +2,22 @@
 import { ref } from 'vue'
 import { fetchTasks } from '../api'
 import Overview from './Overview.vue'
+import { useRouter } from 'vue-router'
 
 defineProps({
   tasks: Array,
 })
 
 const tasks = ref(null)
+const router = useRouter()
 
-fetchTasks(tasks, {
-  filter: 'failed',
-})
+fetchTasks(
+  tasks,
+  {
+    filter: 'failed',
+  },
+  router
+)
 </script>
 
 <template>

dashboard/src/components/Login.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="block w-full h-full flex items-center justify-center">
+    <div>
+      <h3 class="text-4xl">This application is password protected.</h3>
+      <input
+        type="password"
+        class="w-full p-2 px-6 text-2xl font-light mt-8 text-center outline-none shadow rounded-full"
+        :class="{ shake: incorrect }"
+        @keyup.enter="attemptLogin"
+        v-model="pw"
+        :disabled="loading"
+        ref="inputRef"
+      />
+      <div class="text-center mt-6 text-xl">
+        Press
+        <span class="bg-blue-200 py-1 px-2 ml-2 mr-2 rounded text-blue-800"
+          >Enter</span
+        >
+        to log in.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { callApi } from '../api'
+
+const router = useRouter()
+const inputRef = ref(null)
+const pw = ref('')
+const pwPrev = ref('')
+const incorrect = ref(false)
+const loading = ref(false)
+
+onMounted(() => {
+  inputRef.value.focus()
+})
+
+async function attemptLogin() {
+  if (pw.value === '' || pw.value === pwPrev.value) {
+    return
+  }
+  pwPrev.value = pw.value
+  const formData = new FormData()
+  formData.append('password', pw.value)
+
+  loading.value = true
+  const token = await callApi({
+    endpoint: 'login',
+    method: 'POST',
+    body: formData,
+    login: true,
+  })
+  loading.value = false
+
+  if (token) {
+    localStorage.setItem('cloud-tasks-token', token)
+    router.push({ name: 'home' })
+  } else {
+    incorrect.value = true
+    setTimeout(() => {
+      incorrect.value = false
+    }, 820)
+    setTimeout(() => inputRef.value.focus(), 50)
+  }
+}
+</script>
+
+<style lang="css" scoped>
+@keyframes shake {
+  8%,
+  41% {
+    transform: translateX(-10px);
+  }
+  25%,
+  58% {
+    transform: translateX(10px);
+  }
+  75% {
+    transform: translateX(-5px);
+  }
+  92% {
+    transform: translateX(5px);
+  }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.shake {
+  animation: shake 0.3s linear;
+}
+
+input[type='password'] {
+  font: small-caption;
+  font-size: 36px;
+}
+</style>

dashboard/src/components/Queued.vue

@@ -2,16 +2,22 @@
 import { ref } from 'vue'
 import { fetchTasks } from '../api'
 import Overview from './Overview.vue'
+import { useRouter } from 'vue-router'
 
 defineProps({
   tasks: Array,
 })
 
 const tasks = ref(null)
+const router = useRouter()
 
-fetchTasks(tasks, {
-  status: 'queued',
-})
+fetchTasks(
+  tasks,
+  {
+    status: 'queued',
+  },
+  router
+)
 </script>
 
 <template>