sign in

.env.example

@@ -8,5 +8,5 @@ MYSQL_DATABASE=phase2
 
 TWITTER_CONSUMER_KEY=
 TWITTER_CONSUMER_SECRET=
-TWITTER_CALLBACK_URL=http://localhost:8000/twitter_callback
+TWITTER_CALLBACK_URL=http://localhost:3000/api/twitter_callback
 SESSION_SECRET=

package.json

@@ -12,7 +12,7 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.3.6",
+    "@nuxtjs/axios": "^5.9.3",
     "@open-wc/webpack-import-meta-loader": "^0.4.1",
     "async-mutex": "^0.1.4",
     "aws-sdk": "^2.610.0",

pages/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="ceremony">
-    <div class="title is-size-1 is-spaced">Hello, <span>Anonymous</span></div>
+    <div class="title is-size-1 is-spaced">
+      Hello, <span>@{{ user.handle }}</span>
+    </div>
     <div class="subtitle">Lorem ipsum dolor sit amet, consectetur?</div>
     <p class="p">
       If you don’t trust binaries, we encorage you to follow this <a href="">instruction</a> to
@@ -19,14 +21,14 @@
           <div class="title is-5">Lorem ipsum</div>
           <div v-if="isLoggedIn" class="fields">
             <b-field label="Name">
-              <b-input value="Vitalik Buterin"></b-input>
+              <b-input v-model="user.name"></b-input>
             </b-field>
             <b-field label="Company">
-              <b-input value="Ethereum"></b-input>
+              <b-input v-model="user.company"></b-input>
             </b-field>
           </div>
           <div v-else class="buttons">
-            <b-button @click="isLoggedIn = true" type="is-primary" outlined expanded>
+            <b-button @click="logIn" type="is-primary" outlined expanded>
               Sign In
             </b-button>
           </div>
@@ -75,7 +77,24 @@ export default {
         type: '',
         msg: ''
       },
