publish: Version 1.1.0

Add auth and router navigation
bikingbadger · Mar 3, 2021 · a1c5858 · a1c5858
2 parents a94092d + 683cf7a
commit a1c5858
Show file tree

Hide file tree

Showing 20 changed files with 1,899 additions and 162 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,13 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "firebase": "^8.2.9",
     "howler": "^2.2.1",
+    "markdown-it": "^12.0.4",
+    "mitt": "^2.1.0",
+    "primeflex": "^2.0.0",
+    "primeicons": "^4.1.0",
+    "primevue": "^3.3.2",
     "vue": "^3.0.5",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0"

diff --git a/public/index.html b/public/index.html
@@ -1,18 +1,23 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,63 +1,19 @@
 <template>
-  <header>
-    <h1>Pompom</h1>
-    <div class="nav">
-      <router-link to="/">Home</router-link>
-      <router-link to="/about">About</router-link>
-    </div>
-  </header>
+  <the-header />
   <router-view />
 </template>
 
 <script>
+import TheHeader from '@/components/ui/TheHeader.vue';
 import { mapActions } from 'vuex';
 
 export default {
+  components: { TheHeader },
   methods: {
     ...mapActions('tasks', ['getTodoistTasks']),
   },
   mounted() {
-    // https://blog.logrocket.com/how-to-consume-apis-with-vuex-and-axios/
-    console.log('Get tasks from todoist');
     this.getTodoistTasks();
   },
 };
 </script>
-
-<style>
-* {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  box-sizing: border-box;
-}
-
-:root {
-  --clr-accent-500: #002fa7;
-}
-
-body {
-  font-family: 'PT Sans', sans-serif;
-  font-size: 1.25rem;
-  font-weight: 400;
-}
-
-header {
-  margin-bottom: 2rem;
-}
-
-h1 {
-  text-align: center;
-}
-
-.nav {
-  display: flex;
-  justify-content: center;
-  gap: 2rem;
-}
-
-/* Utility classes */
-.flow-content > * + * {
-  margin-top: 0.75rem;
-}
-</style>
diff --git a/src/components/tasks/TaskList.vue b/src/components/tasks/TaskList.vue
@@ -3,21 +3,26 @@
     <ul>
       <li v-for="task in allTasks" :key="task.id">
         <div class="task-complete" @click="completeTask(task)"></div>
-        <div>{{ task.description }}</div>
+        <div v-html="formattedDescription(task.description)"></div>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import MarkdownIt from 'markdown-it';
 
 export default {
   computed: {
     ...mapGetters('tasks', ['allTasks']),
   },
   methods: {
     ...mapActions('tasks', ['completeTask']),
+    formattedDescription(description) {
+      const md = new MarkdownIt({ html: true, linkify: true, typographer: true });
+      return md.render(description);
+    },
   },
 };
 </script>

diff --git a/src/components/timer/TimerBar.vue b/src/components/timer/TimerBar.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="timer">
-    <div class="timer-display">{{ getCurrentTime }}</div>
-    <div class="pompoms">
-      <ul>
+    <div class="pompom-area">
+      <ul class="pompoms">
         <li v-for="pompom in numberOfPompoms" v-bind:key="pompom.id">🍅</li>
       </ul>
     </div>
     <div class="button-area">
-      <button class="btn btn-go" @click="toggleTimer">{{ buttonText }}</button>
-      <button class="btn btn-reset" @click="resetTimer">Reset</button>
+      <Button @click="toggleTimer">{{ buttonText }}</Button>
+      <Button @click="resetTimer">Reset</Button>
     </div>
+
+    <div class="timer-display">{{ getCurrentTime }}</div>
   </div>
 </template>
 
