Provide feedback

src/components/Footer.vue

@@ -1,5 +1,57 @@
 <template>
   <div class="footer">
+    <b-modal v-model="feedbackModal">
+      <form>
+        <div class="modal-card" style="width: auto">
+          <header class="modal-card-head">
+            <p class="modal-card-title">{{ $t('feedback.title') }}</p>
+            <button
+                type="button"
+                class="delete"
+                @click="feedbackModal = false"/>
+          </header>
+          <section class="modal-card-body">
+            <p>This feedback will be used to make Kaverti better.</p>
+            <b-field :label="$t('feedback.email')">
+              <b-input
+                  :placeholder="$store.state.user.email"
+                  v-model="feedback.email"
+                  required>
+              </b-input>
+            </b-field>
+            <b-field :label="$t('feedback.route')">
+              <b-input
+                  :placeholder="$t('feedback.route')"
+                  v-model="feedback.route"
+                  required>
+              </b-input>
+            </b-field>
+            <b-field :label="$t('feedback.rating')">
+              <b-rate icon-pack="fas" v-model="feedback.stars" custom-text="Route rating"></b-rate>
+            </b-field>
+            <b-field :label="$t('feedback.text')">
+              <b-input
+                  placeholder="Can you elaborate?"
+                  v-model="feedback.text"
+                  maxlength="512"
+                  type="textarea"
+                  required>
+              </b-input>
+            </b-field>
+          </section>
+          <footer class="modal-card-foot">
+            <b-button
+                @click="doFeedback()"
+                :loading="feedback.loading"
+                :label="$t('feedback.submit')"
+                type="is-primary" />
+            <b-button
+                :label="$t('close')"
+                @click="feedbackModal = false" />
+          </footer>
+        </div>
+      </form>
+    </b-modal>
     <b-modal v-model="langModal">
       <div class="modal-card" style="width: auto">
         <header class="modal-card-head">
@@ -18,8 +70,9 @@
       </div>
     </b-modal>
     <h1>&copy; 2021 Kaverti</h1>
-    <div class="locale-changer">
+    <div class="buttons">
       <b-button @click="langModal = true">{{$t('languages.title')}}</b-button>
+      <b-button @click="feedbackModal = true">Provide Feedback</b-button>
     </div>
   </div>
 </template>
@@ -28,9 +81,41 @@ import AjaxErrorHandler from '../../assets/js/errorHandler'
 export default {
   name: 'locale-changer',
   data () {
-    return { langs: ['en', 'debug', 'wind'], currentLang: this.$i18n.locale, langModal: false}
+    return {
+      feedbackModal: false,
+      langs: ['en', 'debug', 'wind'],
+      currentLang: this.$i18n.locale,
+      langModal: false,
+      feedback: {
+        route: this.$route.path,
+        stars: 0,
+        text: '',
+        email: this.$store.state.user.email,
+        loading: false
+      }
+    }
   },
   methods: {
+    doFeedback() {
+      this.feedback.loading = true
+      this.axios
+          .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'feedback', {
+            text: this.feedback.text,
+            stars: this.feedback.stars,
+            email: this.feedback.email,
+            route: this.feedback.route
+          })
+          .then(() => {
+            this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
+            this.feedbackModal = false
+            this.$buefy.snackbar.open({message:this.$t('errors.feedbackThanks'), type: 'is-info'})
+            this.feedback.loading = false
+          })
+          .catch(e => {
+            AjaxErrorHandler(this.$store)(e)
+            this.feedback.loading = false
+          })
+    },
     en () {
       this.$i18n.locale = "en"
       this.setLang()
@@ -74,8 +159,24 @@ export default {
     } else {
       this.$i18n.locale = "en"
     }
+    this.$nextTick(() => {
+      this.feedback = {
+        route: this.$route.path,
+            stars: 0,
+            text: '',
+            email: this.$store.state.user.email
+      }
+    })
   },
   watch: {
+    $route() {
+      this.feedback = {
+        route: this.$route.path,
+        stars: 0,
+        text: '',
+        email: this.$store.state.user.email
+      }
+    },
     currentLang() {
       this.setLang()
       console.log('change')

src/locales/en.json

@@ -296,6 +296,14 @@
     "pending": "Requests from you",
     "accepted": "Accepted requests"
   },
+  "feedback": {
+    "title": "Route Feedback",
+    "email": "Email we can get back to you with:",
+    "route": "Route you are providing feedback for:",
+    "rating": "Rating",
+    "text": "How can we improve?",
+    "submit": "Submit"
+  },
   "currency": "Koins",
   "close": "Close",
   "tos": "Terms of Service",

src/views/Avatar.vue

@@ -30,6 +30,9 @@
                   <b-button>Apply</b-button>
                 </div>
               </div>
+              <div class="box" v-if="!items.length">
+                <NoItems type="items"></NoItems>
+              </div>
             </div>
           </div>
         </div>
@@ -39,7 +42,7 @@
 </template>
 
 <script>
-import AjaxErrorHandler from "../../../website/legacyfrontend/src/assets/js/errorHandler";
+import AjaxErrorHandler from "../../assets/js/errorHandler";
 
 export default {
   name: "Avatar",