fazo96/ipfs-boards
1
0
Fork 0
mirror of https://github.com/fazo96/ipfs-boards synced 2025-01-24 14:44: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) {
console.log('Generating profile:', profile)
try {
var profile_str = JSON.stringify(profile)
var profileStr = JSON.stringify(profile)
} catch (e) {
console.log('Error, invalid profile:', e)
return done(e)
@ -124,12 +124,12 @@ BoardsAPI.prototype.createProfile = function (profile, done) {
cb => {
// Add profile version file
var path = '/ipfs-boards-profile/ipfs-boards-version.txt'
var version_hash = '/ipfs/' + this.version_hash
this.ipfs.files.cp([version_hash, path], cb)
var versionHash = '/ipfs/' + this.versionHash
this.ipfs.files.cp([versionHash, path], cb)
},
(e, cb) => {
// Serialize profile and add to IPFS
this.ipfs.add(new Buffer(profile_str), cb)
this.ipfs.add(new Buffer(profileStr), cb)
},
(res, cb) => {
// Move profile into mfs
@ -139,9 +139,9 @@ BoardsAPI.prototype.createProfile = function (profile, done) {
},
(e, cb) => this.ipfs.files.stat('/', cb),
(res, cb) => {
var profile_hash = res.Hash
var profileHash = res.Hash
console.log('Publishing profile...')
this.ipfs.name.publish(profile_hash, cb)
this.ipfs.name.publish(profileHash, cb)
}
], done)
}
@ -149,7 +149,7 @@ BoardsAPI.prototype.createProfile = function (profile, done) {
BoardsAPI.prototype.createBoard = function (board, done) {
console.log('Generating board:', board)
try {
var settings_str = JSON.stringify(board)
var settingsStr = JSON.stringify(board)
} catch (e) {
console.log('Error, invalid Board Settings:', e)
return done(e)
@ -164,7 +164,7 @@ BoardsAPI.prototype.createBoard = function (board, done) {
},
(cb) => {
// Serialize Board Settings and add to IPFS
this.ipfs.add(new Buffer(settings_str), cb)
this.ipfs.add(new Buffer(settingsStr), cb)
},
(res, cb) => {
// Move Board into mfs
@ -174,9 +174,9 @@ BoardsAPI.prototype.createBoard = function (board, done) {
},
(e, cb) => this.ipfs.files.stat('/', cb),
(res, cb) => {
var profile_hash = res.Hash
var profileHash = res.Hash
console.log('Publishing profile...')
this.ipfs.name.publish(profile_hash, cb)
this.ipfs.name.publish(profileHash, cb)
}
], done)
}
@ -185,7 +185,7 @@ BoardsAPI.prototype.createPost = function (post, board, done) {
try {
post.date = parseInt((new Date()).getTime() / 1000, 10)
post.op = this.id
var post_str = JSON.stringify(post)
var postStr = JSON.stringify(post)
} catch (e) {
console.log('Error, invalid Post:', e)
return done(e)
@ -203,7 +203,7 @@ BoardsAPI.prototype.createPost = function (post, board, done) {
},
(cb) => {
// Serialize post and add to IPFS
this.ipfs.add(new Buffer(post_str), cb)
this.ipfs.add(new Buffer(postStr), cb)
},
(res, cb) => {
// Move post into mfs
@ -214,9 +214,9 @@ BoardsAPI.prototype.createPost = function (post, board, done) {
},
(e, cb) => this.ipfs.files.stat('/', cb),
(res, cb) => {
var profile_hash = res.Hash
var profileHash = res.Hash
console.log('Publishing profile...')
this.ipfs.name.publish(profile_hash, err => {
this.ipfs.name.publish(profileHash, err => {
done(err, posthash)
})
}
@ -227,7 +227,7 @@ BoardsAPI.prototype.createComment = function (comment, parent, done) {
comment.date = parseInt((new Date()).getTime() / 1000, 10)
comment.op = this.id
comment.parent = parent
var comment_str = JSON.stringify(comment)
var commentStr = JSON.stringify(comment)
} catch (e) {
console.log('Error, invalid Post:', e)
return done(e)
@ -245,7 +245,7 @@ BoardsAPI.prototype.createComment = function (comment, parent, done) {
},
(cb) => {
// Serialize comment and add to IPFS
this.ipfs.add(new Buffer(comment_str), cb)
this.ipfs.add(new Buffer(commentStr), cb)
},
(res, cb) => {
// Move post into mfs
@ -256,9 +256,9 @@ BoardsAPI.prototype.createComment = function (comment, parent, done) {
},
(e, cb) => this.ipfs.files.stat('/', cb),
(res, cb) => {
var profile_hash = res.Hash
var profileHash = res.Hash
console.log('Publishing profile...')
this.ipfs.name.publish(profile_hash, err => {
this.ipfs.name.publish(profileHash, err => {
done(err, commenthash)
})
}
@ -461,7 +461,7 @@ BoardsAPI.prototype.searchUsers = function () {
})
// 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){
console.log('DHT FINDPROVS err',err)
} else if(res.readable){
@ -860,9 +860,9 @@ BoardsAPI.prototype.init = function (done) {
this.ee.emit('init', err2, this.limited)
if (done && done.apply) done(err2)
} else {
if (r && r.Hash) this.version_hash = r.Hash
if (r && r[0] && r[0].Hash) this.version_hash = r[0].Hash
console.log('Version hash is', this.version_hash)
if (r && r.Hash) this.versionHash = r.Hash
if (r && r[0] && r[0].Hash) this.versionHash = r[0].Hash
console.log('Version hash is', this.versionHash)
// DONE!
this.ee.emit('init', undefined)
this.isInit = true

54
webapp/app.jsx
View File

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

4
webapp/components/clock.jsx
View File

@ -28,10 +28,10 @@ module.exports = React.createClass({
if (this.state.moment) {
return this.state.text
} else {
return <Icon name="refresh" className="fa-spin" />
return <Icon name='refresh' className='fa-spin' />
}
},
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) {
return <Error error={this.state.error} />
} else if (this.state.loading) {
return <div className="center-block text-center find-content">
<Icon name="refresh" className="fa-3x center-block light fa-spin" />
return <div className='center-block text-center find-content'>
<Icon name='refresh' className='fa-3x center-block light fa-spin' />
<h4>Publishing Comment</h4>
</div>
} else if (this.state.success) {
var url = '/@' + this.props.adminID + '/' + this.props.board + '/' + (this.props.post || this.props.parent) + '/' + this.state.hash
return <Success title="Comment Published">
<Link className="button button-primary" to={url}>View</Link>
return <Success title='Comment Published'>
<Link className='button button-primary' to={url}>View</Link>
</Success>
} else {
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>
<div className="buttons">
<button className="button button-primary" onClick={this.save}>Send</button>
<div className='buttons'>
<button className='button button-primary' onClick={this.save}>Send</button>
</div>
</div>
}
@ -72,33 +72,33 @@ var Comment = React.createClass({
},
getPermalink () {
if (this.props.adminID && this.props.board && this.props.post && this.props.comment.hash) {
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>
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>
</div>
}
},
getParentlink () {
if (this.props.showParent && this.props.comment.parent) {
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>
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>
</div>
}
},
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 () {
this.setState({ reply: !this.state.reply })
},
render () {
if (this.props.comment) {
return <div className="comment"><hr/>
<div className="icons">
return <div className='comment'><hr/>
<div className='icons'>
<UserID id={this.props.comment.op} api={this.props.api} />
<Clock date={this.props.comment.date} />
{this.getPermalink()}
{ 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/> }
{this.getParentlink()}
</div>
@ -146,7 +146,7 @@ var Comments = React.createClass({
},
render () {
if (this.state.limited) {
return <div className="text-center">
return <div className='text-center'>
<p>Comments can't be displayed in limited mode</p>
</div>
} else {

26
webapp/components/navbar.jsx
View File

@ -18,8 +18,8 @@ var Updater = React.createClass({
},
render () {
if (this.state.update) {
return <Link className="nounderline" to='/version' >
<Icon name="history" className="fa-2x light" />
return <Link className='nounderline' to='/version' >
<Icon name='history' className='fa-2x light' />
</Link>
} else return <div></div>
}
@ -46,27 +46,27 @@ module.exports = function (boardsAPI) {
extraButtons: function () {
if (this.state.api) {
return <span>
<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={'/@' + this.state.userid}><Icon name='user' className='fa-2x light'/></Link>
<Link className='nounderline' to='/users'><Icon name='globe' className='fa-2x light'/></Link>
</span>
} 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) {
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 {
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 () {
return (
<div className="navbar">
<div className="container">
<h4><Link to="/"><Icon name="comments" className="light"/> Boards</Link></h4>
<div className="u-pull-right iconbar">
<div className='navbar'>
<div className='container'>
<h4><Link to='/'><Icon name='comments' className='light'/> Boards</Link></h4>
<div className='u-pull-right iconbar'>
<Updater/>
{this.extraButtons()}
<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>
<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>
</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
if (board) {
var url = '/edit/board/' + board + '/post/' + this.props.hash
return <Link to={url} className="nounderline">
<Icon name="edit" className="not-first"/> Edit
return <Link to={url} className='nounderline'>
<Icon name='edit' className='not-first'/> Edit
</Link>
} else {
return <span/>
@ -59,27 +59,27 @@ module.exports = React.createClass({
},
getContent () {
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) {
return <div className="text-center">
<div className="center-block" style={{marginTop: '1em'}}>
<Icon className="center-block fa-spin fa-2x light" name="refresh" />
return <div className='text-center'>
<div className='center-block' style={{marginTop: '1em'}}>
<Icon className='center-block fa-spin fa-2x light' name='refresh' />
</div>
<h5>Downloading Post</h5>
</div>
} else {
return <div className="content">
return <div className='content'>
{ this.state.post.title
? <div><h5>{this.state.post.title}</h5><hr/></div>
: <div />
}
<Markdown source={this.state.post.text} /><hr/>
<div className="icons">
<div className='icons'>
<UserID id={this.state.post.op} api={this.props.api} ></UserID>
<Clock className="not-first" date={this.state.post.date} />
<Icon name="comments" className="not-first" /> <Link className="nounderline" to={this.postLink()}>View</Link>
<Clock className='not-first' date={this.state.post.date} />
<Icon name='comments' className='not-first' /> <Link className='nounderline' to={this.postLink()}>View</Link>
{ 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/>}
{this.editorLink()}
</div>
@ -88,7 +88,7 @@ module.exports = React.createClass({
},
render () {
return <div>
<div className="post">{this.getContent()}</div>
<div className='post'>{this.getContent()}</div>
{ this.state.reply
? <CommentEditor parent={this.props.hash} api={this.props.api} adminID={this.props.adminID} board={this.props.board} />
: <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} />
})
} else {
return <div className="center-block text-center">
<Icon name="refresh" className="fa-3x center-block light fa-spin" />
return <div className='center-block text-center'>
<Icon name='refresh' className='fa-3x center-block light fa-spin' />
</div>
}
},
render () {
if (this.state.limited) {
return <div className="text-center">
<h5 className="light"><Icon name="ban" /></h5>
return <div className='text-center'>
<h5 className='light'><Icon name='ban' /></h5>
<p>Posts in a board can't be shown in limited mode. Sorry!</p>
</div>
} else {
return <div className="postList">
return <div className='postList'>
{this.getPosts()}
</div>
}

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

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

10
webapp/components/userID.jsx
View File

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

22
webapp/pages/backup.jsx
View File

@ -3,10 +3,10 @@ var Icon = require('icon.jsx')
module.exports = React.createClass({
render () {
return <div className="thin center-block">
<div className="text-center">
<h1><Icon name="database" className="light" /></h1>
<h3 className="">Backup and Restore</h3>
return <div className='thin center-block'>
<div className='text-center'>
<h1><Icon name='database' className='light' /></h1>
<h3 className=''>Backup and Restore</h3>
</div>
<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,
@ -15,18 +15,18 @@ module.exports = React.createClass({
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
assisted restore yet</b> but that's coming soon.</p>
<div className="text-center">
<h1><Icon name="download" className="light" /></h1>
<h3 className="">Backing Up</h3>
<div className='text-center'>
<h1><Icon name='download' className='light' /></h1>
<h3 className=''>Backing Up</h3>
</div>
<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>
<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>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">
<h1><Icon name="upload" className="light" /></h1>
<h3 className="">Restoring</h3>
<div className='text-center'>
<h1><Icon name='upload' className='light' /></h1>
<h3 className=''>Restoring</h3>
</div>
<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>

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

@ -72,8 +72,8 @@ module.exports = function (boardsAPI) {
if (this.state.api && this.props.params.boardname) {
var url = '/@' + this.state.api.getMyID() + '/' + this.props.params.boardname
return <span>
<button onClick={this.refresh} className="button not-first">Refresh</button>
<Link to={url} className="button not-first">View</Link>
<button onClick={this.refresh} className='button not-first'>Refresh</button>
<Link to={url} className='button not-first'>View</Link>
</span>
} else {
return <span></span>
@ -83,21 +83,21 @@ module.exports = function (boardsAPI) {
if (this.state.api) {
if (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>
} else if (this.state.loading) {
return <Loading title="Fetching your current Board Settings...">
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
return <Loading title='Fetching your current Board Settings...'>
<button className='button button-primary center-block' onClick={this.skip}>Skip</button>
</Loading>
} else if (this.state.updating) {
return <Saving>
<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>
} else {
return (
<div className="editor">
<h2><Icon name="inbox" className="light" />
<div className='editor'>
<h2><Icon name='inbox' className='light' />
{this.props.params.boardname ? ' Board Settings' : ' New Board'}
</h2>
<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
for your changes to be visibile. Your Boards will appear unchanged during
this time.</p>
<div className="row">
<div className='row'>
{this.props.params.boardname
? <div></div>
: <div className="six columns">
<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." />
: <div className='six columns'>
<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.' />
</div>}
<div className={(this.props.params.boardname ? 'twelve' : 'six') + ' columns'}>
<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" />
<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' />
</div>
</div>
<div>
<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 :)" />
<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 :)" />
</div>
<div className="buttons">
<button className="button button-primary" onClick={this.save}>Publish</button>
<div className='buttons'>
<button className='button button-primary' onClick={this.save}>Publish</button>
{this.additionalButtons()}
</div>
</div>

16
webapp/pages/board.jsx
View File

@ -50,28 +50,28 @@ module.exports = function (boardsAPI) {
},
toolbox () {
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 {
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 + '/post'} ><Icon name="plus" className="fa-2x light" /></Link>
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 + '/post'} ><Icon name='plus' className='fa-2x light' /></Link>
</div>
}
},
render () {
if (this.state.api) {
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
? <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> }
</Loading>
} else {
return (<div className="board">
return (<div className='board'>
<h2>{this.state.name}</h2>
<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>}
<div className="whitelist">
<div className='whitelist'>
{this.state.whitelist.map(i => <UserID id={i} key={i} api={this.state.api} />)}
</div>
<hr />

10
webapp/pages/commentpage.jsx
View File

@ -54,23 +54,23 @@ module.exports = function (boardsAPI) {
} else {
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 () {
if (this.state.comment) {
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} />
} else {
return <div className="center-block text-center find-content">
<Icon name="refresh" className="fa-3x center-block light fa-spin" />
return <div className='center-block text-center find-content'>
<Icon name='refresh' className='fa-3x center-block light fa-spin' />
<h4>Finding content...</h4>
</div>
}
},
render: function () {
if (this.state.api) {
return <div className="comment-page">
<div className="text-center">
return <div className='comment-page'>
<div className='text-center'>
{this.getContext()}
</div>
{this.showComment()}

26
webapp/pages/getipfs.jsx
View File

@ -46,15 +46,15 @@ module.exports = React.createClass({
getContent () {
if (this.state.limited) {
return <div>
<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>
<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>
<p>Only a few features are available in limited mode.</p>
<h5>Why am I running in limited mode?</h5>
</div>
} else {
return <div>
<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>
<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>
<p><b>Tip:</b> you can also run in limited mode by loading the app from an IPFS Gateway.</p>
</div>
}
@ -67,26 +67,26 @@ module.exports = React.createClass({
{this.getContent()}
<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
<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>
<p>It's probably one of these issues:</p>
<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>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>Some other networking or browser security issue is preventing the App from talking to your node.</li>
</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>
) } else if (this.state.connected) {
return <div class="text-center">
<h1><Icon name="check" /></h1>
<h5 class="light">You're connected!</h5>
return <div class='text-center'>
<h1><Icon name='check' /></h1>
<h5 class='light'>You're connected!</h5>
</div>
} else {
return <div className="center-block text-center">
<Icon name="refresh" className="fa-3x center-block light fa-spin" />
return <div className='center-block text-center'>
<Icon name='refresh' className='fa-3x center-block light fa-spin' />
<h4>Connecting to IPFS</h4>
</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) {
var url = '/@' + this.state.api.getMyID() + '/' + this.props.params.boardname + '/' + this.props.params.posthash
return <span>
<button onClick={this.refresh} className="button not-first">Refresh</button>
<Link to={url} className="button not-first">View</Link>
<button onClick={this.delete} className="button not-first">Delete</button>
<button onClick={this.refresh} className='button not-first'>Refresh</button>
<Link to={url} className='button not-first'>View</Link>
<button onClick={this.delete} className='button not-first'>Delete</button>
</span>
} else {
return <span></span>
@ -100,30 +100,30 @@ module.exports = function (boardsAPI) {
if (this.state.api) {
if (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>
} 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>
<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>
} else if (this.state.loading) {
return <Loading title="Downloading Post">
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
return <Loading title='Downloading Post'>
<button className='button button-primary center-block' onClick={this.skip}>Skip</button>
</Loading>
} else if (this.state.updating) {
return <Saving>
<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>
} 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>
</Success>
} else {
return (
<div className="editor">
<h2><Icon name="pencil" className="light" />
<div className='editor'>
<h2><Icon name='pencil' className='light' />
{this.props.params.posthash ? ' Edit Post' : ' New Post'}
</h2>
<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
unchanged during this time.</p>
<div>
<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" />
<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' />
</div>
<div>
<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 :)" />
<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 :)' />
</div>
<div className="buttons">
<button className="button button-primary" onClick={this.save}>Publish</button>
<div className='buttons'>
<button className='button button-primary' onClick={this.save}>Publish</button>
{this.additionalButtons()}
</div>
</div>

6
webapp/pages/postpage.jsx
View File

@ -24,12 +24,12 @@ module.exports = function (boardsAPI) {
} else {
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 () {
if (this.state.api) {
return <div className="post-page">
<div className="text-center">
return <div className='post-page'>
<div className='text-center'>
{this.getContext()}
</div>
<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.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>
} else if (this.state.loading) {
return <Loading title="Fetching your current Profile...">
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
return <Loading title='Fetching your current Profile...'>
<button className='button button-primary center-block' onClick={this.skip}>Skip</button>
</Loading>
} else if (this.state.updating) {
return <Saving>
<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>
} else {
return (
<div className="editor">
<h2><Icon name="user" className="light" /> Edit Profile</h2>
<div className='editor'>
<h2><Icon name='user' className='light' /> Edit Profile</h2>
<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
others.</p>
<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
this time.</p>
<div className="center-block">
<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?" />
<div className='center-block'>
<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?' />
</div>
<div>
<label htmlFor="desc">Caption</label>
<textarea className="u-full-width" id="desc" value={this.state.description} onChange={this.handleChange} placeholder="Say something about yourself." />
<label htmlFor='desc'>Caption</label>
<textarea className='u-full-width' id='desc' value={this.state.description} onChange={this.handleChange} placeholder='Say something about yourself.' />
</div>
<div className="buttons">
<button className="button button-primary" onClick={this.save}>Publish</button>
<button onClick={this.refresh} className="button not-first">Refresh</button>
<Link to={'/@' + this.state.userid} className="button not-first">View</Link>
<Link to="/backup" className="button not-first">Backup and Restore</Link>
<div className='buttons'>
<button className='button button-primary' onClick={this.save}>Publish</button>
<button onClick={this.refresh} className='button not-first'>Refresh</button>
<Link to={'/@' + this.state.userid} className='button not-first'>View</Link>
<Link to='/backup' className='button not-first'>Backup and Restore</Link>
</div>
</div>
)

16
webapp/pages/profile.jsx
View File

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

36
webapp/pages/settings.jsx
View File

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

12
webapp/pages/update.jsx
View File

@ -4,10 +4,10 @@ var Icon = require('icon.jsx')
module.exports = React.createClass({
render () {
var gateway = window.location.pathname.indexOf('/ipfs/') === 0 || window.location.pathname.indexOf('/ipns/') === 0
return <div className="thin center-block">
<div className="text-center">
<h1><Icon name="history" className="light" /></h1>
<h3 className="light">Version Center</h3>
return <div className='thin center-block'>
<div className='text-center'>
<h1><Icon name='history' className='light' /></h1>
<h3 className='light'>Version Center</h3>
</div>
<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
@ -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
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>
<div className="buttons">
<a className="button button-primary" href={gateway ? '/ipns/boards.ydns.eu' : 'http://ipfs.ydns.eu/ipns/boards.ydns.eu'}>Update</a>
<div className='buttons'>
<a className='button button-primary' href={gateway ? '/ipns/boards.ydns.eu' : 'http://ipfs.ydns.eu/ipns/boards.ydns.eu'}>Update</a>
</div>
</div>
}

2
webapp/pages/users.jsx
View File

@ -26,7 +26,7 @@ module.exports = function (boardsAPI) {
render () {
if (this.state.api) {
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>
<ul>
{this.state.users.map(user => {