@@ -41,20 +42,27 @@ export default {
 
 <style scoped>
 .timer {
-  border: 1px solid blue;
-  border-radius: 10px;
-  padding: 1rem;
-  width: 50%;
-  margin: 0 auto;
+  /* border: 1px solid blue; */
+  /* border-radius: 10px; */
+  /* padding: 1rem; */
+  /* width: 50%; */
+  /* margin: 0 auto; */
+  display: flex;
+  align-items: center;
 }
 
 .timer-display {
-  text-align: center;
   font-size: 2rem;
+  margin: 0 1rem;
+}
+
+.pompom-area {
+  margin: 0 1rem;
 }
 
 .pompoms {
-  text-align: center;
+  display: flex;
+  font-size: 1.5rem;
 }
 
 .button-area {

diff --git a/src/components/ui/TheHeader.vue b/src/components/ui/TheHeader.vue
@@ -0,0 +1,80 @@
+<template>
+  <Menubar :model="items">
+    <template #start>
+      <!-- <img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2" /> -->
+    </template>
+    <template #end>
+      <timer-bar v-if="isLoggedIn"></timer-bar>
+      <!-- <InputText placeholder="Search" type="text" /> -->
+      <div>
+        <Button
+          v-if="isLoggedIn"
+          icon="pi pi-lock-open"
+          @click="logout"
+          class="p-mr-2 p-button-rounded"
+        />
+        <router-link to="login" v-if="!isLoggedIn">
+          <Button icon="pi pi-lock" class="p-mr-2 p-button-rounded" title="login"></Button>
+        </router-link>
+        <router-link to="register" v-if="!isLoggedIn">
+          <Button
+            icon="pi pi-pencil"
+            class="p-mr-2 p-button-rounded"
+            @click="register"
+            title="register"
+        /></router-link>
+      </div>
+    </template>
+  </Menubar>
+</template>
+
+<script>
+// import firebase from '@/utilities/firebase';
+import { mapGetters, mapActions } from 'vuex';
+import TimerBar from '@/components/timer/TimerBar.vue';
+import Menubar from 'primevue/menubar';
+
+export default {
+  components: { TimerBar, Menubar },
+  emits: ['login', 'register'],
+  data() {
+    return {
+      items: [
+        {
+          label: 'Home',
+          icon: 'pi pi-fw pi-home',
+          to: '/home',
+        },
+      ],
+    };
+  },
+  computed: {
+    // isLoggedIn() {
+    //   return firebase.auth().currentUser;
+    // },
+    ...mapGetters('auth', ['isLoggedIn']),
+  },
+  methods: {
+    ...mapActions('auth', ['logout']),
+    login() {
+      this.$emit('login');
+    },
+    register() {
+      this.$emit('register');
+    },
+  },
+};
+</script>
+
+<style>
+.p-menubar {
+  position: sticky;
+  top: 0;
+  background-color: #3f51b5;
+  color: white;
+}
+
+.p-menubar-end {
+  display: flex;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -1,12 +1,49 @@
 import { createApp } from 'vue';
+// Prime vue components
+import PrimeVue from 'primevue/config';
+import InputText from 'primevue/inputtext';
+import Button from 'primevue/button';
+import Toast from 'primevue/toast';
+import ToastService from 'primevue/toastservice';
+import Dialog from 'primevue/dialog';
+import Password from 'primevue/password';
+import Panel from 'primevue/panel';
+
+import 'primevue/resources/themes/md-light-indigo/theme.css';
+// import 'primevue/resources/themes/md-dark-indigo/theme.css';
+import 'primevue/resources/primevue.min.css';
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
+
 import App from './App.vue';
-import router from './router';
 import store from './store/index';
+import router from './router';
+import firebase from './utilities/firebase';
+
+let app;
 
-const app = createApp(App);
+firebase.auth().onAuthStateChanged(() => {
+  // Check if user is logged in on firebase
+  // logout if not
+  if (!firebase.auth().currentUser) {
+    store.dispatch('auth/logout');
+  }
 
-app.use(router);
+  if (!app) {
+    app = createApp(App);
 
-app.use(store);
+    app.use(router);
+    app.use(store);
+    app.use(firebase);
+    app.use(PrimeVue, { ripple: true });
+    app.use(ToastService);
 
-app.mount('#app');
+    app.component('InputText', InputText);
+    app.component('Button', Button);
+    app.component('Toast', Toast);
+    app.component('Dialog', Dialog);
+    app.component('Password', Password);
+    app.component('Panel', Panel);
+    app.mount('#app');
+  }
+});