WIP: Refresh a supabase example

kratos-keto-oathkeeper-supabase/.env.example

@@ -1 +1,14 @@
-DSN=postgres://shorts:notsecureatall@localhost:5432/shorts?sslmode=disable
+POSTGRES_VER=9.6
+KRATOS_VER=v0.10.1
+KETO_VER=v0.10.0-alpha.0
+OATHKEEPER_VER=v0.40.0
+
+# PG setup
+PG_USER=user 
+PG_PASS=pass
+
+DSN=postgres://user:pass@pg:5432
+
+DSN_KRATOS=${DSN}/kratos?sslmode=disable&max_conns=20&max_idle_conns=4
+DSN_SHORTS=${DSN}/shorts?sslmode=disable&max_conns=20&max_idle_conns=4
+DSN_KETO=${DSN}/keto?sslmode=disable&max_conns=20&max_idle_conns=4

kratos-keto-oathkeeper-supabase/Dockerfile

@@ -1,4 +1,4 @@
-FROM golang as builder
+FROM golang:1.19.3-alpine as builder
 
 RUN mkdir /build
 

kratos-keto-oathkeeper-supabase/Makefile

@@ -7,7 +7,7 @@ test:
 	go test ./...
 
 create_migration:
-	migrate create -ext sql -dir migrations -seq create_url_table
+	migrate create -ext sql -dir db/migrations -seq create_url_table
 
 lint:
 	golangci-lint run ./...

kratos-keto-oathkeeper-supabase/client/.eslintrc.js

@@ -5,10 +5,10 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true,
+    node: true
   },
-  extends: ["@nuxtjs/eslint-config-typescript", "plugin:nuxt/recommended"],
+  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:nuxt/recommended'],
   plugins: [],
   // add your custom rules here
-  rules: {},
+  rules: {}
 }

kratos-keto-oathkeeper-supabase/client/.prettierrc

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

kratos-keto-oathkeeper-supabase/client/components/AppHeader.vue

@@ -11,10 +11,11 @@
           <router-link
             to="/"
             class="text-xl font-bold text-gray-800 md:text-2xl hover:text-blue-400"
-            >Shorts
+          >
+            Shorts
           </router-link>
           <!-- Mobile menu button -->
-          <div @click="showMenu = !showMenu" class="flex md:hidden">
+          <div class="flex md:hidden" @click="showMenu = !showMenu">
             <button
               type="button"
               class="text-gray-800 hover:text-gray-400 focus:outline-none focus:text-gray-400"
@@ -23,7 +24,7 @@
                 <path
                   fill-rule="evenodd"
                   d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
-                ></path>
+                />
               </svg>
             </button>
           </div>
