2020-03-10 09:23:31 +00:00
31 changed files with 1282 additions and 604 deletions
--- a/api/login.js
+++ b/api/login.js
@@ -6,42 +6,50 @@ const router = require("express").Router();
 router.get("/", function(req, res) {
  res.sendFile(path.join(__dirname + "/../public/index.html"));
 });
-/*
+
 router.get("/register", function(req, res) {
  res.sendFile(path.join(__dirname + "/../public/index.html"));
 });

-router.post("/register", function(req, res, next) {
-  console.log("registering user");
-  User.register(
-    new User({ username: req.body.username }),
-    req.body.password,
-    function(err) {
-      if (err) {
-        console.log("error while user register!", err);
-        return next(err);
-      }
+// router.post("/register", function(req, res, next) {
+//   User.register(
+//     new User({ username: req.body.username }),
+//     req.body.password,
+//     function(err) {
+//       if (err) {
+//         console.log("error while user register!", err);
+//         if (err.name == "UserExistsError")
+//           res.status(409).send({ success: false, message: err.message })
+//         else if (err.name == "MissingUsernameError" || err.name == "MissingPasswordError")
+//           res.status(400).send({ success: false, message: err.message })
+//         return next(err);
+//       }

-      console.log("user registered!");
+//       console.log("user registered!", req.body.username);
+
+//       res.redirect("/#/")
+//      }
+//   );
+// });

-      res.redirect("/");
-    }
-  );
-});
-*/
 router.get("/login", function(req, res) {
  res.sendFile(path.join(__dirname + "/../public/index.html"));
 });

