Add HostingPolicyRenderer Component

src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-main>
+    <v-alert class="mt-8 mr-2 ml-2" outlined type="error" border="left" v-if="error">
+      An error occurred while trying to load the requested policy. Please try again later.
+    </v-alert>
+    <v-container class="fill-height" fluid v-if="!error">
+      <v-row justify="center">
+        <v-col cols="11" md="4" order-md="last">
+        </v-col>
+
+        <v-col cols="11" md="8">
+          <component :is="policy" v-if="policy" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+
+export const versions = {
+  'hosting-policy/version-1.vue': () => ({ component: import('./hosting-policy/version-1.vue') }),
+}
+
+export default {
+  name: 'HostingPolicyRenderer',
+  components: {},
+  computed: {
+    policyActiveFrom: function () {
+      return this.$route.params.activeFrom
+    },
+  },
+  data () {
+    return {
+      policy: undefined,
+      error: undefined,
+    }
+  },
+  methods: {
+    async loadPolicy () {
+      try {
+        const policyType = 'hosting-policy' // TODO read this from component property
+        const activeFrom = this.policyActiveFrom
+
+        const response = await this.$api.policyByDate({ policyType, activeFrom })
+
+        const metadata = await response.metadata
+        const policy = versions[metadata.content_vue_file]
+
+        if (policy !== undefined) {
+          this.policy = policy
+        } else {
+          this.error = 'missing policy'
+        }
+      } catch (error) {
+        console.error(error)
+        this.error = error
+      }
+    },
+  },
+  mounted () {
+    this.loadPolicy()
+  },
+  watch: {
+    policyId: function () {
+      this.loadPolicy()
+    },
+  },
+}
+</script>
+
+<style scoped></style>

src/components/Pages/HostingPolicy/hosting-policy/version-1.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-main>
+    <v-container class="fill-height" fluid>
+      <v-row justify="center">
+        <v-col cols="8" class="policy-content text-body-1">
+          <h1 id="hosting-policy-for-wikibase-cloud" class="mb-7">Hosting Policy for Wikibase Cloud Staging Fake Version</h1>
+          <h2 id="purpose-and-scope" class="mb-3">Rest of the content would be here.</h2>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+export default {
+  name: 'HostingPolicy',
+}
+</script>

src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue

@@ -1,6 +1,9 @@
 <template>
   <v-main>
-    <v-container class="fill-height" fluid>
+    <v-alert class="mt-8 mr-2 ml-2" outlined type="error" border="left" v-if="error">
+      An error occurred while trying to load the requested policy. Please try again later.
+    </v-alert>
+    <v-container class="fill-height" fluid v-if="!error">
       <v-row justify="center">
         <v-col cols="11" md="4" order-md="last">
           <TermsOfUseNavigationPanel />
@@ -18,7 +21,7 @@
 import TermsOfUseNavigationPanel from './TermsOfUseNavigationPanel.vue'
 
 export const versions = {
-  '2022-01-01': () => ({ component: import('./terms-of-use/2022-01-01.vue') }),
+  'terms-of-use/version-1.vue': () => ({ component: import('./terms-of-use/version-1.vue') }),
 }
 
 export default {
@@ -34,6 +37,7 @@ export default {
   data () {
     return {
       policy: undefined,
+      error: undefined,
     }
   },
   methods: {
@@ -45,10 +49,16 @@ export default {
         const response = await this.$api.policyByDate({ policyType, activeFrom })
 
         const metadata = await response.metadata
-        this.policy = versions[metadata.active_from]
+        const policy = versions[metadata.content_vue_file]
+
+        if (policy !== undefined) {
+          this.policy = policy
+        } else {
+          this.error = 'missing policy'
+        }
       } catch (error) {
+        this.error = error
         console.error(error)
-        alert('Failed to load policy.')
       }
     },
   },

src/router/index.js

@@ -22,6 +22,7 @@ import User from '@/components/Pages/User'
 import Discovery from '@/components/Pages/Discovery/Discovery'
 import Complaint from '@/components/Pages/Complaint.vue'
 import HostingPolicy from '@/components/Pages/HostingPolicy.vue'
+import HostingPolicyRenderer from '@/components/Pages/HostingPolicy/HostingPolicyRenderer.vue'
 import DsaInfo from '@/components/Pages/DsaInfo/DsaInfo'
 
 Vue.use(Router)
@@ -94,6 +95,11 @@ const router = new Router({
       name: 'Hosting Policy',
       component: HostingPolicy,
     },
+    {
+      path: '/hosting-policy/:activeFrom',
+      name: 'Hosting Policy',
+      component: HostingPolicyRenderer,
+    },
     {
       path: '/privacy-policy',
       name: 'Privacy',