Merge branch 'master' of github.com:KevinMidboe/vinlottis

2021-05-21 17:01:43 +02:00
parent a44a2f5e2a 560fb81a31
commit 836a06537a
35 changed files with 2372 additions and 1901 deletions
--- a/frontend/Vinlottis.vue
+++ b/frontend/Vinlottis.vue
@@ -25,33 +25,33 @@ export default {
      routes: [
        {
          name: "Virtuelt lotteri",
-          route: "/lottery"
+          route: "/lottery",
        },
        {
          name: "Dagens viner",
-          route: "/dagens/"
+          route: "/dagens/",
        },
        {
          name: "Highscore",
-          route: "/highscore"
+          route: "/highscore",
        },
        {
          name: "Historie",
-          route: "/history/"
+          route: "/history/",
        },
        {
          name: "Foreslå vin",
-          route: "/request"
+          route: "/request",
        },
        {
          name: "Foreslåtte viner",
-          route: "/requested-wines"
+          route: "/requested-wines",
        },
        {
          name: "Login",
-          route: "/login"
-        }
-      ]
+          route: "/login",
+        },
+      ],
    };
  },
  mounted() {
@@ -73,7 +73,7 @@ export default {
    closeToast: function() {
      this.showToast = false;
    },
-  }
+  },
 };
 </script>

