display whitelist status

assets/js/admin.js

@@ -8,8 +8,10 @@ import appReducer from './reducers'
 import adminReducer from './reducers/admin'
 import { fetchAdminData, patchUser, patchPublisher } from './actions/admin'
 import Util from './lib/Util'
+import Icon from './components/Icon'
 
 import '../styles/admin.scss'
+import './containers/listitem.scss'
 
 const reducer = Util.combineReducers(appReducer, adminReducer)
 
@@ -32,6 +34,17 @@ class App extends React.Component {
     this.dispatch = this.dispatch.bind(this)
     this.getRegisteredUsers = this.getRegisteredUsers.bind(this)
     this.getRegisteredPublishers = this.getRegisteredPublishers.bind(this)
+
+    /*
+    this.state.user = {
+      ...this.state.user,
+      'created_at': 1551151466802,
+      'updated_at': 1551151520134,
+      'id': 1,
+      'email': 'admin@tkluge.net',
+      'admin': true
+    }
+    */
   }
   dispatch (action) {
     if (!action) throw new Error('dispatch: missing action')
@@ -56,11 +69,11 @@ class App extends React.Component {
           <span className='flex'>
             <label for={`is-admin-${user.id}`} className='cb-label'>Admin?</label>
             <input className='checkbox' type='checkbox' checked={user.admin} onChange={() => this.dispatch(patchUser({ id: user.id, admin: !user.admin }))} id={`is-admin-${user.id}`} />
-            <label for={`is-admin-${user.id}`} />
+            <label htmlFor={`is-admin-${user.id}`} />
           </span>
           <div className='stack flex flex-container flex-vertical'>
-            <span>{user.created_at}</span>
+            <span className='flex'><span className='key'>Created at:</span><span className='value'>{new Date(user.created_at).toLocaleString()}</span></span>
-            <span>{user.updated_at}</span>
+            <span className='flex'><span className='key'>Updated at:</span><span className='value'>{new Date(user.updated_at).toLocaleString()}</span></span>
           </div>
         </li>
       )
@@ -69,19 +82,27 @@ class App extends React.Component {
   getRegisteredPublishers () {
     return this.state.publishers.map(pub => {
       return (
-        <li className='uri-list-item flex-container' key={`is-whitelisted-${pub.id}`}>
+        <li className='uri-list-item flex-container flex-vertical' key={`is-whitelisted-${pub.id}`}>
-          <div className='stack flex flex-container flex-vertical'>
+          <header><h3>{pub.name}</h3></header>
-            <span className='flex'><span className='name'>{pub.name}</span><span className='appid'>{pub.appid}</span></span>
+          <div className='flex flex-container'>
-            <span className='flex'>{pub.user.email}</span>
+            <div className='flex flex-container flex-vertical key-value'>
+              <span className='flex'><span className='key'>Owner:</span><span className='value'>{pub.user.email}</span></span>
+              <span className='flex'><span className='key'>App ID:</span><span className='value'>{pub.appid}</span></span>
+              <span className='flex contains-icon'>
+                <span className='key'>App domain:</span>
+                <span className='value'>{pub.url}</span>
+                <Icon icon={pub.verified ? 'shield-check' : 'alert-circle'} className={pub.verified ? 'verified' : 'unverified'} />
+              </span>
             </div>
             <span className='flex'>
-            <label for={`is-whitelisted-${pub.id}`} className='cb-label'>Whitelisted?</label>
+              <label htmlFor={`is-whitelisted-${pub.id}`} className='cb-label'>Whitelisted?</label>
               <input className='checkbox' type='checkbox' checked={pub.whitelisted} onChange={() => this.dispatch(patchPublisher({ id: pub.id, whitelisted: !pub.whitelisted }))} id={`is-whitelisted-${pub.id}`} />
-            <label for={`is-whitelisted-${pub.id}`} />
+              <label htmlFor={`is-whitelisted-${pub.id}`} />
             </span>
             <div className='stack flex flex-container flex-vertical'>
-            <span>{pub.created_at}</span>
+              <span className='flex'><span className='key'>Created at:</span><span className='value'>{new Date(pub.created_at).toLocaleString()}</span></span>
-            <span>{pub.updated_at}</span>
+              <span className='flex'><span className='key'>Updated at:</span><span className='value'>{new Date(pub.updated_at).toLocaleString()}</span></span>
+            </div>
           </div>
         </li>
       )

assets/js/containers/PublisherListItem.js

@@ -29,9 +29,9 @@ class PublisherListItem extends React.Component {
   }
   getView () {
     return (
-      <li key={this.props.item.appid} className='uri-list-item publisher-list-item flex-container flex-vertical'>
+      <li key={this.props.item.appid} className={'uri-list-item publisher-list-item flex-container flex-vertical' + (this.props.item.whitelisted ? ' whitelisted' : '')}>
         <header className='site-name flex-container'>
-          <h3 className='flex'>{this.props.item.name}</h3>
+          <h3 className='flex'>{`${this.props.item.name}${this.props.item.whitelisted ? '' : ' (awaiting approval)'}`}</h3>
           <ConfirmIconButton icon='delete' onClick={() => this.props.dispatch(removePublisher(this.props.item.id))} />
         </header>
         <div className='flex flex-container'>

assets/js/containers/listitem.scss

@@ -1,6 +1,7 @@
 @import '../../styles/lib/vars';
 
 .uri-list-item {
+  position: relative;
   min-height: 60px;
   line-height: 60px;
   max-width: 100%;
@@ -168,5 +169,16 @@
         }
       }
     }
+    &:not(.whitelisted) {
+      &:before {
+        position: absolute;
+        content: '';
+        left: 0;
+        top: 0;
+        width: 4px;
+        height: 100%;
+        background: $red;
+      }
+    }
   }
 }

assets/js/index.js

@@ -26,47 +26,7 @@ class App extends React.Component {
         currentPassword: ''
       },
       urls: [],
-      publishers: [
+      publishers: [],
-        /*{
-          'created_at': 1551151516409,
-          'updated_at': 1551151651178,
-          'id': 1,
-          'name': 'foo',
-          'url': 'test.com',
-          'whitelisted': true,
-          'verified': false,
-          'verification_key': 'bsjj9s+bE1glKYF3YPzry0B5AZWFtkvI',
-          'appid': 'RtSST1hcuzU434MR',
-          'secret': 'aydN2jI4MzCwZPWRxfQGOMME/B8ZG5X4uoN0bo72AolUPKwYPVzMJIakT8HQ26s3',
-          'user': 1
-        },
-        {
-          'created_at': 1551152311149,
-          'updated_at': 1551152311149,
-          'id': 2,
-          'name': 'afasfsdfsd',
-          'url': 'test.com',
-          'whitelisted': false,
-          'verified': true,
-          'verification_key': 'qntO7L7Mcr6jtCjJh8rQN9kOx2x0bmep',
-          'appid': 'GCYJp+CIX4HxFPLy',
-          'secret': 'MsaG97ogRhPYoceZeWE06MNJ82PIFgqqWhL3L0/pDsJbMjKXcuUE3unmoewG0rmW',
-          'user': 1
-        },
-        {
-          'created_at': 1551152311149,
-          'updated_at': 1551152311149,
-          'id': 2,
-          'name': 'afasfsdfsd',
-          'url': 'test.com',
-          'whitelisted': true,
-          'verified': true,
-          'verification_key': 'qntO7L7Mcr6jtCjJh8rQN9kOx2x0bmep',
-          'appid': 'GCYJp+CIX4HxFPLy',
-          'secret': 'MsaG97ogRhPYoceZeWE06MNJ82PIFgqqWhL3L0/pDsJbMjKXcuUE3unmoewG0rmW',
-          'user': 1
-        }*/
-      ],
       newPublisher: { name: '', url: '' },
       editingUrl: null,
       editingPublisher: 1,
@@ -79,15 +39,6 @@ class App extends React.Component {
     this.saveUser = this.saveUser.bind(this)
     this.getRegisteredPublishers = this.getRegisteredPublishers.bind(this)
     this.setPublisherValue = this.setPublisherValue.bind(this)
-
-    /*this.state.user = {
-      ...this.state.user,
-      'created_at': 1551151466802,
-      'updated_at': 1551151520134,
-      'id': 1,
-      'email': 'admin@tkluge.net',
-      'admin': true
-    }*/
   }
   dispatch (action) {
     if (!action) throw new Error('dispatch: missing action')

assets/styles/admin.scss

@@ -4,11 +4,17 @@
   .list {
     li {
       padding: 5px 0;
-      height: 50px;
       min-height: 50px;
       line-height: 50px;
       padding: 0 14px;
 
+      header {
+        h3 {
+          font-weight: normal;
+          line-height: 30px;
+          margin: 0;
+        }
+      }
       .stack {
         line-height: 20px;
       }
@@ -46,6 +52,43 @@
           }
         }
       }
+      .key-value {
+        span {
+          line-height: 30px;
+
+          &.contains-icon {
+            margin-bottom: 10px;
+          }
+        }
+        .icon {
+          padding: 0;
+          height: 20px;
+          width: 20px;
+          vertical-align: middle;
+          margin-left: 10px;
+          svg {
+            height: 20px;
+            width: 20px;
+          }
+          &.verified {
+            path {
+              fill: $green;
+            }
+          }
+          &.unverified {
+            path {
+              fill: $red;
+            }
+          }
+        }
+      }
+      .key {
+        margin-right: 10px;
+      }
+      .value {
+        font-family: monospace;
+        color: $black-3;
+      }
     }
   }
 }

package.json

@@ -5,15 +5,16 @@
   "description": "a Sails application",
   "keywords": [],
   "scripts": {
-    "start": "npm-run-all --parallel open:client lift",
+    "start": "npm run forever",
+    "start:dev": "npm-run-all --parallel open:client lift",
     "start:debug": "npm-run-all --parallel open:client debug",
     "start:prod": "npm-run-all --parallel build:prod lift",
-    "open:client": "webpack-dev-server --mode development",
+    "start:client": "webpack-dev-server --mode development",
+    "lift": "sails lift",
     "build": "npm run build:prod",
     "build:dev": "webpack --mode development",
     "build:prod": "webpack --mode production",
     "clean": "rimraf .tmp && mkdirp .tmp/public",
-    "lift": "sails lift",
     "forever": "sudo ./node_modules/.bin/pm2 start ecosystem.config.js --env production",
     "stop": "sudo ./node_modules/.bin/pm2 delete roe-base",
     "test": "npm run lint && npm run custom-tests && echo 'Done.'",