display whitelist status
parent
6db4da4980
commit
c0480a4b85
|
@ -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>
|
||||
</div>
|
||||
<span className='flex'>
|
||||
<label for={`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}`} />
|
||||
</span>
|
||||
<div className='stack flex flex-container flex-vertical'>
|
||||
<span>{pub.created_at}</span>
|
||||
<span>{pub.updated_at}</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 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 htmlFor={`is-whitelisted-${pub.id}`} />
|
||||
</span>
|
||||
<div className='stack flex flex-container flex-vertical'>
|
||||
<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>
|
||||
)
|
||||
|
|
|
@ -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'>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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.'",
|
||||
|
|
Loading…
Reference in New Issue