display whitelist status

pull/41/head
unknown 2019-02-26 18:55:51 -05:00
parent 6db4da4980
commit c0480a4b85
6 changed files with 100 additions and 72 deletions

View File

@ -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>{user.updated_at}</span>
<span className='flex'><span className='key'>Created at:</span><span className='value'>{new Date(user.created_at).toLocaleString()}</span></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}`}>
<div className='stack flex flex-container flex-vertical'>
<span className='flex'><span className='name'>{pub.name}</span><span className='appid'>{pub.appid}</span></span>
<span className='flex'>{pub.user.email}</span>
<li className='uri-list-item flex-container flex-vertical' key={`is-whitelisted-${pub.id}`}>
<header><h3>{pub.name}</h3></header>
<div className='flex flex-container'>
<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>{pub.updated_at}</span>
<span className='flex'><span className='key'>Created at:</span><span className='value'>{new Date(pub.created_at).toLocaleString()}</span></span>
<span className='flex'><span className='key'>Updated at:</span><span className='value'>{new Date(pub.updated_at).toLocaleString()}</span></span>
</div>
</div>
</li>
)

View File

@ -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'>

View File

@ -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;
}
}
}
}

View File

@ -26,47 +26,7 @@ class App extends React.Component {
currentPassword: ''
},
urls: [],
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
}*/
],
publishers: [],
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')

View File

@ -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;
}
}
}
}

View File

@ -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.'",