@@ -62,22 +63,22 @@
 </template>
 <script>
 export default {
-  name: "AppHeader",
+  name: 'AppHeader',
+  data () {
+    return {
+      showMenu: false
+    }
+  },
   computed: {
-    authenticated() {
+    authenticated () {
       return this.$store.state.session.authenticated
     },
-    session() {
+    session () {
       return this.$store.state.session.session
     },
-    logoutURL() {
+    logoutURL () {
       return this.$store.state.session.logoutURL
-    },
-  },
-  data() {
-    return {
-      showMenu: false,
     }
-  },
+  }
 }
 </script>

kratos-keto-oathkeeper-supabase/client/components/ShortsLogo.vue

@@ -3,8 +3,8 @@
 
 <template>
   <svg
-    class="ShortsLogo"
     id="a6ee8617-cc99-4eb9-a93b-e1a7e83c9724"
+    class="ShortsLogo"
     data-name="Layer 1"
     xmlns="http://www.w3.org/2000/svg"
     width="200"

kratos-keto-oathkeeper-supabase/client/components/URLInput.vue

@@ -3,19 +3,19 @@
 
 <template>
   <div class="w-full">
-    <div class="w-full mt-6 flex rounded-md shadow-sm" v-if="authenticated">
+    <div v-if="authenticated" class="w-full mt-6 flex rounded-md shadow-sm">
       <div class="relative flex-grow focus-within:z-10">
         <DownloadIcon />
         <input
           v-model="url"
           class="text-gray-700 py-3 form-input block w-full rounded-none rounded-l-md pl-10 transition ease-in-out duration-150 font-semibold sm:text-sm sm:leading-5"
           placeholder="www.example.com"
-        />
+        >
       </div>
       <button
         v-if="!loading"
-        @click="shorten"
         class="group -ml-px relative inline-flex items-center px-3 py-3 border border-indigo-300 text-sm leading-5 font-medium rounded-r-md text-white bg-indigo-700 hover:text-indigo-700 hover:bg-white focus:outline-none focus:shadow-outline-blue focus:border-indigo-300 active:bg-gray-100 active:text-indigo-700 transition ease-in-out duration-150"
+        @click="shorten"
       >
         <svg
           class="text-white h-5 w-5 group-hover:text-indigo-700"
@@ -61,56 +61,56 @@
 </template>
 <script>
 export default {
-  name: "URLInput",
-  data() {
+  name: 'URLInput',
+  data () {
     return {
       loading: false,
-      url: "",
-      errorMessage: "",
+      url: '',
+      errorMessage: ''
     }
   },
   computed: {
-    authenticated() {
+    authenticated () {
       return this.$store.state.session.authenticated
-    },
+    }
   },
   methods: {
-    async shorten(e) {
+    async shorten (e) {
       e.preventDefault()
       this.loading = true
       this.errorMessage = this.validateURL(this.url)
       try {
-        const result = await this.$axios.$post("/api/url", {
-          url: this.url,
+        const result = await this.$axios.$post('/api/url', {
+          url: this.url
         })
-        this.$store.commit("url/add", result.data)
+        this.$store.commit('url/add', result.data)
       } catch (error) {
         if (error.response) {
           this.errorMessage = error.response.message
         } else {
-          this.errorMessage = "Sorry, the API is offline. Try again later"
+          this.errorMessage = 'Sorry, the API is offline. Try again later'
         }
       }
       this.loading = false
     },
-    validateURL(str) {
+    validateURL (str) {
       if (str === null || str.match(/^ *$/) !== null) {
-        return "A URL is required"
+        return 'A URL is required'
       }
       const regex = new RegExp(
-        "^(https?:\\/\\/)?" + // protocol
-          "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
-          "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
-          "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
-          "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
-          "(\\#[-a-z\\d_]*)?$",
-        "i",
+        '^(https?:\\/\\/)?' + // protocol
+          '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+          '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+          '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+          '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+          '(\\#[-a-z\\d_]*)?$',
+        'i'
       )
       if (str.match(regex) === null) {
-        return "URL is invalid"
+        return 'URL is invalid'
       }
-      return ""
-    },
-  },
+      return ''
+    }
+  }
 }
 </script>

kratos-keto-oathkeeper-supabase/client/components/URLView.vue

@@ -4,9 +4,9 @@
 <template>
   <div class="py-6 w-full">
     <div
-      class="my-3 bg-white shadow rounded-lg"
       v-for="(shortenedUrl, index) in shortenedUrls"
       :key="index"
+      class="my-3 bg-white shadow rounded-lg"
     >
       <div class="px-4 py-5 sm:p-6">
         <div class="flex items-center">
@@ -38,7 +38,7 @@
 
         <div class="mt-3 text-sm leading-5">
           <a
-            v-bind:href="shortenedUrl.shortened"
+            :href="shortenedUrl.shortened"
             target="_blank"
             class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150"
           >
@@ -51,18 +51,18 @@
 </template>
 <script>
 export default {
-  name: "URLView",
-  async fetch() {
-    try {
-      this.shortenedUrls = await this.$axios.$get("/api/url")
-    } catch {
-      console.log("API is offline")
-    }
-  },
-  data() {
+  name: 'URLView',
+  data () {
     return {
-      shortenedUrls: [],
+      shortenedUrls: []
     }
   },
+  async fetch () {
+    try {
+      this.shortenedUrls = await this.$axios.$get('/api/url')
+    } catch {
+      console.log('API is offline')
+    }
+  }
 }
 </script>

kratos-keto-oathkeeper-supabase/client/jest.config.js

@@ -3,20 +3,20 @@
 
 module.exports = {
   moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/$1",
-    "^~/(.*)$": "<rootDir>/$1",
-    "^vue$": "vue/dist/vue.common.js",
+    '^@/(.*)$': '<rootDir>/$1',
+    '^~/(.*)$': '<rootDir>/$1',
+    '^vue$': 'vue/dist/vue.common.js'
   },
-  moduleFileExtensions: ["ts", "js", "vue", "json"],
+  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
   transform: {
-    "^.+\\.ts$": "ts-jest",
-    "^.+\\.js$": "babel-jest",
-    ".*\\.(vue)$": "vue-jest",
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.js$': 'babel-jest',
+    '.*\\.(vue)$': 'vue-jest'
   },
   collectCoverage: true,
   collectCoverageFrom: [
-    "<rootDir>/components/**/*.vue",
-    "<rootDir>/pages/**/*.vue",
+    '<rootDir>/components/**/*.vue',
+    '<rootDir>/pages/**/*.vue'
   ],
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom'
 }

kratos-keto-oathkeeper-supabase/client/layouts/default.vue

@@ -8,5 +8,7 @@
 </template>
 
 <script>
-export default {}
+export default {
+  name: 'DefaultLayout'
+}
 </script>

kratos-keto-oathkeeper-supabase/client/nuxt.config.js

@@ -3,22 +3,22 @@
 
 export default {
   // Target: https://go.nuxtjs.dev/config-target
-  target: "static",
+  target: 'static',
 
   // Global page headers: https://go.nuxtjs.dev/config-head
   ssr: false,
   head: {
-    title: "Shorts",
+    title: 'Shorts',
     htmlAttrs: {
-      lang: "en",
+      lang: 'en'
     },
     meta: [
-      { charset: "utf-8" },
-      { name: "viewport", content: "width=device-width, initial-scale=1" },
-      { hid: "description", name: "description", content: "" },
-      { name: "format-detection", content: "telephone=no" },
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: '' },
+      { name: 'format-detection', content: 'telephone=no' }
     ],
-    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
@@ -35,29 +35,29 @@ export default {
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
     // https://go.nuxtjs.dev/typescript
-    "@nuxt/typescript-build",
+    '@nuxt/typescript-build',
     // https://go.nuxtjs.dev/tailwindcss
-    "@nuxtjs/tailwindcss",
+    '@nuxtjs/tailwindcss'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
     // https://go.nuxtjs.dev/axios
-    "@nuxtjs/axios",
+    '@nuxtjs/axios'
   ],
 
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {
     // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
-    baseURL: process.env.API_URL || "http://127.0.0.1:8080",
-    credentials: true,
+    baseURL: process.env.API_URL || 'http://127.0.0.1:8080',
+    credentials: true
   },
   publicRuntimeConfig: {
-    kratosUI: process.env.KRATOS_URL || "http://127.0.0.1:4455",
-    kratosAPIURL: process.env.KRATOS_API_URL || "http://127.0.0.1:4433",
-    apiURL: process.env.API_URL || "http://127.0.0.1:8080",
+    kratosUI: process.env.KRATOS_URL || 'http://127.0.0.1:4455',
+    kratosAPIURL: process.env.KRATOS_API_URL || 'http://127.0.0.1:4433',
+    apiURL: process.env.API_URL || 'http://127.0.0.1:8080'
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
-  build: {},
+  build: {}
 }

kratos-keto-oathkeeper-supabase/client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "Shorts",
+  "name": "shorts",
   "version": "1.0.0",
   "private": true,
   "scripts": {