Merge pull request #94 from KevinMidboe/fix/passcode-wall-redirect

Fix/passcode wall redirect

README.md

@@ -10,7 +10,7 @@
 
 <br/>
 
-[**Vinlottis**](https://vinlottis.no) is the unofficial website for Knowit's wine-lottery, usually happening every friday at around 15:00.
+[**Vinlottis**](https://vinlottis.no) is a home-brewed solution for wine-lottery.
 
 
 ### Prerequisites

frontend/components/AccessCodePage.vue

@@ -11,7 +11,7 @@
         <label>Din vinlottis kode:</label>
       </div>
 
-      <div class="codeinput-container">
+      <div id="code-container" class="codeinput-container">
         <input v-model="code" placeholder="KODE" @keyup.enter="submit" />
         <button class="vin-button" @click="submit">ENTER</button>
       </div>
@@ -56,15 +56,24 @@ export default {
       const { video } = this.$refs;
       video.paused ? video.play() : video.pause();
     },
+    smh() {
+      let inputContainer = document.getElementById('code-container')
+      inputContainer.classList.add('shake')
+      if (this.timeout)
+        clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => inputContainer.classList.remove('shake'), 600);
+    },
     submit() {
-      const site = __sites__.find(site => site.code == this.code);
+      const site = __sites__.find(site => site.code?.toLowerCase() == this.code?.toLowerCase());
 
       if (site) {
         createCookie("accesscode", site.code, 14);
-        window.location.href = `${window.location.protocol}//${site.domain}`;
+        const path = (location.pathname+location.search).substr(1)
+        const redirectUrl = `${window.location.protocol}//${site.domain}/${path}`
+        window.location.href = redirectUrl;
+      } else {
+        this.smh()
       }
-
-      return;
     },
   },
 };
@@ -127,6 +136,11 @@ video {
     width: 80%;
   }
 
+  &.shake {
+    animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    animation-iteration-count: infinite;
+  }
+
   input {
     max-width: 24rem;
     width: 100%;
@@ -145,6 +159,7 @@ video {
   button {
     height: 100%;
     max-height: unset;
+    font-weight: bold;
   }
 }
 
@@ -180,6 +195,7 @@ video {
 
     label {
       color: rgba(255, 255, 255, 0.82);
+      text-shadow: 1px 1px black;
       font-size: 1.5rem;
       font-weight: 500;
     }
@@ -205,4 +221,27 @@ video {
 .button-container {
   margin-top: 4rem;
 }
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
 </style>