--- a/frontend/components/AccessCodePage.vue
+++ b/frontend/components/AccessCodePage.vue
@@ -0,0 +1,208 @@
+<template>
+  <div>
+    <div class="floating-video">
+      <video autoplay loop muted playsinline id="office-party" ref="video">
+        <source src="/public/assets/videos/office-party.mp4" type="video/mp4" />
+      </video>
+    </div>
+
+    <div class="container">
+      <div class="container--code label-div row">
+        <label>Din vinlottis kode:</label>
+      </div>
+
+      <div class="codeinput-container">
+        <input v-model="code" placeholder="KODE" @keyup.enter="submit" />
+        <button class="vin-button" @click="submit">ENTER</button>
+      </div>
+
+      <button class="mute-button" @click="toggleMute">
+        {{ muted ? "🔇" : "🔈" }}
+      </button>
+    </div>
+
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/ui/FooterUnbranded";
+import { createCookie } from "@/utils";
+
+export default {
+  components: { Footer },
+  data() {
+    return {
+      muted: true,
+      code: undefined,
+      // volume: 50,
+    };
+  },
+  created() {
+    const site = __sites__.find(site => site.code == this.code);
+  },
+  // watch: {
+  //   volume(newValue) {
+  //     this.$refs.video.volume = newValue / 100;
+  //   },
+  // },
+  methods: {
+    toggleMute() {
+      const { video } = this.$refs;
+      this.muted = !this.muted;
+      video.muted = this.muted;
+    },
+    togglePlayback() {
+      const { video } = this.$refs;
+      video.paused ? video.play() : video.pause();
+    },
+    submit() {
+      const site = __sites__.find(site => site.code == this.code);
+
+      if (site) {
+        createCookie("accesscode", site.code, 14);
+        window.location.href = `${window.location.protocol}//${site.domain}`;
+      }
+
+      return;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/media-queries";
+
+.floating-video {
+  position: absolute;
+  height: 100vh;
+  width: 100vw;
+  overflow-x: hidden;
+  display: grid;
+  place-items: center;
+  background-color: var(--primary);
+  z-index: -1;
+}
+
+.mute-button {
+  z-index: 10;
+  -webkit-appearance: unset;
+  border: none;
+  background-color: transparent;
+  font-size: 1.5rem;
+  position: absolute;
+  right: 1rem;
+  bottom: calc(75px + 1rem);
+  cursor: pointer;
+
+  input[type="range"] {
+    transform: rotate(90deg);
+    background-color: red;
+  }
+}
+
+video {
+  position: absolute;
+  display: block;
+  // left: 0;
+  height: 100%;
+
+  // -o-filter: blur(1px);
+  filter: blur(5px);
+  object-fit: cover;
+  transform: scale(1.02);
+
+  @include mobile {
+    top: 0;
+  }
+}
+
+.codeinput-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  @include mobile {
+    width: 80%;
+  }
+
+  input {
+    max-width: 24rem;
+    width: 100%;
+    padding: 0.5rem;
+
+    font-size: 4rem;
+    text-align: center;
+    z-index: 2;
+    background-color: white;
+
+    @include mobile {
+      font-size: 3rem;
+    }
+  }
+
+  button {
+    height: 100%;
+    max-height: unset;
+  }
+}
+
+.container {
+  width: 100%;
+  height: calc(100vh - 80px);
+  margin: auto;
+  display: flex;
+
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-end;
+  justify-content: center;
+
+  @include desktop {
+    justify-content: center;
+  }
+
+  h1 {
+    position: relative;
+    // text-align: center;
+    font-weight: 600;
+    // color: white;
+
+    @include desktop {
+      font-size: 3rem;
+    }
+  }
+
+  &--code {
+    display: flex;
+    align-items: center;
+
+    label {
+      color: rgba(255, 255, 255, 0.82);
+      font-size: 1.5rem;
+      font-weight: 500;
+    }
+
+    @include desktop {
+      width: 40%;
+    }
+  }
+}
+
+.input-line {
+  margin: auto;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-top: 2.4rem;
+
+  @include mobile {
+    margin-top: 1.2rem;
+  }
+}
+
+.button-container {
+  margin-top: 4rem;
+}
+</style>
--- a/frontend/components/AllRequestedWines.vue
+++ b/frontend/components/AllRequestedWines.vue
@@ -1,9 +1,17 @@
 <template>
  <main class="container">
-    <h1>Alle foreslåtte viner</h1>
+    <div class="header">
+      <h1>Alle foreslåtte viner</h1>
+      <router-link class="vin-button" to="/anbefal">
+        Anbefal ny vin
+        <i class="icon icon--arrow-right"></i>
+      </router-link>
+    </div>

    <section class="wines-container">
-      <p v-if="wines == undefined || wines.length == 0">Ingen har foreslått noe enda!</p>
+      <p v-if="wines == undefined || wines.length == 0">
+        Ingen har foreslått noe enda!
+      </p>

      <RequestedWineCard
        v-for="requestedWine in wines"
@@ -20,12 +28,12 @@
 import RequestedWineCard from "@/ui/RequestedWineCard";
 export default {
  components: {
-    RequestedWineCard
+    RequestedWineCard,
  },
  data() {
    return {
      wines: undefined,
-      isAdmin: false
+      isAdmin: false,
    };
  },
  mounted() {
@@ -33,18 +41,18 @@ export default {
  },
  methods: {
    filterOutDeletedWine(wine) {
-      this.wines = this.wines.filter(item => item.wine._id !== wine._id);
+      this.wines = this.wines.filter((item) => item.wine._id !== wine._id);
    },
    fetchRequestedWines() {
      return fetch("/api/requests")
-        .then(resp => {
+        .then((resp) => {
          this.isAdmin = resp.headers.get("vinlottis-admin") == "true";
          return resp;
        })
-        .then(resp => resp.json())
-        .then(response => (this.wines = response.wines));
-    }
-  }
+        .then((resp) => resp.json())
+        .then((response) => (this.wines = response.wines));
+    },
+  },
 };
 </script>

@@ -65,4 +73,30 @@ h1 {
  color: $matte-text-color;
  font-weight: normal;
 }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+
+  @include mobile {
+    flex-direction: column;
+
+    a {
+      align-self: flex-end;
+      margin-bottom: 4rem;
+    }
+  }
+}
+
+a.vin-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(4rem - 20px);
+}
+
+a .icon {
+  margin-left: 1rem;
+  vertical-align: middle;
+}
 </style>
--- a/frontend/components/RequestWine.vue
+++ b/frontend/components/RequestWine.vue
@@ -32,7 +32,7 @@
            <span v-if="wine.rating">{{ wine.rating }}%</span>
            <span v-if="wine.price">{{ wine.price }} NOK</span>
            <span v-if="wine.country">{{ wine.country }}</span>
-            <span v-if="wine.year">{{ wine.year }}</span>
+            <span v-if="wine.year && wine.year !== '0000'">{{ wine.year }}</span>
          </div>
        </section>
        <button class="vin-button" @click="requestWine(wine)">Foreslå denne</button>
--- a/frontend/components/VinlottisPage.vue
+++ b/frontend/components/VinlottisPage.vue
@@ -94,7 +94,11 @@ export default {
      return Notification.permission !== "granted" || !this.pushAllowed || localStorage.getItem("push") == null;
    }
  },
