Merge pull request #67 from timwis/check-collaborator

Check collaborator status

_includes/header.html

@@ -25,9 +25,13 @@
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#" data-hook="login-link">Login</a></li>
         <li class="dropdown hidden" data-hook="user-dropdown">
-          <a href="#" class="dropdown-toggle" data-hook="user-name" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"></span></a>
+          <a href="#" class="dropdown-toggle" data-hook="user-dropdown-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            <span class="user-issue" data-hook="user-issue"><i class="fa fa-exclamation-circle"></i></span>
+            <span data-hook="user-name">User</span>
+            <span class="caret"></span>
+          </a>
           <ul class="dropdown-menu">
-            <li><a href="{{ site.baseurl }}/admin/">Administration</a></li>
+            <li class="admin-link-list-item" data-hook="admin-link-list-item"><a href="{{ site.baseurl }}/admin/">Administration</a></li>
             <li><a href="#" data-hook="logout-link">Logout</a></li>
           </ul>
         </li>

_layouts/dataset.html

@@ -33,7 +33,7 @@ <h3><a href="{{ site.baseurl }}/datasets/?organization={{ organization.title | s
   {% endif %}
     <h1>
       {{ page.title }}
-      <a href="https://github.com/{{ site.github.owner_name }}/{{ site.github.project_title }}/edit/gh-pages/{{ page.path }}" class="pull-right btn btn-default" role="button" data-hook="edit-button">Edit</a>
+      <a href="https://github.com/{{ site.github.owner_name }}/{{ site.github.project_title }}/edit/gh-pages/{{ page.path }}" class="pull-right btn btn-default edit-dataset-btn" role="button" data-hook="edit-button">Edit</a>
     </h1>
     <p>{{ page.notes }}</p>
 

css/main.css

@@ -33,6 +33,14 @@ dataset {
   margin-top: 15px;
 }
 
