logout button

assets/styles/app.scss

@@ -607,6 +607,16 @@ fieldset {
 }
 
 .form {
+  position: relative;
+
+  .logout {
+    position: absolute;
+    top: 0;
+    right: -2px;
+    height: 22px;
+    width: 22px
+  }
+
   .button.is-fullwidth + .button.is-fullwidth {
     margin-top: 1rem;
   }

components/Form.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="form">
     <div v-if="isLoggedIn" class="fields">
+      <button @click="logOut" class="button is-icon logout">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+          <path
+            fill="#94febf"
+            d="M14.08,15.59L16.67,13H7V11H16.67L14.08,8.41L15.5,7L20.5,12L15.5,17L14.08,15.59M19,3A2,2 0 0,1 21,5V9.67L19,7.67V5H5V19H19V16.33L21,14.33V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19Z"
+          />
+        </svg>
+      </button>
       <b-field
         :type="{ 'is-danger': hasErrorName.invalid }"
         :message="{ [hasErrorName.msg]: hasErrorName.invalid }"
@@ -52,7 +60,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions('user', ['makeTweet', 'logInVia'])
+    ...mapActions('user', ['makeTweet', 'logInVia', 'logOut'])
   }
 }
 </script>

pages/make-contribution.vue

@@ -198,9 +198,6 @@ export default {
     onAnonymousHandler() {
       this.logOut()
       this.contributionType = 'anonymous'
-      this.userName = null
-      this.userHandle = 'Anonymous'
-      this.userCompany = ''
     }
   }
 }

store/user.js

@@ -79,7 +79,11 @@ const actions = {
       `menubar=no,toolbar=no,resizable=yes,scrollbars=no,height=${popUpWindowHeight},width=${popUpWindowWidth},top=${top},left=${left}`
     )
   },
-  async logOut() {
+  async logOut({ commit }) {
+    commit('SET_HANDLE', 'Anonymous')
+    commit('SET_CONTRIBUTION_TYPE', null)
+    commit('SET_NAME', null)
+    commit('SET_COMPANY', '')
     await fetch('/api/logout')
   },
   async getUserData({ commit }) {