-router.post(
-  "/login",
-  passport.authenticate("local", {
-    failureRedirect: "/#/login"
-  }),
-  function(req, res) {
-    res.redirect("/#/update");
-  }
-);
+router.post("/login", function(req, res, next) {
+  passport.authenticate("local", function(err, user, info) { 
+    if (err) {
+      if (err.name == "MissingUsernameError" || err.name == "MissingPasswordError")
+        return res.status(400).send({ success: false, message: err.message })
+      return next(err);
+    }
+
+    if (!user) return res.status(404).send({ success: false, message: "Incorrect username or password" })
+
+    console.log("user logged in:", user)
+    res.redirect("/#/update")
+  })(req, res, next);
+});

 router.get("/logout", function(req, res) {
  req.logout();
--- a/api/subscriptions.js
+++ b/api/subscriptions.js
@@ -9,6 +9,8 @@ mongoose.connect("mongodb://localhost:27017/vinlottis", {
  useNewUrlParser: true
 });

+const mustBeAuthenticated = require(path.join(__dirname + "/../middleware/mustBeAuthenticated"))
+
 const config = require(path.join(__dirname + "/../config/defaults/push"));
 const Subscription = require(path.join(__dirname + "/../schemas/Subscription"));
 const lotteryConfig = require(path.join(
@@ -67,12 +69,7 @@ const saveToDatabase = async subscription => {
  }
 };

-router.route("/send-notification").post(async (req, res) => {
-  if (!req.isAuthenticated()) {
-    res.send(false);
-    return;
-  }
-
+router.route("/send-notification").post(mustBeAuthenticated, async (req, res) => {
  const message = JSON.stringify({
    message: req.body.message,
    title: "Vinlotteri!"
--- a/api/update.js
+++ b/api/update.js
@@ -7,6 +7,7 @@ mongoose.connect("mongodb://localhost:27017/vinlottis", {
 });

 const sub = require(path.join(__dirname + "/../api/subscriptions"));
+const mustBeAuthenticated = require(path.join(__dirname + "/../middleware/mustBeAuthenticated"))

 const Subscription = require(path.join(__dirname + "/../schemas/Subscription"));
 const Purchase = require(path.join(__dirname + "/../schemas/Purchase"));
@@ -20,11 +21,7 @@ router.use((req, res, next) => {
  next();
 });

-router.route("/log/wines").post(async (req, res) => {
-  if (!req.isAuthenticated()) {
-    res.send(false);
-    return;
-  }
+router.route("/log/wines").post(mustBeAuthenticated, async (req, res) => {
  const wines = req.body;
  for (let i = 0; i < wines.length; i++) {
    let wine = wines[i];
@@ -51,12 +48,18 @@ router.route("/log/wines").post(async (req, res) => {
  res.send(true);
 });

-router.route("/log").post(async (req, res) => {
-  if (!req.isAuthenticated()) {
-    res.send(false);
-    return;
-  }
+router.route("/log/schema").get(mustBeAuthenticated, async (req, res) => {
+  let schema = {...PreLotteryWine.schema.obj};
+  let nulledSchema = Object.keys(schema).reduce(
+    (accumulator, current) => {
+      accumulator[current] = "";
+      return accumulator
+    }, {});

+  res.send(nulledSchema)
+})
+
+router.route("/log").post(mustBeAuthenticated, async (req, res) => {
  await PreLotteryWine.deleteMany();

  const purchaseBody = req.body.purchase;
--- a/api/wineinfo.js
+++ b/api/wineinfo.js
@@ -0,0 +1,31 @@
+const express = require("express");
+const path = require("path");
+const router = express.Router();
+const fetch = require('node-fetch')
+
+const mustBeAuthenticated = require(path.join(__dirname + "/../middleware/mustBeAuthenticated"))
+
+router.use((req, res, next) => {
+  next();
+});
+
+router.route("/wineinfo/:ean").get(async (req, res) => {
+  const vinmonopoletResponse = await fetch("https://app.vinmonopolet.no/vmpws/v2/vmp/products/barCodeSearch/" + req.params.ean)
+    .then(resp => resp.json())
+
+  if (vinmonopoletResponse.errors != null) {
+    return vinmonopoletResponse.errors.map(error => {
+      if (error.type == "UnknownProductError") {
+        return res.status(404).json({
+          message: error.message
+        })
+      } else {
+        return next()
+      }
+    })
+  }
+
+  res.send(vinmonopoletResponse);
+});
+
+module.exports = router;
--- a/config/env/lottery.config.example.js
+++ b/config/env/lottery.config.example.js
@@ -4,5 +4,6 @@ module.exports = {
  price: 10,
  message: "VINLOTTERI",
  date: 5,
-  hours: 15
+  hours: 15,
+  apiUrl: undefined
 };
--- a/config/webpack.config.common.js
+++ b/config/webpack.config.common.js
@@ -78,6 +78,7 @@ const webpackConfig = function(isDev) {
        __MESSAGE__: JSON.stringify(env.message),
        __DATE__: env.date,
        __HOURS__: env.hours,
+        __APIURL__: JSON.stringify(env.apiUrl),
        __PUSHENABLED__: JSON.stringify(require("./defaults/push") != false)
      })
    ]
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -45,7 +45,7 @@ webpackConfig = merge(webpackConfig, {
  },
  plugins: [
    new HtmlPlugin({
-      template: "src/templates/Index.html",
+      template: "src/templates/Create.html",
      chunksSortMode: "dependency"
    })
  ]
--- a/middleware/mustBeAuthenticated.js
+++ b/middleware/mustBeAuthenticated.js
@@ -0,0 +1,13 @@
+
+const mustBeAuthenticated = (req, res, next) => {
+  if (!req.isAuthenticated()) {
+    return res.status(401).send({
+      success: false,
+      message: "Du må være logget inn."
+    })
+  }
+
+  return next()
+}
+
+module.exports = mustBeAuthenticated;
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "~7.2",
+    "@zxing/library": "^0.16.0",
    "body-parser": "^1.19.0",
    "chart.js": "^2.9.3",
    "clean-webpack-plugin": "^3.0.0",
--- a/server.js
+++ b/server.js
@@ -8,6 +8,7 @@ const updateApi = require(path.join(__dirname + "/api/update"));
 const retrieveApi = require(path.join(__dirname + "/api/retrieve"));
 const subscriptionApi = require(path.join(__dirname + "/api/subscriptions"));
 const loginApi = require(path.join(__dirname + "/api/login"));
+const wineinfoApi = require(path.join(__dirname + "/api/wineinfo"));
 const bodyParser = require("body-parser");

 const mongoose = require("mongoose");
@@ -80,6 +81,7 @@ app.use("/dist", express.static(path.join(__dirname, "public/dist")));
 app.use("/", loginApi);
 app.use("/api/", updateApi);
 app.use("/api/", retrieveApi);
+app.use("/api/", wineinfoApi);
 app.use("/subscription", subscriptionApi);

 app.get("/dagens", function(req, res) {
--- a/src/api.js
+++ b/src/api.js
@@ -0,0 +1,177 @@
+const BASE_URL = __APIURL__ || "http://localhost:30030/";
+
+const statistics = () => {
+  const url = new URL('/api/purchase/statistics', BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const colorStatistics = () => {
+  const url = new URL("/api/purchase/statistics/color", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const highscoreStatistics = () => {
+  const url = new URL("/api/highscore/statistics", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const overallWineStatistics = () => {
+  const url = new URL("/api/wines/statistics/overall", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+
+const chartWinsByColor = () => {
+  const url = new URL("/api/purchase/statistics/color", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const chartPurchaseByColor = () => {
+  const url = new URL("/api/purchase/statistics", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+
+const prelottery = () => {
+  const url = new URL("/api/wines/prelottery", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const log = (sendObject) => {
+  const url = new URL("/api/log", BASE_URL)
+
+  const options = {
+    headers: {
+      "Content-Type": "application/json"
+    },
+    method: "POST",
+    body: JSON.stringify(sendObject)
+  } 
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+}
+
+const logWines = (wines) => {
+  const url = new URL("/api/log/wines", BASE_URL)
+
+  const options = {
+    headers: {
+      "Content-Type": "application/json"
+    },
+    method: "POST",
+    body: JSON.stringify(wines)
+  }
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+}
+
+const wineSchema = () => {
+  const url = new URL("/api/log/schema", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const barcodeToVinmonopolet = (id) => {
+  const url = new URL("/api/wineinfo/" + id, BASE_URL)
+
+  return fetch(url.href)
+    .then(async (resp) => {
+      if (!resp.ok) {
+        if (resp.status == 404) {
+          throw await resp.json()
+        }
+      } else {
+        return resp.json()
+      }
+    })
+}
+
+const handleErrors = async (resp) => {
+  if ([400, 409].includes(resp.status)) {
+    throw await resp.json()
+  } else {
+    console.error("Unexpected error occured when login/register user:", resp)
+    throw await resp.json()
+  }
+}
+
+const login = (username, password) => {
+  const url = new URL("/login", BASE_URL)
+  const options = {
+    headers: {
+      "Content-Type": "application/json"
+    },
+    method: "POST",
+    redirect: "follow",
+    body: JSON.stringify({ username, password })
+  }
+
+  return fetch(url.href, options)
+    .then(resp => {
+      if (resp.ok) {        
+        if (resp.bodyUsed)
+          return resp.json()
+        else
+          return resp
+      } else {
+        return handleErrors(resp)
+      }
+    })
+}
+
+const register = (username, password) => {
+  const url = new URL("/register", BASE_URL)
+  const options = {
+    headers: {
+      "Content-Type": "application/json"
+    },
+    method: "POST",
+    redirect: 'follow',
+    body: JSON.stringify({ username, password })
+  }
+
+  return fetch(url.href, options)
+    .then(resp => {
+      if (resp.ok) {
+        if (resp.bodyUsed)
+          return resp.json()
+        else
+          return resp
+      } else {
+        return handleErrors(resp)
+      }
+    })
+}
+
+export {
+  statistics,
+  colorStatistics,
+  highscoreStatistics,
+  overallWineStatistics,
+  chartWinsByColor,
+  chartPurchaseByColor,
+  prelottery,
+  log,
+  logWines,
+  wineSchema,
+  barcodeToVinmonopolet,
+  login,
+  register
+}
--- a/src/components/AllWinesPage.vue
+++ b/src/components/AllWinesPage.vue
@@ -3,7 +3,7 @@
    <div class="container">
      <h1 class="title">Alle viner</h1>
      <div class="wines-container">
-        <Wine :wine="wine" v-for="wine in wines" />
+        <Wine :wine="wine" v-for="wine in wines" :key="wine" />
      </div>
    </div>
  </div>
@@ -13,6 +13,7 @@
 import { page, event } from "vue-analytics";
 import Banner from "@/ui/Banner";
 import Wine from "@/ui/Wine";
+import { overallWineStatistics } from "@/api";

 export default {
  components: {
@@ -25,8 +26,8 @@ export default {
    };
  },
  async mounted() {
-    const _wines = await fetch("/api/wines/statistics/overall");
-    this.wines = (await _wines.json()).sort((a, b) =>
+    const wines = await overallWineStatistics();
+    this.wines = wines.sort((a, b) =>
      a.rating > b.rating ? -1 : 1
    );
  }
--- a/src/components/CreatePage.vue
+++ b/src/components/CreatePage.vue
@@ -1,57 +1,50 @@
 <template>
  <div class="outer">
-    <div>
-      <h2>Vinlottis</h2>
-      <form method="post" action="/register">
-        <input type="text" name="username" placeholder="Brukernavn" />
-        <input type="password" name="password" placeholder="Passord" />
-        <input type="submit" value="registrer bruker" />
-      </form>
-    </div>
+    <h2>Vinlottis brukerregistering</h2>
+    <form aria-label="User registration" @submit.prevent>
+      <div class="label-div">
+        <label>Brukernavn</label>
+        <input type="text" v-model="username" placeholder="Brukernavn" @keyup.enter="login" />
+      </div>
+      <div class="label-div row">
+        <label>Passord</label>
+        <input type="password" v-model="password" placeholder="Passord" @keyup.enter="login" />
+      </div>
+
+      <button class="vin-button" @click="register">Registrer bruker</button>
+
+      <p v-if="error" class="error">{{ error }}</p>
+    </form>
  </div>
 </template>
 <script>
-export default {};
+import { register } from "@/api";
+
+export default {
+  data() {
+    return {
+      username: undefined,
+      password: undefined,
+      error: undefined
+    }
+  },
+  methods: {
+    register() {
+      register(this.username, this.password)
+        .then(resp => {
+          if (resp.redirected) { this.$router.push("/") }
+        })
+        .catch(this.registerErrorResponse)
+
+    },
+    registerErrorResponse(error) {
+      console.log("error", error)
+      this.error = error.message || error
+    }
+  }
+};
 </script>

 <style lang="scss" scoped>
-@import "../styles/global.scss";
-@import "../styles/media-queries.scss";
-div {
-  font-family: Arial;
-}
-.outer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100vw;
-}
-h2 {
-  width: 100vw;
-  text-align: center;
-  font-size: 3rem;
-  font-family: knowit, Arial;
-}
-
-form {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-}
-
-input {
-  margin: 20px;
-  width: 30vw;
-  font-size: 3rem;
-  border: none;
-  border-bottom: 1px solid black;
-}
-
-input[type="submit"] {
-  border: 1px solid black;
-}
+@import "../styles/loginAndRegister";
 </style>
--- a/src/components/GeneratePage.vue
+++ b/src/components/GeneratePage.vue
@@ -6,28 +6,28 @@
    </p>
    <div class="input-line">
      <label for="redCheckbox">
-        <input type="checkbox" id="redCheckbox" v-model="redCheckbox" />
+        <input type="checkbox" id="redCheckbox" v-model="redCheckbox" @click="generateColors"/>
        <span class="border">
          <span class="checkmark"></span>
        </span>
        <span class="text">Rød</span>
      </label>
      <label for="blueCheckbox">
-        <input type="checkbox" id="blueCheckbox" v-model="blueCheckbox" />
+        <input type="checkbox" id="blueCheckbox" v-model="blueCheckbox" @click="generateColors"/>
        <span class="border">
          <span class="checkmark"></span>
        </span>
        <span class="text">Blå</span>
      </label>
      <label for="yellowCheckbox">
-        <input type="checkbox" id="yellowCheckbox" v-model="yellowCheckbox" />
+        <input type="checkbox" id="yellowCheckbox" v-model="yellowCheckbox" @click="generateColors"/>
        <span class="border">
          <span class="checkmark"></span>
        </span>
        <span class="text">Gul</span>
      </label>
      <label for="greenCheckbox">
-        <input type="checkbox" id="greenCheckbox" v-model="greenCheckbox" />
+        <input type="checkbox" id="greenCheckbox" v-model="greenCheckbox" @click="generateColors"/>
        <span class="border">
          <span class="checkmark"></span>
        </span>
@@ -41,7 +41,7 @@
        @keyup.enter="generateColors"
        v-model="numberOfBallots"
      />
-      <button @click="generateColors">Generer</button>
+      <button class="vin-button" @click="generateColors">Generer</button>
    </div>

    <div class="colors">
@@ -53,7 +53,7 @@
      ></div>
    </div>

-    <div class="color-count-container" v-if="generated && !generating">
+    <div class="color-count-container" v-if="generated">
      <span>Rød: {{ red }}</span>
      <span>Blå: {{ blue }}</span>
      <span>Gul: {{ yellow }}</span>
@@ -118,7 +118,12 @@ export default {
      if (time == 5) {
        this.generating = false;
        this.generated = true;
-        if (this.numberOfBallots > 1 && new Set(this.colors).size == 1) {
+        if (this.numberOfBallots > 1 &&
+          [this.redCheckbox, this.greenCheckbox, this.yellowCheckbox, this.blueCheckbox].filter(value => value == true).length == 1) {
+          return
+        }
+
+        if (new Set(this.colors).size == 1) {
          alert("BINGO");
        }

@@ -283,10 +288,9 @@ button {

 input {
  font-size: 1.5rem;
-  padding: 8px;
+  padding: 7px;
  margin: 0;
  height: 3rem;
-  max-height: 3rem;
  border: 1px solid rgba(#333333, 0.3);
 }

@@ -351,23 +355,6 @@ label .text {
  }
 }

-button {
-  border: none;
-  background: #b7debd;
-  color: #333;
-  padding: 10px 30px;
-  margin: 0;
-  width: fit-content;
-  font-size: 1.3rem;
-  display: block;
-  height: calc(3rem + 18px);
-  display: inline-flex;
-  max-height: calc(3rem + 18px);
-
-  // disable-dbl-tap-zoom
-  touch-action: manipulation;
-}
-
 .colors-text {
  display: flex;
  flex-direction: row;
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -1,57 +1,49 @@
 <template>
  <div class="outer">
-    <div>
-      <h2>Vinlottis</h2>
-      <form method="post" action="/login">
-        <input type="text" name="username" placeholder="Brukernavn" />
-        <input type="password" name="password" placeholder="Passord" />
-        <input type="submit" value="login" />
-      </form>
-    </div>
+    <h2>Vinlottis brukerinnlogging</h2>
+    <form aria-label="User signin" @submit.prevent>
+      <div class="label-div">
+        <label>Brukernavn</label>
+        <input type="text" v-model="username" placeholder="Brukernavn" @keyup.enter="login" />
+      </div>
+      <div class="label-div row">
+        <label>Passord</label>
+        <input type="password" v-model="password" placeholder="Passord" @keyup.enter="login" />
+      </div>
+
+      <button class="vin-button" @click="login">Logg inn</button>
+
+      <div v-if="error" class="error">{{ error }}</div>
+    </form>
  </div>
 </template>
 <script>
-export default {};
+import { login } from "@/api";
+
+export default {
+  data() {
+    return {
+      username: undefined, 
+      password: undefined,
+      error: undefined
+    }
+  },
+  methods: {
+    login() {
+      login(this.username, this.password)
+        .then(resp => {
+          if (resp.redirected) { this.$router.push("update") }
+        })
+        .catch(this.loginErrorResponse)
+
+    },
+    loginErrorResponse(error) {
+      this.error = error.message || error
+    }
+  }
+};
 </script>

 <style lang="scss" scoped>
-@import "../styles/global.scss";
-@import "../styles/media-queries.scss";
-div {
-  font-family: Arial;
-}
-.outer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100vw;
-}
-h2 {
-  width: 100vw;
-  text-align: center;
-  font-size: 3rem;
-  font-family: knowit, Arial;
-}
-
-form {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-}
-
-input {
-  margin: 20px;
-  width: 30vw;
-  font-size: 3rem;
-  border: none;
-  border-bottom: 1px solid black;
-}
-
-input[type="submit"] {
-  border: 1px solid black;
-}
+@import "../styles/loginAndRegister";
 </style>
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -1,382 +1,448 @@
 <template>
-  <div>
+  <div class="page-container">
    <h1>Registrering</h1>
    <div class="notification-element">
      <div class="label-div">
        <label for="notification">Push-melding</label>
-        <input id="notification" type="text" v-model="pushMessage" />
+        <textarea id="notification" type="text" rows="3" v-model="pushMessage" placeholder="Push meldingtekst" />
      </div>
    </div>
    <div class="button-container">
-      <button @click="sendPush">Send push</button>
+      <button class="vin-button" @click="sendPush">Send push</button>
    </div>
-    <div class="color-container">
-      <div class="label-div">
-        <label for="blue">Blå</label>
-        <input id="blue" type="number" v-model="blue" />
-      </div>
-      <div class="label-div">
-        <label for="red">Rød</label>
-        <input id="red" type="number" v-model="red" />
-      </div>
-      <div class="label-div">
-        <label for="green">Grønn</label>
-        <input id="green" type="number" v-model="green" />
-      </div>
-      <div class="label-div">
-        <label for="yellow">Gul</label>
-        <input id="yellow" type="number" v-model="yellow" />
-      </div>
-      <div class="label-div">
-        <label for="yellow">Kjøpt for sum</label>
-        <input id="yellow" type="number" v-model="payed" />
-      </div>
-    </div>
-    <div class="button-container">
-      <button @click="addWinner">Legg til en vinner</button>
-      <button @click="sendInfo">Send inn</button>
-    </div>
-    <div class="winner-container" v-if="winners.length > 0">
-      Vinnere
-      <div v-for="winner in winners" class="winner-element">
-        <hr />
-        <div class="winnner-container-inner">
-          <div class="input-container">
-            <div class="wine-image">
-              <img :src="winner.wine.image" />
-            </div>
-            <div class="label-div">
-              <input type="text" v-model="winner.name" placeholder="Navn vinner" />
-            </div>
-            <div class="label-div">
-              <div class="color-selector">
-                <button
-                  class="blue"
-                  :class="{'active': winner.color == 'blue' }"
-                  @click="updateColorForWinner(winner, 'blue')"
-                ></button>
-                <button
-                  class="red"
-                  :class="{'active': winner.color == 'red' }"
-                  @click="updateColorForWinner(winner, 'red')"
-                ></button>
-                <button
-                  class="green"
-                  :class="{'active': winner.color == 'green' }"
-                  @click="updateColorForWinner(winner, 'green')"
-                ></button>
-                <button
-                  class="yellow"
-                  :class="{'active': winner.color == 'yellow' }"
-                  @click="updateColorForWinner(winner, 'yellow')"
-                ></button>
-              </div>

-              <span
-                class="color-selected"
-              >Selected color: {{ winner.color ? winner.color : '(none)' }}</span>
-            </div>
-            <div class="label-div">
-              <input type="text" v-model="winner.wine.name" placeholder="Vin-navn" />
-            </div>
-            <div class="label-div">
-              <input type="text" v-model="winner.wine.vivinoLink" placeholder="Vivino-link" />
-            </div>
-            <div class="label-div">
-              <input type="text" v-model="winner.wine.rating" placeholder="Rating" />
-            </div>
+    <hr />
+
+    <h2 id="addwine-title">Prelottery</h2>
+    
+    <ScanToVinmonopolet @wine="wineFromVinmonopoletScan" v-if="showCamera"/>
+
+    <div class="button-container">
+      <button class="vin-button" @click="showCamera = !showCamera">
+        {{ showCamera ? "Skjul camera" : "Legg til vin med camera" }}
+      </button>
+      
+      <button class="vin-button" @click="addWine">Legg til en vin manuelt</button>
+    </div>
+
+    <div v-if="wines.length > 0">
+      <wine v-for="wine in wines" :key="key" :wine="wine">
+        <div class="button-container row">
+          <button class="vin-button" @click="editWine = amIBeingEdited(wine) ? false : wine">
+            {{ amIBeingEdited(wine) ? "Lukk" : "Rediger" }}
+          </button>
+          <button class="red vin-button" @click="deleteWine(wine)">Slett</button>
+        </div>
+
+        <div v-if="amIBeingEdited(wine)" class="wine-edit">
+          <div class="label-div" v-for="key in Object.keys(wine)" :key="key">
+            <label>{{ key }}</label>
+            <input type="text" v-model="wine[key]" :placeholder="key" />
          </div>
        </div>
+      </wine>
+    </div>
+    <div class="button-container" v-if="wines.length > 0">  
+      <button class="vin-button" @click="sendWines">Send inn viner</button>
+    </div>
+
+    <hr />
+
+    <h2>Lottery</h2>
+
+    <h3>Legg til lodd kjøpt</h3>
+    <div class="colors">
+      <div v-for="color in lotteryColorBoxes" :class="color.css + ' colors-box'" :key="color">
+       <div class="colors-overlay">
+          <p>{{ color.name }} kjøpt</p>
+          <input v-model="color.value"
+                 min="0"
+                 :placeholder="0"
+                 type="number" />
+        </div>
+      </div>
+
+      <div class="label-div">
+        <label>Totalt kjøpt for:</label>
+        <input v-model="payed" placeholder="NOK" type="number" :step="price || 1" min="0" />
      </div>
    </div>
-    <div class="button-container">
-      <button @click="addWine">Legg til en vin</button>
-      <button @click="sendWines">Send inn viner</button>
-    </div>
-    <div class="wines-container" v-if="wines.length > 0">
-      Viner
-      <div v-for="wine in wines" class="wine-element">
-        <hr />
-        <div class="label-div">
-          <input type="text" v-model="wine.name" placeholder="Vin-navn" />
+
+    <h3>Vinnere</h3>
+    <div class="winner-container" v-if="winners.length > 0">
+      <wine v-for="winner in winners" :key="winner" :wine="winner.wine">
+        <div class="winner-element">
+          <div class="color-selector">
+            <div class="label-div">
+              <label>Farge vunnet</label>
+            </div>
+            <button
+              class="blue"
+              :class="{'active': winner.color == 'blue' }"
+              @click="winner.color = 'blue'"
+            ></button>
+            <button
+              class="red"
+              :class="{'active': winner.color == 'red' }"
+              @click="winner.color = 'red'"
+            ></button>
+            <button
+              class="green"
+              :class="{'active': winner.color == 'green' }"
+              @click="winner.color = 'green'"
+            ></button>
+            <button
+              class="yellow"
+              :class="{'active': winner.color == 'yellow' }"
+              @click="winner.color = 'yellow'"
+            ></button>
+          </div>
+
+          <div class="label-div">
+            <label for="winner-name">Navn vinner</label>
+            <input id="winner-name" type="text" placeholder="Navn" v-model="winner.name"/>
+          </div>
        </div>
-        <div class="label-div">
-          <input type="text" v-model="wine.vivinoLink" placeholder="Vivino-link" />
-        </div>
-        <div class="label-div">
-          <input type="text" v-model="wine.id" placeholder="Id" />
-        </div>
-        <div class="label-div">
-          <input type="text" v-model="wine.image" placeholder="Bilde" />
-        </div>
-        <div class="label-div">
-          <input type="text" v-model="wine.rating" placeholder="Rating" />
-        </div>
-        <hr />
+      </wine>
+
+      <div class="button-container">
+        <button class="vin-button" @click="sendInfo">Send inn vinnere</button>
+        <button class="vin-button" @click="resetWinnerDataInStorage">Reset local wines</button>
      </div>
    </div>
+
+  <TextToast v-if="showToast"
+             :text="toastText"
+             v-on:closeToast="showToast = false" />
  </div>
 </template>

 <script>
-export default {
-  data() {
-    return {
-      red: 0,
-      blue: 0,
-      green: 0,
-      yellow: 0,
-      payed: 0,
-      winners: [],
-      wines: [],
-      pushMessage: ""
-    };
-  },
-  async mounted() {
-    const _wines = await fetch("/api/wines/prelottery");
-    const wines = await _wines.json();
-    for (let i = 0; i < wines.length; i++) {
-      let wine = wines[i];
-      this.winners.push({
-        name: "",
-        color: "",
-        wine: {
-          name: wine.name,
-          vivinoLink: wine.vivinoLink,
-          rating: wine.rating,
-          image: wine.image,
-          id: wine.id
-        }
-      });
-    }
-  },
-  methods: {
-    sendPush: async function() {
-      let _response = await fetch("/subscription/send-notification", {
-        headers: {
-          "Content-Type": "application/json"
-          // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        method: "POST",
-        body: JSON.stringify({ message: this.pushMessage })
-      });
-      let response = await _response.json();
-      if (response) {
-        alert("Sendt!");
-      } else {
-        alert("Noe gikk galt!");
-      }
-    },
-    addWine: function(event) {
-      this.wines.push({
-        name: "",
-        vivinoLink: "",
-        rating: "",
-        id: "",
-        image: ""
-      });
-    },
-    updateColorForWinner(winner, color) {
-      winner.color = winner.color == color ? null : color;
-    },
-    sendWines: async function() {
-      let _response = await fetch("/api/log/wines", {
-        headers: {
-          "Content-Type": "application/json"
-          // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        method: "POST",
-        body: JSON.stringify(this.wines)
-      });
-      let response = await _response.json();
-      if (response == true) {
-        alert("Sendt!");
-        window.location.reload();
-      } else {
-        alert("Noe gikk galt under innsending");
-      }
-    },
-    addWinner: function(event) {
-      this.winners.push({
-        name: "",
-        color: "",
-        wine: {
-          name: "",
-          vivinoLink: "",
-          rating: ""
-        }
-      });
-    },
-    sendInfo: async function(event) {
-      let sendObject = {
-        purchase: {
-          date: new Date(),
-          blue: this.blue,
-          red: this.red,
-          yellow: this.yellow,
-          green: this.green
-        },
-        winners: this.winners
+  import { prelottery, log, logWines, wineSchema } from "@/api";
+  import TextToast from "@/ui/TextToast";
+  import Wine from "@/ui/Wine";
+  import ScanToVinmonopolet from "@/ui/ScanToVinmonopolet";
+
+  export default {
+    components: { TextToast, Wine, ScanToVinmonopolet },
+    data() {
+      return {
+        red: 0,
+        blue: 0,
+        green: 0,
+        yellow: 0,
+        payed: undefined,
+        winners: [],
+        wines: [],
+        pushMessage: "",
+        toastText: undefined,
+        showToast: false,
+        showCamera: false,
+        editWine: false,
+        price: __PRICE__
      };
+    },
+    created() {
+      this.fetchAndAddPrelotteryWines()
+        .then(this.getWinnerdataFromStorage)

-      if (sendObject.purchase.red == undefined) {
-        alert("Rød må defineres");
-        return;
-      }
-      if (sendObject.purchase.green == undefined) {
-        alert("Grønn må defineres");
-        return;
-      }
-      if (sendObject.purchase.yellow == undefined) {
-        alert("Gul må defineres");
-        return;
-      }
-      if (sendObject.purchase.blue == undefined) {
-        alert("Blå må defineres");
-        return;
+      window.addEventListener("unload", this.setWinnerdataToStorage);
+    },
+    beforeDestroy() {
+      this.setWinnerdataToStorage()
+    },
+    computed: {
+      lotteryColorBoxes() {
+        return [{ value: this.blue, name: "Blå", css: "blue" },
+        { value: this.red, name: "Rød", css: "red" },
+        { value: this.green, name: "Grønn", css: "green" },
+        { value: this.yellow, name: "Gul", css: "yellow" }]
      }
+    },
+    methods: {
+      amIBeingEdited(wine) {
+        return this.editWine.id == wine.id && this.editWine.name == wine.name;
+      },
+      async fetchAndAddPrelotteryWines() {
+        const wines = await prelottery()

-      sendObject.purchase.bought =
-        parseInt(this.blue) +
-        parseInt(this.red) +
-        parseInt(this.green) +
-        parseInt(this.yellow);
-      const stolen = sendObject.purchase.bought - parseInt(this.payed) / 10;
-      if (isNaN(stolen) || stolen == undefined) {
-        alert("Betalt må registreres");
-        return;
-      }
-      sendObject.purchase.stolen = stolen;
+        for (let i = 0; i < wines.length; i++) {
+          let wine = wines[i];
+          this.winners.push({
+            name: "",
+            color: "",
+            wine: {
+              name: wine.name,
+              vivinoLink: wine.vivinoLink,
+              rating: wine.rating,
+              image: wine.image,
+              id: wine.id
+            }
+          });
+        }
+      },
+      wineFromVinmonopoletScan(wineResponse) {
+        if (this.wines.map(wine => wine.name).includes(wineResponse.name)) {
+          this.toastText = "Vinen er allerede lagt til."
+          this.showToast = true
+          return
+        }

-      if (sendObject.winners.length == 0) {
-        alert("Det må være med vinnere");
-        return;
-      }
-      for (let i = 0; i < sendObject.winners.length; i++) {
-        let currentWinner = sendObject.winners[i];
+        this.toastText = "Fant og la til vin:<br>" + wineResponse.name 
+        this.showToast = true;

-        if (currentWinner.name == undefined || currentWinner.name == "") {
-          alert("Navn må defineres");
+        this.wines.unshift(wineResponse)
+      },
+      sendPush: async function() {
+        let _response = await fetch("/subscription/send-notification", {
+          headers: {
+            "Content-Type": "application/json"
+            // 'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          method: "POST",
+          body: JSON.stringify({ message: this.pushMessage })
+        });
+        let response = await _response.json();
+        if (response) {
+          alert("Sendt!");
+        } else {
+          alert("Noe gikk galt!");
+        }
+      },
+      addWine: async function(event) {
+        const wine = await wineSchema()
+
+        this.editWine = wine;
+        this.wines.unshift(wine);
+      },
+      deleteWine(deletedWine) {
+        this.wines = this.wines.filter(wine => wine.name != deletedWine.name)
+      },
+      sendWines: async function() {
+        let response = await logWines(this.wines)
+        if (response == true) {
+          alert("Sendt!");
+          window.location.reload();
+        } else {
+          alert("Noe gikk galt under innsending");
+        }
+      },
+      addWinner: function(event) {
+        this.winners.push({
+          name: "",
+          color: "",
+          wine: {
+            name: "",
+            vivinoLink: "",
+            rating: ""
+          }
+        });
+      },
+      sendInfo: async function(event) {
+        let sendObject = {
+          purchase: {
+            date: new Date(),
+            blue: this.blue,
+            red: this.red,
+            yellow: this.yellow,
+            green: this.green
+          },
+          winners: this.winners
+        };
+
+        if (sendObject.purchase.red == undefined) {
+          alert("Rød må defineres");
          return;
        }
-        if (currentWinner.color == undefined || currentWinner.color == "") {
-          alert("Farge må defineres");
+        if (sendObject.purchase.green == undefined) {
+          alert("Grønn må defineres");
+          return;
+        }
+        if (sendObject.purchase.yellow == undefined) {
+          alert("Gul må defineres");
+          return;
+        }
+        if (sendObject.purchase.blue == undefined) {
+          alert("Blå må defineres");
          return;
        }
-      }

-      let _response = await fetch("/api/log/", {
-        headers: {
-          "Content-Type": "application/json"
-          // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        method: "POST",
-        body: JSON.stringify(sendObject)
-      });
-      let response = await _response.json();
-      if (response == true) {
-        alert("Sendt!");
+        sendObject.purchase.bought =
+          parseInt(this.blue) +
+          parseInt(this.red) +
+          parseInt(this.green) +
+          parseInt(this.yellow);
+        const stolen = sendObject.purchase.bought - parseInt(this.payed) / 10;
+        if (isNaN(stolen) || stolen == undefined) {
+          alert("Betalt må registreres");
+          return;
+        }
+        sendObject.purchase.stolen = stolen;
+
+        if (sendObject.winners.length == 0) {
+          alert("Det må være med vinnere");
+          return;
+        }
+        for (let i = 0; i < sendObject.winners.length; i++) {
+          let currentWinner = sendObject.winners[i];
+
+          if (currentWinner.name == undefined || currentWinner.name == "") {
+            alert("Navn må defineres");
+            return;
+          }
+          if (currentWinner.color == undefined || currentWinner.color == "") {
+            alert("Farge må defineres");
+            return;
+          }
+        }
+
+        let response = await log(sendObject)
+        if (response == true) {
+          alert("Sendt!");
+          window.location.reload();
+        } else {
+          alert(response.message || "Noe gikk galt under innsending");
+        }
+      },
+      getWinnerdataFromStorage() {
+        let localWinners = localStorage.getItem("winners");
+        if (localWinners) {
+          localWinners = JSON.parse(localWinners);
+
+          this.winners = this.winners.map(winner => {
+            const localWinnerMatch = localWinners.filter(localWinner => localWinner.wine.name == winner.wine.name || localWinner.wine.id == winner.wine.id)
+
+            if (localWinnerMatch.length > 0) {
+              winner.name = localWinnerMatch[0].name || winner.name
+              winner.color = localWinnerMatch[0].color || winner.name
+            }
+      
+            return winner
+          })
+        }
+
+        let localColors = localStorage.getItem("colorValues");
+        if (localColors) {
+          localColors = localColors.split(",")
+          this.lotteryColorBoxes.forEach((color, i) => {
+            const localColorValue = Number(localColors[i])
+            color.value = localColorValue == 0 ? null : localColorValue
+          })
+        }
+      },
+      setWinnerdataToStorage() {
+        console.log("saving localstorage")
+        localStorage.setItem("winners", JSON.stringify(this.winners))
+        localStorage.setItem("colorValues", this.lotteryColorBoxes.map(color => Number(color.value)))
+        window.removeEventListener("unload", this.setWinnerdataToStorage)
+      },
+      resetWinnerDataInStorage() {
+        this.winners = []
+        this.fetchAndAddPrelotteryWines()
+          .then(resp => this.winners = resp)
+        this.lotteryColorBoxes.map(color => color.value = null)
        window.location.reload();
-      } else {
-        alert("Noe gikk galt under innsending");
      }
    }
-  }
-};
+  };
 </script>

 <style lang="scss" scoped>
@import "../styles/global.scss";
@import "../styles/media-queries.scss";
+
 h1 {
-  width: 100vw;
+  width: 100%;
  text-align: center;
  font-family: knowit, Arial;
 }
-div {
-  font-size: 2rem;
-  font-family: Arial;
-}
-input {
-  font-size: 1.5rem;
+
+h2 {
  width: 100%;
-}
-hr {
-  width: 50vw;
-}
-
-.winner-container,
-.wine-container,
-.wines-container {
-  width: 50vw;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: auto;
-
-  @include mobile {
-    width: 80%;
-  }
-}
-
-.winner-element,
-.wine-element,
-.color-container,
-.button-container {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-
-  button {
-    cursor: pointer;
-  }
-}
-
-.color-container {
-  width: 50%;
-  margin: auto;
-}
-
-.wines-container {
  text-align: center;
+  font-size: 1.6rem;
+  font-family: knowit, Arial
 }

-.label-div {
-  display: flex;
-  width: 50%;
-  flex-direction: column;
-  padding-bottom: 20px;
-  margin: auto;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
+hr {
+  width: 90%;
+  margin: 2rem auto;
+  color: grey;
+}

-  @include mobile {
-    margin-top: 1.2rem;
+.page-container {
+  padding: 0 1.5rem 3rem;
+
+  @include desktop {
+    max-width: 60vw;
+    margin: 0 auto;
+  }
+}
+.winner-container {
+  width: max-content;
+  max-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .button-container {
+    width: 100%;
+  }
+}
+
+.notification-element {
+  margin-bottom: 2rem;
+}
+.winner-element {
+  display: flex;
+  flex-direction: row;
+}
+.wine-element {
+  align-items: flex-start;
+}
+
+.wine-edit {
+  margin-top: 1.5rem;
+
+  label {
+    margin-top: 0.75rem;
+    margin-bottom: 0;
  }
 }

 .color-selector {
+  margin-bottom: 0.65rem;
+  margin-right: 1rem;
+
+  @include mobile {
+    max-width: 150px;
+  }
+
  .active {
-    border: 2px solid black;
-    margin-bottom: 1rem;
+    border: 2px solid unset;
+
+    &.green {
+      border-color: $green;
+    }
+    &.blue {
+      border-color: $dark-blue;
+    }
+    &.red {
+      border-color: $red;
+    }
+    &.yellow {
+      border-color: $dark-yellow;
+    }
  }

  button {
    border: 2px solid transparent;
-    color: #333;
-    padding: 10px 30px;
-    margin: 0;
-    font-size: 1.3rem;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
-    max-height: calc(3rem + 18px);
-    max-width: calc(3rem + 18px);
-    margin: 10px;
+    height: 2.5rem;
+    width: 2.5rem;
+
    // disable-dbl-tap-zoom
    touch-action: manipulation;

@@ -399,86 +465,88 @@ hr {
  }
 }

-.color-selected {
-  margin-bottom: 2rem;
-
-  @include mobile {
-    display: block;
-    width: 100%;
-    font-size: 1.5rem !important;
-  }
-}
-
-.label-div label {
-  padding: 0 6px;
+.colors {
  display: flex;
  flex-direction: row;
+  flex-wrap: wrap;
  justify-content: center;
-  align-items: center;
+  max-width: 1400px;
+  margin: 3rem auto 0;

-  font-size: 1.22rem;
-}
-
-.input-container {
  @include mobile {
-    width: 100%;
+    margin: 1.8rem auto 0;
  }

-  & .label-div {
+  .label-div {
+    margin-top: 0.5rem;
    width: 100%;
  }
 }

-.winnner-container-inner {
+.colors-box {
+  width: 150px;
+  height: 150px;
+  margin: 20px;
+  -webkit-mask-image: url(/../../public/assets/images/lodd.svg);
+  background-repeat: no-repeat;
+  mask-image: url(/../../public/assets/images/lodd.svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @include mobile {
+    width: 120px;
+    height: 120px;
+    margin: 10px;
+  }
+}
+
+.colors-overlay {
  display: flex;
+  justify-content: center;
+  height: 100%;
+  padding: 0 0.5rem;
+  position: relative;

-  @include mobile {
-    flex-direction: column;
+  p {
+    margin: 0;
+    font-size: 0.8rem;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    font-weight: 600;
+    position: absolute;
+    top: .4rem;
+    left: .5rem;
+  }
+
+  input {
+    width: 70%;
+    border: 0;
+    padding: 0;
+    font-size: 3rem;
+    height: unset;
+    max-height: unset;
+    position: absolute;
+    bottom: 1.5rem;
  }
 }

-.wine-image {
-  padding-left: 30px;
-
-  & img {
-    height: 400px;
-  }
+.green, .green .colors-overlay > input {
+  background-color: $light-green;
+  color: $green;
 }

-input,
-button {
-  font-size: 1.5rem;
+.blue, .blue .colors-overlay > input {
+  background-color: $light-blue;
+  color: $blue;
 }

-select {
-  width: 100%;
-  font-size: 1.5rem;
+.yellow, .yellow .colors-overlay > input {
+  background-color: $light-yellow;
+  color: $yellow;
 }

-input {
-  font-size: 1.5rem;
-  padding: 8px;
-  margin: 0;
-  height: 3rem;
-  max-height: 3rem;
-  border: 1px solid rgba(#333333, 0.3);
-}
-
-button {
-  border: none;
-  background: #b7debd;
-  color: #333;
-  padding: 10px 30px;
-  margin: 0;
-  width: fit-content;
-  font-size: 1.3rem;
-  display: block;
-  height: calc(3rem + 18px);
-  display: inline-flex;
-  max-height: calc(3rem + 18px);
-  width: 400px;
-  margin: 10px;
-  // disable-dbl-tap-zoom
-  touch-action: manipulation;
+.red, .red .colors-overlay > input {
+  background-color: $light-red;
+  color: $red;
 }
 </style>
--- a/src/components/TodaysPage.vue
+++ b/src/components/TodaysPage.vue
@@ -3,7 +3,7 @@
    <div class="container">
      <h1 class="title">Dagens viner</h1>
      <div class="wines-container">
-        <a :href="wine.vivinoLink" v-for="wine in wines">
+        <a :href="wine.vivinoLink" v-for="wine in wines" :key="wine">
          <div class="inner-wine-container">
            <div class="left">
              <img :src="wine.image" class="wine-image" />
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,4 +1,5 @@
@import "./media-queries.scss";
+@import "./variables.scss";

@font-face {
  font-family: "knowit";
@@ -41,3 +42,102 @@ body {
    font-size: 1.15rem;
  }
 }
+
+.label-div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  label {
+    margin-bottom: 0.25rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  input {
+    margin: 0;
+    margin-bottom: auto;
+    height: 2rem;
+    padding: 0.5rem;
+    min-width: 0;
+    width: 98%;
+    padding: 1%;
+  }
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+
+  > *:not(:last-child) {
+    margin-right: 2rem;
+  }
+
+  @include mobile &:not(.row) {
+    flex-direction: column;
+    align-items: center;
+
+    > *:not(:last-child) {
+      margin-right: unset;
+      margin-bottom: .75rem;
+    }
+  }
+}
+
+input, textarea {
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+  font-size: 1.1rem;
+  border: 1px solid rgba(#333333, 0.3);
+}
+
+.vin-button {
+  font-family: Arial;
+  $color: #b7debd;
+  position: relative;
+  display: inline-block;
+  background: $color;
+  color: #333;
+  padding: 10px 30px;
+  margin: 0;
+  border: 0;
+  width: fit-content;
+  font-size: 1.3rem;
+  height: 4rem;
+  max-height: 4rem;
+  cursor: pointer;
+  font-weight: 500;
+  transition: transform 0.5s ease;
+  -webkit-font-smoothing: antialiased;
+
+  // disable-dbl-tap-zoom
+  touch-action: manipulation;
+
+  &::after {
+    content: '';
+    position: absolute;
+    transition: opacity 0.3s ease-in-out;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.07),
+                0 2px 4px rgba(0,0,0,0.07),
+                0 4px 8px rgba(0,0,0,0.07),
+                0 8px 16px rgba(0,0,0,0.07),
+                0 16px 32px rgba(0,0,0,0.07),
+                0 32px 64px rgba(0,0,0,0.07);
+  }
+
+  &:hover {
+    transform: scale(1.02) translateZ(0);
+
+    &::after {
+      opacity: 1;
+    }
+  }
+}
--- a/src/styles/loginAndRegister.scss
+++ b/src/styles/loginAndRegister.scss
@@ -0,0 +1,71 @@
+@import "./media-queries.scss";
+@import "./variables.scss";
+
+.outer {
+  display: flex;
+  flex-direction: column;
+
+  @include desktop {
+    margin-top: 10vh;
+  }
+}
+
+h2 {
+  font-family: knowit, Arial;
+  text-align: center;
+  font-size: 3rem;
+  width: 100vw;
+
+  @include mobile {
+    font-size: 2rem;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 2rem auto 0;
+  width: 80vw;
+  max-width: 1100px;
+
+  @include mobile {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 90vw;
+  }
+
+  .label-div input {
+    font-size: 2rem;
+    min-height: 2rem;
+    line-height: 2rem;
+    border: none;
+    border-bottom: 1px solid black;
+    max-width: 30vw;
+
+    @include mobile {
+      max-width: unset;
+      font-size: 2rem;
+      min-height: 2rem;
+      line-height: 2rem;
+
+      margin-bottom: 1.5rem;
+    }
+  }
+}
+
+.vin-button {
+  margin-bottom: 0;
+  margin-top: auto;
+}
+
+.error {
+  padding: 1.25rem;
+  margin: 1.25rem;
+  width: calc(100% - 5rem);
+  background-color: $light-red;
+  color: $red;
+}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,3 +1,5 @@
+$primary: #dbeede;
+
 $light-green: #c8f9df;
 $green: #0be881;
 $dark-green: #0ed277;
--- a/src/templates/Create.html
+++ b/src/templates/Create.html
@@ -50,6 +50,14 @@
      content="black-translucent"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
+
+    <!-- Super hacky safari bigint import -->
+    <script src="https://peterolson.github.io/BigInteger.js/BigInteger.min.js"></script>
+    <script type="application/javascript">
+      if (navigator.userAgent.includes("Safari")) {
+        BigInt = bigInt;
+      }
+    </script>
  </head>
  <body>
    <div id="app"></div>
--- a/src/ui/Banner.vue
+++ b/src/ui/Banner.vue
@@ -101,6 +101,7 @@ export default {

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

 .link {
  text-decoration: none;
@@ -115,7 +116,7 @@ export default {
  width: calc(100% - 80px);
  margin-top: 0px;
  padding: 0px 40px;
-  background-color: #dbeede;
+  background-color: $primary;
  -webkit-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
  -moz-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
  box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
--- a/src/ui/Highscore.vue
+++ b/src/ui/Highscore.vue
@@ -2,7 +2,7 @@
  <div class="highscores" v-if="highscore.length > 0">
    <h3>Topp 10 vinnere</h3>
    <ol>
-      <li v-for="person in highscore">
+      <li v-for="person in highscore" :key="person">
        {{ person.name }} - {{ person.wins.length }}
      </li>
    </ol>
@@ -10,13 +10,15 @@
 </template>

 <script>
+
+import { highscoreStatistics } from "@/api";
+
 export default {
  data() {
    return { highscore: [] };
  },
  async mounted() {
-    let _response = await fetch("/api/highscore/statistics");
-    let response = await _response.json();
+    let response = await highscoreStatistics();
    response.sort((a, b) => {
      return a.wins.length > b.wins.length ? -1 : 1;
    });
--- a/src/ui/PurchaseGraph.vue
+++ b/src/ui/PurchaseGraph.vue
@@ -7,18 +7,13 @@

 <script>
 import Chartjs from "chart.js";
+import { chartPurchaseByColor } from "@/api";

 export default {
  async mounted() {
    let canvas = this.$refs["purchase-chart"].getContext("2d");

-    let _response = undefined;
-    if (process.env.NODE_ENV == "development") {
-      _response = await fetch("http://localhost:30030/api/purchase/statistics");
-    } else {
-      _response = await fetch("/api/purchase/statistics");
-    }
-    let response = await _response.json();
+    let response = await chartPurchaseByColor();
    let labels = [];
    let blue = {
      label: "Blå",
--- a/src/ui/ScanToVinmonopolet.vue
+++ b/src/ui/ScanToVinmonopolet.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <h2 v-if="errorMessage">{{ errorMessage }}</h2>
+    <video playsinline autoplay class="hidden"></video>
+  </div>
+</template>
+
+<script>
+import { BrowserBarcodeReader } from '@zxing/library';
+import { barcodeToVinmonopolet } from "@/api";
+
+export default {
+  name: "Scan to vinnopolet",
+  data() {
+    return {
+      video: undefined,
+      errorMessage: undefined
+    }
+  },
+  mounted() {
+    if (navigator.mediaDevices == undefined) {
+      this.errorMessage = "Feil: Ingen kamera funnet."
+      return
+    }
+
+    setTimeout(() => {
+      this.video = document.querySelector('video');
+      this.scrollIntoView();
+
+      const constraints = {
+        audio: false,
+        video: {
+          facingMode: { exact: "environment" }
+        }
+      };
+
+      navigator.mediaDevices.getUserMedia(constraints)
+        .then(this.handleSuccess)
+        .catch(this.handleError)
+    }, 10)
+  },
+  methods: {
+    handleSuccess(stream) {
+      this.video.classList.remove("hidden");
+      this.video.srcObject = stream;
+      this.searchVideoForBarcode(this.video)
+    },
+    handleError(error) {
+      console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
+      this.errorMessage = "Feil ved oppstart av kamera! Feilmelding: " + error.message
+    },
+    searchVideoForBarcode(video) {
+      const codeReader = new BrowserBarcodeReader()
+
+      codeReader.decodeOnceFromVideoDevice(undefined, video)
+        .then(result => {
+            barcodeToVinmonopolet(result.text)
+              .then(this.emitWineFromVinmonopolet)
+              .catch(this.catchVinmonopoletError)
+              .then(this.searchVideoForBarcode(video))
+        })
+        .catch(err => console.error(err));
+    },
+    emitWineFromVinmonopolet(response) {
+      this.errorMessage = ""
+
+      this.$emit("wine", {
+        name: response.name,
+        vivinoLink: "https://vinmonopolet.no" + response.url,
+        price: response.price.value,
+        image: response.images[1].url,
+        country: response.main_country.name,
+        id: Number(response.code)
+      });
+    },
+    catchVinmonopoletError(error) {
+      this.errorMessage = "Feil! " + error.message || error;
+    },
+    scrollIntoView() {
+      window.scrollTo(0, 
+        document.getElementById("addwine-title").offsetTop - 10
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/styles/variables";
+@import "./src/styles/global";
+
+video {
+  width: 100%;
+  margin: 1rem 0;
+}
+
+.hidden {
+  height: 0px;
+}
+
+h2 {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  color: $red;
+}
+</style>
--- a/src/ui/TextToast.vue
+++ b/src/ui/TextToast.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="update-toast" :class="showClass">
+    <span v-html="text"></span>
+    <div class="button-container">
+      <button @click="closeToast">Lukk</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: { type: String, required: true },
+    refreshButton: { type: Boolean, required: false }
+  },
+  data() {
+    return { showClass: null };
+  },
+  created() {
+    this.showClass = "show";
+  },
+  mounted() {
+    if (this.refreshButton) {
+      return;
+    }
+    setTimeout(() => {
+      this.$emit("closeToast");
+    }, 5000);
+  },
+  methods: {
+    refresh: function() {
+      location.reload();
+    },
+    closeToast: function() {
+      this.$emit("closeToast");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+
+.update-toast {
+  position: fixed;
+  bottom: 1.3rem;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background: #2d2d2d;
+  border-radius: 5px;
+  padding: 15px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 80vw;
+  opacity: 0;
+  pointer-events: none;
+
+  &.show {
+    pointer-events: all;
+    opacity: 1;
+  }
+
+  -webkit-transition: opacity 0.5s ease-in-out;
+  -moz-transition: opacity 0.5s ease-in-out;
+  -ms-transition: opacity 0.5s ease-in-out;
+  -o-transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+
+  @include mobile {
+    width: 85vw;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
+  & span {
+    color: white;
+  }
+
+  & .button-container {
+    & button {
+      color: #2d2d2d;
+      background-color: white;
+      border-radius: 5px;
+      padding: 10px;
+      margin: 0 3px;
+      font-size: 0.8rem;
+      height: max-content;
+
+      &:active {
+        background: #2d2d2d;
+        color: white;
+      }
+    }
+  }
+}
+</style>
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -35,6 +35,9 @@
  </div>
 </template>
 <script>
+
+import { colorStatistics } from "@/api";
+
 export default {
  data() {
    return {
@@ -54,8 +57,7 @@ export default {
    };
  },
  async mounted() {
-    let _response = await fetch("/api/purchase/statistics/color");
-    let response = await _response.json();
+    let response = await colorStatistics();
    this.red = response.red;
    this.blue = response.blue;
    this.green = response.green;
--- a/src/ui/Vipps.vue
+++ b/src/ui/Vipps.vue
@@ -10,14 +10,14 @@
        class="vipps-logo"
        alt="vipps logo"
      />
-      <span v-if="amount * 10 > 10">
+      <span v-if="amount * price > price">
        kr.
-        <span class="big-money">{{ amount * 10 }},-</span>
-        (10,- pr. lodd)
+        <span class="big-money">{{ amount * price }},-</span>
+         {{ price }},- pr. lodd)
      </span>
-      <span v-if="amount * 10 == 10">
+      <span v-if="amount * price == price">
        kr.
-        <span class="big-money">{{ amount * 10 }},-</span>
+        <span class="big-money">{{ amount * price }},-</span>
        pr. lodd
      </span>
      <ing
@@ -52,6 +52,7 @@ export default {
      qrFailed: false,
      phone: __PHONE__,
      name: __NAME__,
+      price: __PRICE__,
      message: __MESSAGE__
    };
  },
@@ -67,8 +68,8 @@ export default {
    isMobile: function() {
      return this.isMobileFunction();
    },
-    price: function() {
-      return this.amount * (__PRICE__ * 100);
+    priceToPay: function() {
+      return this.amount * (this.price * 100);
    },
    vippsUrlBasedOnUserAgent: function() {
      if (navigator.userAgent.includes("iPhone")) {
@@ -78,7 +79,7 @@ export default {
          "?v=1&m=" +
          this.message +
          "&a=" +
-          this.price
+          this.priceToPay
        );
      }

--- a/src/ui/WinGraph.vue
+++ b/src/ui/WinGraph.vue
@@ -5,19 +5,13 @@
 </template>

 <script>
+import { chartWinsByColor } from "@/api";
+
 export default {
  async mounted() {
    let canvas = this.$refs["win-chart"].getContext("2d");

-    let _response = undefined;
-    if (process.env.NODE_ENV == "development") {
-      _response = await fetch(
-        "http://localhost:30030/api/purchase/statistics/color"
-      );
-    } else {
-      _response = await fetch("/api/purchase/statistics/color");
-    }
-    let response = await _response.json();
+    let response = await chartWinsByColor();
    let labels = ["Vunnet"];
    let blue = {
      label: "Blå",
--- a/src/ui/Wine.vue
+++ b/src/ui/Wine.vue
@@ -1,24 +1,32 @@
 <template>
-  <div class="inner-wine-container" :class="{ 'big': fullscreen }">
-    <div class="left">
-      <img :src="wine.image" class="wine-image" :class="{ 'fullscreen': fullscreen }" />
-    </div>
-    <div class="right">
-      <h2>{{ wine.name }}</h2>
-      <span v-if="wine.rating">{{ wine.rating }} rating</span>
+  <div class="container">
+    <div class="inner-wine-container" :class="{ 'big': fullscreen }">
+      <div class="left">
+        <img v-if="wine.image" :src="wine.image" class="wine-image" :class="{ 'fullscreen': fullscreen }" />
+        <img v-else class="wine-placeholder" alt="Wine image" />
+      </div>
+      <div class="right">
+        <h2 v-if="wine.name">{{ wine.name }}</h2><h2 v-else>(no name)</h2>
+        <span v-if="wine.rating">{{ wine.rating }} rating</span>
+        <span v-if="wine.price">{{ wine.price }} NOK</span>
+        <span v-if="wine.country">{{ wine.country }}</span>

-      <a :href="wine.vivinoLink" class="wine-link">Les mer</a>
-      <span class="name-wins" v-if="wine.winners">
-        Vunnet av:
-        {{wine.winners.join(", ")}}
-      </span>
-      <div class="color-wins" :class="{ 'big': fullscreen }">
-        <span class="color-win blue">{{wine.blue == undefined ? 0 : wine.blue}}</span>
-        <span class="color-win red">{{wine.red == undefined ? 0 : wine.red}}</span>
-        <span class="color-win green">{{wine.green == undefined ? 0 : wine.green}}</span>
-        <span class="color-win yellow">{{wine.yellow == undefined ? 0 : wine.yellow}}</span>
+        <a v-if="wine.vivinoLink" :href="wine.vivinoLink" class="wine-link">Les mer</a>
+        <span class="name-wins" v-if="wine.winners">
+          Vunnet av:
+          {{wine.winners.join(", ")}}
+        </span>
+        <div class="color-wins" :class="{ 'big': fullscreen }"
+          v-if="wine.blue || wine.red || wine.green || wine.yellow">
+          <span class="color-win blue">{{wine.blue == undefined ? 0 : wine.blue}}</span>
+          <span class="color-win red">{{wine.red == undefined ? 0 : wine.red}}</span>
+          <span class="color-win green">{{wine.green == undefined ? 0 : wine.green}}</span>
+          <span class="color-win yellow">{{wine.yellow == undefined ? 0 : wine.yellow}}</span>
+        </div>
      </div>
    </div>
+
+    <slot></slot>
  </div>
 </template>

@@ -39,6 +47,8 @@ export default {

 <style lang="scss" scoped>
@import "./src/styles/media-queries";
+@import "./src/styles/variables";
+
 .wine-image {
  height: 250px;

@@ -49,6 +59,10 @@ export default {
    }
  }
 }
+.wine-placeholder {
+  height: 250px;
+  width: 70px;
+}

 .name-wins,
 .color-wins {
@@ -109,26 +123,26 @@ h3 {
  }
 }

+.container {
+  margin-bottom: 30px;
+}
+
 .inner-wine-container {
  display: flex;
  flex-direction: row;
-  width: 500px;
  font-family: Arial;
-  margin-bottom: 30px;
+  width: 100%;

  &.big {
    align-items: center;
  }

  @include desktop {
-    justify-content: center;
-  }
-
-  @include mobile {
-    width: auto;
+    max-width: 600px;
  }
 }

+
 .right {
  display: flex;
  flex-direction: column;
@@ -159,4 +173,11 @@ a:visited {
  border-bottom: 1px solid #ff5fff;
  width: fit-content;
 }
+
+.button-container {
+  & button.red {
+    background-color: $light-red;
+    color: $red;
+  }
+}
 </style>
--- a/src/ui/Wines.vue
+++ b/src/ui/Wines.vue
@@ -6,7 +6,7 @@
      >
    </h3>
    <ol>
-      <li v-for="wine in wines">
+      <li v-for="wine in wines" :key="wine">
        <span v-if="wine.vivinoLink == '' || wine.vivinoLink == null">
          {{ wine.name }} - sett {{ wine.occurences }} ganger,
          {{ wine.rating }} i rating
@@ -35,6 +35,7 @@
 <script>
 import { event } from "vue-analytics";
 import Wine from "@/ui/Wine";
+import { overallWineStatistics } from "@/api";

 export default {
  components: {
@@ -44,8 +45,7 @@ export default {
    return { wines: [], clickedWine: null, wineOpen: false };
  },
  async mounted() {
-    let _response = await fetch("/api/wines/statistics/overall");
-    let response = await _response.json();
+    let response = await overallWineStatistics();

    response.sort();
    response = response