Merge branch 'develop' into #73-add-to-home-message

Author: stritti

src/components/cards/AssignButton.vue

@@ -14,7 +14,7 @@
     ></b-button>
     <b-button
       pill
-      v-if="isAssigned && canBeChecked"
+      v-if="isAssigned && isCheckable"
       @click="addPoints"
       id="button2"
       class="d-flex assign-button"
@@ -29,30 +29,28 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import { $auth } from '@/firebase-config'
 
 export default {
   name: 'AssignButton',
   props: {
-    impulseId: String
+    impulseId: {
+      type: String,
+      required: true
+    }
   },
   computed: {
-    user () {
-      return $auth.currentUser
-    },
     isAssigned () {
-      return this.impulseIsAssigned(this.impulseId)
+      return this.isAssignedImpulse(this.impulseId)
     },
-    canBeChecked () {
-      return this.impulseIsCheckable(this.impulseId)
+    isCheckable () {
+      return this.isCheckableImpulse(this.impulseId)
     },
     getSelectedPointsById () {
       return this.getSelectedPoints(this.impulseId)
     },
     ...mapGetters({
-      impulseIsAssigned: 'Userdata/impulseIsAssigned',
-      impulseIsCheckable: 'Userdata/impulseIsCheckable',
-      allPointsFromImpulse: 'Userdata/allPointsFromImpulse',
+      isAssignedImpulse: 'Userdata/isAssignedImpulse',
+      isCheckableImpulse: 'Userdata/isCheckableImpulse',
       getSelectedPoints: 'Impulse/getSelectedPoints'
     })
   },

src/components/cards/ImpulseCard.vue

@@ -1,28 +1,25 @@
 <template>
   <div class="card-body"  v-on:scrollToCard="scrollToCard">
-    <router-link :to="detailLink">
-      <div class="card-content">
+      <div class="card-content" @click="flipCard">
         <div class="card-text-headline">
           <category-label :categoryId="impulse.category" />
           <a :name="impulse.id" />
           <h3>{{ impulse.title }}</h3>
         </div>
         <div class="card-text">
-          <div v-if="impulse.forMe">
+          <template v-if="impulse.forMe">
             <h4>Was bringt es mir?</h4>
             <div v-html="impulse.forMe" />
-          </div>
-          <div v-if="impulse.forWorld">
+          </template>
+          <template v-if="impulse.forWorld">
             <h4>Was bringt es der Welt?</h4>
             <div v-html="impulse.forWorld" />
-          </div>
+          </template>
         </div>
       </div>
-    </router-link>
-    <assign-button :impulseId="impulse.id" />
-    <div class="card-background">
-      <img src="@/assets/cards/Card-blue.svg">
-    </div>
+      <assign-button :impulseId="impulse.id" />
+      <img class="card-background"
+        src="@/assets/cards/Card-blue.svg">
   </div>
 </template>
 <script>
@@ -62,6 +59,9 @@ export default {
       if (impulseId && impulseId === this.impulse.id) {
         this.$el.scrollIntoView()
       }
+    },
+    flipCard () {
+      this.$router.push(this.detailLink)
     }
   }
 }