-  async mounted() {
+  mounted() {
+    setTimeout(() => {
+      document.getElementsByClassName("participate-button")[0].classList.add("pulse");
+    }, 1800);
+
    this.$on("push-allowed", () => {
      this.pushAllowed = true;
    });
@@ -121,8 +125,9 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import "../styles/media-queries.scss";
-@import "../styles/variables.scss";
+@import "@/styles/media-queries.scss";
+@import "@/styles/variables.scss";
+@import "@/styles/animations.scss";

 .top-container {
  height: 30em;
@@ -173,18 +178,20 @@ export default {
    border: 4px solid black;
    padding: 0 1em 0 1em;
    display: flex;
-    width: 12.5em;
+    width: 17.5em;
    align-items: center;
    text-decoration: none;
    color: black;

    i {
      color: $link-color;
+      font-size: 1.2rem;
      margin-left: 5px;
    }

    p {
-      font-size: 16px;
+      font-size: 1.4rem;
+      margin: 1rem;
      margin-left: 15px;
    }

--- a/frontend/components/admin/RegisterWinePage.vue
+++ b/frontend/components/admin/RegisterWinePage.vue
@@ -53,15 +53,15 @@

          <template v-slot:bottom>
            <div class="button-container row small">
-              <button v-if="editingWine == wine && wine._id" class="vin-button warning" @click="updateWine(wine)">
+              <button v-if="editingWine == wine && wine._id" class="vin-button small warning" @click="updateWine(wine)">
                Oppdater vin
              </button>

-              <button class="vin-button" @click="editingWine = editingWine == wine ? false : wine">
+              <button class="vin-button small" @click="editingWine = editingWine == wine ? false : wine">
                {{ editingWine == wine ? "Lukk" : "Rediger" }}
              </button>

-              <button class="danger vin-button" @click="deleteWine(wine)">
+              <button class="danger vin-button small" @click="deleteWine(wine)">
                Slett
              </button>
            </div>
--- a/frontend/router.js
+++ b/frontend/router.js
@@ -1,132 +1,172 @@
-const VinlottisPage = () => import(
-  /* webpackChunkName: "landing-page" */
-  "@/components/VinlottisPage");
-const VirtualLotteryPage = () => import(
-  /* webpackChunkName: "landing-page" */
-  "@/components/VirtualLotteryPage");
-const GeneratePage = () => import(
-  /* webpackChunkName: "landing-page" */
-  "@/components/GeneratePage");
+const VinlottisPage = () =>
+  import(
+    /* webpackChunkName: "landing-page" */
+    "@/components/VinlottisPage"
+  );
+const VirtualLotteryPage = () =>
+  import(
+    /* webpackChunkName: "landing-page" */
+    "@/components/VirtualLotteryPage"
+  );
+const GeneratePage = () =>
+  import(
+    /* webpackChunkName: "landing-page" */
+    "@/components/GeneratePage"
+  );

-const TodaysPage = () => import(
-  /* webpackChunkName: "sub-pages" */
-  "@/components/TodaysPage");
-const AllWinesPage = () => import(
-  /* webpackChunkName: "sub-pages" */
-  "@/components/AllWinesPage");
-const HistoryPage = () => import(
-  /* webpackChunkName: "sub-pages" */
-  "@/components/HistoryPage");
-const WinnerPage = () => import(
-  /* webpackChunkName: "sub-pages" */
-  "@/components/WinnerPage");
-const SalgsbetingelserPage = () => import(
-  /* webpackChunkName: "sub-pages" */
-  "@/components/SalgsbetingelserPage");
+const TodaysPage = () =>
+  import(
+    /* webpackChunkName: "sub-pages" */
+    "@/components/TodaysPage"
+  );
+const AllWinesPage = () =>
+  import(
+    /* webpackChunkName: "sub-pages" */
+    "@/components/AllWinesPage"
+  );
+const HistoryPage = () =>
+  import(
+    /* webpackChunkName: "sub-pages" */
+    "@/components/HistoryPage"
+  );
+const WinnerPage = () =>
+  import(
+    /* webpackChunkName: "sub-pages" */
+    "@/components/WinnerPage"
+  );
+const SalgsbetingelserPage = () =>
+  import(
+    /* webpackChunkName: "sub-pages" */
+    "@/components/SalgsbetingelserPage"
+  );

-const LoginPage = () => import(
-  /* webpackChunkName: "user" */
-  "@/components/LoginPage");
-const CreatePage = () => import(
-  /* webpackChunkName: "user" */
-  "@/components/CreatePage");
-const AdminPage = () => import(
-  /* webpackChunkName: "admin" */
-  "@/components/AdminPage");
+const LoginPage = () =>
+  import(
+    /* webpackChunkName: "user" */
+    "@/components/LoginPage"
+  );
+const CreatePage = () =>
+  import(
+    /* webpackChunkName: "user" */
+    "@/components/CreatePage"
+  );
+const AdminPage = () =>
+  import(
+    /* webpackChunkName: "admin" */
+    "@/components/AdminPage"
+  );

-const PersonalHighscorePage = () => import(
-  /* webpackChunkName: "highscore" */
-  "@/components/PersonalHighscorePage");
-const HighscorePage = () => import(
-  /* webpackChunkName: "highscore" */
-  "@/components/HighscorePage");
+const PersonalHighscorePage = () =>
+  import(
+    /* webpackChunkName: "highscore" */
+    "@/components/PersonalHighscorePage"
+  );
+const HighscorePage = () =>
+  import(
+    /* webpackChunkName: "highscore" */
+    "@/components/HighscorePage"
+  );

-const RequestWine = () => import(
-  /* webpackChunkName: "request" */
-  "@/components/RequestWine");
-const AllRequestedWines = () => import(
-  /* webpackChunkName: "request" */
-  "@/components/AllRequestedWines");
+const RequestWine = () =>
+  import(
+    /* webpackChunkName: "request" */
+    "@/components/RequestWine"
+  );
+const AllRequestedWines = () =>
+  import(
+    /* webpackChunkName: "request" */
+    "@/components/AllRequestedWines"
+  );

 const routes = [
  {
    path: "*",
    name: "Hjem",
-    component: VinlottisPage
+    component: VinlottisPage,
  },
  {
    path: "/lottery",
    name: "Lotteri",
-    component: VirtualLotteryPage
+    component: VirtualLotteryPage,
  },
  {
    path: "/dagens",
    name: "Dagens vin",
-    component: TodaysPage
+    component: TodaysPage,
  },
  {
    path: "/viner",
    name: "All viner",
-    component: AllWinesPage
+    component: AllWinesPage,
  },
  {
    path: "/login",
    name: "Login",
-    component: LoginPage
+    component: LoginPage,
  },
  {
    path: "/create",
    name: "Registrer",
-    component: CreatePage
+    component: CreatePage,
  },
  {
    path: "/admin",
    name: "Admin side",
-    component: AdminPage
+    component: AdminPage,
  },
  {
    path: "/generate/",
-    component: GeneratePage
+    component: GeneratePage,
  },
  {
    path: "/winner/:id",
-    component: WinnerPage
+    component: WinnerPage,
  },
-    {
+  {
    path: "/history/:date",
    name: "Historie for dato",
-    component: HistoryPage
+    component: HistoryPage,
  },
  {
    path: "/history",
    name: "Historie",
-    component: HistoryPage
+    component: HistoryPage,
  },
  {
    path: "/highscore/:name",
    name: "Personlig topplisten",
-    component: PersonalHighscorePage
+    component: PersonalHighscorePage,
  },
  {
    path: "/highscore",
    name: "Topplisten",
-    component: HighscorePage
+    component: HighscorePage,
+  },
+  {
+    path: "/anbefal",
+    name: "Anbefal ny vin",
+    component: RequestWine,
  },
  {
    path: "/request",
    name: "Etterspør vin",
-    component: RequestWine
+    component: RequestWine,
+  },
+  {
+    path: "/anbefalte",
+    name: "Anbefalte viner",
+    component: AllRequestedWines,
  },
  {
    path: "/requested-wines",
    name: "Etterspurte vin",
-    component: AllRequestedWines
+    component: AllRequestedWines,
  },
  {
    path: "/salgsbetingelser",
    name: "Salgsbetingelser",
-    component: SalgsbetingelserPage
-  }
+    component: SalgsbetingelserPage,
+  },
 ];

 export { routes };
--- a/frontend/styles/animations.scss
+++ b/frontend/styles/animations.scss
@@ -0,0 +1,22 @@
+.pulse {
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
+  transform: scale(1);
+  animation: pulse 2s infinite;
+
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
+    }
+
+    70% {
+      transform: scale(1.02);
+      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+    }
+
+    100% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+}
--- a/frontend/templates/Index.html
+++ b/frontend/templates/Index.html
@@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <title>Vinlottis</title>
+    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
--- a/frontend/ui/Attendees.vue
+++ b/frontend/ui/Attendees.vue
@@ -20,9 +20,13 @@
      </div>

      <div v-if="admin" class="attendee-admin">
-        <button class="vin-button small" @click="editingAttendee = editingAttendee == attendee ? false : attendee">
+        <button class="vin-button edit small" @click="editingAttendee = editingAttendee == attendee ? false : attendee">
          {{ editingAttendee == attendee ? "Lukk" : "Rediger" }}
        </button>
+
+        <button class="vin-button small danger" @click="deleteAttendee(attendee)">
+          Slett deltaker
+        </button>
      </div>

      <div v-if="editingAttendee == attendee" class="attendee-edit">
--- a/frontend/ui/Banner.vue
+++ b/frontend/ui/Banner.vue
@@ -5,15 +5,27 @@
      <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
    </router-link>

-    <a class="menu-toggle-container" aria-label="show-menu" @click="toggleMenu" :class="isOpen ? 'open' : 'collapsed'">
+    <a
+      class="menu-toggle-container"
+      aria-label="show-menu"
+      @click="toggleMenu"
+      :class="isOpen ? 'open' : 'collapsed'"
+    >
      <span class="menu-toggle"></span>
      <span class="menu-toggle"></span>
      <span class="menu-toggle"></span>
    </a>

    <nav class="menu" :class="isOpen ? 'open' : 'collapsed'">
-      <router-link v-for="(route, index) in routes" :key="index" :to="route.route" class="menu-item-link">
-        <a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{ route.name }}</a>
+      <router-link
+        v-for="(route, index) in routes"
+        :key="index"
+        :to="route.route"
+        class="menu-item-link"
+      >
+        <a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{
+          route.name
+        }}</a>
        <i class="icon icon--arrow-right"></i>
      </router-link>
    </nav>
@@ -42,14 +54,14 @@ export default {
      minutes: 0,
      seconds: 0,
      distance: 0,
-      interval: null
+      interval: null,
    };
  },
  props: {
    routes: {
      required: true,
-      type: Array
-    }
+      type: Array,
+    },
  },
  mounted() {
    this.initialize(), this.countdown();
@@ -66,7 +78,7 @@ export default {
        return true;
      }
      return false;
-    }
+    },
  },
  methods: {
    toggleMenu() {
@@ -118,8 +130,8 @@ export default {
        this.initialize();
      }
      this.interval = setTimeout(this.countdown, 500);
-    }
-  }
+    },
+  },
 };
 </script>

