{"version":3,"sources":["webpack:///./src/pages/user-pages/journal/CreateJournal.vue","webpack:///./src/pages/user-pages/journal/CreateJournal.vue?48c5","webpack:///./src/services/journalService.js","webpack:///./src/services/axios.js","webpack:///./src/pages/user-pages/journal/CreateJournal.vue?0093"],"names":["description","journalName","isLoading","errorMessage","router","rules","required","maxLengthValue","v$","submitHandler","async","value","_value","$invalid","journalService","createJournal","push","err","response","data","message","__scopeId","formState","axiosAuth","post","get","id","patch","delete","axios","create","baseURL","interceptors","request","use","config","token","localStorage","getItem","headers","Authorization","withCredentials"],"mappings":"g2BAqEA,MAAMA,EAAc,eAAI,IAClBC,EAAc,eAAI,IAExB,IAAIC,EAAY,gBAAI,GAChBC,EAAe,eAAI,MAEvB,MAAMC,EAAS,iBAETC,EAAQ,eAAS,KACd,CACLJ,YAAa,CAAEK,SAAA,OAAUC,eAAgB,eAAU,QAIjDC,EAAK,eAAaH,EAAO,CAAEJ,gBAE3BQ,EAAgBC,UAIpB,GAHAP,EAAaQ,MAAQ,KACrBT,EAAUS,OAAQ,EAEdH,EAAGI,OAAOC,SACZX,EAAUS,OAAQ,OAGlB,UACQG,EAAA,KAAeC,cAAc,CACjCd,YAAaA,EAAYU,MACzBX,YAAaA,EAAYW,QAE3BP,EAAOY,KAAK,KACZ,MAAOC,GAAK,MACZd,EAAaQ,OACC,QAAZ,EAAAM,EAAIC,gBAAQ,OAAM,QAAN,EAAZ,EAAcC,YAAI,aAAlB,EAAoBC,UAAW,8CACjC,QACAlB,EAAUS,OAAQ,I,i6ECnGxB,EAAOU,UAAY,kBAEJ,gB,oCCNf,gBAEe,QAEb,oBAAoBC,SACZC,OAAUC,KAAK,kBAAmBF,IAG1C,oBACE,MAAMJ,QAAiBK,OAAUE,IAAI,IACrC,OAAOP,GAGT,iBAAiBQ,GACf,MAAMR,QAAiBK,OAAUE,IAAK,IAAGC,GACzC,OAAOR,EAASC,MAGlB,oBAAoBO,EAAIJ,SAChBC,OAAUI,MAAO,IAAGD,EAAMJ,IAGlC,oBAAoBI,SACZH,OAAUK,OAAQ,IAAGF,M,oCCvB/B,yBAEA,IAAIH,EAAYM,IAAMC,OAAO,CAC3BC,QAAU,8CAGZR,EAAUS,aAAaC,QAAQC,KAAI,SAAUC,GAC3C,MAAMC,EAAQC,aAAaC,QAAQ,SAInC,OAHAH,EAAOI,QAAQC,cAAiB,UAAWJ,EAC3CD,EAAOI,QAAQE,iBAAkB,EAE1BN,KAGMZ,U,oCCdf,W","file":"js/chunk-3065af76.a3943962.js","sourcesContent":["<template>\r\n  <div class=\"create-journal__page max-container\">\r\n    <form @submit.prevent=\"submitHandler\">\r\n      <div class=\"form-control\">\r\n        <label for=\"journalName\"\r\n          ><h2\r\n            :class=\"{\r\n              'error-label': v$.journalName.$errors.length && v$.journalName.$dirty,\r\n            }\"\r\n          >\r\n            Name of your journal\r\n          </h2></label\r\n        >\r\n        <input\r\n          type=\"text\"\r\n          id=\"journalName\"\r\n          name=\"journalName\"\r\n          v-model.trim=\"journalName\"\r\n          @blur=\"v$.journalName.$touch\"\r\n          :class=\"{\r\n            'error-input': v$.journalName.$errors.length && v$.journalName.$dirty,\r\n          }\"\r\n        />\r\n        <span class=\"length-note\"\r\n          >The name is required and must be at most 40 characters long.</span\r\n        >\r\n        <div class=\"error__container\">\r\n          <p class=\"error-message\" v-if=\"v$.journalName.$error\">You have to enter a valid name!</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"form-control\">\r\n        <label for=\"journalDescription\"><h3>What is this journal about?</h3></label>\r\n        <textarea\r\n          type=\"textarea\"\r\n          rows=\"8\"\r\n          cols=\"50\"\r\n          id=\"journalDescription\"\r\n          name=\"journalDescription\"\r\n          v-model=\"description\"\r\n        />\r\n      </div>\r\n      <div class=\"actions\">\r\n        <base-button\r\n          type=\"submit\"\r\n          tag=\"button\"\r\n          :disabled=\"v$.$invalid\"\r\n          :class=\"{\r\n            forbidden: v$.$invalid,\r\n          }\"\r\n          >Create</base-button\r\n        >\r\n        <base-button id=\"entry__actions-back\" link :to=\"'/'\" mode=\"dark\">Cancel</base-button>\r\n      </div>\r\n\r\n      <p class=\"error-message submit-error\" v-if=\"errorMessage\">\r\n        {{ errorMessage }}\r\n      </p>\r\n      <base-spinner v-if=\"isLoading\"></base-spinner>\r\n    </form>\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nimport { ref, computed } from \"@vue/reactivity\";\r\nimport useVuelidate from \"@vuelidate/core\";\r\nimport { required, maxLength } from \"@vuelidate/validators\";\r\nimport journalService from \"../../../services/journalService\";\r\nimport { useRouter } from \"vue-router\";\r\n\r\nconst description = ref(\"\");\r\nconst journalName = ref(\"\");\r\n\r\nlet isLoading = ref(false);\r\nlet errorMessage = ref(null);\r\n\r\nconst router = useRouter();\r\n\r\nconst rules = computed(() => {\r\n  return {\r\n    journalName: { required, maxLengthValue: maxLength(40) },\r\n  };\r\n});\r\n\r\nconst v$ = useVuelidate(rules, { journalName });\r\n\r\nconst submitHandler = async () => {\r\n  errorMessage.value = null;\r\n  isLoading.value = true;\r\n\r\n  if (v$._value.$invalid) {\r\n    isLoading.value = false;\r\n    return;\r\n  } else {\r\n    try {\r\n      await journalService.createJournal({\r\n        journalName: journalName.value,\r\n        description: description.value,\r\n      });\r\n      router.push(\"/\");\r\n    } catch (err) {\r\n      errorMessage.value =\r\n        err.response?.data?.message || \"Could not create journal, please try again!\";\r\n    } finally {\r\n      isLoading.value = false;\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.create-journal__page {\r\n  padding: 3rem 2rem 8rem 2rem;\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\nform {\r\n  width: 30rem;\r\n  max-width: 30rem;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 2rem;\r\n}\r\n.form-control {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  font: inherit;\r\n  width: 100%;\r\n}\r\ninput,\r\ntextarea {\r\n  border: 1.5px solid rgb(173, 169, 169);\r\n}\r\ninput:focus,\r\ntextarea:focus {\r\n  border-color: #3d008d;\r\n  background-color: #faf6ff;\r\n  outline: none;\r\n}\r\n\r\n.length-note {\r\n  font-size: 0.8rem;\r\n  width: 100%;\r\n}\r\n\r\n.length-note::before {\r\n  content: \"*\";\r\n  color: var(--color-error);\r\n}\r\n\r\n#journalName {\r\n  padding: 0.5rem;\r\n  width: 100%;\r\n  font-size: 1.1rem;\r\n  outline: none;\r\n  color: var(--color-gray-dark);\r\n}\r\n\r\n.actions {\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: center;\r\n  gap: 1.5rem;\r\n}\r\nbutton,\r\na {\r\n  margin-top: 1rem;\r\n  margin-bottom: 2rem;\r\n  min-width: 6rem;\r\n}\r\n\r\ntextarea {\r\n  font-size: 1.1rem;\r\n  width: 100%;\r\n  color: var(--color-gray-dark);\r\n  outline: none;\r\n  padding: 0.5rem;\r\n  resize: none;\r\n}\r\n.error__container {\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n.error-label {\r\n  color: var(--color-error);\r\n}\r\n.error-input,\r\n.error-input:focus {\r\n  background: rgb(255, 233, 233);\r\n}\r\n.error-message {\r\n  color: var(--color-error);\r\n  font-size: 0.8rem;\r\n  position: absolute;\r\n  text-align: center;\r\n  width: 100%;\r\n}\r\n.submit-error {\r\n  position: static;\r\n  text-align: center;\r\n}\r\n\r\n@media (max-width: 40em) {\r\n  .create-journal__page {\r\n    padding: 3rem 1.5rem;\r\n  }\r\n  form {\r\n    width: 100%;\r\n  }\r\n  h2 {\r\n    font-size: 1.3rem;\r\n  }\r\n  #journalName {\r\n    font-size: 1rem;\r\n  }\r\n  button,\r\n  a {\r\n    width: 50%;\r\n  }\r\n}\r\n</style>\r\n","import script from \"./CreateJournal.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./CreateJournal.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./CreateJournal.vue?vue&type=style&index=0&id=db44fb76&scoped=true&lang=css\"\nscript.__scopeId = \"data-v-db44fb76\"\n\nexport default script","import axiosAuth from \"./axios\";\r\n\r\nexport default {\r\n  \r\n  async createJournal(formState) {\r\n    await axiosAuth.post(\"/create-journal\", formState);\r\n  },\r\n\r\n  async getJournals() {\r\n    const response = await axiosAuth.get(\"\");\r\n    return response;\r\n  },\r\n\r\n  async getJournal(id) {\r\n    const response = await axiosAuth.get(`/${id}`);\r\n    return response.data;\r\n  },\r\n\r\n  async updateJournal(id, formState) {\r\n    await axiosAuth.patch(`/${id}`, formState);\r\n  },\r\n\r\n  async deleteJournal(id) {\r\n    await axiosAuth.delete(`/${id}`);\r\n  },\r\n};\r\n","import axios from \"axios\";\r\n\r\nlet axiosAuth = axios.create({\r\n  baseURL: `${process.env.VUE_APP_BASE_URL}journals`,\r\n});\r\n\r\naxiosAuth.interceptors.request.use(function (config) {\r\n  const token = localStorage.getItem(\"token\");\r\n  config.headers.Authorization = `Bearer ` + token;\r\n  config.headers.withCredentials = true;\r\n\r\n  return config;\r\n});\r\n\r\nexport default axiosAuth;\r\n","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./CreateJournal.vue?vue&type=style&index=0&id=db44fb76&scoped=true&lang=css\""],"sourceRoot":""}