init authorize contribution page

assets/styles/app.scss

@@ -183,10 +183,6 @@
       align-items: stretch;
     }
 
-    .button.is-fullwidth + .button.is-fullwidth {
-      margin-top: 1rem;
-    }
-
     &-anonymous {
       width: 100%;
       cursor: pointer;
@@ -602,4 +598,16 @@ fieldset {
   &:not(:last-child) {
     margin-bottom: $block-spacing;
   }
+
+  &.authorize {
+    max-width: 30%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.form {
+  .button.is-fullwidth + .button.is-fullwidth {
+    margin-top: 1rem;
+  }
 }

pages/authorize-contribution.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="ceremony">
+    <h1 class="title is-size-1 is-spaced">
+      Hello, <span>@{{ userHandle }}</span>
+    </h1>
+    <h2 class="subtitle">
+      Lorem ipsum dolor sit amet, consectetur?
+    </h2>
+    <fieldset class="authorize">
+      <Form />
+    </fieldset>
+    <div class="buttons is-centered">
+      <b-button v-if="isLoggedIn" :disabled="hasErrorName.invalid" type="is-primary" outlined>
+        Save information
+      </b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import Form from '@/components/Form'
+
+export default {
+  components: {
+    Form
+  },
+  computed: {
+    ...mapGetters('user', ['isLoggedIn', 'hasErrorName']),
+    userHandle: {
+      get() {
+        return this.$store.state.user.handle
+      }
+    }
+  },
+  async mounted() {
+    await this.getUserData()
+  },
+  methods: {
+    ...mapActions('user', ['getUserData'])
+  }
+}
+</script>

pages/make-contribution.vue

@@ -131,22 +131,10 @@ export default {
     }
   },
   async mounted() {
-    try {
-      const response = await fetch('/api/user_data')
-      const data = await response.json()
-      console.log('data', data)
-      if (data.name !== 'Anonymous') {
-        this.userHandle = data.handle
-        this.userName = data.name
-        // TODO check whether it's github or twitter
-        this.contributionType = 'twitter'
-      }
-    } catch (e) {
-      console.error('user_data fail', e)
-    }
+    await this.getUserData()
   },
   methods: {
-    ...mapActions('user', ['makeTweet', 'logOut']),
+    ...mapActions('user', ['makeTweet', 'logOut', 'getUserData']),
     async makeContribution({ retry = 0 } = {}) {
       try {
         this.isContributeBtnSnown = true

store/user.js

@@ -81,6 +81,21 @@ const actions = {
   },
   async logOut() {
     await fetch('/api/logout')
+  },
+  async getUserData({ commit }) {
+    try {
+      const response = await fetch('/api/user_data')
+      const data = await response.json()
+      console.log('data', data)
+      if (data.name !== 'Anonymous') {
+        commit('SET_HANDLE', data.handle)
+        commit('SET_NAME', data.name)
+        // TODO check whether it's github or twitter
+        commit('SET_CONTRIBUTION_TYPE', 'twitter')
+      }
+    } catch (e) {
+      console.error('user_data fail', e)
+    }
   }
 }