3 files changed, 163 insertions, 0 deletions
diff --git a/src/components/.gitkeep b/src/components/.gitkeep
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/.gitkeep
diff --git a/src/components/ApiAuth.vue b/src/components/ApiAuth.vue
new file mode 100644
index 0000000..d2771c7
--- /dev/null
+++ b/src/components/ApiAuth.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <div v-if="!$store.getters['user/loggedIn']">
+      <div v-if="useLarryLogin" class="group">
+        <h5>Larry Login</h5>
+        <p v-if="authError" class="text-negative">
+          <span v-if="typeof authError === 'object'">Email or password {{ authError['email or password'] }}</span>
+          <span v-else>{{ authError }}</span>
+        </p>
+        <div class="group">
+          <q-input @keyup.enter="larryLogin" :error="authError !== undefined" v-model="email" name="user" float-label="Email" />
+          <q-input @keyup.enter="larryLogin" :error="authError !== undefined" v-model="password" name="pass" type="password" float-label="Password" />
+          <q-btn color="positive" @click="larryLogin" icon="fa-sign-in">Larry login</q-btn>
+        </div>
+        <div class="text-right">
+          <q-btn color="tertiary" small outline @click="useLarryLogin = false">Log in via Clonkspot</q-btn>
+        </div>
+      </div>
+      <div v-else class="group">
+        <q-btn color="positive" @click="clonkspotLogin">Log in via Clonkspot</q-btn>
+        <p class="text-negative" v-if="authFailed">Oups, something went wrong. Please try again</p>
+        <div class="text-right">
+          <q-btn color="tertiary" small outline @click="useLarryLogin = true">Log in via Larry</q-btn>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <q-card>
+        <q-card-title class="bg-positive text-white">
+          Hi {{ $store.state.user.decodedToken.username }}
+        </q-card-title>
+        <q-card-separator />
+        <q-card-main>
+          <p>You have successfully logged in!</p>
+          <q-btn color="negative" outline small icon="fa-sign-out" @click="$store.commit('user/logout')">Logout</q-btn>
+        </q-card-main>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    openURL,
+    LocalStorage,
+  } from 'quasar'
+
+  export default {
+    data () {
+      return {
+        email: '',
+        password: '',
+        authError: undefined,
+        token: null,
+        useLarryLogin: false,
+        authWindow: null,
+        authFailed: false,
+      }
+    },
+    mounted () {
+      let token = LocalStorage.get.item('authToken')
+      if (token) {
+        this.$store.commit('user/setAuthToken', { authToken: token })
+      }
+    },
+    methods: {
+      clonkspotLogin () {
+        this.authWindow = openURL(`${this.$http.defaults.baseURL}/auth/clonkspot`)
+        this.checkTokenLoop()
+      },
+      larryLogin () {
+        let that = this
+        let params = {
+          user: {
+            email: this.email,
+            password: this.password,
+          }
+        }
+        this.authError = undefined
+        this.$http.post('/auth/login', params).then((response) => {
+          that.$store.commit('user/setAuthToken', { authToken: response.data.user.token })
+          that.email = ''
+          that.password = ''
+        }).catch((error) => {
+          if (error.response && error.response.data) {
+            that.authError = error.response.data.errors
+          }
+          else if (error.message) {
+            that.authError = error.message
+          }
+          else {
+            that.authError = 'Failed to log in'
+            console.error({error})
+          }
+        })
+      },
+      checkTokenLoop (retryCount) {
+        let token = LocalStorage.get.item('authToken')
+        if (token) {
+          this.$store.commit('user/setAuthToken', { authToken: token })
+          this.authWindow.close()
+          this.authWindow = null
+        }
+        else {
+          setTimeout(this.checkTokenLoop, 500)
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="styl" type="text/stylus" scoped>
+</style>
diff --git a/src/components/UploadVoter.vue b/src/components/UploadVoter.vue
new file mode 100644
index 0000000..91019dd
--- /dev/null
+++ b/src/components/UploadVoter.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="flex row items-center group" v-if="$store.getters['user/loggedIn']">
+      <h5 style="margin: 0 1rem">
+        <i class="fa"
+           :class="{'fa-caret-up text-positive': upload.voting.sum > 0, 'fa-caret-down text-negative': upload.voting.sum < 0, 'fa-sort text-dark': upload.voting.sum === 0}">
+        </i>
+        {{ upload.voting.sum }}
+      </h5>
+      <span v-if="upload.author.username !== $store.state.user.decodedToken.username">
+        <q-btn color="negative" round small icon="fa-thumbs-down" @click="vote(-1)"></q-btn>
+        <q-btn color="positive" round small icon="fa-thumbs-up" @click="vote(1)"></q-btn>
+      </span>
+    </div>
+    <div class="group" v-else>
+      <i class="fa"
+         :class="{'fa-caret-up text-positive': upload.voting.sum > 0, 'fa-caret-down text-negative': upload.voting.sum < 0, 'fa-sort text-dark': upload.voting.sum === 0}">
+      </i>
+      {{ upload.voting.sum }} votes
+      <em>Please log in to vote</em>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    QBtn,
+  } from 'quasar'
+
+  export default {
+    props: {
+      upload: Object,
+    },
+    components: {
+      QBtn,
+    },
+    data () {
+      return {}
+    },
+    methods: {
+      vote (impact) {
+        let that = this
+        this.$http.put(`/uploads/${this.upload._id}/vote`, {vote: {impact: impact}}).then(response => that.$emit('voted'))
+      },
+    },
+  }
+</script>
+
+<style lang="styl" type="text/stylus" scoped>
+</style>