display whitelist status
parent
6db4da4980
commit
c0480a4b85
|
@ -8,8 +8,10 @@ import appReducer from './reducers'
|
||||||
import adminReducer from './reducers/admin'
|
import adminReducer from './reducers/admin'
|
||||||
import { fetchAdminData, patchUser, patchPublisher } from './actions/admin'
|
import { fetchAdminData, patchUser, patchPublisher } from './actions/admin'
|
||||||
import Util from './lib/Util'
|
import Util from './lib/Util'
|
||||||
|
import Icon from './components/Icon'
|
||||||
|
|
||||||
import '../styles/admin.scss'
|
import '../styles/admin.scss'
|
||||||
|
import './containers/listitem.scss'
|
||||||
|
|
||||||
const reducer = Util.combineReducers(appReducer, adminReducer)
|
const reducer = Util.combineReducers(appReducer, adminReducer)
|
||||||
|
|
||||||
|
@ -32,6 +34,17 @@ class App extends React.Component {
|
||||||
this.dispatch = this.dispatch.bind(this)
|
this.dispatch = this.dispatch.bind(this)
|
||||||
this.getRegisteredUsers = this.getRegisteredUsers.bind(this)
|
this.getRegisteredUsers = this.getRegisteredUsers.bind(this)
|
||||||
this.getRegisteredPublishers = this.getRegisteredPublishers.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) {
|
dispatch (action) {
|
||||||
if (!action) throw new Error('dispatch: missing action')
|
if (!action) throw new Error('dispatch: missing action')
|
||||||
|
@ -56,11 +69,11 @@ class App extends React.Component {
|
||||||
<span className='flex'>
|
<span className='flex'>
|
||||||
<label for={`is-admin-${user.id}`} className='cb-label'>Admin?</label>
|
<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}`} />
|
<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>
|
</span>
|
||||||
<div className='stack flex flex-container flex-vertical'>
|
<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>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
|
@ -69,19 +82,27 @@ class App extends React.Component {
|
||||||
getRegisteredPublishers () {
|
getRegisteredPublishers () {
|
||||||
return this.state.publishers.map(pub => {
|
return this.state.publishers.map(pub => {
|
||||||
return (
|
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'>
|
||||||
</div>
|
<span className='flex'><span className='key'>Owner:</span><span className='value'>{pub.user.email}</span></span>
|
||||||
<span className='flex'>
|
<span className='flex'><span className='key'>App ID:</span><span className='value'>{pub.appid}</span></span>
|
||||||
<label for={`is-whitelisted-${pub.id}`} className='cb-label'>Whitelisted?</label>
|
<span className='flex contains-icon'>
|
||||||
<input className='checkbox' type='checkbox' checked={pub.whitelisted} onChange={() => this.dispatch(patchPublisher({ id: pub.id, whitelisted: !pub.whitelisted }))} id={`is-whitelisted-${pub.id}`} />
|
<span className='key'>App domain:</span>
|
||||||
<label for={`is-whitelisted-${pub.id}`} />
|
<span className='value'>{pub.url}</span>
|
||||||
</span>
|
<Icon icon={pub.verified ? 'shield-check' : 'alert-circle'} className={pub.verified ? 'verified' : 'unverified'} />
|
||||||
<div className='stack flex flex-container flex-vertical'>
|
</span>
|
||||||
<span>{pub.created_at}</span>
|
</div>
|
||||||
<span>{pub.updated_at}</span>
|
<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>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
|
|
|
@ -29,9 +29,9 @@ class PublisherListItem extends React.Component {
|
||||||
}
|
}
|
||||||
getView () {
|
getView () {
|
||||||
return (
|
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'>
|
<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))} />
|
<ConfirmIconButton icon='delete' onClick={() => this.props.dispatch(removePublisher(this.props.item.id))} />
|
||||||
</header>
|
</header>
|
||||||
<div className='flex flex-container'>
|
<div className='flex flex-container'>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
@import '../../styles/lib/vars';
|
@import '../../styles/lib/vars';
|
||||||
|
|
||||||
.uri-list-item {
|
.uri-list-item {
|
||||||
|
position: relative;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
max-width: 100%;
|
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: ''
|
currentPassword: ''
|
||||||
},
|
},
|
||||||
urls: [],
|
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: '' },
|
newPublisher: { name: '', url: '' },
|
||||||
editingUrl: null,
|
editingUrl: null,
|
||||||
editingPublisher: 1,
|
editingPublisher: 1,
|
||||||
|
@ -79,15 +39,6 @@ class App extends React.Component {
|
||||||
this.saveUser = this.saveUser.bind(this)
|
this.saveUser = this.saveUser.bind(this)
|
||||||
this.getRegisteredPublishers = this.getRegisteredPublishers.bind(this)
|
this.getRegisteredPublishers = this.getRegisteredPublishers.bind(this)
|
||||||
this.setPublisherValue = this.setPublisherValue.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) {
|
dispatch (action) {
|
||||||
if (!action) throw new Error('dispatch: missing action')
|
if (!action) throw new Error('dispatch: missing action')
|
||||||
|
|
|
@ -4,11 +4,17 @@
|
||||||
.list {
|
.list {
|
||||||
li {
|
li {
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
height: 50px;
|
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
padding: 0 14px;
|
padding: 0 14px;
|
||||||
|
|
||||||
|
header {
|
||||||
|
h3 {
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
.stack {
|
.stack {
|
||||||
line-height: 20px;
|
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",
|
"description": "a Sails application",
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"scripts": {
|
"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:debug": "npm-run-all --parallel open:client debug",
|
||||||
"start:prod": "npm-run-all --parallel build:prod lift",
|
"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": "npm run build:prod",
|
||||||
"build:dev": "webpack --mode development",
|
"build:dev": "webpack --mode development",
|
||||||
"build:prod": "webpack --mode production",
|
"build:prod": "webpack --mode production",
|
||||||
"clean": "rimraf .tmp && mkdirp .tmp/public",
|
"clean": "rimraf .tmp && mkdirp .tmp/public",
|
||||||
"lift": "sails lift",
|
|
||||||
"forever": "sudo ./node_modules/.bin/pm2 start ecosystem.config.js --env production",
|
"forever": "sudo ./node_modules/.bin/pm2 start ecosystem.config.js --env production",
|
||||||
"stop": "sudo ./node_modules/.bin/pm2 delete roe-base",
|
"stop": "sudo ./node_modules/.bin/pm2 delete roe-base",
|
||||||
"test": "npm run lint && npm run custom-tests && echo 'Done.'",
|
"test": "npm run lint && npm run custom-tests && echo 'Done.'",
|
||||||
|
|
Loading…
Reference in New Issue