fazo96/ipfs-boards
1
0
Fork 0
mirror of https://github.com/fazo96/ipfs-boards synced 2025-01-26 15:04:19 +01:00
Code Issues Releases Wiki Activity

style changes

Browse Source
This commit is contained in:
Enrico Fasoli 2016-06-20 18:07:11 +02:00
parent 55c7124a3d
commit d0e905e5ef
21 changed files with 240 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
lib/boards-api.js
View File

@ -103,7 +103,7 @@ BoardsAPI.prototype.restoreProfileFromIPFS = function (hash, done) {
BoardsAPI.prototype.createProfile = function (profile, done) { BoardsAPI.prototype.createProfile = function (profile, done) {
console.log('Generating profile:', profile) console.log('Generating profile:', profile)
try { try {
var profile_str = JSON.stringify(profile) var profileStr = JSON.stringify(profile)
} catch (e) { } catch (e) {
console.log('Error, invalid profile:', e) console.log('Error, invalid profile:', e)
return done(e) return done(e)
@ -124,12 +124,12 @@ BoardsAPI.prototype.createProfile = function (profile, done) {
cb => { cb => {
// Add profile version file // Add profile version file
var path = '/ipfs-boards-profile/ipfs-boards-version.txt' var path = '/ipfs-boards-profile/ipfs-boards-version.txt'
var version_hash = '/ipfs/' + this.version_hash var versionHash = '/ipfs/' + this.versionHash
this.ipfs.files.cp([version_hash, path], cb) this.ipfs.files.cp([versionHash, path], cb)
}, },
(e, cb) => { (e, cb) => {
// Serialize profile and add to IPFS // Serialize profile and add to IPFS
this.ipfs.add(new Buffer(profile_str), cb) this.ipfs.add(new Buffer(profileStr), cb)
}, },
(res, cb) => { (res, cb) => {
// Move profile into mfs // Move profile into mfs
@ -139,9 +139,9 @@ BoardsAPI.prototype.createProfile = function (profile, done) {
}, },
(e, cb) => this.ipfs.files.stat('/', cb), (e, cb) => this.ipfs.files.stat('/', cb),
(res, cb) => { (res, cb) => {
var profile_hash = res.Hash var profileHash = res.Hash
console.log('Publishing profile...') console.log('Publishing profile...')
this.ipfs.name.publish(profile_hash, cb) this.ipfs.name.publish(profileHash, cb)
} }
], done) ], done)
} }
@ -149,7 +149,7 @@ BoardsAPI.prototype.createProfile = function (profile, done) {
BoardsAPI.prototype.createBoard = function (board, done) { BoardsAPI.prototype.createBoard = function (board, done) {
console.log('Generating board:', board) console.log('Generating board:', board)
try { try {
var settings_str = JSON.stringify(board) var settingsStr = JSON.stringify(board)
} catch (e) { } catch (e) {
console.log('Error, invalid Board Settings:', e) console.log('Error, invalid Board Settings:', e)
return done(e) return done(e)
@ -164,7 +164,7 @@ BoardsAPI.prototype.createBoard = function (board, done) {
}, },
(cb) => { (cb) => {
// Serialize Board Settings and add to IPFS // Serialize Board Settings and add to IPFS
this.ipfs.add(new Buffer(settings_str), cb) this.ipfs.add(new Buffer(settingsStr), cb)
}, },
(res, cb) => { (res, cb) => {
// Move Board into mfs // Move Board into mfs
@ -174,9 +174,9 @@ BoardsAPI.prototype.createBoard = function (board, done) {
}, },
(e, cb) => this.ipfs.files.stat('/', cb), (e, cb) => this.ipfs.files.stat('/', cb),
(res, cb) => { (res, cb) => {
var profile_hash = res.Hash var profileHash = res.Hash
console.log('Publishing profile...') console.log('Publishing profile...')
this.ipfs.name.publish(profile_hash, cb) this.ipfs.name.publish(profileHash, cb)
} }
], done) ], done)
} }
@ -185,7 +185,7 @@ BoardsAPI.prototype.createPost = function (post, board, done) {
try { try {
post.date = parseInt((new Date()).getTime() / 1000, 10) post.date = parseInt((new Date()).getTime() / 1000, 10)
post.op = this.id post.op = this.id
var post_str = JSON.stringify(post) var postStr = JSON.stringify(post)
} catch (e) { } catch (e) {
console.log('Error, invalid Post:', e) console.log('Error, invalid Post:', e)
return done(e) return done(e)
@ -203,7 +203,7 @@ BoardsAPI.prototype.createPost = function (post, board, done) {
}, },
(cb) => { (cb) => {
// Serialize post and add to IPFS // Serialize post and add to IPFS
this.ipfs.add(new Buffer(post_str), cb) this.ipfs.add(new Buffer(postStr), cb)
}, },
(res, cb) => { (res, cb) => {
// Move post into mfs // Move post into mfs
@ -214,9 +214,9 @@ BoardsAPI.prototype.createPost = function (post, board, done) {
}, },
(e, cb) => this.ipfs.files.stat('/', cb), (e, cb) => this.ipfs.files.stat('/', cb),
(res, cb) => { (res, cb) => {
var profile_hash = res.Hash var profileHash = res.Hash
console.log('Publishing profile...') console.log('Publishing profile...')
this.ipfs.name.publish(profile_hash, err => { this.ipfs.name.publish(profileHash, err => {
done(err, posthash) done(err, posthash)
}) })
} }
@ -227,7 +227,7 @@ BoardsAPI.prototype.createComment = function (comment, parent, done) {
comment.date = parseInt((new Date()).getTime() / 1000, 10) comment.date = parseInt((new Date()).getTime() / 1000, 10)
comment.op = this.id comment.op = this.id
comment.parent = parent comment.parent = parent
var comment_str = JSON.stringify(comment) var commentStr = JSON.stringify(comment)
} catch (e) { } catch (e) {
console.log('Error, invalid Post:', e) console.log('Error, invalid Post:', e)
return done(e) return done(e)
@ -245,7 +245,7 @@ BoardsAPI.prototype.createComment = function (comment, parent, done) {
}, },
(cb) => { (cb) => {
// Serialize comment and add to IPFS // Serialize comment and add to IPFS
this.ipfs.add(new Buffer(comment_str), cb) this.ipfs.add(new Buffer(commentStr), cb)
}, },
(res, cb) => { (res, cb) => {
// Move post into mfs // Move post into mfs
@ -256,9 +256,9 @@ BoardsAPI.prototype.createComment = function (comment, parent, done) {
}, },
(e, cb) => this.ipfs.files.stat('/', cb), (e, cb) => this.ipfs.files.stat('/', cb),
(res, cb) => { (res, cb) => {
var profile_hash = res.Hash var profileHash = res.Hash
console.log('Publishing profile...') console.log('Publishing profile...')
this.ipfs.name.publish(profile_hash, err => { this.ipfs.name.publish(profileHash, err => {
done(err, commenthash) done(err, commenthash)
}) })
} }
@ -461,7 +461,7 @@ BoardsAPI.prototype.searchUsers = function () {
}) })
// Look for who has the correct version file, they probably have a profile // Look for who has the correct version file, they probably have a profile
/* /*
this.ipfs.dht.findprovs(this.version_hash, (err,res) => { this.ipfs.dht.findprovs(this.versionHash, (err,res) => {
if(err){ if(err){
console.log('DHT FINDPROVS err',err) console.log('DHT FINDPROVS err',err)
} else if(res.readable){ } else if(res.readable){
@ -860,9 +860,9 @@ BoardsAPI.prototype.init = function (done) {
this.ee.emit('init', err2, this.limited) this.ee.emit('init', err2, this.limited)
if (done && done.apply) done(err2) if (done && done.apply) done(err2)
} else { } else {
if (r && r.Hash) this.version_hash = r.Hash if (r && r.Hash) this.versionHash = r.Hash
if (r && r[0] && r[0].Hash) this.version_hash = r[0].Hash if (r && r[0] && r[0].Hash) this.versionHash = r[0].Hash
console.log('Version hash is', this.version_hash) console.log('Version hash is', this.versionHash)
// DONE! // DONE!
this.ee.emit('init', undefined) this.ee.emit('init', undefined)
this.isInit = true this.isInit = true

54
webapp/app.jsx
View File

@ -41,7 +41,7 @@ require.ensure('react', _ => {
var Container = React.createClass({ var Container = React.createClass({
render () { render () {
return (<div className="container app">{this.props.children}</div>) return (<div className='container app'>{this.props.children}</div>)
} }
}) })
@ -68,14 +68,14 @@ require.ensure('react', _ => {
var Homepage = React.createClass({ var Homepage = React.createClass({
render () { render () {
return <Static className="homepage" content={require('landing.md')} /> return <Static className='homepage' content={require('landing.md')} />
} }
}) })
var NotFound = React.createClass({ var NotFound = React.createClass({
render () { render () {
return (<div className="text-center"> return (<div className='text-center'>
<h1><Icon name="ban" className="light"/></h1> <h1><Icon name='ban' className='light'/></h1>
<h3>Sorry, there's nothing here!</h3> <h3>Sorry, there's nothing here!</h3>
</div>) </div>)
} }
@ -96,44 +96,44 @@ require.ensure('react', _ => {
var IndexRoute = this.state.IndexRoute var IndexRoute = this.state.IndexRoute
var Route = this.state.Route var Route = this.state.Route
return <Router> return <Router>
<Route path="/" component={App}> <Route path='/' component={App}>
<IndexRoute component={Homepage} /> <IndexRoute component={Homepage} />
<Route path="/@:userid"> <Route path='/@:userid'>
<IndexRoute component={Profile} /> <IndexRoute component={Profile} />
<Route path="post/:posthash" > <Route path='post/:posthash' >
<IndexRoute component={PostPage} /> <IndexRoute component={PostPage} />
</Route> </Route>
<Route path=":boardname"> <Route path=':boardname'>
<IndexRoute component={Board} /> <IndexRoute component={Board} />
<Route path=":posthash"> <Route path=':posthash'>
<IndexRoute component={PostPage} /> <IndexRoute component={PostPage} />
<Route path=":commenthash" component={CommentPage} /> <Route path=':commenthash' component={CommentPage} />
</Route> </Route>
</Route> </Route>
</Route> </Route>
<Route path="edit"> <Route path='edit'>
<Route path="profile" component={ProfileEditor} /> <Route path='profile' component={ProfileEditor} />
<Route path="board(/:boardname)"> <Route path='board(/:boardname)'>
<IndexRoute component={BoardEditor} /> <IndexRoute component={BoardEditor} />
<Route path="post(/:posthash)" component={PostEditor} /> <Route path='post(/:posthash)' component={PostEditor} />
</Route> </Route>
</Route> </Route>
<Route path="post/:posthash" component={PostPage} /> <Route path='post/:posthash' component={PostPage} />
<Route path="board/:boardname" component={Board} /> <Route path='board/:boardname' component={Board} />
<Route path="users" component={Users} /> <Route path='users' component={Users} />
<Route path="settings" component={Settings} /> <Route path='settings' component={Settings} />
<Route path="status" component={Status} /> <Route path='status' component={Status} />
<Route path="version" component={Update} /> <Route path='version' component={Update} />
<Route path="backup" component={Backup} /> <Route path='backup' component={Backup} />
<Route path="restore" component={Backup} /> <Route path='restore' component={Backup} />
<Route path="*" component={NotFound} /> <Route path='*' component={NotFound} />
</Route> </Route>
</Router> </Router>
} else { } else {
return <div className="loading" style={{ marginTop: '2rem' }} > return <div className='loading' style={{ marginTop: '2rem' }} >
<div className="text-center"> <div className='text-center'>
<Icon className="center-block fa-spin fa-3x light" name="refresh" /> <Icon className='center-block fa-spin fa-3x light' name='refresh' />
<h4 className="top-half-em">Downloading Components</h4> <h4 className='top-half-em'>Downloading Components</h4>
</div> </div>
</div> </div>
} }

4
webapp/components/clock.jsx
View File

@ -28,10 +28,10 @@ module.exports = React.createClass({
if (this.state.moment) { if (this.state.moment) {
return this.state.text return this.state.text
} else { } else {
return <Icon name="refresh" className="fa-spin" /> return <Icon name='refresh' className='fa-spin' />
} }
}, },
render: function () { render: function () {
return <div className="inline"><Icon name="clock-o" className={this.props.className} /> {this.getDate()}</div> return <div className='inline'><Icon name='clock-o' className={this.props.className} /> {this.getDate()}</div>
} }
}) })

32
webapp/components/comment.jsx
View File

@ -40,21 +40,21 @@ var CommentEditor = React.createClass({
if (this.state.error) { if (this.state.error) {
return <Error error={this.state.error} /> return <Error error={this.state.error} />
} else if (this.state.loading) { } else if (this.state.loading) {
return <div className="center-block text-center find-content"> return <div className='center-block text-center find-content'>
<Icon name="refresh" className="fa-3x center-block light fa-spin" /> <Icon name='refresh' className='fa-3x center-block light fa-spin' />
<h4>Publishing Comment</h4> <h4>Publishing Comment</h4>
</div> </div>
} else if (this.state.success) { } else if (this.state.success) {
var url = '/@' + this.props.adminID + '/' + this.props.board + '/' + (this.props.post || this.props.parent) + '/' + this.state.hash var url = '/@' + this.props.adminID + '/' + this.props.board + '/' + (this.props.post || this.props.parent) + '/' + this.state.hash
return <Success title="Comment Published"> return <Success title='Comment Published'>
<Link className="button button-primary" to={url}>View</Link> <Link className='button button-primary' to={url}>View</Link>
</Success> </Success>
} else { } else {
return <div> return <div>
<textarea className="u-full-width" id="text" value={this.state.text} onChange={this.handleChange} placeholder="Speak your mind! Markdown is supported." /> <textarea className='u-full-width' id='text' value={this.state.text} onChange={this.handleChange} placeholder='Speak your mind! Markdown is supported.' />
<p><b>Note</b>: this version of the app doesn't check wether you are allowed to post on this board, so there are no guarantees that your post will be visible.</p> <p><b>Note</b>: this version of the app doesn't check wether you are allowed to post on this board, so there are no guarantees that your post will be visible.</p>
<div className="buttons"> <div className='buttons'>
<button className="button button-primary" onClick={this.save}>Send</button> <button className='button button-primary' onClick={this.save}>Send</button>
</div> </div>
</div> </div>
} }
@ -72,33 +72,33 @@ var Comment = React.createClass({
}, },
getPermalink () { getPermalink () {
if (this.props.adminID && this.props.board && this.props.post && this.props.comment.hash) { if (this.props.adminID && this.props.board && this.props.post && this.props.comment.hash) {
return <div className="inline not-first"> return <div className='inline not-first'>
<Icon name="code" /> <Link to={'/@' + this.props.adminID + '/' + this.props.board + '/' + this.props.post + '/' + this.props.comment.hash}>Permalink</Link> <Icon name='code' /> <Link to={'/@' + this.props.adminID + '/' + this.props.board + '/' + this.props.post + '/' + this.props.comment.hash}>Permalink</Link>
</div> </div>
} }
}, },
getParentlink () { getParentlink () {
if (this.props.showParent && this.props.comment.parent) { if (this.props.showParent && this.props.comment.parent) {
return <div className="inline not-first"> return <div className='inline not-first'>
<Icon name="level-up" /> <Link to={'/@' + this.props.adminID + '/' + this.props.board + '/' + this.props.post + '/' + this.props.comment.parent}>Parent</Link> <Icon name='level-up' /> <Link to={'/@' + this.props.adminID + '/' + this.props.board + '/' + this.props.post + '/' + this.props.comment.parent}>Parent</Link>
</div> </div>
} }
}, },
getComments () { getComments () {
return <Comments className="shifted" allowReply={this.props.allowReply} parent={this.props.comment.hash} post={this.props.post} adminID={this.props.adminID} board={this.props.board} api={this.props.api} /> return <Comments className='shifted' allowReply={this.props.allowReply} parent={this.props.comment.hash} post={this.props.post} adminID={this.props.adminID} board={this.props.board} api={this.props.api} />
}, },
toggleReply () { toggleReply () {
this.setState({ reply: !this.state.reply }) this.setState({ reply: !this.state.reply })
}, },
render () { render () {
if (this.props.comment) { if (this.props.comment) {
return <div className="comment"><hr/> return <div className='comment'><hr/>
<div className="icons"> <div className='icons'>
<UserID id={this.props.comment.op} api={this.props.api} /> <UserID id={this.props.comment.op} api={this.props.api} />
<Clock date={this.props.comment.date} /> <Clock date={this.props.comment.date} />
{this.getPermalink()} {this.getPermalink()}
{ this.props.allowReply { this.props.allowReply
? <a className="nounderline" onClick={this.toggleReply}><Icon className="not-first" name="reply" /> Reply</a> ? <a className='nounderline' onClick={this.toggleReply}><Icon className='not-first' name='reply' /> Reply</a>
: <a/> } : <a/> }
{this.getParentlink()} {this.getParentlink()}
</div> </div>
@ -146,7 +146,7 @@ var Comments = React.createClass({
}, },
render () { render () {
if (this.state.limited) { if (this.state.limited) {
return <div className="text-center"> return <div className='text-center'>
<p>Comments can't be displayed in limited mode</p> <p>Comments can't be displayed in limited mode</p>
</div> </div>
} else { } else {

26
webapp/components/navbar.jsx
View File

@ -18,8 +18,8 @@ var Updater = React.createClass({
}, },
render () { render () {
if (this.state.update) { if (this.state.update) {
return <Link className="nounderline" to='/version' > return <Link className='nounderline' to='/version' >
<Icon name="history" className="fa-2x light" /> <Icon name='history' className='fa-2x light' />
</Link> </Link>
} else return <div></div> } else return <div></div>
} }
@ -46,27 +46,27 @@ module.exports = function (boardsAPI) {
extraButtons: function () { extraButtons: function () {
if (this.state.api) { if (this.state.api) {
return <span> return <span>
<Link className="nounderline" to={'/@' + this.state.userid}><Icon name="user" className="fa-2x light"/></Link> <Link className='nounderline' to={'/@' + this.state.userid}><Icon name='user' className='fa-2x light'/></Link>
<Link className="nounderline" to="/users"><Icon name="globe" className="fa-2x light"/></Link> <Link className='nounderline' to='/users'><Icon name='globe' className='fa-2x light'/></Link>
</span> </span>
} else if (this.state.loading) { } else if (this.state.loading) {
return <Link className="nounderline" to="/status"><Icon name="refresh" className="fa-2x fa-spin light"/></Link> return <Link className='nounderline' to='/status'><Icon name='refresh' className='fa-2x fa-spin light'/></Link>
} else if (this.state.limited) { } else if (this.state.limited) {
return <Link className="nounderline" to="/status"><Icon name="exclamation-triangle" className="fa-2x light"/></Link> return <Link className='nounderline' to='/status'><Icon name='exclamation-triangle' className='fa-2x light'/></Link>
} else { } else {
return <Link className="nounderline" to="/status"><Icon name="ban" className="fa-2x light"/></Link> return <Link className='nounderline' to='/status'><Icon name='ban' className='fa-2x light'/></Link>
} }
}, },
render: function () { render: function () {
return ( return (
<div className="navbar"> <div className='navbar'>
<div className="container"> <div className='container'>
<h4><Link to="/"><Icon name="comments" className="light"/> Boards</Link></h4> <h4><Link to='/'><Icon name='comments' className='light'/> Boards</Link></h4>
<div className="u-pull-right iconbar"> <div className='u-pull-right iconbar'>
<Updater/> <Updater/>
{this.extraButtons()} {this.extraButtons()}
<Link className="nounderline" to="/settings"><Icon name="cog" className="fa-2x light"/></Link> <Link className='nounderline' to='/settings'><Icon name='cog' className='fa-2x light'/></Link>
<a className="nounderline" href="https://github.com/fazo96/ipfs-boards"><Icon name="github" className="fa-2x light"/></a> <a className='nounderline' href='https://github.com/fazo96/ipfs-boards'><Icon name='github' className='fa-2x light'/></a>
</div> </div>
</div> </div>
</div>) </div>)

24
webapp/components/post.jsx
View File

@ -46,8 +46,8 @@ module.exports = React.createClass({
var board = this.props.board || this.state.post.board var board = this.props.board || this.state.post.board
if (board) { if (board) {
var url = '/edit/board/' + board + '/post/' + this.props.hash var url = '/edit/board/' + board + '/post/' + this.props.hash
return <Link to={url} className="nounderline"> return <Link to={url} className='nounderline'>
<Icon name="edit" className="not-first"/> Edit <Icon name='edit' className='not-first'/> Edit
</Link> </Link>
} else { } else {
return <span/> return <span/>
@ -59,27 +59,27 @@ module.exports = React.createClass({
}, },
getContent () { getContent () {
if (this.state.error) { if (this.state.error) {
return <Error className="content" error={this.state.error} /> return <Error className='content' error={this.state.error} />
} else if (this.state.loading) { } else if (this.state.loading) {
return <div className="text-center"> return <div className='text-center'>
<div className="center-block" style={{marginTop: '1em'}}> <div className='center-block' style={{marginTop: '1em'}}>
<Icon className="center-block fa-spin fa-2x light" name="refresh" /> <Icon className='center-block fa-spin fa-2x light' name='refresh' />
</div> </div>
<h5>Downloading Post</h5> <h5>Downloading Post</h5>
</div> </div>
} else { } else {
return <div className="content"> return <div className='content'>
{ this.state.post.title { this.state.post.title
? <div><h5>{this.state.post.title}</h5><hr/></div> ? <div><h5>{this.state.post.title}</h5><hr/></div>
: <div /> : <div />
} }
<Markdown source={this.state.post.text} /><hr/> <Markdown source={this.state.post.text} /><hr/>
<div className="icons"> <div className='icons'>
<UserID id={this.state.post.op} api={this.props.api} ></UserID> <UserID id={this.state.post.op} api={this.props.api} ></UserID>
<Clock className="not-first" date={this.state.post.date} /> <Clock className='not-first' date={this.state.post.date} />
<Icon name="comments" className="not-first" /> <Link className="nounderline" to={this.postLink()}>View</Link> <Icon name='comments' className='not-first' /> <Link className='nounderline' to={this.postLink()}>View</Link>
{ this.props.allowReply { this.props.allowReply
? <a className="nounderline" onClick={this.toggleReply}><Icon className="not-first" name="reply" /> Reply</a> ? <a className='nounderline' onClick={this.toggleReply}><Icon className='not-first' name='reply' /> Reply</a>
: <span/>} : <span/>}
{this.editorLink()} {this.editorLink()}
</div> </div>
@ -88,7 +88,7 @@ module.exports = React.createClass({
}, },
render () { render () {
return <div> return <div>
<div className="post">{this.getContent()}</div> <div className='post'>{this.getContent()}</div>
{ this.state.reply { this.state.reply
? <CommentEditor parent={this.props.hash} api={this.props.api} adminID={this.props.adminID} board={this.props.board} /> ? <CommentEditor parent={this.props.hash} api={this.props.api} adminID={this.props.adminID} board={this.props.board} />
: <div/>} : <div/>}

10
webapp/components/postlist.jsx
View File

@ -64,19 +64,19 @@ module.exports = React.createClass({
return <Post key={hash} board={this.props.board} admin={this.props.admin} hash={hash} api={this.props.api} /> return <Post key={hash} board={this.props.board} admin={this.props.admin} hash={hash} api={this.props.api} />
}) })
} else { } else {
return <div className="center-block text-center"> return <div className='center-block text-center'>
<Icon name="refresh" className="fa-3x center-block light fa-spin" /> <Icon name='refresh' className='fa-3x center-block light fa-spin' />
</div> </div>
} }
}, },
render () { render () {
if (this.state.limited) { if (this.state.limited) {
return <div className="text-center"> return <div className='text-center'>
<h5 className="light"><Icon name="ban" /></h5> <h5 className='light'><Icon name='ban' /></h5>
<p>Posts in a board can't be shown in limited mode. Sorry!</p> <p>Posts in a board can't be shown in limited mode. Sorry!</p>
</div> </div>
} else { } else {
return <div className="postList"> return <div className='postList'>
{this.getPosts()} {this.getPosts()}
</div> </div>
} }

26
webapp/components/status-components.jsx
View File

@ -4,9 +4,9 @@ var Icon = require('icon.jsx')
var Error = React.createClass({ var Error = React.createClass({
render () { render () {
return <div> return <div>
<div className="text-center"> <div className='text-center'>
<Icon className="center-block fa-3x light" name="ban" /> <Icon className='center-block fa-3x light' name='ban' />
<h4 className="top-half-em">Ooops</h4> <h4 className='top-half-em'>Ooops</h4>
<p>{'' + this.props.error || 'Something went wrong'}</p> <p>{'' + this.props.error || 'Something went wrong'}</p>
{ this.props.children } { this.props.children }
</div> </div>
@ -16,10 +16,10 @@ var Error = React.createClass({
var Loading = React.createClass({ var Loading = React.createClass({
render () { render () {
return <div className="loading" > return <div className='loading' >
<div className="text-center"> <div className='text-center'>
<Icon className="center-block fa-spin fa-3x light" name="refresh" /> <Icon className='center-block fa-spin fa-3x light' name='refresh' />
<h4 className="top-half-em">{this.props.title}</h4> <h4 className='top-half-em'>{this.props.title}</h4>
{ this.props.children } { this.props.children }
</div> </div>
</div> </div>
@ -29,9 +29,9 @@ var Loading = React.createClass({
var Saving = React.createClass({ var Saving = React.createClass({
render () { render () {
return <div> return <div>
<div className="text-center"> <div className='text-center'>
<Icon className="center-block fa-spin fa-3x light" name="refresh" /> <Icon className='center-block fa-spin fa-3x light' name='refresh' />
<h4 className="top-half-em">{ this.props.title || 'Publishing' }</h4> <h4 className='top-half-em'>{ this.props.title || 'Publishing' }</h4>
{ this.props.children } { this.props.children }
</div> </div>
</div> </div>
@ -41,9 +41,9 @@ var Saving = React.createClass({
var Success = React.createClass({ var Success = React.createClass({
render () { render () {
return <div> return <div>
<div className="text-center"> <div className='text-center'>
<Icon className="center-block fa-3x light" name="check" /> <Icon className='center-block fa-3x light' name='check' />
<h4 className="top-half-em">{ this.props.title || 'Done' }</h4> <h4 className='top-half-em'>{ this.props.title || 'Done' }</h4>
{ this.props.children } { this.props.children }
</div> </div>
</div> </div>

10
webapp/components/userID.jsx
View File

@ -39,19 +39,19 @@ module.exports = React.createClass({
}, },
getContent () { getContent () {
if (this.state.name) { if (this.state.name) {
return (<Icon name="user" />) return (<Icon name='user' />)
} else { } else {
return '@' return '@'
} }
}, },
render () { render () {
if (this.props.id === undefined || this.props.id === 'undefined') { if (this.props.id === undefined || this.props.id === 'undefined') {
return <div className="user-id"> return <div className='user-id'>
<Icon name="ban" /> Unknown User <Icon name='ban' /> Unknown User
</div> </div>
} else { } else {
return (<div className="user-id"> return (<div className='user-id'>
<Link className="light nounderline" to={'/@' + this.props.id}> <Link className='light nounderline' to={'/@' + this.props.id}>
{this.getContent()}{this.state.name || this.props.id} {this.getContent()}{this.state.name || this.props.id}
</Link> </Link>
</div>) </div>)

22
webapp/pages/backup.jsx
View File

@ -3,10 +3,10 @@ var Icon = require('icon.jsx')
module.exports = React.createClass({ module.exports = React.createClass({
render () { render () {
return <div className="thin center-block"> return <div className='thin center-block'>
<div className="text-center"> <div className='text-center'>
<h1><Icon name="database" className="light" /></h1> <h1><Icon name='database' className='light' /></h1>
<h3 className="">Backup and Restore</h3> <h3 className=''>Backup and Restore</h3>
</div> </div>
<p>A user's profile is just a folder with a bunch of other files and <p>A user's profile is just a folder with a bunch of other files and
folders. This makes it very easy to create backups of anyone's profile, folders. This makes it very easy to create backups of anyone's profile,
@ -15,18 +15,18 @@ module.exports = React.createClass({
add it to IPFS and then use the resulting hash to restore your profile. add it to IPFS and then use the resulting hash to restore your profile.
Only restoring manually is possible, because <b>I haven't implemented Only restoring manually is possible, because <b>I haven't implemented
assisted restore yet</b> but that's coming soon.</p> assisted restore yet</b> but that's coming soon.</p>
<div className="text-center"> <div className='text-center'>
<h1><Icon name="download" className="light" /></h1> <h1><Icon name='download' className='light' /></h1>
<h3 className="">Backing Up</h3> <h3 className=''>Backing Up</h3>
</div> </div>
<p>Get the IPNS address of the user you want to back up. For example, while visiting <p>Get the IPNS address of the user you want to back up. For example, while visiting
<code>/@userid</code>, <code>userid</code> would be what you're looking for.</p> <code>/@userid</code>, <code>userid</code> would be what you're looking for.</p>
<p>If you have a profile, click on the <Icon name="user"/> icon in the top bar to view your address.</p> <p>If you have a profile, click on the <Icon name='user'/> icon in the top bar to view your address.</p>
<p>Make sure you are running a full <code>go-ipfs</code> node on your machine. Then, run this command: <code>ipfs get /ipns/userid/ipfs-boards-profile/</code> where <code>userid</code> is the target user's IPNS address.</p> <p>Make sure you are running a full <code>go-ipfs</code> node on your machine. Then, run this command: <code>ipfs get /ipns/userid/ipfs-boards-profile/</code> where <code>userid</code> is the target user's IPNS address.</p>
<p>A folder named <code>ipfs-boards-profile</code> will be created in the current working directory, containing the <b>full profile</b> with everything that is being published by the user. <b>It's that simple</b>.</p> <p>A folder named <code>ipfs-boards-profile</code> will be created in the current working directory, containing the <b>full profile</b> with everything that is being published by the user. <b>It's that simple</b>.</p>
<div className="text-center"> <div className='text-center'>
<h1><Icon name="upload" className="light" /></h1> <h1><Icon name='upload' className='light' /></h1>
<h3 className="">Restoring</h3> <h3 className=''>Restoring</h3>
</div> </div>
<p>Start the IPFS node you want to use to publish your profile.</p> <p>Start the IPFS node you want to use to publish your profile.</p>
<p>Get the IPFS hash of the <code>ipfs-boards-profile</code> folder that you want to use.</p> <p>Get the IPFS hash of the <code>ipfs-boards-profile</code> folder that you want to use.</p>

36
webapp/pages/board-editor.jsx
View File

@ -72,8 +72,8 @@ module.exports = function (boardsAPI) {
if (this.state.api && this.props.params.boardname) { if (this.state.api && this.props.params.boardname) {
var url = '/@' + this.state.api.getMyID() + '/' + this.props.params.boardname var url = '/@' + this.state.api.getMyID() + '/' + this.props.params.boardname
return <span> return <span>
<button onClick={this.refresh} className="button not-first">Refresh</button> <button onClick={this.refresh} className='button not-first'>Refresh</button>
<Link to={url} className="button not-first">View</Link> <Link to={url} className='button not-first'>View</Link>
</span> </span>
} else { } else {
return <span></span> return <span></span>
@ -83,21 +83,21 @@ module.exports = function (boardsAPI) {
if (this.state.api) { if (this.state.api) {
if (this.state.error) { if (this.state.error) {
return <Error error={this.state.error} > return <Error error={this.state.error} >
<button className="button button-primary center-block" onClick={this.skip}>Continue</button> <button className='button button-primary center-block' onClick={this.skip}>Continue</button>
</Error> </Error>
} else if (this.state.loading) { } else if (this.state.loading) {
return <Loading title="Fetching your current Board Settings..."> return <Loading title='Fetching your current Board Settings...'>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button> <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
</Loading> </Loading>
} else if (this.state.updating) { } else if (this.state.updating) {
return <Saving> return <Saving>
<p>Pressing the Skip button will not abort the publish operation.</p> <p>Pressing the Skip button will not abort the publish operation.</p>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button> <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
</Saving> </Saving>
} else { } else {
return ( return (
<div className="editor"> <div className='editor'>
<h2><Icon name="inbox" className="light" /> <h2><Icon name='inbox' className='light' />
{this.props.params.boardname ? ' Board Settings' : ' New Board'} {this.props.params.boardname ? ' Board Settings' : ' New Board'}
</h2> </h2>
<p>This App uses IPFS to store your Boards. When you are offline, <p>This App uses IPFS to store your Boards. When you are offline,
@ -106,24 +106,24 @@ module.exports = function (boardsAPI) {
<p><b>Warning:</b> due to a bug in go-ipfs, it may take up to a minute <p><b>Warning:</b> due to a bug in go-ipfs, it may take up to a minute
for your changes to be visibile. Your Boards will appear unchanged during for your changes to be visibile. Your Boards will appear unchanged during
this time.</p> this time.</p>
<div className="row"> <div className='row'>
{this.props.params.boardname {this.props.params.boardname
? <div></div> ? <div></div>
: <div className="six columns"> : <div className='six columns'>
<label htmlFor="shortname">ID</label> <label htmlFor='shortname'>ID</label>
<input className="u-full-width" type="text" id="shortname" value={this.state.id} onChange={this.handleChange} placeholder="Choose a short ID." /> <input className='u-full-width' type='text' id='shortname' value={this.state.id} onChange={this.handleChange} placeholder='Choose a short ID.' />
</div>} </div>}
<div className={(this.props.params.boardname ? 'twelve' : 'six') + ' columns'}> <div className={(this.props.params.boardname ? 'twelve' : 'six') + ' columns'}>
<label htmlFor="name">Title</label> <label htmlFor='name'>Title</label>
<input className="u-full-width" type="text" id="name" value={this.state.name} onChange={this.handleChange} placeholder="Name your board" /> <input className='u-full-width' type='text' id='name' value={this.state.name} onChange={this.handleChange} placeholder='Name your board' />
</div> </div>
</div> </div>
<div> <div>
<label htmlFor="desc">Description</label> <label htmlFor='desc'>Description</label>
<textarea className="u-full-width" id="desc" value={this.state.desc} onChange={this.handleChange} placeholder="What's this Board about? Markdown is supported :)" /> <textarea className='u-full-width' id='desc' value={this.state.desc} onChange={this.handleChange} placeholder="What's this Board about? Markdown is supported :)" />
</div> </div>
<div className="buttons"> <div className='buttons'>
<button className="button button-primary" onClick={this.save}>Publish</button> <button className='button button-primary' onClick={this.save}>Publish</button>
{this.additionalButtons()} {this.additionalButtons()}
</div> </div>
</div> </div>

16
webapp/pages/board.jsx
View File

@ -50,28 +50,28 @@ module.exports = function (boardsAPI) {
}, },
toolbox () { toolbox () {
if (this.state.limited) { if (this.state.limited) {
return <div className="text-center">Toolbox not available in limited mode<hr/></div> return <div className='text-center'>Toolbox not available in limited mode<hr/></div>
} else { } else {
return <div className="iconbar text-center"> return <div className='iconbar text-center'>
<Link to={'/edit/board/' + this.props.params.boardname} ><Icon name="edit" className="fa-2x light" /></Link> <Link to={'/edit/board/' + this.props.params.boardname} ><Icon name='edit' className='fa-2x light' /></Link>
<Link to={'/edit/board/' + this.props.params.boardname + '/post'} ><Icon name="plus" className="fa-2x light" /></Link> <Link to={'/edit/board/' + this.props.params.boardname + '/post'} ><Icon name='plus' className='fa-2x light' /></Link>
</div> </div>
} }
}, },
render () { render () {
if (this.state.api) { if (this.state.api) {
if (this.state.loading) { if (this.state.loading) {
return <Loading title="Downloading Board data"> return <Loading title='Downloading Board data'>
{ this.props.params.userid === 'me' || this.props.params.userid === this.state.userid { this.props.params.userid === 'me' || this.props.params.userid === this.state.userid
? <Link to={'/edit/board/' + this.props.params.boardname} className="button button-primary">Edit Board</Link> ? <Link to={'/edit/board/' + this.props.params.boardname} className='button button-primary'>Edit Board</Link>
: <span></span> } : <span></span> }
</Loading> </Loading>
} else { } else {
return (<div className="board"> return (<div className='board'>
<h2>{this.state.name}</h2> <h2>{this.state.name}</h2>
<Markdown source={this.state.description} skipHtml={true} /> <Markdown source={this.state.description} skipHtml={true} />
{this.props.params.userid ? <h5><UserID id={this.props.params.userid} api={this.state.api} /></h5> : <p></p>} {this.props.params.userid ? <h5><UserID id={this.props.params.userid} api={this.state.api} /></h5> : <p></p>}
<div className="whitelist"> <div className='whitelist'>
{this.state.whitelist.map(i => <UserID id={i} key={i} api={this.state.api} />)} {this.state.whitelist.map(i => <UserID id={i} key={i} api={this.state.api} />)}
</div> </div>
<hr /> <hr />

10
webapp/pages/commentpage.jsx
View File

@ -54,23 +54,23 @@ module.exports = function (boardsAPI) {
} else { } else {
return <div>Comment by <UserID id={this.props.params.userid} api={this.state.boards} /></div> return <div>Comment by <UserID id={this.props.params.userid} api={this.state.boards} /></div>
} }
} else return <div><h6 className="light">You are viewing a single comment</h6></div> } else return <div><h6 className='light'>You are viewing a single comment</h6></div>
}, },
showComment: function () { showComment: function () {
if (this.state.comment) { if (this.state.comment) {
console.log('allowReply', this.state.allowReply) console.log('allowReply', this.state.allowReply)
return <Comment allowReply={this.state.allowReply} comment={this.state.comment} post={this.props.params.posthash} adminID={this.props.params.userid} board={this.props.params.boardname} showParent={true} api={this.state.boards} /> return <Comment allowReply={this.state.allowReply} comment={this.state.comment} post={this.props.params.posthash} adminID={this.props.params.userid} board={this.props.params.boardname} showParent={true} api={this.state.boards} />
} else { } else {
return <div className="center-block text-center find-content"> return <div className='center-block text-center find-content'>
<Icon name="refresh" className="fa-3x center-block light fa-spin" /> <Icon name='refresh' className='fa-3x center-block light fa-spin' />
<h4>Finding content...</h4> <h4>Finding content...</h4>
</div> </div>
} }
}, },
render: function () { render: function () {
if (this.state.api) { if (this.state.api) {
return <div className="comment-page"> return <div className='comment-page'>
<div className="text-center"> <div className='text-center'>
{this.getContext()} {this.getContext()}
</div> </div>
{this.showComment()} {this.showComment()}

26
webapp/pages/getipfs.jsx
View File

@ -46,15 +46,15 @@ module.exports = React.createClass({
getContent () { getContent () {
if (this.state.limited) { if (this.state.limited) {
return <div> return <div>
<h1><Icon name="exclamation-triangle" className="light" /> You're running in limited mode</h1> <h1><Icon name='exclamation-triangle' className='light' /> You're running in limited mode</h1>
<h4 className="light">Sorry, but at the moment an external application is needed to fully take advantage of the app</h4> <h4 className='light'>Sorry, but at the moment an external application is needed to fully take advantage of the app</h4>
<p>Only a few features are available in limited mode.</p> <p>Only a few features are available in limited mode.</p>
<h5>Why am I running in limited mode?</h5> <h5>Why am I running in limited mode?</h5>
</div> </div>
} else { } else {
return <div> return <div>
<h1><Icon name="ban" className="light" /> Connection to IPFS not available</h1> <h1><Icon name='ban' className='light' /> Connection to IPFS not available</h1>
<h4 className="light">Sorry, but at the moment an external application is needed to try the Prototype</h4> <h4 className='light'>Sorry, but at the moment an external application is needed to try the Prototype</h4>
<p><b>Tip:</b> you can also run in limited mode by loading the app from an IPFS Gateway.</p> <p><b>Tip:</b> you can also run in limited mode by loading the app from an IPFS Gateway.</p>
</div> </div>
} }
@ -67,26 +67,26 @@ module.exports = React.createClass({
{this.getContent()} {this.getContent()}
<p>You don't have an IPFS node running at <code>{opt.addr}:{opt.port}</code> or it is not reachable. <p>You don't have an IPFS node running at <code>{opt.addr}:{opt.port}</code> or it is not reachable.
The IPFS Boards prototype requires a full IPFS node. Please start one by following the The IPFS Boards prototype requires a full IPFS node. Please start one by following the
<a href="https://github.com/ipfs/go-ipfs"><code>go-ipfs</code> documentation.</a></p> <a href='https://github.com/ipfs/go-ipfs'><code>go-ipfs</code> documentation.</a></p>
<h5>Do you have a running node but the app won't work?</h5> <h5>Do you have a running node but the app won't work?</h5>
<p>It's probably one of these issues:</p> <p>It's probably one of these issues:</p>
<ul> <ul>
<li>Your node is not located at <code>{opt.addr}:{opt.port}</code>. Go to the <Link to="/settings">Settings Page</Link> to configure the connection.</li> <li>Your node is not located at <code>{opt.addr}:{opt.port}</code>. Go to the <Link to='/settings'>Settings Page</Link> to configure the connection.</li>
<li>You edited your settings and saved them but didn't reload the page</li> <li>You edited your settings and saved them but didn't reload the page</li>
<li>Your IPFS node doesn't allow requests from the domain you're running the app from (CORS issue). See <a href="https://github.com/fazo96/ipfs-board/blob/master/ipfs_daemon_set_cors.sh">here</a> for the fix.</li> <li>Your IPFS node doesn't allow requests from the domain you're running the app from (CORS issue). See <a href='https://github.com/fazo96/ipfs-board/blob/master/ipfs_daemon_set_cors.sh'>here</a> for the fix.</li>
<li>You're downloading the app via `https`: at the moment, connecting to IPFS only works if you donwload the app via plain HTTP. If you're using `ipfs.io` please consider accessing the app via a local gateway like `localhost:8080`</li> <li>You're downloading the app via `https`: at the moment, connecting to IPFS only works if you donwload the app via plain HTTP. If you're using `ipfs.io` please consider accessing the app via a local gateway like `localhost:8080`</li>
<li>Some other networking or browser security issue is preventing the App from talking to your node.</li> <li>Some other networking or browser security issue is preventing the App from talking to your node.</li>
</ul> </ul>
<p>Still can't fix it? <a href="https://github.com/fazo96/ipfs-board/issues">File a issue on GitHub</a>, we'll be happy to help!</p> <p>Still can't fix it? <a href='https://github.com/fazo96/ipfs-board/issues'>File a issue on GitHub</a>, we'll be happy to help!</p>
</div> </div>
) } else if (this.state.connected) { ) } else if (this.state.connected) {
return <div class="text-center"> return <div class='text-center'>
<h1><Icon name="check" /></h1> <h1><Icon name='check' /></h1>
<h5 class="light">You're connected!</h5> <h5 class='light'>You're connected!</h5>
</div> </div>
} else { } else {
return <div className="center-block text-center"> return <div className='center-block text-center'>
<Icon name="refresh" className="fa-3x center-block light fa-spin" /> <Icon name='refresh' className='fa-3x center-block light fa-spin' />
<h4>Connecting to IPFS</h4> <h4>Connecting to IPFS</h4>
</div> </div>
} }

36
webapp/pages/post-editor.jsx
View File

@ -88,9 +88,9 @@ module.exports = function (boardsAPI) {
if (this.state.api && this.props.params.posthash) { if (this.state.api && this.props.params.posthash) {
var url = '/@' + this.state.api.getMyID() + '/' + this.props.params.boardname + '/' + this.props.params.posthash var url = '/@' + this.state.api.getMyID() + '/' + this.props.params.boardname + '/' + this.props.params.posthash
return <span> return <span>
<button onClick={this.refresh} className="button not-first">Refresh</button> <button onClick={this.refresh} className='button not-first'>Refresh</button>
<Link to={url} className="button not-first">View</Link> <Link to={url} className='button not-first'>View</Link>
<button onClick={this.delete} className="button not-first">Delete</button> <button onClick={this.delete} className='button not-first'>Delete</button>
</span> </span>
} else { } else {
return <span></span> return <span></span>
@ -100,30 +100,30 @@ module.exports = function (boardsAPI) {
if (this.state.api) { if (this.state.api) {
if (this.state.error) { if (this.state.error) {
return <Error error={this.state.error} > return <Error error={this.state.error} >
<button className="button button-primary center-block" onClick={this.skip}>Continue</button> <button className='button button-primary center-block' onClick={this.skip}>Continue</button>
</Error> </Error>
} else if (this.state.deleting) { } else if (this.state.deleting) {
return <Loading title="Deleting Post"> return <Loading title='Deleting Post'>
<p>Pressing the Skip button will not abort the Delete operation.</p> <p>Pressing the Skip button will not abort the Delete operation.</p>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button> <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
</Loading> </Loading>
} else if (this.state.loading) { } else if (this.state.loading) {
return <Loading title="Downloading Post"> return <Loading title='Downloading Post'>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button> <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
</Loading> </Loading>
} else if (this.state.updating) { } else if (this.state.updating) {
return <Saving> return <Saving>
<p>Pressing the Skip button will not abort the publish operation.</p> <p>Pressing the Skip button will not abort the publish operation.</p>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button> <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
</Saving> </Saving>
} else if (this.state.success) { } else if (this.state.success) {
return <Success title="Post Deleted"> return <Success title='Post Deleted'>
<p><b>Note:</b> due to a bug in go-ipfs, you may need to wait up to a minute for changes to appear.</p> <p><b>Note:</b> due to a bug in go-ipfs, you may need to wait up to a minute for changes to appear.</p>
</Success> </Success>
} else { } else {
return ( return (
<div className="editor"> <div className='editor'>
<h2><Icon name="pencil" className="light" /> <h2><Icon name='pencil' className='light' />
{this.props.params.posthash ? ' Edit Post' : ' New Post'} {this.props.params.posthash ? ' Edit Post' : ' New Post'}
</h2> </h2>
<p>This App uses IPFS to store your Posts. When you are offline, <p>This App uses IPFS to store your Posts. When you are offline,
@ -133,15 +133,15 @@ module.exports = function (boardsAPI) {
for your changes to be visibile. Your Post will not appear or appear for your changes to be visibile. Your Post will not appear or appear
unchanged during this time.</p> unchanged during this time.</p>
<div> <div>
<label htmlFor="title">Title</label> <label htmlFor='title'>Title</label>
<input className="u-full-width" type="text" id="title" value={this.state.title} onChange={this.handleChange} placeholder="Choose a title" /> <input className='u-full-width' type='text' id='title' value={this.state.title} onChange={this.handleChange} placeholder='Choose a title' />
</div> </div>
<div> <div>
<label htmlFor="text">Content</label> <label htmlFor='text'>Content</label>
<textarea className="u-full-width" id="text" value={this.state.text} onChange={this.handleChange} placeholder="Write your post. Markdown is supported :)" /> <textarea className='u-full-width' id='text' value={this.state.text} onChange={this.handleChange} placeholder='Write your post. Markdown is supported :)' />
</div> </div>
<div className="buttons"> <div className='buttons'>
<button className="button button-primary" onClick={this.save}>Publish</button> <button className='button button-primary' onClick={this.save}>Publish</button>
{this.additionalButtons()} {this.additionalButtons()}
</div> </div>
</div> </div>

6
webapp/pages/postpage.jsx
View File

@ -24,12 +24,12 @@ module.exports = function (boardsAPI) {
} else { } else {
return <div>Posted by <UserID id={this.props.params.userid} api={this.state.api} /></div> return <div>Posted by <UserID id={this.props.params.userid} api={this.state.api} /></div>
} }
} else return <div><h6 className="light">You are viewing a single post</h6></div> } else return <div><h6 className='light'>You are viewing a single post</h6></div>
}, },
render: function () { render: function () {
if (this.state.api) { if (this.state.api) {
return <div className="post-page"> return <div className='post-page'>
<div className="text-center"> <div className='text-center'>
{this.getContext()} {this.getContext()}
</div> </div>
<Post allowReply={true} hash={this.props.params.posthash} board={this.props.params.boardname} api={this.state.api} adminID={this.props.params.userid} /> <Post allowReply={true} hash={this.props.params.posthash} board={this.props.params.boardname} api={this.state.api} adminID={this.props.params.userid} />

32
webapp/pages/profile-editor.jsx
View File

@ -69,40 +69,40 @@ module.exports = function (boardsAPI) {
if (this.state.api) { if (this.state.api) {
if (this.state.error) { if (this.state.error) {
return <Error error={this.state.error} > return <Error error={this.state.error} >
<button className="button button-primary center-block" onClick={this.skip}>Continue</button> <button className='button button-primary center-block' onClick={this.skip}>Continue</button>
</Error> </Error>
} else if (this.state.loading) { } else if (this.state.loading) {
return <Loading title="Fetching your current Profile..."> return <Loading title='Fetching your current Profile...'>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button> <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
</Loading> </Loading>
} else if (this.state.updating) { } else if (this.state.updating) {
return <Saving> return <Saving>
<p>Pressing the Skip button will not abort the publish operation.</p> <p>Pressing the Skip button will not abort the publish operation.</p>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button> <button className='button button-primary center-block' onClick={this.skip}>Skip</button>
</Saving> </Saving>
} else { } else {
return ( return (
<div className="editor"> <div className='editor'>
<h2><Icon name="user" className="light" /> Edit Profile</h2> <h2><Icon name='user' className='light' /> Edit Profile</h2>
<p>This App uses IPFS to store your profile. When you are offline, <p>This App uses IPFS to store your profile. When you are offline,
other users or servers that viewed your profile will serve it to other users or servers that viewed your profile will serve it to
others.</p> others.</p>
<p><b>Warning:</b> due to a bug in go-ipfs, it may take up to a minute <p><b>Warning:</b> due to a bug in go-ipfs, it may take up to a minute
for your changes to be visibile. Your profile will appear unchanged during for your changes to be visibile. Your profile will appear unchanged during
this time.</p> this time.</p>
<div className="center-block"> <div className='center-block'>
<label htmlFor="name">Name</label> <label htmlFor='name'>Name</label>
<input className="u-full-width" type="text" id="name" value={this.state.name} onChange={this.handleChange} placeholder="Who are you on the interwebs?" /> <input className='u-full-width' type='text' id='name' value={this.state.name} onChange={this.handleChange} placeholder='Who are you on the interwebs?' />
</div> </div>
<div> <div>
<label htmlFor="desc">Caption</label> <label htmlFor='desc'>Caption</label>
<textarea className="u-full-width" id="desc" value={this.state.description} onChange={this.handleChange} placeholder="Say something about yourself." /> <textarea className='u-full-width' id='desc' value={this.state.description} onChange={this.handleChange} placeholder='Say something about yourself.' />
</div> </div>
<div className="buttons"> <div className='buttons'>
<button className="button button-primary" onClick={this.save}>Publish</button> <button className='button button-primary' onClick={this.save}>Publish</button>
<button onClick={this.refresh} className="button not-first">Refresh</button> <button onClick={this.refresh} className='button not-first'>Refresh</button>
<Link to={'/@' + this.state.userid} className="button not-first">View</Link> <Link to={'/@' + this.state.userid} className='button not-first'>View</Link>
<Link to="/backup" className="button not-first">Backup and Restore</Link> <Link to='/backup' className='button not-first'>Backup and Restore</Link>
</div> </div>
</div> </div>
) )

16
webapp/pages/profile.jsx
View File

@ -52,10 +52,10 @@ module.exports = function (boardsAPI) {
linkToEditor () { linkToEditor () {
var uid = this.props.params.userid var uid = this.props.params.userid
if (uid === this.state.id) { if (uid === this.state.id) {
return <div className="your-profile"> return <div className='your-profile'>
<h6>This is your profile</h6> <h6>This is your profile</h6>
<div className="iconbar"> <div className='iconbar'>
<Link className="nounderline" to="/edit/profile"><Icon name="edit" className="fa-2x light"/></Link> <Link className='nounderline' to='/edit/profile'><Icon name='edit' className='fa-2x light'/></Link>
</div> </div>
<hr/> <hr/>
</div> </div>
@ -63,24 +63,24 @@ module.exports = function (boardsAPI) {
return '' return ''
}, },
getEditButton () { getEditButton () {
return <Link className="button button-primary" to="/edit/profile">Edit Profile</Link> return <Link className='button button-primary' to='/edit/profile'>Edit Profile</Link>
}, },
render () { render () {
if (this.state.api) { if (this.state.api) {
if (this.state.error) { if (this.state.error) {
return <Error error={this.state.error}>{this.getEditButton()}</Error> return <Error error={this.state.error}>{this.getEditButton()}</Error>
} else if (this.state.loading) { } else if (this.state.loading) {
return <Loading title="Downloading Profile">{this.getEditButton()}</Loading> return <Loading title='Downloading Profile'>{this.getEditButton()}</Loading>
} else { } else {
var uid = this.props.params.userid var uid = this.props.params.userid
return (<div className="profile"> return (<div className='profile'>
{this.linkToEditor()} {this.linkToEditor()}
<h1>{this.state.name}</h1> <h1>{this.state.name}</h1>
<Markdown source={this.state.description} skipHtml={true} /> <Markdown source={this.state.description} skipHtml={true} />
<hr/> <hr/>
<div className="light breaker">@{uid}</div> <div className='light breaker'>@{uid}</div>
{this.state.boards.map(n => { {this.state.boards.map(n => {
return <h6 className="light" key={uid + '/' + n.name}> return <h6 className='light' key={uid + '/' + n.name}>
<Link to={'/@' + uid + '/' + n.name}># {n.name}</Link> <Link to={'/@' + uid + '/' + n.name}># {n.name}</Link>
</h6> </h6>
})} })}

36
webapp/pages/settings.jsx
View File

@ -54,43 +54,43 @@ module.exports = function (boardsAPI) {
isOK: function () { isOK: function () {
if (this.state.error) { if (this.state.error) {
console.log('Error', this.state.error) console.log('Error', this.state.error)
return <div className="itsok light"> return <div className='itsok light'>
<h5><Icon name="ban" /> Error</h5> <h5><Icon name='ban' /> Error</h5>
<p>{this.state.error}</p> <p>{this.state.error}</p>
</div> </div>
} else if (this.state.limited) { } else if (this.state.limited) {
return <div className="itsok light"> return <div className='itsok light'>
<h5><Icon name="exclamation-triangle" /> Limited Mode</h5> <h5><Icon name='exclamation-triangle' /> Limited Mode</h5>
<p>Some features may not be available.</p> <p>Some features may not be available.</p>
</div> </div>
} else if (this.state.api) { } else if (this.state.api) {
return <div className="itsok light"> return <div className='itsok light'>
<h5><Icon name="check" /> It's OK</h5> <h5><Icon name='check' /> It's OK</h5>
<p>You're connected to IPFS</p> <p>You're connected to IPFS</p>
</div> </div>
} else return <div></div> } else return <div></div>
}, },
render: function () { render: function () {
return ( return (
<div className="settings"> <div className='settings'>
<h2><Icon name="cog"/> Settings</h2> <h2><Icon name='cog'/> Settings</h2>
<h5>Choose how the prototype connects to IPFS</h5> <h5>Choose how the prototype connects to IPFS</h5>
<p>In the future, this won't be necessary because IPFS will run in your browser.</p> <p>In the future, this won't be necessary because IPFS will run in your browser.</p>
<p>All settings are saved in your browser's localStorage.</p> <p>All settings are saved in your browser's localStorage.</p>
<div className="row"> <div className='row'>
<div className="six columns"> <div className='six columns'>
<label htmlFor="nodeAddress">IPFS Node</label> <label htmlFor='nodeAddress'>IPFS Node</label>
<input className="u-full-width" type="text" id="nodeAddress" value={this.state.addr} onChange={this.onChange} placeholder="localhost" /> <input className='u-full-width' type='text' id='nodeAddress' value={this.state.addr} onChange={this.onChange} placeholder='localhost' />
</div> </div>
<div className="six columns"> <div className='six columns'>
<label htmlFor="nodePort">API Port</label> <label htmlFor='nodePort'>API Port</label>
<input className="u-full-width" type="text" id="nodePort" value={this.state.port} onChange={this.onChange} placeholder="5001" /> <input className='u-full-width' type='text' id='nodePort' value={this.state.port} onChange={this.onChange} placeholder='5001' />
</div> </div>
</div> </div>
{this.isOK()} {this.isOK()}
<div className="buttons"> <div className='buttons'>
<button className="button button-primary" onClick={this.save}>Save</button> <button className='button button-primary' onClick={this.save}>Save</button>
<button className="button not-first" onClick={this.setDefaults}>Defaults</button> <button className='button not-first' onClick={this.setDefaults}>Defaults</button>
</div> </div>
</div> </div>
) )

12
webapp/pages/update.jsx
View File

@ -4,10 +4,10 @@ var Icon = require('icon.jsx')
module.exports = React.createClass({ module.exports = React.createClass({
render () { render () {
var gateway = window.location.pathname.indexOf('/ipfs/') === 0 || window.location.pathname.indexOf('/ipns/') === 0 var gateway = window.location.pathname.indexOf('/ipfs/') === 0 || window.location.pathname.indexOf('/ipns/') === 0
return <div className="thin center-block"> return <div className='thin center-block'>
<div className="text-center"> <div className='text-center'>
<h1><Icon name="history" className="light" /></h1> <h1><Icon name='history' className='light' /></h1>
<h3 className="light">Version Center</h3> <h3 className='light'>Version Center</h3>
</div> </div>
<p>This page lets you reach the latest version <p>This page lets you reach the latest version
of the app from any older versions. In the future, you will be able to manage of the app from any older versions. In the future, you will be able to manage
@ -16,8 +16,8 @@ module.exports = React.createClass({
<p><b>You're free to keep going</b>, but if you want the latest updates as <p><b>You're free to keep going</b>, but if you want the latest updates as
soon as they are published, you can click the following button, that will soon as they are published, you can click the following button, that will
bring you to an IPFS URL that always points to the latest version.</p> bring you to an IPFS URL that always points to the latest version.</p>
<div className="buttons"> <div className='buttons'>
<a className="button button-primary" href={gateway ? '/ipns/boards.ydns.eu' : 'http://ipfs.ydns.eu/ipns/boards.ydns.eu'}>Update</a> <a className='button button-primary' href={gateway ? '/ipns/boards.ydns.eu' : 'http://ipfs.ydns.eu/ipns/boards.ydns.eu'}>Update</a>
</div> </div>
</div> </div>
} }

2
webapp/pages/users.jsx
View File

@ -26,7 +26,7 @@ module.exports = function (boardsAPI) {
render () { render () {
if (this.state.api) { if (this.state.api) {
return <div> return <div>
<h1><Icon name="users" className="light" /> Users</h1> <h1><Icon name='users' className='light' /> Users</h1>
<p>Found <b>{this.state.users.length}</b> users</p> <p>Found <b>{this.state.users.length}</b> users</p>
<ul> <ul>
{this.state.users.map(user => { {this.state.users.map(user => {