@@ -85,9 +85,6 @@ export default {
 
   .card-background {
     width: 100%;
-    img {
-      width: 100%;
-    }
   }
 
   .card-content {

src/router/index.js

@@ -5,7 +5,6 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import store from '../store'
 import Home from '../views/Home.vue'
-import RequestResetPassword from '../views/RequestResetPassword.vue'
 import AssignedImpulse from '../views/AssignedImpulse.vue'
 
 Vue.use(VueRouter)
@@ -123,39 +122,36 @@ const routes = [
   {
     path: '/highscore',
     name: 'Highscore',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "highscore" */ '../views/Highscore.vue')
   },
   {
     path: '/login',
     name: 'Login',
-    component: () => import('../views/Login.vue'),
+    component: () => import(/* webpackChunkName: "auth" */ '../views/Login.vue'),
     meta: {
       requiresAuth: false
     }
   },
   {
     path: '/signup',
     name: 'SignUp',
-    component: () => import('../views/SignUp.vue'),
+    component: () => import(/* webpackChunkName: "auth" */ '../views/SignUp.vue'),
     meta: {
       requiresAuth: false
     }
   },
   {
     path: '/mail-verify',
     name: 'MailVerify',
-    component: () => import('../views/MailNotVerified.vue'),
+    component: () => import(/* webpackChunkName: "auth" */ '../views/MailNotVerified.vue'),
     meta: {
       requiresAuth: false
     }
   },
   {
     path: '/reset-password',
     name: 'ResetPassword',
-    component: RequestResetPassword,
+    component: () => import(/* webpackChunkName: "auth" */ '../views/RequestResetPassword.vue'),
     meta: {
       requiresAuth: false
     }
@@ -211,7 +207,9 @@ router.beforeEach((to, from, next) => {
   if (requiresAuth && !currentUser && to !== '/login') {
     next({
       path: '/login',
-      params: { nextUrl: to.fullPath }
+      query: {
+        nextUrl: to
+      }
     })
   } else {
     next()

src/store/modules/Auth.store.js

@@ -85,7 +85,11 @@ export const actions = {
     $auth.signInWithEmailAndPassword(user.email, user.password)
       .then(result => {
         this.dispatch('Userdata/syncUser')
-        router.push('/profile')
+        if (user.redirect) {
+          router.push(user.redirect)
+        } else {
+          router.push('/profile')
+        }
       })
       .catch(error => {
         Vue.notify({
@@ -97,12 +101,16 @@ export const actions = {
         console.log(error)
       })
   },
-  signInWithGoogle ({ commit }) {
+  signInWithGoogle ({ commit }, redirect) {
     const provider = new firebase.auth.GoogleAuthProvider()
     $auth.signInWithPopup(provider)
       .then(user => {
         this.dispatch('Userdata/syncUser')
-        router.push('/profile')
+        if (redirect) {
+          router.push(redirect)
+        } else {
+          router.push('/profile')
+        }
       }).catch(error => {
         Vue.notify({
           group: 'notification',

src/store/modules/Userdata.store.js

@@ -196,13 +196,15 @@ export const getters = {
       return []
     }
   },
-  impulseIsAssigned: (state) => (impulseId) => {
-    const assignedImpulseMap = state.userdata.assignedImpulseMap || []
-    if (Array.isArray(assignedImpulseMap)) {
-      const found = assignedImpulseMap.some(impulse => impulse.impulseId === impulseId)
-      return !!found
-    } else {
-      return false
+  isAssignedImpulse: (state) => (impulseId) => {
+    if (state.userdata) {
+      const assignedImpulseMap = state.userdata.assignedImpulseMap || []
+      if (Array.isArray(assignedImpulseMap)) {
+        const found = assignedImpulseMap.some(impulse => impulse.impulseId === impulseId)
+        return !!found
+      } else {
+        return false
+      }
     }
   },
   allPointsFromImpulse: (state) => (impulseId) => {
@@ -212,20 +214,22 @@ export const getters = {
     const allPoints = timeStampArray.map(timeStamp => timeStamp.points).reduce((accumulator, currentValue) => accumulator + currentValue)
     return allPoints
   },
-  impulseIsCheckable: (state) => (impulseId) => {
-    const assignedImpulseMap = state.userdata.assignedImpulseMap
-    const currentImpulse = assignedImpulseMap.find(impulse => impulse.impulseId === impulseId)
-    const timeStampArray = currentImpulse.points
-    const lastTimeStamp = timeStampArray[timeStampArray.length - 1]
-    const todayDate = new Date()
-    todayDate.setHours(0, 0, 0, 0)
-    const today = firebase.firestore.Timestamp.fromDate(todayDate)
-    const todayPlusOneDay = firebase.firestore.Timestamp.fromDate(
-      new Date((lastTimeStamp.date.seconds * 1000) + 86400000))
-    if (timeStampArray.length === 1) {
-      return true
+  isCheckableImpulse: (state) => (impulseId) => {
+    if (state.userdata) {
+      const assignedImpulseMap = state.userdata.assignedImpulseMap
+      const currentImpulse = assignedImpulseMap.find(impulse => impulse.impulseId === impulseId)
+      const timeStampArray = currentImpulse.points
+      const lastTimeStamp = timeStampArray[timeStampArray.length - 1]
+      const todayDate = new Date()
+      todayDate.setHours(0, 0, 0, 0)
+      const today = firebase.firestore.Timestamp.fromDate(todayDate)
+      const todayPlusOneDay = firebase.firestore.Timestamp.fromDate(
+        new Date((lastTimeStamp.date.seconds * 1000) + 86400000))
+      if (timeStampArray.length === 1) {
+        return true
+      }
+      return today > todayPlusOneDay
     }
-    return today > todayPlusOneDay
   },
   displayName: (state) => {
     return state.userdata ? state.userdata.displayName : null

src/views/CardDetailPage.vue

@@ -1,17 +1,19 @@
 <template>
-  <div>
-    <main-header headerTitle="Impuls" :backlink="backlink"></main-header>
+  <div id="impulse-detail-view">
+    <main-header headerTitle="Impuls" :backlink="backlink" />
     <b-container>
-      <div v-if="impulse" id="impulse-detail-view" class="my-4 mb-6 mx-2 p-2">
-        <h1 class="mb-5 card-title">{{ impulse.title }}</h1>
-
+      <div v-if="impulse" class="impulse-card my-4 mb-6 mx-2 p-2">
+        <div class="header">
+          <category-label :categoryId="impulse.category" />
+          <h1 class="mb-3 card-title">{{ impulse.title }}</h1>
+        </div>
         <div v-if="impulse.forMe">
           <h2>Was bringt das mir?</h2>
           <div
             v-html="impulse.forMe"
             class="for-me"
           />
-          <hr class="my-4">
+          <hr class="my-2">
         </div>
         <div v-if="impulse.forWorld">
           <h2>Was bringt es der Welt?</h2>
@@ -39,6 +41,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import MainHeader from '@/components/_base/Header'
+import CategoryLabel from '@/components/_base/CategoryLabel.vue'
 
 export default {
   metaInfo () {
@@ -54,7 +57,7 @@ export default {
     }
   },
   components: {
-    MainHeader
+    MainHeader, CategoryLabel
   },
   created () {
     const impulseId = this.$route.params.id
@@ -88,11 +91,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#impulse-detail-view {
+.impulse-card {
+  --border-radius: 30px;
+
+  overflow: hidden;
   border: 5px solid $color-blue;
-  border-radius: 30px;
+  border-radius: var(--border-radius);
   max-width: 770px;
 
+  .header {
+    margin-top: -0.5rem;
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+    margin-bottom: 0.5rem;
+    border-top-left-radius: calc( var(--border-radius) - 2.5px);
+    border-top-right-radius: var(--border-radius);
+    padding: .5rem;
+    background-color: $gray-200
+  }
+
   @media only screen and (max-width: 991px) {
     .card-title {
       font-size: 1.75rem;