--- a/frontend/ui/Footer.vue
+++ b/frontend/ui/Footer.vue
@@ -4,7 +4,7 @@
      <li>
        <a href="https://github.com/KevinMidboe/vinlottis" class="github">
          <span>Utforsk koden på github</span>
-          <img src="/public/assets/images/logo-github.png" alt="github logo">
+          <img src="/public/assets/images/logo-github.png" alt="github logo" />
        </a>
      </li>

@@ -16,15 +16,15 @@
    </ul>

    <router-link to="/" class="company-logo">
-      <img src="/public/assets/images/knowit.svg" alt="knowit logo">
+      <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
    </router-link>
  </footer>
 </template>

 <script>
 export default {
-  name: 'WineFooter'
-}
+  name: "WineFooter",
+};
 </script>

 <style lang="scss" scoped>
@@ -57,7 +57,6 @@ footer {
    display: flex;
    align-items: center;

-
    img {
      margin-left: 0.5rem;
      height: 30px;
@@ -74,7 +73,7 @@ footer {
    }
  }

-  .company-logo{
+  .company-logo {
    margin-right: 5em;

    img {
@@ -93,5 +92,4 @@ footer {
    }
  }
 }
-
-</style>
+</style>
--- a/frontend/ui/FooterUnbranded.vue
+++ b/frontend/ui/FooterUnbranded.vue
@@ -0,0 +1,103 @@
+<template>
+  <footer>
+    <a href="https://github.com/KevinMidboe/vinlottis" class="github">
+      <span>Utforsk koden på github</span>
+      <img src="/public/assets/images/logo-github.png" alt="github logo" />
+    </a>
+
+    <a href="mailto:questions@vinlottis.no" class="mail">
+      <span class="vin-link">questions@vinlottis.no</span>
+    </a>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "WineFooter",
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.scss";
+@import "@/styles/media-queries.scss";
+
+footer {
+  width: 100%;
+  height: 75px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f4f4f4;
+  position: fixed;
+  bottom: 0;
+
+  > *:first-of-type {
+    margin-left: 0.5rem;
+  }
+  > *:last-of-type {
+    margin-right: 0.5rem;
+  }
+
+  @include desktop {
+    > *:first-of-type {
+      margin-left: 4rem;
+    }
+    > *:last-of-type {
+      margin-right: 4rem;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin-left: 5rem;
+
+    li:not(:first-of-type) {
+      margin-top: 0.75rem;
+    }
+  }
+
+  a {
+    color: $matte-text-color;
+  }
+
+  .github {
+    display: flex;
+    align-items: center;
+
+    img {
+      margin-left: 0.5rem;
+      height: 30px;
+    }
+  }
+
+  .mail {
+    display: flex;
+    align-items: center;
+
+    img {
+      margin-left: 0.5rem;
+      height: 23px;
+    }
+  }
+
+  .company-logo {
+    margin-right: 5em;
+
+    img {
+      width: 100px;
+    }
+  }
+
+  @include mobile {
+    $margin: 1rem;
+    ul {
+      margin-left: $margin;
+    }
+
+    .company-logo {
+      margin-right: $margin;
+    }
+  }
+}
+</style>
--- a/frontend/utils.js
+++ b/frontend/utils.js
@@ -19,4 +19,31 @@ function daysAgo(date) {
  return Math.round(Math.abs((new Date() - new Date(date)) / day));
 }

+export function createCookie(name, value, days) {
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    var expires = "; expires=" + date.toGMTString();
+  } else var expires = "";
+
+  const domain = `${window.location.hostname}`;
+  console.log("cookie:", `${name}=${value + expires}; path=/; domain=${domain}`);
+  document.cookie = `${name}=${value + expires}; path=/; domain=${domain}`;
+}
+
+export function readCookie(name) {
+  var nameEQ = name + "=";
+  var ca = document.cookie.split(";");
+  for (var i = 0; i < ca.length; i++) {
+    var c = ca[i];
+    while (c.charAt(0) == " ") c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+  }
+  return null;
+}
+
+export function eraseCookie(name) {
+  createCookie(name, "", -1);
+}
+
 export { dateString, humanReadableDate, daysAgo };
--- a/frontend/vinlottis-init.js
+++ b/frontend/vinlottis-init.js
@@ -2,6 +2,8 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import { routes } from "@/router.js";
 import Vinlottis from "@/Vinlottis";
+import AccessCodePage from "@/components/AccessCodePage";
+import { readCookie } from "@/utils";

 import Toast from "@/plugins/Toast";

@@ -21,7 +23,7 @@ if (ENV !== "development") {
    beforeSend: event => {
      console.error(event);
      return event;
-    }
+    },
  });
 }

