Fix auth, mobile menu, other component warnings (#172)

* Fix auth, mobile menu, other component warnings

* fix errors for page and menu load

Author: gwenf

curriculum-back/server/api/auth.js

@@ -74,7 +74,7 @@ router.route('/register')
         }
         res.status(201).send({ username, email })
       } else {
-        res.send('Invalid credentials').status(400)
+        res.status(400).send('Invalid credentials')
       }
     } catch(err) {
       console.error(err)

curriculum-back/server/api/curricula.js

@@ -32,6 +32,8 @@ router.route('/')
 authRouter.route('/')
   .post(async function (req, res) {
     const { name, goal, description, sections, createdBy } = req.body
+    console.log("*" * 10)
+    console.log(req.body)
     const curriculum = new Curriculum({
       name,
       goal,

curriculum-front/src/App.vue

@@ -1,11 +1,11 @@
 <template>
   <v-app :theme="theme">
-    <TopNav :openDrawer="openDrawer" v-model:theme="theme" />
+    <TopNav v-model:theme="theme" />
     <MobileDrawer />
 
-    <v-content>
+    <v-main>
       <RouterView />
-    </v-content>
+    </v-main>
     <v-snackbar v-model="snackbarOptions.show" :multi-line="true" :right="true" :top="true" :timeout="6000"
       :color="snackbarOptions.variant">
       {{ snackbarOptions.message }}

curriculum-front/src/components/MobileDrawer.vue

@@ -1,14 +1,12 @@
 <template>
   <v-navigation-drawer v-if="mobile" v-model="isDrawerOpen" app right temporary>
     <v-list dense>
-      <v-list-item v-for="item in navItems" :key="item.name" link>
-        <v-list-item-icon>
-          <v-icon>mdi-{{ item.icon }}</v-icon>
-        </v-list-item-icon>
+      <v-list-item v-for="item in navItems" :key="item.name" :to="item.route" link>
+        <template v-slot:prepend>
+          <v-icon :icon="`mdi-${item.icon}`"></v-icon>
+        </template>
 
-        <v-list-item-content>
-          <v-list-item-title>{{ item.title }}</v-list-item-title>
-        </v-list-item-content>
+        <v-list-item-title>{{ item.title }}</v-list-item-title>
       </v-list-item>
     </v-list>
   </v-navigation-drawer>
@@ -18,20 +16,57 @@
 import { ref, toRefs } from 'vue'
 import { useDisplay } from 'vuetify'
 
+import { useAuthStore } from '@/stores/auth'
 import { useGeneralStore } from '@/stores/general'
 
 const { mobile } = useDisplay()
+const authStore = useAuthStore()
 const generalStore = useGeneralStore()
 const { isDrawerOpen } = toRefs(generalStore)
 
-const navItems = ref([
+const navItems_ = [
   {
-    name: 'Home',
-    icon: 'home'
+    title: 'Home',
+    icon: 'home',
+    route: '/',
   },
-  {
-    name: 'View All',
-    icon: 'magnify'
-  }
-])
+]
+if (authStore.user.token) {
+  navItems_.push(
+    {
+      title: 'View All',
+      icon: 'view-list',
+      route: '/curricula',
+    },
+    {
+      title: 'Create',
+      icon: 'plus',
+      route: '/curricula/create',
+    },
+    {
+      title: 'Settings',
+      icon: 'cog',
+      route: '/settings',
+    },
+    {
+      title: 'Log Out',
+      icon: 'logout',
+      route: '/logout',
+    },
+  )
+} else {
+  navItems_.push(
+    {
+      title: 'Log In',
+      icon: 'login',
+      route: '/login',
+    },
+    {
+      title: 'Register',
+      icon: 'account-plus',
+      route: '/register',
+    },
+  )
+}
+const navItems = ref(navItems_)
 </script>

curriculum-front/src/components/TopNav.vue

@@ -15,7 +15,7 @@
       @click="toggleTheme" variant="outlined" class="mr-4" />
 
     <v-toolbar-items v-if="mobile">
-      <v-btn @click="openDrawer()">
+      <v-btn @click="generalStore.isDrawerOpen = true">
         Menu
       </v-btn>
     </v-toolbar-items>
@@ -56,26 +56,27 @@
 </template>
 
 <script setup>
-import { ref, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import { useDisplay } from 'vuetify'
 
 import { useAuthStore } from '@/stores/auth'
+import { useGeneralStore } from '@/stores/general'
 
 const { mobile } = useDisplay()
-const openDrawer = ref(null)
 
 const logout = () => {
   authStore.logUserOut()
 }
 
 const authStore = useAuthStore()
+const generalStore = useGeneralStore()
 const { user } = toRefs(authStore)
 
 const props = defineProps({
   theme: {
     type: String,
     required: true,
-  }
+  },
 })
 
 const emit = defineEmits(['update:theme'])

curriculum-front/src/components/create-form/MainForm.vue

@@ -11,7 +11,7 @@
         <v-subheader>Name *</v-subheader>
       </v-col>
       <v-col cols="9">
-        <v-text-field v-model="state.selectedCurriculum.name" :error-messages="nameErrors" />
+        <v-text-field v-model="state.selectedCurriculum.name" />
       </v-col>
     </v-row>
     <v-row>
@@ -42,38 +42,20 @@
 </template>
 
 <script setup>
-import { computed, toRefs } from 'vue'
+import { toRefs } from 'vue'
+
 import FormSections from './FormSections.vue'
+import { useAuthStore } from '@/stores/auth'
 import { useCurriculumStore } from '@/stores/curricula'
 
 const curriculumStore = useCurriculumStore()
+const authStore = useAuthStore()
+const { user } = toRefs(authStore)
 
 const { state } = toRefs(curriculumStore)
 
-const nameErrors = computed(() => {
-  const errors = []
-  if (!state.value.selectedCurriculum.value.name.$dirty) return errors
-  !state.value.selectedCurriculum.value.name.maxLength && errors.push('Name must be at most 20 characters long.')
-  !state.value.selectedCurriculum.value.name.required && errors.push('Name is required.')
-  return errors
-})
-
-// const sectionNameErrors = (i) => {
-//   const errors = []
-//   if (!sections.value[i].name.$dirty) return errors
-//   !sections.value[i].name.maxLength && errors.push('Name must be at most 30 characters long.')
-//   !sections.value[i].name.required && errors.push('Name is required.')
-//   return errors
-// }
-
-// const sectionUrlErrors = (i, type) => {
-//   const errors = []
-//   if (!sections.value[i][`new${type}`].url.$model.length) return errors
-//   !sections.value[i][`new${type}`].url.url && errors.push('Must be a valid url.')
-//   return errors
-// }
-
 const submit = () => {
-  curriculumStore.patchCurriculum()
+  state.value.selectedCurriculum.createdBy = user.value.id
+  curriculumStore.postCurriculum()
 }
 </script>

curriculum-front/src/components/display-curriculum/Header.vue

@@ -82,7 +82,7 @@ const props = defineProps({
 const emit = defineEmits(['selectCurriculum:update'])
 
 const curriculum_ = computed({
-  get: () => props.selectCurriculum,
+  get: () => props.selectedCurriculum,
   set: () => {
     emit('selectCurriculum:update', props.selectedCurriculum)
   }

curriculum-front/src/router/routes.js

@@ -9,6 +9,8 @@ import ResetPassword from '@/views/auth/ResetPassword.vue'
 import Verify from '@/views/auth/Verify.vue'
 import Settings from '@/views/Settings.vue'
 
+import { useAuthStore } from '@/stores/auth'
+
 export default [
   {
     path: '/',
@@ -40,6 +42,15 @@ export default [
     name: 'verify',
     component: Verify
   },
+  {
+    path: '/logout',
+    name: 'logout',
+    beforeEnter: (to, from, next) => {
+      const authStore = useAuthStore()
+      authStore.logUserOut()
+      next('/login')
+    },
+  },
   {
     path: '/settings',
     name: 'settings',

curriculum-front/src/stores/auth.js

@@ -57,9 +57,8 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logUserOut() {
-    clearUserInfo()
     localStorage.removeItem('token')
-    router.replace('/')
+    clearUserInfo()
   }
 
   function updateUser(payload) {

curriculum-front/src/stores/curricula/index.js

@@ -39,15 +39,17 @@ export const useCurriculumStore = defineStore('curriculum', () => {
     }
   }
 
-  const postCurriculum = async (curriculum) => {
+  const postCurriculum = async () => {
+    const curriculum = state.value.selectedCurriculum
     const res = await axios.post('curricula', curriculum)
     state.value.curricula.push(res.data)
     router.push(`/curricula/${res.data._id}`)
   }
 
   const patchCurriculum = async () => {
     const { _id: curriculumId } = state.value.selectedCurriculum
-    await axios.patch(`curricula/${curriculumId}`, state.value.selectedCurriculum)
+    const res = await axios.patch(`curricula/${curriculumId}`, state.value.selectedCurriculum)
+    state.value.selectedCurriculum = res.data
   }
 
   const deleteCurriculum = async (curriculumId) => {

curriculum-front/src/stores/general.js

@@ -8,6 +8,7 @@ export const useGeneralStore = defineStore('generalStore', () => {
     message: '',
   })
   const isLoading = ref(false)
+  const isDrawerOpen = ref(false)
 
   const updateSnackbar = (settings) => {
     snackbarOptions.value = {
@@ -19,6 +20,7 @@ export const useGeneralStore = defineStore('generalStore', () => {
   return {
     snackbarOptions,
     isLoading,
+    isDrawerOpen,
     updateSnackbar,
   }
 })

curriculum-front/src/views/CreateCurriculum.vue

@@ -7,39 +7,5 @@
 </template>
 
 <script setup>
-import { toRefs } from 'vue'
-
 import MainForm from '@/components/create-form/MainForm.vue'
-
-import { useAuthStore } from '@/stores/auth'
-import { useCurriculumStore } from '@/stores/curricula'
-
-const authStore = useAuthStore()
-const { user } = toRefs(authStore)
-const { postCurriculum } = useCurriculumStore()
-
-const saveCurriculum = (curriculumInfo, sections) => {
-  const newSections = sections.map((section) => {
-    let updatedSection = { ...section }
-    delete updatedSection.newResource
-    delete updatedSection.newProject
-    return updatedSection
-  })
-
-  const curriculum = {
-    ...curriculumInfo,
-    sections: newSections,
-    createdBy: user.value.id
-  }
-
-  postCurriculum(curriculum)
-}
-
-// computed: {
-//   ...mapState('auth', ['user'])
-// },
-// methods: {
-//   ...mapActions(['postCurriculum']),
-//   ...mapMutations(['updateSnackbar']),
-// }
 </script>

curriculum-front/src/views/DisplayCurriculum.vue

@@ -44,7 +44,7 @@ const generalStore = useGeneralStore()
 const route = useRoute()
 
 const { user } = toRefs(authStore)
-const { selectedCurriculum } = toRefs(curriculumStore)
+const { selectedCurriculum } = toRefs(curriculumStore.state)
 
 const tempSection = ref({
   name: '',

curriculum-front/src/views/auth/Verify.vue

@@ -4,20 +4,15 @@
       Verify E-mail
     </template>
     <template #form>
-      <v-text-field
-        label="E-mail"
-        v-model="email"
-      />
-      <v-text-field
-        label="Code"
-        v-model="code"
-      />
+      <v-text-field label="Email" v-model="email" :error-messages="emailErrors" required variant="outlined" />
+      <v-text-field label="Code" v-model="code" :error-messages="emailErrors" required variant="outlined" />
     </template>
     <template #actions>
-      <v-btn @click="submit" color="primary">Verify</v-btn>
+      <v-btn @click="submit" color="primary" variant="outlined">Verify</v-btn>
     </template>
     <template #link>
-      <p class="pa-2">Don't have an account? <router-link :to="{name: 'register'}">Register here</router-link></p>
+      <p class="mb-1 mt-4">Don't have an account? <router-link :to="{ name: 'register' }">Register here</router-link>
+      </p>
     </template>
   </AuthTemplate>
 </template>