+/* Hidden from guests */
+.add-dataset-btn,
+.edit-dataset-btn,
+.admin-link-list-item,
+.user-issue {
+  display: none;
+}
+
 .resource-row {
   padding: 19px;
   margin-bottom: 20px;
@@ -50,4 +58,8 @@ dataset {
 
 .show-resource-details {
   font-size: 80%;
-}
+}
+
+.user-issue {
+  color: red;
+}

datasets.html

@@ -16,7 +16,7 @@ <h3>Organizations</h3>
   </div>
   <div class="col-sm-8">
     <h3 class="datasets-count" data-hook="datasets-count"></h3>
-    <a href="{{ site.baseurl }}/add-dataset/" class="btn btn-default pull-right add-dataset-btn"><i class="fa fa-plus"></i> Add Dataset</a>
+    <a href="{{ site.baseurl }}/add-dataset/" class="btn btn-default pull-right add-dataset-btn" data-hook="add-dataset-btn"><i class="fa fa-plus"></i> Add Dataset</a>
     <input type="text" data-hook="search-query" placeholder="Search..." class="form-control">
     <div data-hook="datasets-items"></div>
   </div>

package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "ampersand-state": "^5.0.0",
     "bootstrap": "^3.3.6",
-    "github-api": "^0.11.2",
+    "github-api": "github:michael/github",
     "jquery-deparam": "^0.5.2",
     "jquery-serializejson": "^2.6.2",
     "js-cookie": "^2.1.0",

scripts/src/index.js

@@ -22,7 +22,9 @@ const elements = {
 
 const user = new UserModel({
   clientId: params.clientId || settings.GITHUB_CLIENT_ID,
-  proxyHost: params.proxyHost || settings.GATEKEEPER_HOST
+  proxyHost: params.proxyHost || settings.GATEKEEPER_HOST,
+  repoOwner: settings.REPO_OWNER,
+  repoName: settings.REPO_NAME
 })
 
 // If user is mid-login, finish the login process
@@ -44,10 +46,10 @@ const router = {
         repoBranch: settings.BRANCH,
         filePath: settings.FILE_PATH
       })
-      DatasetView({el: elements.main, file})
+      DatasetView({el: elements.main, user, file})
     },
     '/datasets/': function () {
-      DatasetsView({el: elements.main})
+      DatasetsView({el: elements.main, user})
     },
     '/add-dataset/': function () {
       const file = new FileModel({

scripts/src/models/user.js

@@ -9,17 +9,18 @@ const githubLoginUrl = 'https://github.com/login/oauth/authorize'
 export default State.extend({
   props: {
     oauthToken: 'string',
-    username: 'string'
+    username: 'string',
+    isCollaborator: 'boolean'
   },
   session: {
+    repoOwner: 'string',
+    repoName: 'string',
     clientId: 'string',
     proxyHost: 'string'
   },
   initialize: function () {
     // If login cookies saved, set the user model to them
-    this.oauthToken = Cookies.get('oauth-token')
-    const userData = Cookies.getJSON('user-data')
-    if (userData) this.username = userData.login
+    this.set(Cookies.getJSON('jkan'))
   },
   initiateLogin: function () {
     const returnParams = {clientId: this.clientId, proxyHost: this.proxyHost}
@@ -31,15 +32,20 @@ export default State.extend({
     window.location.href = githubLoginUrl + '?' + $.param(redirectParams)
   },
   finishLogin: function (authCode) {
-    this._verify(authCode)
+    return this._verify(authCode)
     .then((oauthToken) => {
       this.set('oauthToken', oauthToken)
-      Cookies.set('oauth-token', oauthToken)
+      Cookies.set('jkan', this.serialize())
 
       this._getUser(oauthToken)
       .then((userData) => {
         this.set('username', userData.login)
-        Cookies.set('user-data', userData)
+        Cookies.set('jkan', this.serialize())
+        this._isCollaborator(userData.login)
+        .then(() => {
+          this.set('isCollaborator', true)
+          Cookies.set('jkan', this.serialize())
+        }).catch(() => this.set('isCollaborator', false))
       }).catch(() => console.error('Error fetching user info'))
     }).catch(() => console.error('Error verifying auth code'))
   },
@@ -58,8 +64,7 @@ export default State.extend({
     })
   },
   logout: function () {
-    Cookies.remove('oauth-token')
-    Cookies.remove('user-data')
+    Cookies.remove('jkan')
   },
   _getUser: function () {
     return new Promise((resolve, reject) => {
@@ -73,5 +78,18 @@ export default State.extend({
         else resolve(userData)
       })
     })
+  },
+  _isCollaborator: function (username) {
+    return new Promise((resolve, reject) => {
+      const github = new Github({
+        token: this.oauthToken,
+        auth: 'oauth'
+      })
+      const repo = github.getRepo(this.repoOwner, this.repoName)
+      repo.isCollaborator(username, (err) => {
+        if (err) reject(err)
+        else resolve()
+      })
+    })
   }
 })

scripts/src/views/dataset.js

@@ -37,6 +37,12 @@ export default function (opts) {
     e.preventDefault()
   })
 
+  // If user is logged in and a collaborator, show the Edit Dataset button
+  if (opts.user.username && opts.user.isCollaborator) elements.editButton.show()
+  opts.user.on('change', (user) => {
+    if (user.username && user.isCollaborator) elements.editButton.show()
+  })
+
   // Edit/Cancel buttons toggle read/edit views
   elements.editButton.add(elements.cancelButton).on('click', (e) => {
     switchView()

scripts/src/views/datasets.js

@@ -16,7 +16,8 @@ export default function (opts) {
     organizationsItems: queryByHook('organizations-items', opts.el),
     datasetsItems: queryByHook('datasets-items', opts.el),
     datasetsCount: queryByHook('datasets-count', opts.el),
-    searchQuery: queryByHook('search-query', opts.el)
+    searchQuery: queryByHook('search-query', opts.el),
+    addDatasetBtn: queryByHook('add-dataset-btn', opts.el)
   }
 
   $.getJSON(datasetsPath).done(function (datasets) {
@@ -59,6 +60,12 @@ export default function (opts) {
   }).fail(function () {
     console.error('Error fetching', datasetsPath)
   })
+
+  // If user is logged in and a collaborator, show the Add Dataset button
+  if (opts.user.username && opts.user.isCollaborator) elements.addDatasetBtn.show()
+  opts.user.on('change', (user) => {
+    if (user.username && user.isCollaborator) elements.addDatasetBtn.show()
+  })
 }
 
 // Given an array of datasets, returns an array of their organizations with counts

scripts/src/views/nav.js

@@ -1,4 +1,6 @@
 import 'bootstrap/js/dropdown'
+import 'bootstrap/js/tooltip'
+import 'bootstrap/js/popover'
 
 import {queryByHook} from '../util'
 
@@ -7,8 +9,11 @@ export default function (opts) {
   const elements = {
     loginLink: queryByHook('login-link', opts.el),
     logoutLink: queryByHook('logout-link', opts.el),
+    adminLinkListItem: queryByHook('admin-link-list-item', opts.el),
     userName: queryByHook('user-name', opts.el),
-    userDropdown: queryByHook('user-dropdown', opts.el)
+    userDropdown: queryByHook('user-dropdown', opts.el),
+    userDropdownLink: queryByHook('user-dropdown-link', opts.el),
+    userIssue: queryByHook('user-issue', opts.el)
   }
 
   elements.loginLink.on('click', function (e) {
@@ -23,11 +28,24 @@ export default function (opts) {
   })
 
   if (opts.user.username) setUserInfo(opts.user)
-  opts.user.on('change:username', setUserInfo)
+  opts.user.on('change', (user) => {
+    if (user.username) setUserInfo(user)
+  })
 
   function setUserInfo (user) {
     elements.loginLink.hide()
     elements.userName.text(user.username)
     elements.userDropdown.removeClass('hidden')
+    if (user.isCollaborator) {
+      elements.adminLinkListItem.show()
+    } else if (user.isCollaborator === false) { // don't catch undefined
+      elements.userIssue.show()
+      elements.userDropdownLink.popover({
+        content: 'You do not have collaborator access to this repository, so you will not be able to make any changes.',
+        placement: 'bottom',
+        trigger: 'hover',
+        container: 'body'
+      })
+    }
   }
 }