@@ -38,7 +40,7 @@ ga.l = 1 * new Date();
 ga("create", __GA_TRACKINGID__, {
  allowAnchor: false,
  cookieExpires: __GA_COOKIELIFETIME__, // Time in seconds
-  cookieFlags: "SameSite=Strict; Secure"
+  cookieFlags: "SameSite=Strict; Secure",
 });
 ga("set", "anonymizeIp", true); // Enable IP Anonymization/IP masking
 ga("send", "pageview");
@@ -46,13 +48,25 @@ ga("send", "pageview");
 if (ENV == "development") window[`ga-disable-${__GA_TRACKINGID__}`] = true;

 const router = new VueRouter({
-  routes: routes
+  routes: routes,
+  mode: "history",
 });

+function redirectIfHasAccessCodeAndOnIncorrectDomain(accessCode) {
+  const site = __sites__.find(site => site.code == accessCode);
+  if (accessCode && site && !!!site.domain.includes(window.location.hostname)) {
+    window.location.href = `${window.location.protocol}//${site.domain}`;
+  }
+}
+
+const accessCode = readCookie("accesscode");
+redirectIfHasAccessCodeAndOnIncorrectDomain(1);
+const component = accessCode ? Vinlottis : AccessCodePage;
+
 new Vue({
  el: "#app",
  router,
-  components: { Vinlottis },
-  template: "<Vinlottis/>",
-  render: h => h(Vinlottis)
+  components: { component },
+  template: "<Vinlottis />",
+  render: h => h(component),
 });