add structure for new targets page

pull/30/head
unknown 2018-11-10 22:46:50 -05:00
parent 3e2c750cf9
commit 8490b58ed1
8 changed files with 133 additions and 7 deletions

View File

@ -1,6 +1,6 @@
module.exports = { module.exports = {
show: function (req, res) { show: function (req, res) {
res.view('pages/temp', { res.view('pages/targets', {
email: req.user.email email: req.user.email
}) })

View File

@ -9,6 +9,6 @@ module.exports = function (req, res, next) {
if (req.session.authenticated) { if (req.session.authenticated) {
return next() return next()
} }
res.status(403).json({ error: 'You are not permitted to perform this action.' }) // res.status(403).json({ error: 'You are not permitted to perform this action.' })
// res.redirect('/login') res.redirect('/login')
} }

68
assets/js/targets.js Normal file
View File

@ -0,0 +1,68 @@
'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import Progress from './components/Progress'
import UriListItem from './containers/UriListItem'
import '../styles/targets.scss'
class App extends React.Component {
constructor () {
super()
this.state = {
error: '',
user: {
email: '',
password: ''
},
working: false
}
this.dispatch = this.dispatch.bind(this)
this.getRegisteredUris = this.getRegisteredUris.bind(this)
}
dispatch (action) {
if (!action) throw new Error('dispatch: missing action')
if (action instanceof Function) {
action(this.dispatch, () => this.state)
} else {
const changes = reducer(this.state, action)
if (!changes || !Object.keys(changes).length) return
this.setState({
...changes
})
}
}
getRegisteredUris () {
return [1, 2, 3].map((item, i) => {
return (<UriListItem key={i} />)
})
}
render () {
return (
<div className='root-container flex-container'>
<aside className='nav nav-left'>
<header>
<h1>RoE</h1>
</header>
</aside>
<section className='content flex'>
<Progress bound />
<header className='flex-container'>
<div className='flex'>
<h1>Push URIs</h1>
<h2>Newly published books will be sent to these addresses.</h2>
</div>
<button className='btn'>New address</button>
</header>
<ul className='list'>
{this.getRegisteredUris()}
</ul>
</section>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))

View File

@ -0,0 +1,34 @@
@import 'lib/default';
@import 'shared/twopanels';
.nav {
header {
height: 50px;
line-height: 50px;
padding: 0 14px;
}
}
.content {
padding: 14px 14px 42px 14px;
header {
h1 {
text-shadow: 1px 1px 2px $black-3;
}
h2 {
margin: 0;
padding: 0;
font-weight: normal;
font-size: 16px;
margin-top: 4px;
color: $text-dark-2;
text-shadow: 1px 1px 2px $black-4;
}
}
.list {
margin: 14px 0;
padding: 0;
list-style: none;
overflow: hidden;
}
}

View File

@ -0,0 +1,17 @@
<% var key, item %>
<% htmlWebpackPlugin.options.links = htmlWebpackPlugin.options.links || [] %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RoE - Push Targets</title>
<% for (item of htmlWebpackPlugin.options.links) {
if (typeof item === 'string' || item instanceof String) { item = { href: item, rel: 'stylesheet' } } %>
<link<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %> /><%
} %>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no" />
</head>
<body>
<div id="root"></div>
</body>
</html>

1
views/pages/targets.ejs Normal file
View File

@ -0,0 +1 @@
<%- partial('../../.tmp/public/targets.html') %>

View File

@ -1,2 +0,0 @@
authed: <%- email %><br />
<a href="/logout">Logout</a>

View File

@ -9,7 +9,8 @@ module.exports = (env, argv) => {
return { return {
mode: mode || 'development', mode: mode || 'development',
entry: { entry: {
login: './assets/js/login.js' login: './assets/js/login.js',
targets: './assets/js/targets.js'
}, },
output: { output: {
path: path.join(__dirname, '/.tmp/public'), path: path.join(__dirname, '/.tmp/public'),
@ -36,7 +37,14 @@ module.exports = (env, argv) => {
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: 'assets/templates/login.html', template: 'assets/templates/login.html',
links: mode === 'production' ? [{ rel: 'stylesheet', type: 'text/css', href: 'login.css' }] : [], links: mode === 'production' ? [{ rel: 'stylesheet', type: 'text/css', href: 'login.css' }] : [],
filename: path.join(__dirname, '/.tmp/public/login.html') filename: path.join(__dirname, '/.tmp/public/login.html'),
chunks: ['login']
}),
new HtmlWebpackPlugin({
template: 'assets/templates/targets.html',
links: mode === 'production' ? [{ rel: 'stylesheet', type: 'text/css', href: 'targets.css' }] : [],
filename: path.join(__dirname, '/.tmp/public/targets.html'),
chunks: ['targets']
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: '[name].css' filename: '[name].css'