-      isLoggedIn: false
+      user: { name: '', handle: 'Anonymous', company: '' }
+    }
+  },
+  computed: {
+    isLoggedIn() {
+      return !!this.user.name && this.user.name !== 'Anonymous'
+    }
+  },
+  async mounted() {
+    try {
+      const data = await this.$axios.$get('/api/user_data')
+      console.log('data', data)
+      if (data.name !== 'Anonymous') {
+        this.user.handle = data.handle
+        this.user.name = data.name
+      }
+    } catch (e) {
+      console.error('user_data fail', e)
     }
   },
   methods: {
@@ -96,10 +115,11 @@ export default {
         console.log('Updated params', result)
 
         this.status.msg = 'Uploading and verifying your contribution'
+        console.log('this.user.name', this.user)
         const formData = new FormData()
         formData.append('response', new Blob([result], { type: 'application/octet-stream' }))
-        formData.append('name', 'William') // TODO put real name here
+        formData.append('name', this.user.name)
-        formData.append('company', 'Microsoft')
+        formData.append('company', this.user.company)
         const resp = await fetch('api/response', {
           method: 'POST',
           body: formData
@@ -128,6 +148,9 @@ export default {
         this.status.type = 'is-danger'
         this.isContributeBtnDisabled = false
       }
+    },
+    logIn() {
+      window.location.replace('/api/connect')
     }
   }
 }

server/controllers/contributions.js

@@ -8,21 +8,10 @@ const express = require('express')
 const router = express.Router()
 const { Mutex } = require('async-mutex')
 const mutex = new Mutex()
-const oauth = require('oauth')
 const multer = require('multer')
 const Contribution = require('../models/contributions.model.js')
 const upload = multer({ dest: '/tmp/tornado' })
 
-const consumer = new oauth.OAuth(
-  'https://twitter.com/oauth/request_token',
-  'https://twitter.com/oauth/access_token',
-  process.env.TWITTER_CONSUMER_KEY,
-  process.env.TWITTER_CONSUMER_SECRET,
-  '1.0A',
-  process.env.TWITTER_CALLBACK_URL,
-  'HMAC-SHA1'
-)
-
 // async function uploadToS3(response) {
 //   const currentContributionIndex = await Contribution.currentContributionIndex()
 //   return await s3
@@ -48,27 +37,6 @@ async function verifyResponse({ filename }) {
   console.error(stderr)
 }
 
-// router.get('/', (req, res) => {
-//   let userData
-//   consumer.get(
-//     'https://api.twitter.com/1.1/account/verify_credentials.json',
-//     req.session.oauthAccessToken,
-//     req.session.oauthAccessTokenSecret,
-//     function(error, data) {
-//       if (error) {
-//         console.log('error', error)
-//         userData = { name: 'Anonymous' }
-//         res.render('pages/index', { userData })
-//         // res.send("Error getting twitter screen name : " + util.inspect(error), 500);
-//       } else {
-//         userData = JSON.parse(data)
-//         req.session.twitterScreenName = userData.screen_name
-//         res.render('pages/index', { userData })
-//       }
-//     }
-//   )
-// })
-
 router.get('/challenge', (req, res) => {
   res.sendFile('./snark_files/current.params', { root: path.join(__dirname, '../') })
 })

server/controllers/sessions.js

@@ -13,6 +13,25 @@ const consumer = new oauth.OAuth(
   'HMAC-SHA1'
 )
 
+router.get('/user_data', (req, res) => {
+  let userData = { name: 'Anonymous' }
+  consumer.get(
+    'https://api.twitter.com/1.1/account/verify_credentials.json',
+    req.session.oauthAccessToken,
+    req.session.oauthAccessTokenSecret,
+    function(error, data) {
+      if (error) {
+        console.log('Session is expired', error)
+      } else {
+        userData = JSON.parse(data)
+        userData.handle = userData.screen_name
+        // req.session.twitterScreenName = userData.screen_name
+      }
+      res.json(userData)
+    }
+  )
+})
+
 router.get('/connect', (req, res) => {
   consumer.getOAuthRequestToken(function(error, oauthToken, oauthTokenSecret) {
     if (error) {
@@ -21,8 +40,7 @@ router.get('/connect', (req, res) => {
       req.session.oauthRequestToken = oauthToken
       req.session.oauthRequestTokenSecret = oauthTokenSecret
       res.redirect(
-        'https://twitter.com/oauth/authorize?oauth_token=' +
+        'https://twitter.com/oauth/authorize?oauth_token=' + req.session.oauthRequestToken
-          req.session.oauthRequestToken
       )
     }
   })
@@ -46,25 +64,4 @@ router.get('/twitter_callback', (req, res) => {
   )
 })
 
-router.get('/home', function(req, res) {
-  consumer.get(
-    'https://api.twitter.com/1.1/account/verify_credentials.json',
-    req.session.oauthAccessToken,
-    req.session.oauthAccessTokenSecret,
-    function(error, data) {
-      if (error) {
-        console.log('error', error)
-        res.redirect('/connect')
-      } else {
-        const parsedData = JSON.parse(data)
-        console.log('name', parsedData.name)
-        console.log('screen_name', parsedData.screen_name)
-        console.log('description', parsedData.description)
-
-        // req.session.twitterScreenName = response.screen_name;
-        res.send('You are signed in: @' + parsedData.screen_name)
-      }
-    }
-  )
-})
 module.exports = router

server/index.js

@@ -25,17 +25,6 @@ async function start() {
   } else {
     await nuxt.ready()
   }
-  app.use('/api', sessionsController)
-  app.use('/api', contributionController)
-
-  app.use(bodyParser.urlencoded({ extended: true }))
-  app.use(bodyParser.json())
-
-  const accessLogStream = fs.createWriteStream(path.join(__dirname, 'access.log'), {
-    flags: 'a'
-  })
-  app.use(morgan('combined', { stream: accessLogStream }))
-
   app.use(
     session({
       secret: process.env.SESSION_SECRET,
@@ -48,6 +37,17 @@ async function start() {
     next()
   })
 
+  app.use('/api', sessionsController)
+  app.use('/api', contributionController)
+
+  app.use(bodyParser.urlencoded({ extended: true }))
+  app.use(bodyParser.json())
+
+  const accessLogStream = fs.createWriteStream(path.join(__dirname, 'access.log'), {
+    flags: 'a'
+  })
+  app.use(morgan('combined', { stream: accessLogStream }))
+
   // Give nuxt middleware to express
   app.use(nuxt.render)
 

yarn.lock

@@ -1015,7 +1015,7 @@
     webpack-node-externals "^1.7.2"
     webpackbar "^4.0.0"
 
-"@nuxtjs/axios@^5.3.6":
+"@nuxtjs/axios@^5.9.3":
   version "5.9.3"
   resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.9.3.tgz#9d99b10f752b49b42aaa3e2e5ca9484372ce86e9"
   integrity sha512-+P1BK7MxMRL4q1WeYM9vyfocJrRoskbuD2TztKU8ryunK8JgpkIvqCzQxTI2BLUbOPd7qvjPLwzA0QBdzqYlaA==