+ Install bento starter
++ Install this application to your home screen for quickly and easy + access when you're on the go. +
+
+
+
+
+
+
+
+
diff --git a/src/assets/img/apple-navigation-action.png b/src/assets/img/apple-navigation-action.png
new file mode 100644
index 0000000..91b8cec
Binary files /dev/null and b/src/assets/img/apple-navigation-action.png differ
diff --git a/src/assets/img/bento-starter.svg b/src/assets/img/bento-starter.svg
new file mode 100644
index 0000000..2139b58
--- /dev/null
+++ b/src/assets/img/bento-starter.svg
@@ -0,0 +1,205 @@
+
+
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100755
index 0000000..7ffa723
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/components/AddProduct.vue b/src/components/AddProduct.vue
new file mode 100644
index 0000000..fd6ee1a
--- /dev/null
+++ b/src/components/AddProduct.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
diff --git a/src/components/AppleAddToHomeScreenModal.vue b/src/components/AppleAddToHomeScreenModal.vue
new file mode 100644
index 0000000..c811101
--- /dev/null
+++ b/src/components/AppleAddToHomeScreenModal.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..95a9af9
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
+
+
+
+
+
+ Just tap
+ 
then 'Add to Home Screen'
+
+ then 'Add to Home Screen'
+ 
+
+ BentoStarter
+
+
+ ![Avatar]()
+
+
+ New content available. Please
+ REFRESH
+
+
+
+
+
+
diff --git a/src/components/ProductItem.vue b/src/components/ProductItem.vue
new file mode 100644
index 0000000..4a20888
--- /dev/null
+++ b/src/components/ProductItem.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/ProductList.vue b/src/components/ProductList.vue
new file mode 100644
index 0000000..b146229
--- /dev/null
+++ b/src/components/ProductList.vue
@@ -0,0 +1,50 @@
+
+ #{{ index }} {{ data.name }}
+
+ {{ isProductDeletionPending ? 'delete in progress...' : 'delete' }}
+
+
+
+
+
+
+
+
diff --git a/src/firebase/async-firestore.js b/src/firebase/async-firestore.js
new file mode 100644
index 0000000..a6d2b0a
--- /dev/null
+++ b/src/firebase/async-firestore.js
@@ -0,0 +1,17 @@
+import firebase from 'firebase/app'
+
+let loaded = false
+
+// Lazy load firestore with async import is important for performance
+
+export default async () => {
+ if (!loaded) {
+ await import(/* webpackChunkName: "chunk-firestore" */ 'firebase/firestore')
+ firebase.firestore().settings({})
+ firebase
+ .firestore()
+ .enablePersistence({ experimentalTabSynchronization: true })
+ loaded = true
+ }
+ return firebase.firestore()
+}
diff --git a/src/firebase/authentication.js b/src/firebase/authentication.js
new file mode 100644
index 0000000..b5208c3
--- /dev/null
+++ b/src/firebase/authentication.js
@@ -0,0 +1,9 @@
+import firebase from 'firebase/app'
+import { isNil } from 'lodash'
+
+import store from '@/store'
+
+firebase.auth().onAuthStateChanged(firebaseUser => {
+ const actionToDispatch = isNil(firebaseUser) ? 'logout' : 'login'
+ store.dispatch(`authentication/${actionToDispatch}`, firebaseUser)
+})
diff --git a/src/firebase/firestore.rules b/src/firebase/firestore.rules
new file mode 100644
index 0000000..6aa5cd4
--- /dev/null
+++ b/src/firebase/firestore.rules
@@ -0,0 +1,18 @@
+service cloud.firestore {
+ match /databases/{database}/documents {
+ function authenticated() { return request.auth.uid != null }
+
+ match /users/{userId} {
+ allow get: if authenticated() && request.auth.uid == userId;
+ allow create: if authenticated() && request.auth.uid == userId;
+ allow update, delete: if authenticated() && request.auth.uid == userId;
+ }
+
+ match /users/{userId}/products/{productId} {
+ allow get: if authenticated() && request.auth.uid == userId;
+ allow list: if authenticated() && request.auth.uid == userId;
+ allow create: if authenticated() && request.auth.uid == userId;
+ allow update, delete: if authenticated() && request.auth.uid == userId;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/firebase/generic-db.js b/src/firebase/generic-db.js
new file mode 100644
index 0000000..b19e764
--- /dev/null
+++ b/src/firebase/generic-db.js
@@ -0,0 +1,131 @@
+import { isNil, keys, cloneDeep } from 'lodash'
+import firebase from 'firebase/app'
+
+import firestore from './async-firestore'
+
+export default class GenericDB {
+ constructor(collectionPath) {
+ this.collectionPath = collectionPath
+ }
+
+ /**
+ * Create a document in the collection
+ * @param data
+ * @param id
+ */
+ async create(data, id = null) {
+ const collectionRef = (await firestore()).collection(this.collectionPath)
+ const serverTimestamp = firebase.firestore.FieldValue.serverTimestamp()
+
+ const dataToCreate = {
+ ...data,
+ createTimestamp: serverTimestamp,
+ updateTimestamp: serverTimestamp
+ }
+
+ const createPromise = isNil(id)
+ ? // Create doc with generated id
+ collectionRef.add(dataToCreate).then(doc => doc.id)
+ : // Create doc with custom id
+ collectionRef
+ .doc(id)
+ .set(dataToCreate)
+ .then(() => id)
+
+ const docId = await createPromise
+
+ return {
+ id: docId,
+ ...data,
+ createTimestamp: new Date(),
+ updateTimestamp: new Date()
+ }
+ }
+
+ /**
+ * Read a document in the collection
+ * @param id
+ */
+ async read(id) {
+ const result = await (await firestore())
+ .collection(this.collectionPath)
+ .doc(id)
+ .get()
+
+ const data = result.exists ? result.data() : null
+
+ if (isNil(data)) return null
+
+ this.convertObjectTimestampPropertiesToDate(data)
+ return { id, ...data }
+ }
+
+ /**
+ * Read all documents in the collection following constraints
+ * @param constraints
+ */
+ async readAll(constraints = null) {
+ const collectionRef = (await firestore()).collection(this.collectionPath)
+ let query = collectionRef
+
+ if (constraints) {
+ constraints.forEach(constraint => (query = query.where(...constraint)))
+ }
+
+ const formatResult = result =>
+ result.docs.map(ref =>
+ this.convertObjectTimestampPropertiesToDate({
+ id: ref.id,
+ ...ref.data()
+ })
+ )
+
+ return query.get().then(formatResult)
+ }
+
+ /**
+ * Update a document in the collection
+ * @param data
+ */
+ async update(data) {
+ const id = data.id
+ const clonedData = cloneDeep(data)
+ delete clonedData.id
+
+ await (await firestore())
+ .collection(this.collectionPath)
+ .doc(id)
+ .update({
+ ...clonedData,
+ updateTimestamp: firebase.firestore.FieldValue.serverTimestamp()
+ })
+
+ return id
+ }
+
+ /**
+ * Delete a document in the collection
+ * @param id
+ */
+ async delete(id) {
+ return (await firestore())
+ .collection(this.collectionPath)
+ .doc(id)
+ .delete()
+ }
+
+ /**
+ * Convert all object Timestamp properties to date
+ * @param obj
+ */
+ convertObjectTimestampPropertiesToDate(obj) {
+ keys(obj)
+ .filter(prop => obj[prop] instanceof Object)
+ .forEach(prop =>
+ obj[prop] instanceof firebase.firestore.Timestamp
+ ? (obj[prop] = obj[prop].toDate())
+ : this.convertObjectTimestampPropertiesToDate(obj[prop])
+ )
+ return obj
+ }
+}
diff --git a/src/firebase/init.js b/src/firebase/init.js
new file mode 100644
index 0000000..001f24a
--- /dev/null
+++ b/src/firebase/init.js
@@ -0,0 +1,14 @@
+import firebase from 'firebase/app'
+import 'firebase/auth'
+
+// The configuration below is not sensitive data. You can serenely add your config here
+const config = {
+ apiKey: 'AIzaSyCe6CSzOUs6_Ij_VHa6hancdEi6CNBtw7c',
+ authDomain: 'bento-starter.firebaseapp.com',
+ databaseURL: 'https://bento-starter.firebaseio.com',
+ projectId: 'bento-starter',
+ storageBucket: 'bento-starter.appspot.com',
+ messagingSenderId: '458464977217'
+}
+
+firebase.initializeApp(config)
diff --git a/src/firebase/user-products-db.js b/src/firebase/user-products-db.js
new file mode 100644
index 0000000..e22b8a7
--- /dev/null
+++ b/src/firebase/user-products-db.js
@@ -0,0 +1,9 @@
+import GenericDB from './generic-db'
+
+export default class UserProductsDB extends GenericDB {
+ constructor(userId) {
+ super(`users/${userId}/products`)
+ }
+
+ // Here you can extend UserProductsDB with custom methods
+}
diff --git a/src/firebase/users-db.js b/src/firebase/users-db.js
new file mode 100644
index 0000000..cf8e4cb
--- /dev/null
+++ b/src/firebase/users-db.js
@@ -0,0 +1,9 @@
+import GenericDB from './generic-db'
+
+export default class UsersDB extends GenericDB {
+ constructor() {
+ super('users')
+ }
+
+ // Here you can extend UserDB with custom methods
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..56bf8f4
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,19 @@
+import Vue from 'vue'
+
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import '@/misc/register-service-worker'
+import '@/misc/handle-network-status'
+import '@/firebase/init'
+import '@/firebase/authentication'
+import '@/misc/handle-apple-install-prompt'
+import 'pwacompat'
+
+Vue.config.productionTip = false
+
+new Vue({
+ router,
+ store,
+ render: h => h(App)
+}).$mount('#app')
diff --git a/src/misc/handle-apple-install-prompt.js b/src/misc/handle-apple-install-prompt.js
new file mode 100644
index 0000000..016d784
--- /dev/null
+++ b/src/misc/handle-apple-install-prompt.js
@@ -0,0 +1,23 @@
+import store from '@/store'
+import { isNil } from 'lodash'
+
+const isIosOnBrowser =
+ ['iPhone', 'iPad', 'iPod'].includes(navigator.platform) &&
+ !window.navigator.standalone
+
+if (isIosOnBrowser) {
+ const now = Date.now()
+ let limitDate = null
+ const addToHomeIosPromptLastDate = localStorage.getItem(
+ 'addToHomeIosPromptLastDate'
+ )
+
+ if (!isNil(addToHomeIosPromptLastDate)) {
+ limitDate = new Date(parseInt(addToHomeIosPromptLastDate))
+ limitDate.setMonth(limitDate.getMonth() + 1)
+ }
+
+ if (isNil(limitDate) || now >= limitDate.getTime()) {
+ store.commit('app/setShowAddToHomeScreenModalForApple', true)
+ }
+}
diff --git a/src/misc/handle-network-status.js b/src/misc/handle-network-status.js
new file mode 100644
index 0000000..a2b835e
--- /dev/null
+++ b/src/misc/handle-network-status.js
@@ -0,0 +1,11 @@
+import store from '@/store'
+
+store.commit('app/setNetworkOnline', navigator.onLine)
+
+window.addEventListener('online', () =>
+ store.commit('app/setNetworkOnline', true)
+)
+
+window.addEventListener('offline', () =>
+ store.commit('app/setNetworkOnline', false)
+)
diff --git a/src/misc/helpers.js b/src/misc/helpers.js
new file mode 100644
index 0000000..d5c9492
--- /dev/null
+++ b/src/misc/helpers.js
@@ -0,0 +1,18 @@
+import UsersDB from '@/firebase/users-db'
+
+/**
+ * Create new user from firebase auth user infos
+ */
+// eslint-disable-next-line
+export const createNewUserFromFirebaseAuthUser = async firebaseAuthUser => {
+ const providerData = firebaseAuthUser.providerData[0]
+ const { displayName, photoURL, email } = providerData
+ const userDb = new UsersDB()
+ const user = {
+ displayName,
+ photoURL,
+ email
+ }
+
+ return await userDb.create(user, firebaseAuthUser.uid)
+}
diff --git a/src/misc/register-service-worker.js b/src/misc/register-service-worker.js
new file mode 100644
index 0000000..8d779f7
--- /dev/null
+++ b/src/misc/register-service-worker.js
@@ -0,0 +1,32 @@
+import { register } from 'register-service-worker'
+
+import store from '@/store'
+
+if (process.env.NODE_ENV === 'production') {
+ register('/service-worker.js', {
+ ready() {
+ console.log('Service worker is active.')
+ },
+ registered() {
+ console.log('Service worker has been registered.')
+ },
+ cached() {
+ console.log('Content has been cached for offline use.')
+ },
+ updatefound() {
+ console.log('New content is downloading.')
+ },
+ updated() {
+ store.commit(`app/setNewContentAvailable`, true)
+ console.log('New content is available; please refresh.')
+ },
+ offline() {
+ console.log(
+ 'No internet connection found. App is running in offline mode.'
+ )
+ },
+ error(error) {
+ console.error('Error during service worker registration:', error)
+ }
+ })
+}
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..8917c95
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Head from 'vue-head'
+import Home from '@/views/Home'
+import CheckLogin from '@/views/CheckLogin'
+import { isNil } from 'lodash'
+import store from '@/store'
+
+Vue.use(Router)
+
+/* If you don't know about VueHead, please refer to https://github.com/ktquez/vue-head */
+
+Vue.use(Head, {
+ complement: 'bento-starter'
+})
+
+/* If you don't know about VueRouter, please refer to https://router.vuejs.org/ */
+
+const router = new Router({
+ mode: 'history',
+ base: process.env.BASE_URL,
+ routes: [
+ {
+ path: '/home',
+ name: 'home',
+ component: Home,
+ meta: {
+ authNotRequired: true
+ }
+ },
+ {
+ path: '/check-login',
+ name: 'check-login',
+ component: CheckLogin,
+ meta: {
+ authNotRequired: true
+ }
+ },
+ {
+ path: '/login',
+ name: 'login',
+ component: () =>
+ import(/* webpackChunkName: "client-chunk-login" */ '@/views/Login.vue'),
+ meta: {
+ authNotRequired: true
+ }
+ },
+ {
+ path: '/products',
+ name: 'products',
+ component: () =>
+ import(/* webpackChunkName: "client-chunk-products" */ '@/views/Products.vue')
+ },
+ { path: '*', redirect: '/home' }
+ ]
+})
+
+/**
+ * Handle user redirections
+ */
+router.beforeEach((to, from, next) => {
+ if (
+ !(to.meta && to.meta.authNotRequired) &&
+ isNil(store.state.authentication.user)
+ ) {
+ const path =
+ store.state.authentication.user === null ? '/login' : '/check-login'
+ return next(`${path}?redirectUrl=${to.path}`)
+ }
+ next()
+})
+
+export default router
diff --git a/src/store/app/app.actions.js b/src/store/app/app.actions.js
new file mode 100644
index 0000000..6013a9d
--- /dev/null
+++ b/src/store/app/app.actions.js
@@ -0,0 +1,9 @@
+export default {
+ /**
+ * Closes "add to home screen" modal for apple
+ */
+ closeAddToHomeScreenModalForApple: async ({ commit }) => {
+ localStorage.setItem('addToHomeIosPromptLastDate', Date.now())
+ commit('setShowAddToHomeScreenModalForApple', false)
+ }
+}
diff --git a/src/store/app/app.getters.js b/src/store/app/app.getters.js
new file mode 100644
index 0000000..b1c6ea4
--- /dev/null
+++ b/src/store/app/app.getters.js
@@ -0,0 +1 @@
+export default {}
diff --git a/src/store/app/app.mutations.js b/src/store/app/app.mutations.js
new file mode 100644
index 0000000..95f678f
--- /dev/null
+++ b/src/store/app/app.mutations.js
@@ -0,0 +1,6 @@
+export default {
+ setNetworkOnline: (state, value) => (state.networkOnLine = value),
+ setNewContentAvailable: (state, value) => (state.newContentAvailable = value),
+ setShowAddToHomeScreenModalForApple: (state, value) =>
+ (state.showAddToHomeScreenModalForApple = value)
+}
diff --git a/src/store/app/app.state.js b/src/store/app/app.state.js
new file mode 100644
index 0000000..92abc50
--- /dev/null
+++ b/src/store/app/app.state.js
@@ -0,0 +1,6 @@
+export default {
+ appTitle: process.env.VUE_APP_TITLE,
+ networkOnLine: true,
+ newContentAvailable: false,
+ showAddToHomeScreenModalForApple: false
+}
diff --git a/src/store/app/index.js b/src/store/app/index.js
new file mode 100644
index 0000000..9195a36
--- /dev/null
+++ b/src/store/app/index.js
@@ -0,0 +1,12 @@
+import state from './app.state'
+import mutations from './app.mutations'
+import actions from './app.actions'
+import getters from './app.getters'
+
+export default {
+ namespaced: true,
+ state,
+ mutations,
+ actions,
+ getters
+}
diff --git a/src/store/authentication/authentication.actions.js b/src/store/authentication/authentication.actions.js
new file mode 100644
index 0000000..294150b
--- /dev/null
+++ b/src/store/authentication/authentication.actions.js
@@ -0,0 +1,33 @@
+import router from '@/router'
+import { isNil } from 'lodash'
+import { createNewUserFromFirebaseAuthUser } from '@/misc/helpers'
+import UsersDB from '@/firebase/users-db'
+
+export default {
+ /**
+ * Callback fired when user login
+ */
+ login: async ({ commit, dispatch }, firebaseAuthUser) => {
+ const userFromFirebase = await new UsersDB().read(firebaseAuthUser.uid)
+
+ const user = isNil(userFromFirebase)
+ ? await createNewUserFromFirebaseAuthUser(firebaseAuthUser)
+ : userFromFirebase
+
+ commit('setUser', user)
+ dispatch('products/getUserProducts', null, { root: true })
+ },
+
+ /**
+ * Callback fired when user logout
+ */
+ logout: ({ commit }) => {
+ commit('setUser', null)
+ commit('products/setProducts', null, { root: true })
+
+ const currentRouter = router.app.$route
+ if (!(currentRouter.meta && currentRouter.meta.authNotRequired)) {
+ router.push('/login')
+ }
+ }
+}
diff --git a/src/store/authentication/authentication.getters.js b/src/store/authentication/authentication.getters.js
new file mode 100644
index 0000000..9ed81dc
--- /dev/null
+++ b/src/store/authentication/authentication.getters.js
@@ -0,0 +1,5 @@
+import { isNil } from 'lodash'
+
+export default {
+ isUserLoggedIn: state => !isNil(state.user)
+}
diff --git a/src/store/authentication/authentication.mutations.js b/src/store/authentication/authentication.mutations.js
new file mode 100644
index 0000000..80daaa6
--- /dev/null
+++ b/src/store/authentication/authentication.mutations.js
@@ -0,0 +1,3 @@
+export default {
+ setUser: (state, value) => (state.user = value)
+}
diff --git a/src/store/authentication/authentication.state.js b/src/store/authentication/authentication.state.js
new file mode 100644
index 0000000..4f0e3e8
--- /dev/null
+++ b/src/store/authentication/authentication.state.js
@@ -0,0 +1,3 @@
+export default {
+ user: undefined
+}
diff --git a/src/store/authentication/index.js b/src/store/authentication/index.js
new file mode 100644
index 0000000..c58930c
--- /dev/null
+++ b/src/store/authentication/index.js
@@ -0,0 +1,12 @@
+import state from './authentication.state'
+import mutations from './authentication.mutations'
+import actions from './authentication.actions'
+import getters from './authentication.getters'
+
+export default {
+ namespaced: true,
+ state,
+ mutations,
+ actions,
+ getters
+}
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..49713bc
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import authentication from './authentication'
+import app from './app'
+import products from './products'
+
+Vue.use(Vuex)
+
+/* If you don't know about Vuex, please refer to https://vuex.vuejs.org/ */
+
+export default new Vuex.Store({
+ strict: process.env.NODE_ENV !== 'production',
+ modules: {
+ authentication,
+ app,
+ products
+ }
+})
diff --git a/src/store/products/index.js b/src/store/products/index.js
new file mode 100644
index 0000000..92d788a
--- /dev/null
+++ b/src/store/products/index.js
@@ -0,0 +1,12 @@
+import state from './products.state'
+import mutations from './products.mutations'
+import actions from './products.actions'
+import getters from './products.getters'
+
+export default {
+ namespaced: true,
+ state,
+ mutations,
+ actions,
+ getters
+}
diff --git a/src/store/products/products.actions.js b/src/store/products/products.actions.js
new file mode 100644
index 0000000..3cecc75
--- /dev/null
+++ b/src/store/products/products.actions.js
@@ -0,0 +1,50 @@
+import UserProductsDB from '@/firebase/user-products-db'
+
+export default {
+ /**
+ * Fetch products of current loggedin user
+ */
+ getUserProducts: async ({ rootState, commit }) => {
+ const userProductDb = new UserProductsDB(rootState.authentication.user.id)
+
+ const products = await userProductDb.readAll()
+ commit('setProducts', products)
+ },
+
+ /**
+ * Create a product for current loggedin user
+ */
+ createUserProduct: async ({ commit, rootState }, product) => {
+ const userProductDb = new UserProductsDB(rootState.authentication.user.id)
+
+ commit('setProductCreationPending', true)
+ const createdProduct = await userProductDb.create(product)
+ commit('addProduct', createdProduct)
+ commit('setProductCreationPending', false)
+ },
+
+ /**
+ * Create a new product for current loggedin user and reset product name input
+ */
+ triggerAddProductAction: ({ dispatch, state, commit }) => {
+ if (state.productNameToCreate === '') return
+
+ const product = { name: state.productNameToCreate }
+ commit('setProductNameToCreate', '')
+ dispatch('createUserProduct', product)
+ },
+
+ /**
+ * Delete a user product from its id
+ */
+ deleteUserProduct: async ({ rootState, commit, getters }, productId) => {
+ if (getters.isProductDeletionPending(productId)) return
+
+ const userProductsDb = new UserProductsDB(rootState.authentication.user.id)
+
+ commit('addProductDeletionPending', productId)
+ await userProductsDb.delete(productId)
+ commit('removeProductById', productId)
+ commit('removeProductDeletionPending', productId)
+ }
+}
diff --git a/src/store/products/products.getters.js b/src/store/products/products.getters.js
new file mode 100644
index 0000000..4081ca7
--- /dev/null
+++ b/src/store/products/products.getters.js
@@ -0,0 +1,7 @@
+export default {
+ /**
+ * Check if a product has deletion pending
+ */
+ isProductDeletionPending: state => productId =>
+ state.productDeletionPending.includes(productId)
+}
diff --git a/src/store/products/products.mutations.js b/src/store/products/products.mutations.js
new file mode 100644
index 0000000..6cf125b
--- /dev/null
+++ b/src/store/products/products.mutations.js
@@ -0,0 +1,25 @@
+export default {
+ /* Product input name */
+ setProductNameToCreate: (state, productNameToCreate) =>
+ (state.productNameToCreate = productNameToCreate),
+
+ /* Products */
+ setProducts: (state, products) => (state.products = products),
+ addProduct: (state, product) => state.products.push(product),
+ removeProductById: (state, productId) => {
+ const index = state.products.findIndex(product => product.id === productId)
+ state.products.splice(index, 1)
+ },
+
+ /* Products deletion */
+ addProductDeletionPending: (state, productId) =>
+ state.productDeletionPending.push(productId),
+ removeProductDeletionPending: (state, productId) => {
+ const index = state.products.findIndex(product => product.id === productId)
+ state.productDeletionPending.splice(index, 1)
+ },
+
+ /* Product creation */
+ setProductCreationPending: (state, value) =>
+ (state.productCreationPending = value)
+}
diff --git a/src/store/products/products.state.js b/src/store/products/products.state.js
new file mode 100644
index 0000000..240b313
--- /dev/null
+++ b/src/store/products/products.state.js
@@ -0,0 +1,6 @@
+export default {
+ products: null,
+ productNameToCreate: '',
+ productDeletionPending: [],
+ productCreationPending: false
+}
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
new file mode 100644
index 0000000..a0102a9
--- /dev/null
+++ b/src/theme/variables.scss
@@ -0,0 +1,12 @@
+/* Misc */
+
+$vue-color: #46bd87;
+$danger-color: #ea4d46;
+
+/* Navbar */
+
+$navbar-height: 3.6rem;
+$navbar-color: #fff;
+$navbar-offline-color: #333;
+$navbar-link-color: #2c3e50;
+$navbar-link-active-color: $vue-color;
diff --git a/src/views/CheckLogin.vue b/src/views/CheckLogin.vue
new file mode 100644
index 0000000..0963ff2
--- /dev/null
+++ b/src/views/CheckLogin.vue
@@ -0,0 +1,38 @@
+
+ Loading...
++ You don't have any product yet +
++ Loading... +
+ + + + + diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..f12af16 --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,67 @@ + + + + + + + diff --git a/src/views/Login.vue b/src/views/Login.vue new file mode 100644 index 0000000..8dc40be --- /dev/null +++ b/src/views/Login.vue @@ -0,0 +1,114 @@ + +
+
+
+
+
+
+
diff --git a/src/views/Products.vue b/src/views/Products.vue
new file mode 100644
index 0000000..f9580a3
--- /dev/null
+++ b/src/views/Products.vue
@@ -0,0 +1,31 @@
+
+ Login page
+ + +Authenticating...
+
+
+
+ Please check your connection, login feature is not available offline.
+
+
+ {{ loginError }}
+ +
+ Login with google
+
+
+
+
+
+
+
+
diff --git a/tests/e2e/.eslintrc.js b/tests/e2e/.eslintrc.js
new file mode 100644
index 0000000..71530ac
--- /dev/null
+++ b/tests/e2e/.eslintrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+ plugins: ['cypress'],
+ env: {
+ mocha: true,
+ 'cypress/globals': true
+ },
+ rules: {
+ strict: 'off'
+ }
+}
diff --git a/tests/e2e/plugins/index.js b/tests/e2e/plugins/index.js
new file mode 100644
index 0000000..e841276
--- /dev/null
+++ b/tests/e2e/plugins/index.js
@@ -0,0 +1,24 @@
+// https://docs.cypress.io/guides/guides/plugins-guide.html
+
+// if you need a custom webpack configuration you can uncomment the following import
+// and then use the `file:preprocessor` event
+// as explained in the cypress docs
+// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
+
+/* eslint-disable import/no-extraneous-dependencies, global-require, arrow-body-style */
+// const webpack = require('@cypress/webpack-preprocessor')
+
+module.exports = (on, config) => {
+ // on('file:preprocessor', webpack({
+ // webpackOptions: require('@vue/cli-service/webpack.config'),
+ // watchOptions: {}
+ // }))
+
+ return Object.assign({}, config, {
+ fixturesFolder: 'tests/e2e/fixtures',
+ integrationFolder: 'tests/e2e/specs',
+ screenshotsFolder: 'tests/e2e/screenshots',
+ videosFolder: 'tests/e2e/videos',
+ supportFile: 'tests/e2e/support/index.js'
+ })
+}
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
new file mode 100644
index 0000000..75fc1f1
--- /dev/null
+++ b/tests/e2e/specs/test.js
@@ -0,0 +1,8 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('My First Test', () => {
+ it('Visits the app root url', () => {
+ cy.visit('/login')
+ cy.contains('h1', 'Login')
+ })
+})
diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js
new file mode 100644
index 0000000..c1f5a77
--- /dev/null
+++ b/tests/e2e/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/tests/e2e/support/index.js b/tests/e2e/support/index.js
new file mode 100644
index 0000000..d68db96
--- /dev/null
+++ b/tests/e2e/support/index.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/tests/unit/.eslintrc.js b/tests/unit/.eslintrc.js
new file mode 100644
index 0000000..958d51b
--- /dev/null
+++ b/tests/unit/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+ env: {
+ jest: true
+ }
+}
diff --git a/tests/unit/misc/helpers.spec.js b/tests/unit/misc/helpers.spec.js
new file mode 100644
index 0000000..4786b39
--- /dev/null
+++ b/tests/unit/misc/helpers.spec.js
@@ -0,0 +1,19 @@
+import { createNewUserFromFirebaseAuthUser } from '@/misc/helpers'
+
+const mockCreate = jest.fn()
+jest.mock('@/firebase/users-db', () =>
+ jest.fn().mockImplementation(() => ({ create: mockCreate }))
+)
+
+describe('helpers', () => {
+ describe('createNewUserFromFirebaseAuthUser', () => {
+ it('should set user with the created user', async () => {
+ const firebaseUser = { providerData: [{ id: 1 }] }
+ const newUser = { id: 2 }
+ mockCreate.mockResolvedValue(Promise.resolve(newUser))
+ const createdUser = await createNewUserFromFirebaseAuthUser(firebaseUser)
+
+ expect(createdUser).toBe(newUser)
+ })
+ })
+})
diff --git a/tests/unit/setup.js b/tests/unit/setup.js
new file mode 100644
index 0000000..47aa2bb
--- /dev/null
+++ b/tests/unit/setup.js
@@ -0,0 +1,23 @@
+class LocalStorageMock {
+ constructor() {
+ this.store = {}
+ }
+
+ clear() {
+ this.store = {}
+ }
+
+ getItem(key) {
+ return this.store[key] || null
+ }
+
+ setItem(key, value) {
+ this.store[key] = value.toString()
+ }
+
+ removeItem(key) {
+ delete this.store[key]
+ }
+}
+
+global.localStorage = new LocalStorageMock()
diff --git a/tests/unit/store/app/app.actions.spec.js b/tests/unit/store/app/app.actions.spec.js
new file mode 100644
index 0000000..1d63838
--- /dev/null
+++ b/tests/unit/store/app/app.actions.spec.js
@@ -0,0 +1,19 @@
+import actions from '@/store/app/app.actions'
+
+const commit = jest.fn()
+
+afterEach(() => {
+ commit.mockReset()
+})
+
+describe('app module action', () => {
+ describe('closeAddToHomeScreenModalForApple', () => {
+ it('should set the state of the modal as closed', () => {
+ actions.closeAddToHomeScreenModalForApple({ commit })
+ expect(commit).toHaveBeenCalledWith(
+ 'setShowAddToHomeScreenModalForApple',
+ false
+ )
+ })
+ })
+})
diff --git a/tests/unit/store/app/app.mutations.spec.js b/tests/unit/store/app/app.mutations.spec.js
new file mode 100644
index 0000000..6e08663
--- /dev/null
+++ b/tests/unit/store/app/app.mutations.spec.js
@@ -0,0 +1,51 @@
+import mutations from '@/store/app/app.mutations'
+
+describe('app module mutation', () => {
+ describe('setNetworkOnline', () => {
+ it('should set network online state to the value given in parameter', () => {
+ const state = {
+ networkOnLine: false,
+ newContentAvailable: false,
+ showAddToHomeScreenModalForApple: false
+ }
+ mutations.setNetworkOnline(state, true)
+ expect(state).toEqual({
+ networkOnLine: true,
+ newContentAvailable: false,
+ showAddToHomeScreenModalForApple: false
+ })
+ })
+ })
+
+ describe('setNewContentAvailable', () => {
+ it('should set new content available state to the value given in parameter', () => {
+ const state = {
+ networkOnLine: false,
+ newContentAvailable: false,
+ showAddToHomeScreenModalForApple: false
+ }
+ mutations.setNewContentAvailable(state, true)
+ expect(state).toEqual({
+ networkOnLine: false,
+ newContentAvailable: true,
+ showAddToHomeScreenModalForApple: false
+ })
+ })
+ })
+
+ describe('setShowAddToHomeScreenModalForApple', () => {
+ it('should set show add to home screen modal for apple state to the value given in parameter', () => {
+ const state = {
+ networkOnLine: false,
+ newContentAvailable: false,
+ showAddToHomeScreenModalForApple: false
+ }
+ mutations.setShowAddToHomeScreenModalForApple(state, true)
+ expect(state).toEqual({
+ networkOnLine: false,
+ newContentAvailable: false,
+ showAddToHomeScreenModalForApple: true
+ })
+ })
+ })
+})
diff --git a/tests/unit/store/authentication/authentication.actions.spec.js b/tests/unit/store/authentication/authentication.actions.spec.js
new file mode 100644
index 0000000..c5346d4
--- /dev/null
+++ b/tests/unit/store/authentication/authentication.actions.spec.js
@@ -0,0 +1,104 @@
+import { createNewUserFromFirebaseAuthUser } from '@/misc/helpers'
+import actions from '@/store/authentication/authentication.actions'
+import router from '@/router'
+
+const mockUsersDbRead = jest.fn()
+jest.mock('@/firebase/users-db', () =>
+ jest.fn().mockImplementation(() => ({ read: mockUsersDbRead }))
+)
+jest.mock('@/misc/helpers', () => ({
+ createNewUserFromFirebaseAuthUser: jest.fn()
+}))
+
+const commit = jest.fn()
+const dispatch = jest.fn()
+const user = {
+ displayName: 'Robert Bob',
+ photoUrl: 'https://my-awesome-photo.com',
+ email: 'robert.bob@mail.com'
+}
+
+afterEach(() => {
+ commit.mockReset()
+ dispatch.mockReset()
+ mockUsersDbRead.mockReset()
+ createNewUserFromFirebaseAuthUser.mockReset()
+})
+
+describe('authentication module action', () => {
+ describe('login', () => {
+ const firebaseUser = { providerData: [user] }
+
+ it('should set user with existing user', async () => {
+ mockUsersDbRead.mockResolvedValue(Promise.resolve(user))
+ await actions.login({ commit, dispatch }, firebaseUser)
+
+ expect(commit).toHaveBeenCalledWith('setUser', user)
+ })
+
+ it('should set user with a new created user', async () => {
+ const newCreatedUser = { id: 1 }
+ mockUsersDbRead.mockResolvedValue(Promise.resolve(undefined))
+ createNewUserFromFirebaseAuthUser.mockImplementation(() =>
+ Promise.resolve(newCreatedUser)
+ )
+
+ await actions.login({ commit, dispatch }, firebaseUser)
+
+ expect(commit).toHaveBeenCalledWith('setUser', newCreatedUser)
+ })
+
+ it('should get products for the user', async () => {
+ mockUsersDbRead.mockResolvedValue(Promise.resolve(user))
+
+ await actions.login({ commit, dispatch }, firebaseUser)
+
+ expect(dispatch).toHaveBeenCalledWith('products/getUserProducts', null, {
+ root: true
+ })
+ })
+ })
+
+ describe('logout', () => {
+ const push = jest.spyOn(router, 'push').mockImplementation()
+
+ beforeEach(() => {
+ router.app = { $route: { meta: { authNotRequired: false } } }
+ })
+
+ afterEach(() => {
+ push.mockClear()
+ })
+
+ it('should set the user to null', async () => {
+ await actions.logout({ commit, dispatch })
+
+ expect(commit).toHaveBeenCalledWith('setUser', null)
+ })
+
+ it('should set products to null', async () => {
+ await actions.logout({ commit, dispatch })
+
+ expect(commit).toHaveBeenCalledWith('products/setProducts', null, {
+ root: true
+ })
+ })
+
+ it('should push login view if the current route is not authorized', async () => {
+ jest.spyOn(router, 'push')
+
+ await actions.logout({ commit, dispatch })
+
+ expect(push).toHaveBeenCalledWith('/login')
+ })
+
+ it('should not push any page if the current page is authorized', async () => {
+ router.app = { $route: { meta: { authNotRequired: true } } }
+ jest.spyOn(router, 'push')
+
+ await actions.logout({ commit, dispatch })
+
+ expect(push).not.toHaveBeenCalled()
+ })
+ })
+})
diff --git a/tests/unit/store/authentication/authentication.getters.spec.js b/tests/unit/store/authentication/authentication.getters.spec.js
new file mode 100644
index 0000000..ed99d11
--- /dev/null
+++ b/tests/unit/store/authentication/authentication.getters.spec.js
@@ -0,0 +1,15 @@
+import getters from '@/store/authentication/authentication.getters'
+
+describe('authentication module getters', () => {
+ describe('isUserLoggedIn', () => {
+ it('should be false if the user is not logged in', () => {
+ const state = { user: null }
+ expect(getters.isUserLoggedIn(state)).toBe(false)
+ })
+
+ it('should be true if the user is logged in', () => {
+ const state = { user: { id: 1 } }
+ expect(getters.isUserLoggedIn(state)).toBe(true)
+ })
+ })
+})
diff --git a/tests/unit/store/authentication/authentication.mutations.spec.js b/tests/unit/store/authentication/authentication.mutations.spec.js
new file mode 100644
index 0000000..86606c2
--- /dev/null
+++ b/tests/unit/store/authentication/authentication.mutations.spec.js
@@ -0,0 +1,21 @@
+import mutations from '@/store/authentication/authentication.mutations'
+
+const user = {
+ displayName: 'Robert Bob',
+ photoUrl: 'https://my-awesome-photo.com',
+ email: 'robert.bob@mail.com'
+}
+
+describe('authentication module mutation', () => {
+ describe('setUser', () => {
+ it('should set the user to the given parameter', () => {
+ const state = {
+ user: null
+ }
+ mutations.setUser(state, user)
+ expect(state).toEqual({
+ user
+ })
+ })
+ })
+})
diff --git a/tests/unit/store/products/products.actions.spec.js b/tests/unit/store/products/products.actions.spec.js
new file mode 100644
index 0000000..ee0f74f
--- /dev/null
+++ b/tests/unit/store/products/products.actions.spec.js
@@ -0,0 +1,156 @@
+import actions from '@/store/products/products.actions'
+
+jest.mock('@/firebase/user-products-db', () => ({
+ UserProductsDB: jest.mock()
+}))
+
+const mockUsersDbReadAll = jest.fn()
+const mockUsersDbCreate = jest.fn()
+const mockUsersDbDelete = jest.fn()
+jest.mock('@/firebase/user-products-db', () =>
+ jest.fn().mockImplementation(() => ({
+ readAll: mockUsersDbReadAll,
+ create: mockUsersDbCreate,
+ delete: mockUsersDbDelete
+ }))
+)
+
+const commit = jest.fn()
+const dispatch = jest.fn()
+const isProductDeletionPending = jest.fn()
+const userId = 11
+const user = { id: userId }
+const product1 = { id: 1, name: 'product1' }
+const product2 = { id: 2, name: 'product2' }
+const rootState = {
+ authentication: {
+ user
+ }
+}
+const getters = {
+ isProductDeletionPending
+}
+
+afterEach(() => {
+ commit.mockReset()
+ dispatch.mockReset()
+ mockUsersDbReadAll.mockReset()
+ mockUsersDbCreate.mockReset()
+ mockUsersDbDelete.mockReset()
+ isProductDeletionPending.mockReset()
+})
+
+describe('products module action', () => {
+ describe('getUserProducts', () => {
+ it('should set products with ones owned by the current user', async () => {
+ mockUsersDbReadAll.mockResolvedValue([product1, product2])
+ await actions.getUserProducts({ commit, rootState })
+ expect(commit).toHaveBeenCalledWith('setProducts', [product1, product2])
+ })
+ })
+
+ describe('createUserProduct', () => {
+ it('should set product creation as pending first', async () => {
+ mockUsersDbCreate.mockResolvedValue(product2)
+ await actions.createUserProduct({ commit, rootState })
+ expect(commit).toHaveBeenNthCalledWith(
+ 1,
+ 'setProductCreationPending',
+ true
+ )
+ })
+
+ it('should add product', async () => {
+ mockUsersDbCreate.mockResolvedValue(product2)
+ await actions.createUserProduct({ commit, rootState }, product1)
+ expect(commit).toHaveBeenNthCalledWith(2, 'addProduct', product2)
+ })
+
+ it('should set product creation as not pending after adding product', async () => {
+ mockUsersDbCreate.mockResolvedValue(product2)
+ await actions.createUserProduct({ commit, rootState }, product1)
+ expect(commit).toHaveBeenNthCalledWith(
+ 3,
+ 'setProductCreationPending',
+ false
+ )
+ })
+ })
+
+ describe('triggerAddProductAction', async () => {
+ describe('when the name of the product is empty', () => {
+ const state = {
+ productNameToCreate: ''
+ }
+
+ it('should not set input name to empty', () => {
+ actions.triggerAddProductAction({ dispatch, state, commit })
+ expect(commit).not.toHaveBeenCalled()
+ })
+
+ it('should not dispatch create product action', () => {
+ actions.triggerAddProductAction({ dispatch, state, commit })
+ expect(dispatch).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('when the name of the product is not empty', () => {
+ const state = {
+ productNameToCreate: 'todo'
+ }
+
+ it('should set input name to empty', () => {
+ actions.triggerAddProductAction({ dispatch, state, commit })
+ expect(commit).toHaveBeenCalledWith('setProductNameToCreate', '')
+ })
+
+ it('should dispatch create product action', () => {
+ actions.triggerAddProductAction({ dispatch, state, commit })
+ expect(dispatch).toHaveBeenCalledWith('createUserProduct', {
+ name: 'todo'
+ })
+ })
+ })
+ })
+
+ describe('deleteUserProduct', () => {
+ describe('when the product is currently being deleted', () => {
+ it('should not do anything', async () => {
+ isProductDeletionPending.mockReturnValue(true)
+ await actions.deleteUserProduct({ commit, rootState, getters }, 1)
+ expect(commit).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('when the product is not currently being deleted', () => {
+ it('should set product as deletion pending first', async () => {
+ getters.isProductDeletionPending.mockReturnValue(false)
+ await actions.deleteUserProduct({ commit, rootState, getters }, 1)
+ expect(commit).toHaveBeenNthCalledWith(
+ 1,
+ 'addProductDeletionPending',
+ 1
+ )
+ })
+
+ it('should remove product in store', async () => {
+ await actions.deleteUserProduct({ commit, rootState, getters }, 1)
+ expect(commit).toHaveBeenNthCalledWith(2, 'removeProductById', 1)
+ })
+
+ it('should remove product in db', async () => {
+ await actions.deleteUserProduct({ commit, rootState, getters }, 1)
+ expect(mockUsersDbDelete).toHaveBeenCalledWith(1)
+ })
+
+ it('should set product as not deletion pending after having removed the product', async () => {
+ await actions.deleteUserProduct({ commit, rootState, getters }, 1)
+ expect(commit).toHaveBeenNthCalledWith(
+ 3,
+ 'removeProductDeletionPending',
+ 1
+ )
+ })
+ })
+ })
+})
diff --git a/tests/unit/store/products/products.getters.spec.js b/tests/unit/store/products/products.getters.spec.js
new file mode 100644
index 0000000..dca5687
--- /dev/null
+++ b/tests/unit/store/products/products.getters.spec.js
@@ -0,0 +1,17 @@
+import getters from '@/store/products/products.getters'
+
+const state = { productDeletionPending: [1, 2, 3] }
+
+describe('products module getters', () => {
+ describe('isProductDeletionPending', () => {
+ it('should return true if the given product id is marked as pending', () => {
+ const result = getters.isProductDeletionPending(state)(1)
+ expect(result).toBe(true)
+ })
+
+ it('should return false if the given product id is not marked as pending', () => {
+ const result = getters.isProductDeletionPending(state)(4)
+ expect(result).toBe(false)
+ })
+ })
+})
diff --git a/tests/unit/store/products/products.mutations.spec.js b/tests/unit/store/products/products.mutations.spec.js
new file mode 100644
index 0000000..fddaede
--- /dev/null
+++ b/tests/unit/store/products/products.mutations.spec.js
@@ -0,0 +1,90 @@
+import mutations from '@/store/products/products.mutations'
+import { cloneDeep } from 'lodash'
+
+const product1 = { id: 1, name: 'product1' }
+const product2 = { id: 2, name: 'product2' }
+const baseState = {
+ products: [product1, product2],
+ productNameToCreate: '',
+ productDeletionPending: [1],
+ productCreationPending: false
+}
+
+describe('products module mutations', () => {
+ describe('setProductNameToCreate', () => {
+ it('should set product name to create correctly', () => {
+ const state = cloneDeep(baseState)
+ mutations.setProductNameToCreate(state, 'toto')
+ expect(state).toEqual({
+ ...baseState,
+ productNameToCreate: 'toto'
+ })
+ })
+ })
+
+ describe('setProducts', () => {
+ it('should set products correctly', () => {
+ const state = { ...cloneDeep(baseState), products: [] }
+ mutations.setProducts(state, [product2, product1])
+ expect(state).toEqual({
+ ...baseState,
+ products: [product2, product1]
+ })
+ })
+ })
+
+ describe('addProducts', () => {
+ it('should add product correctly', () => {
+ const state = { ...cloneDeep(baseState), products: [] }
+ mutations.addProduct(state, product1)
+ expect(state).toEqual({
+ ...baseState,
+ products: [product1]
+ })
+ })
+ })
+
+ describe('removeProductById', () => {
+ it('should remove product correctly', () => {
+ const state = cloneDeep(baseState)
+ mutations.removeProductById(state, 2)
+ expect(state).toEqual({
+ ...baseState,
+ products: [product1]
+ })
+ })
+ })
+
+ describe('addProductDeletionPending', () => {
+ it('should mark product as deletion correctly', () => {
+ const state = cloneDeep(baseState)
+ mutations.addProductDeletionPending(state, 2)
+ expect(state).toEqual({
+ ...baseState,
+ productDeletionPending: [1, 2]
+ })
+ })
+ })
+
+ describe('removeProductDeletionPending', () => {
+ it('should unmark product as deletion correctly', () => {
+ const state = cloneDeep(baseState)
+ mutations.removeProductDeletionPending(state, 1)
+ expect(state).toEqual({
+ ...baseState,
+ productDeletionPending: []
+ })
+ })
+ })
+
+ describe('setProductCreationPending', () => {
+ it('should set product creation pending correctly', () => {
+ const state = cloneDeep(baseState)
+ mutations.setProductCreationPending(state, true)
+ expect(state).toEqual({
+ ...baseState,
+ productCreationPending: true
+ })
+ })
+ })
+})
diff --git a/tests/unit/views/Login.spec.js b/tests/unit/views/Login.spec.js
new file mode 100644
index 0000000..400d738
--- /dev/null
+++ b/tests/unit/views/Login.spec.js
@@ -0,0 +1,107 @@
+import Vuex from 'vuex'
+import { cloneDeep } from 'lodash'
+import { createLocalVue, shallowMount } from '@vue/test-utils'
+import LoginView from '@/views/Login.vue'
+
+const defaultStoreStructure = {
+ modules: {
+ app: {
+ namespaced: true,
+ state: {
+ networkOnLine: true
+ }
+ },
+ authentication: {
+ namespaced: true,
+ state: {
+ user: undefined
+ },
+ mutations: {
+ setUser: jest.fn()
+ }
+ }
+ }
+}
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+describe('LoginView', () => {
+ describe('when user is null', () => {
+ let storeStructure
+ beforeEach(() => {
+ storeStructure = cloneDeep(defaultStoreStructure)
+ storeStructure.modules.authentication.state.user = null
+ })
+
+ it('should not display loader if user is null', () => {
+ const store = new Vuex.Store(storeStructure)
+ const wrapper = shallowMount(LoginView, { store, localVue })
+ const loader = wrapper.find('[data-test="loader"]')
+ expect(loader.isVisible()).toBeFalsy()
+ })
+
+ it('should display login button', () => {
+ const store = new Vuex.Store(storeStructure)
+ const wrapper = shallowMount(LoginView, { store, localVue })
+ const loginButton = wrapper.find('[data-test="login-btn"]')
+ expect(loginButton.isVisible()).toBeTruthy()
+ })
+
+ it('should not display offline message', () => {
+ const store = new Vuex.Store(storeStructure)
+ const wrapper = shallowMount(LoginView, { store, localVue })
+ const offlineInstruction = wrapper.find(
+ '[data-test="offline-instruction"]'
+ )
+ expect(offlineInstruction.isVisible()).toBeFalsy()
+ })
+
+ describe('when app is offline', () => {
+ beforeEach(() => {
+ storeStructure.modules.app.state.networkOnLine = false
+ })
+
+ it('should not display login button if app is offline', () => {
+ const store = new Vuex.Store(storeStructure)
+ const wrapper = shallowMount(LoginView, { store, localVue })
+ const loginButton = wrapper.find('[data-test="login-btn"]')
+ expect(loginButton.isVisible()).toBeFalsy()
+ })
+
+ it('should display offline message', () => {
+ const store = new Vuex.Store(storeStructure)
+ const wrapper = shallowMount(LoginView, { store, localVue })
+ const offlineInstruction = wrapper.find(
+ '[data-test="offline-instruction"]'
+ )
+ expect(offlineInstruction.isVisible()).toBeTruthy()
+ })
+ })
+ })
+
+ describe('when user is undefined', () => {
+ it('should display loader', () => {
+ const store = new Vuex.Store(defaultStoreStructure)
+ const wrapper = shallowMount(LoginView, { store, localVue })
+ const loader = wrapper.find('[data-test="loader"]')
+ expect(loader.isVisible()).toBeTruthy()
+ })
+
+ it('should not display login button', () => {
+ const store = new Vuex.Store(defaultStoreStructure)
+ const wrapper = shallowMount(LoginView, { store, localVue })
+ const loginButton = wrapper.find('[data-test="login-btn"]')
+ expect(loginButton.isVisible()).toBeFalsy()
+ })
+
+ it('should not display offline message', () => {
+ const store = new Vuex.Store(defaultStoreStructure)
+ const wrapper = shallowMount(LoginView, { store, localVue })
+ const offlineInstruction = wrapper.find(
+ '[data-test="offline-instruction"]'
+ )
+ expect(offlineInstruction.isVisible()).toBeFalsy()
+ })
+ })
+})
diff --git a/vue-config/config.default.js b/vue-config/config.default.js
new file mode 100644
index 0000000..d19515c
--- /dev/null
+++ b/vue-config/config.default.js
@@ -0,0 +1,30 @@
+const PrerenderSPAPlugin = require('prerender-spa-plugin') // eslint-disable-line
+const path = require('path')
+
+const prerenderedRoutesList = ['/login', '/home', '/']
+
+module.exports = {
+ /* See https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa for more details */
+ pwa: {
+ appleMobileWebAppStatusBarStyle: 'black',
+ workboxPluginMode: 'InjectManifest',
+ workboxOptions: {
+ swSrc: path.join('public', 'service-worker.js')
+ }
+ },
+ configureWebpack: {
+ output: {
+ filename: '[name].js',
+ chunkFilename: '[name].js'
+ },
+ plugins: [
+ /* See https://github.com/chrisvfritz/prerender-spa-plugin for more details */
+ new PrerenderSPAPlugin({
+ // Required - The path to the webpack-outputted app to prerender.
+ staticDir: path.join(__rootDirname),
+ // Required - Routes to prerender.
+ routes: prerenderedRoutesList
+ })
+ ]
+ }
+}
diff --git a/vue-config/config.development.js b/vue-config/config.development.js
new file mode 100644
index 0000000..4ba52ba
--- /dev/null
+++ b/vue-config/config.development.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/vue-config/config.production.js b/vue-config/config.production.js
new file mode 100644
index 0000000..4b9ce98
--- /dev/null
+++ b/vue-config/config.production.js
@@ -0,0 +1,20 @@
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') // eslint-disable-line
+ .BundleAnalyzerPlugin
+
+module.exports = {
+ css: {
+ extract: {
+ filename: 'css/[name].css',
+ chunkFilename: 'css/[id].css'
+ }
+ },
+ configureWebpack: {
+ plugins: [
+ /* Refer to https://www.npmjs.com/package/webpack-bundle-analyzer for more details */
+ new BundleAnalyzerPlugin({
+ analyzerMode: 'disabled',
+ generateStatsFile: true
+ })
+ ]
+ }
+}
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..40fd737
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,19 @@
+// Declare root dirname globally
+const path = require('path')
+
+global.__rootDirname = path.join(__dirname, 'dist')
+
+const fs = require('fs')
+const merge = require('webpack-merge')
+const defaultConfiguration = require('./vue-config/config.default')
+
+const environmentConfigurationPath =
+ './vue-config/config.' + process.env.NODE_ENV + '.js'
+
+const environmentConfiguration = fs.existsSync(environmentConfigurationPath)
+ ? require(environmentConfigurationPath) // eslint-disable-line
+ : {}
+
+const config = merge(defaultConfiguration, environmentConfiguration)
+
+module.exports = config