roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 12:19:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #62 from kayteh/prettier

Browse source 
Prettier
This commit is contained in:
41666 2019-11-19 23:12:43 -05:00 • committed by GitHub
commit 0b918d9ffa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
68 changed files with 1385 additions and 861 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Server/.eslintrc.js
View file

@ -1,3 +1,3 @@
module.exports = { module.exports = {
"extends": "standard" extends: 'standard',
}; }

9
Server/.prettierrc.js Normal file
View file

@ -0,0 +1,9 @@
module.exports = {
printWidth: 90,
useTabs: false,
tabWidth: 2,
singleQuote: true,
trailingComma: 'es5',
bracketSpacing: true,
semi: false,
}

14
Server/Roleypoly.js
View file

@ -4,13 +4,13 @@ const fetchModels = require('./models')
const fetchApis = require('./api') const fetchApis = require('./api')
class Roleypoly { class Roleypoly {
constructor (router, io, app) { constructor(router, io, app) {
this.router = router this.router = router
this.io = io this.io = io
this.ctx = {} this.ctx = {}
this.ctx.config = { this.ctx.config = {
appUrl: process.env.APP_URL appUrl: process.env.APP_URL,
} }
this.ctx.io = io this.ctx.io = io
@ -21,12 +21,14 @@ class Roleypoly {
this.__initialized = this._mountServices() this.__initialized = this._mountServices()
} }
async awaitServices () { async awaitServices() {
await this.__initialized await this.__initialized
} }
async _mountServices () { async _mountServices() {
const sequelize = new Sequelize(process.env.DB_URL, { logging: log.sql.bind(log, log) }) const sequelize = new Sequelize(process.env.DB_URL, {
logging: log.sql.bind(log, log),
})
this.ctx.sql = sequelize this.ctx.sql = sequelize
this.M = fetchModels(sequelize) this.M = fetchModels(sequelize)
this.ctx.M = this.M this.ctx.M = this.M
@ -46,7 +48,7 @@ class Roleypoly {
this.ctx.P = new (require('./services/presentation'))(this.ctx) this.ctx.P = new (require('./services/presentation'))(this.ctx)
} }
async mountRoutes () { async mountRoutes() {
fetchApis(this.router, this.ctx) fetchApis(this.router, this.ctx)
this.__app.use(this.router.middleware()) this.__app.use(this.router.middleware())
} }

7
Server/api/auth.js
View file

@ -1,5 +1,5 @@
module.exports = (R, $) => { module.exports = (R, $) => {
R.post('/api/auth/token', async (ctx) => { R.post('/api/auth/token', async ctx => {
const { token } = ctx.request.body const { token } = ctx.request.body
if (token == null || token === '') { if (token == null || token === '') {
@ -23,7 +23,7 @@ module.exports = (R, $) => {
id: user.id, id: user.id,
avatar: user.avatar, avatar: user.avatar,
username: user.username, username: user.username,
discriminator: user.discriminator discriminator: user.discriminator,
} }
}) })
@ -42,7 +42,7 @@ module.exports = (R, $) => {
id: user.id, id: user.id,
avatar: user.avatar, avatar: user.avatar,
username: user.username, username: user.username,
discriminator: user.discriminator discriminator: user.discriminator,
} }
}) })
@ -70,7 +70,6 @@ module.exports = (R, $) => {
ctx.redirect(url) ctx.redirect(url)
}) })
R.get('/api/oauth/bot/callback', ctx => { R.get('/api/oauth/bot/callback', ctx => {
console.log(ctx.request) console.log(ctx.request)
}) })

19
Server/api/servers.js
View file

@ -1,5 +1,5 @@
module.exports = (R, $) => { module.exports = (R, $) => {
R.get('/api/servers', async (ctx) => { R.get('/api/servers', async ctx => {
try { try {
const { userId } = ctx.session const { userId } = ctx.session
const srv = $.discord.getRelevantServers(userId) const srv = $.discord.getRelevantServers(userId)
@ -11,7 +11,7 @@ module.exports = (R, $) => {
} }
}) })
R.get('/api/server/:id', async (ctx) => { R.get('/api/server/:id', async ctx => {
const { userId } = ctx.session const { userId } = ctx.session
const { id } = ctx.params const { id } = ctx.params
@ -38,7 +38,7 @@ module.exports = (R, $) => {
ctx.body = server ctx.body = server
}) })
R.get('/api/server/:id/slug', async (ctx) => { R.get('/api/server/:id/slug', async ctx => {
const { userId } = ctx.session const { userId } = ctx.session
const { id } = ctx.params const { id } = ctx.params
@ -55,7 +55,7 @@ module.exports = (R, $) => {
ctx.body = await $.P.serverSlug(srv) ctx.body = await $.P.serverSlug(srv)
}) })
R.patch('/api/server/:id', async (ctx) => { R.patch('/api/server/:id', async ctx => {
const { userId } = ctx.session const { userId } = ctx.session
const { id } = ctx.params const { id } = ctx.params
@ -75,8 +75,8 @@ module.exports = (R, $) => {
// todo make less nasty // todo make less nasty
await $.server.update(id, { await $.server.update(id, {
...((message != null) ? { message } : {}), ...(message != null ? { message } : {}),
...((categories != null) ? { categories } : {}) ...(categories != null ? { categories } : {}),
}) })
ctx.body = { ok: true } ctx.body = { ok: true }
@ -88,7 +88,12 @@ module.exports = (R, $) => {
return return
} }
ctx.body = $.discord.client.guilds.map(g => ({ url: `${process.env.APP_URL}/s/${g.id}`, name: g.name, members: g.members.array().length, roles: g.roles.array().length })) ctx.body = $.discord.client.guilds.map(g => ({
url: `${process.env.APP_URL}/s/${g.id}`,
name: g.name,
members: g.members.array().length,
roles: g.roles.array().length,
}))
}) })
R.patch('/api/servers/:server/roles', async ctx => { R.patch('/api/servers/:server/roles', async ctx => {

35
Server/index.js
View file

@ -1,4 +1,4 @@
require('dotenv').config({silent: true}) require('dotenv').config({ silent: true })
const log = new (require('./logger'))('index') const log = new (require('./logger'))('index')
const http = require('http') const http = require('http')
@ -12,7 +12,8 @@ const Roleypoly = require('./Roleypoly')
const ksuid = require('ksuid') const ksuid = require('ksuid')
// monkey patch async-reduce because F U T U R E // monkey patch async-reduce because F U T U R E
Array.prototype.areduce = async function (predicate, acc = []) { // eslint-disable-line Array.prototype.areduce = async function(predicate, acc = []) {
// eslint-disable-line
for (let i of this) { for (let i of this) {
acc = await predicate(acc, i) acc = await predicate(acc, i)
} }
@ -20,9 +21,11 @@ Array.prototype.areduce = async function (predicate, acc = []) { // eslint-disab
return acc return acc
} }
Array.prototype.filterNot = Array.prototype.filterNot || function (predicate) { Array.prototype.filterNot =
Array.prototype.filterNot ||
function(predicate) {
return this.filter(v => !predicate(v)) return this.filter(v => !predicate(v))
} }
// Create the server and socket.io server // Create the server and socket.io server
const server = http.createServer(app.callback()) const server = http.createServer(app.callback())
@ -30,11 +33,11 @@ const io = _io(server, { transports: ['websocket'], path: '/api/socket.io' })
const M = new Roleypoly(router, io, app) // eslint-disable-line no-unused-vars const M = new Roleypoly(router, io, app) // eslint-disable-line no-unused-vars
app.keys = [ process.env.APP_KEY ] app.keys = [process.env.APP_KEY]
const DEVEL = process.env.NODE_ENV === 'development' const DEVEL = process.env.NODE_ENV === 'development'
async function start () { async function start() {
await M.awaitServices() await M.awaitServices()
// body parser // body parser
@ -95,7 +98,6 @@ async function start () {
// } catch (e) { // } catch (e) {
// send(ctx, 'index.html', { root: pub }) // send(ctx, 'index.html', { root: pub })
// } // }
}) })
// const sendOpts = {root: pub, index: 'index.html'} // const sendOpts = {root: pub, index: 'index.html'}
// // const sendOpts = {} // // const sendOpts = {}
@ -131,24 +133,33 @@ async function start () {
ctx.body = ctx.body || e.stack ctx.body = ctx.body || e.stack
} else { } else {
ctx.body = { ctx.body = {
err: 'something terrible happened.' err: 'something terrible happened.',
} }
} }
} }
let timeElapsed = new Date() - timeStart let timeElapsed = new Date() - timeStart
log.request(`${ctx.status} ${ctx.method} ${ctx.url} - ${ctx.ip} - took ${timeElapsed}ms`) log.request(
`${ctx.status} ${ctx.method} ${ctx.url} - ${ctx.ip} - took ${timeElapsed}ms`
)
// return null // return null
}) })
const session = require('koa-session') const session = require('koa-session')
app.use(session({ app.use(
session(
{
key: 'roleypoly:sess', key: 'roleypoly:sess',
maxAge: 'session', maxAge: 'session',
siteOnly: true, siteOnly: true,
store: M.ctx.sessions, store: M.ctx.sessions,
genid: () => { return ksuid.randomSync().string } genid: () => {
}, app)) return ksuid.randomSync().string
},
},
app
)
)
await M.mountRoutes() await M.mountRoutes()

21
Server/logger.js
View file

@ -5,12 +5,13 @@ const chalk = require('chalk')
// const log = new (require('../logger'))('server/thing') // const log = new (require('../logger'))('server/thing')
class Logger { class Logger {
constructor (name, debugOverride = false) { constructor(name, debugOverride = false) {
this.name = name this.name = name
this.debugOn = (process.env.DEBUG === 'true' || process.env.DEBUG === '*') || debugOverride this.debugOn =
process.env.DEBUG === 'true' || process.env.DEBUG === '*' || debugOverride
} }
fatal (text, ...data) { fatal(text, ...data) {
this.error(text, data) this.error(text, data)
if (typeof data[data.length - 1] === 'number') { if (typeof data[data.length - 1] === 'number') {
@ -22,33 +23,33 @@ class Logger {
throw text throw text
} }
error (text, ...data) { error(text, ...data) {
console.error(chalk.red.bold(`ERR ${this.name}:`) + `\n ${text}`, data) console.error(chalk.red.bold(`ERR ${this.name}:`) + `\n ${text}`, data)
} }
warn (text, ...data) { warn(text, ...data) {
console.warn(chalk.yellow.bold(`WARN ${this.name}:`) + `\n ${text}`, data) console.warn(chalk.yellow.bold(`WARN ${this.name}:`) + `\n ${text}`, data)
} }
notice (text, ...data) { notice(text, ...data) {
console.log(chalk.cyan.bold(`NOTICE ${this.name}:`) + `\n ${text}`, data) console.log(chalk.cyan.bold(`NOTICE ${this.name}:`) + `\n ${text}`, data)
} }
info (text, ...data) { info(text, ...data) {
console.info(chalk.blue.bold(`INFO ${this.name}:`) + `\n ${text}`, data) console.info(chalk.blue.bold(`INFO ${this.name}:`) + `\n ${text}`, data)
} }
request (text, ...data) { request(text, ...data) {
console.info(chalk.green.bold(`HTTP ${this.name}:`) + `\n ${text}`) console.info(chalk.green.bold(`HTTP ${this.name}:`) + `\n ${text}`)
} }
debug (text, ...data) { debug(text, ...data) {
if (this.debugOn) { if (this.debugOn) {
console.log(chalk.gray.bold(`DEBUG ${this.name}:`) + `\n ${text}`, data) console.log(chalk.gray.bold(`DEBUG ${this.name}:`) + `\n ${text}`, data)
} }
} }
sql (logger, ...data) { sql(logger, ...data) {
if (logger.debugOn) { if (logger.debugOn) {
console.log(chalk.bold('DEBUG SQL:\n '), data) console.log(chalk.bold('DEBUG SQL:\n '), data)
} }

11
Server/models/Server.js
View file

@ -1,14 +1,15 @@
module.exports = (sql, DataTypes) => { module.exports = (sql, DataTypes) => {
return sql.define('server', { return sql.define('server', {
id: { // discord snowflake id: {
// discord snowflake
type: DataTypes.TEXT, type: DataTypes.TEXT,
primaryKey: true primaryKey: true,
}, },
categories: { categories: {
type: DataTypes.JSON type: DataTypes.JSON,
}, },
message: { message: {
type: DataTypes.TEXT type: DataTypes.TEXT,
} },
}) })
} }

2
Server/models/Session.js
View file

@ -2,6 +2,6 @@ module.exports = (sequelize, DataTypes) => {
return sequelize.define('session', { return sequelize.define('session', {
id: { type: DataTypes.TEXT, primaryKey: true }, id: { type: DataTypes.TEXT, primaryKey: true },
maxAge: DataTypes.BIGINT, maxAge: DataTypes.BIGINT,
data: DataTypes.JSONB data: DataTypes.JSONB,
}) })
} }

6
Server/models/index.js
View file

@ -3,12 +3,12 @@ const glob = require('glob')
const path = require('path') const path = require('path')
const util = require('../util/model-methods') const util = require('../util/model-methods')
module.exports = (sql) => { module.exports = sql => {
const models = {} const models = {}
const modelFiles = glob.sync('./models/**/!(index).js') const modelFiles = glob.sync('./models/**/!(index).js')
log.debug('found models', modelFiles) log.debug('found models', modelFiles)
modelFiles.forEach((v) => { modelFiles.forEach(v => {
let name = path.basename(v).replace('.js', '') let name = path.basename(v).replace('.js', '')
if (v === './models/index.js') { if (v === './models/index.js') {
log.debug('index.js hit, skipped') log.debug('index.js hit, skipped')
@ -24,7 +24,7 @@ module.exports = (sql) => {
} }
}) })
Object.keys(models).forEach((v) => { Object.keys(models).forEach(v => {
if (models[v].hasOwnProperty('__associations')) { if (models[v].hasOwnProperty('__associations')) {
models[v].__associations(models) models[v].__associations(models)
} }

5
Server/package.json
View file

@ -6,10 +6,12 @@
"start": "standard && node index.js", "start": "standard && node index.js",
"fix": "standard --fix", "fix": "standard --fix",
"dev": "pm2 start index.js --watch", "dev": "pm2 start index.js --watch",
"lint:prettier": "prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx}'",
"pm2": "pm2" "pm2": "pm2"
}, },
"dependencies": { "dependencies": {
"@discordjs/uws": "^11.149.1", "@discordjs/uws": "^11.149.1",
"@roleypoly/rpc": "^3.0.0-alpha.12",
"chalk": "^2.4.2", "chalk": "^2.4.2",
"discord.js": "^11.4.2", "discord.js": "^11.4.2",
"dotenv": "^7.0.0", "dotenv": "^7.0.0",
@ -34,5 +36,8 @@
"socket.io": "^2.2.0", "socket.io": "^2.2.0",
"superagent": "^5.0.2", "superagent": "^5.0.2",
"uuid": "^3.3.2" "uuid": "^3.3.2"
},
"devDependencies": {
"prettier": "^1.19.1"
} }
} }

2
Server/services/Service.js
View file

@ -1,7 +1,7 @@
const Logger = require('../logger') const Logger = require('../logger')
class Service { class Service {
constructor (ctx) { constructor(ctx) {
this.ctx = ctx this.ctx = ctx
this.log = new Logger(this.constructor.name) this.log = new Logger(this.constructor.name)
} }

4
Server/services/discord-rpc.js Normal file
View file

@ -0,0 +1,4 @@
const Service = require('./Service')
const DiscordRPC = require('@roleypoly/rpc/discord')
class DiscordRPCService extends Service {}

104
Server/services/discord.js
View file

@ -3,7 +3,7 @@ const discord = require('discord.js')
const superagent = require('superagent') const superagent = require('superagent')
class DiscordService extends Service { class DiscordService extends Service {
constructor (ctx) { constructor(ctx) {
super(ctx) super(ctx)
this.botToken = process.env.DISCORD_BOT_TOKEN this.botToken = process.env.DISCORD_BOT_TOKEN
@ -13,7 +13,7 @@ class DiscordService extends Service {
this.botCallback = `${ctx.config.appUrl}/api/oauth/bot/callback` this.botCallback = `${ctx.config.appUrl}/api/oauth/bot/callback`
this.appUrl = process.env.APP_URL this.appUrl = process.env.APP_URL
this.isBot = process.env.IS_BOT === 'true' || false this.isBot = process.env.IS_BOT === 'true' || false
this.rootUsers = new Set((process.env.ROOT_USERS||'').split(',')) this.rootUsers = new Set((process.env.ROOT_USERS || '').split(','))
this.client = new discord.Client() this.client = new discord.Client()
this.client.options.disableEveryone = true this.client.options.disableEveryone = true
@ -23,19 +23,29 @@ class DiscordService extends Service {
this.startBot() this.startBot()
} }
ownGm (server) { ownGm(server) {
return this.gm(server, this.client.user.id) return this.gm(server, this.client.user.id)
} }
fakeGm({id = 0, nickname = '[none]', displayHexColor = '#ffffff'}) { fakeGm({ id = 0, nickname = '[none]', displayHexColor = '#ffffff' }) {
return { id, nickname, displayHexColor, __faked: true, roles: { has() {return false} } } return {
id,
nickname,
displayHexColor,
__faked: true,
roles: {
has() {
return false
},
},
}
} }
isRoot(id) { isRoot(id) {
return this.rootUsers.has(id) return this.rootUsers.has(id)
} }
async startBot () { async startBot() {
await this.client.login(this.botToken) await this.client.login(this.botToken)
// not all roleypolys are bots. // not all roleypolys are bots.
@ -50,43 +60,42 @@ class DiscordService extends Service {
} }
} }
getRelevantServers (userId) { getRelevantServers(userId) {
return this.client.guilds.filter((g) => g.members.has(userId)) return this.client.guilds.filter(g => g.members.has(userId))
} }
gm (serverId, userId) { gm(serverId, userId) {
return this.client.guilds.get(serverId).members.get(userId) return this.client.guilds.get(serverId).members.get(userId)
} }
getRoles (server) { getRoles(server) {
return this.client.guilds.get(server).roles return this.client.guilds.get(server).roles
} }
getPermissions (gm) { getPermissions(gm) {
if (this.isRoot(gm.id)) { if (this.isRoot(gm.id)) {
return { return {
isAdmin: true, isAdmin: true,
canManageRoles: true canManageRoles: true,
} }
} }
return { return {
isAdmin: gm.permissions.hasPermission('ADMINISTRATOR'), isAdmin: gm.permissions.hasPermission('ADMINISTRATOR'),
canManageRoles: gm.permissions.hasPermission('MANAGE_ROLES', false, true) canManageRoles: gm.permissions.hasPermission('MANAGE_ROLES', false, true),
} }
} }
safeRole (server, role) { safeRole(server, role) {
const r = this.getRoles(server).get(role) const r = this.getRoles(server).get(role)
return r.editable && !r.hasPermission('MANAGE_ROLES', false, true) return r.editable && !r.hasPermission('MANAGE_ROLES', false, true)
} }
// oauth step 2 flow, grab the auth token via code // oauth step 2 flow, grab the auth token via code
async getAuthToken (code) { async getAuthToken(code) {
const url = 'https://discordapp.com/api/oauth2/token' const url = 'https://discordapp.com/api/oauth2/token'
try { try {
const rsp = const rsp = await superagent
await superagent
.post(url) .post(url)
.set('Content-Type', 'application/x-www-form-urlencoded') .set('Content-Type', 'application/x-www-form-urlencoded')
.send({ .send({
@ -94,7 +103,7 @@ class DiscordService extends Service {
client_secret: this.clientSecret, client_secret: this.clientSecret,
grant_type: 'authorization_code', grant_type: 'authorization_code',
code: code, code: code,
redirect_uri: this.oauthCallback redirect_uri: this.oauthCallback,
}) })
return rsp.body return rsp.body
@ -104,17 +113,14 @@ class DiscordService extends Service {
} }
} }
async getUser (authToken) { async getUser(authToken) {
const url = 'https://discordapp.com/api/v6/users/@me' const url = 'https://discordapp.com/api/v6/users/@me'
try { try {
if (authToken == null || authToken === '') { if (authToken == null || authToken === '') {
throw new Error('not logged in') throw new Error('not logged in')
} }
const rsp = const rsp = await superagent.get(url).set('Authorization', `Bearer ${authToken}`)
await superagent
.get(url)
.set('Authorization', `Bearer ${authToken}`)
return rsp.body return rsp.body
} catch (e) { } catch (e) {
this.log.error('getUser error', e) this.log.error('getUser error', e)
@ -146,57 +152,69 @@ class DiscordService extends Service {
// returns oauth authorize url with IDENTIFY permission // returns oauth authorize url with IDENTIFY permission
// we only need IDENTIFY because we only use it for matching IDs from the bot // we only need IDENTIFY because we only use it for matching IDs from the bot
getAuthUrl (state) { getAuthUrl(state) {
return `https://discordapp.com/oauth2/authorize?client_id=${this.clientId}&redirect_uri=${this.oauthCallback}&response_type=code&scope=identify&state=${state}` return `https://discordapp.com/oauth2/authorize?client_id=${this.clientId}&redirect_uri=${this.oauthCallback}&response_type=code&scope=identify&state=${state}`
} }
// returns the bot join url with MANAGE_ROLES permission // returns the bot join url with MANAGE_ROLES permission
// MANAGE_ROLES is the only permission we really need. // MANAGE_ROLES is the only permission we really need.
getBotJoinUrl () { getBotJoinUrl() {
return `https://discordapp.com/oauth2/authorize?client_id=${this.clientId}&scope=bot&permissions=268435456` return `https://discordapp.com/oauth2/authorize?client_id=${this.clientId}&scope=bot&permissions=268435456`
} }
mentionResponse (message) { mentionResponse(message) {
message.channel.send(`🔰 Assign your roles here! <${this.appUrl}/s/${message.guild.id}>`, { disableEveryone: true }) message.channel.send(
`🔰 Assign your roles here! <${this.appUrl}/s/${message.guild.id}>`,
{ disableEveryone: true }
)
} }
_cmds () { _cmds() {
const cmds = [ const cmds = [
{ {
regex: /say (.*)/, regex: /say (.*)/,
handler (message, matches, r) { handler(message, matches, r) {
r(matches[0]) r(matches[0])
} },
}, },
{ {
regex: /set username (.*)/, regex: /set username (.*)/,
async handler (message, matches) { async handler(message, matches) {
const { username } = this.client.user const { username } = this.client.user
await this.client.user.setUsername(matches[0]) await this.client.user.setUsername(matches[0])
message.channel.send(`Username changed from ${username} to ${matches[0]}`) message.channel.send(`Username changed from ${username} to ${matches[0]}`)
} },
}, },
{ {
regex: /stats/, regex: /stats/,
async handler (message, matches) { async handler(message, matches) {
const t = [ const t = [
`**Stats** 📈`, `**Stats** 📈`,
'', '',
`👩‍❤️‍👩 **Users Served:** ${this.client.guilds.reduce((acc, g) => acc + g.memberCount, 0)}`, `👩‍❤️‍👩 **Users Served:** ${this.client.guilds.reduce(
(acc, g) => acc + g.memberCount,
0
)}`,
`🔰 **Servers:** ${this.client.guilds.size}`, `🔰 **Servers:** ${this.client.guilds.size}`,
`💮 **Roles Seen:** ${this.client.guilds.reduce((acc, g) => acc + g.roles.size, 0)}` `💮 **Roles Seen:** ${this.client.guilds.reduce(
(acc, g) => acc + g.roles.size,
0
)}`,
] ]
message.channel.send(t.join('\n')) message.channel.send(t.join('\n'))
} },
} },
] ]
// prefix regex with ^ for ease of code // prefix regex with ^ for ease of code
.map(({regex, ...rest}) => ({ regex: new RegExp(`^${regex.source}`, regex.flags), ...rest })) .map(({ regex, ...rest }) => ({
regex: new RegExp(`^${regex.source}`, regex.flags),
...rest,
}))
return cmds return cmds
} }
async handleCommand (message) { async handleCommand(message) {
const cmd = message.content.replace(`<@${this.client.user.id}> `, '') const cmd = message.content.replace(`<@${this.client.user.id}> `, '')
this.log.debug(`got command from ${message.author.username}`, cmd) this.log.debug(`got command from ${message.author.username}`, cmd)
for (let { regex, handler } of this.cmds) { for (let { regex, handler } of this.cmds) {
@ -218,8 +236,9 @@ class DiscordService extends Service {
this.mentionResponse(message) this.mentionResponse(message)
} }
handleMessage (message) { handleMessage(message) {
if (message.author.bot && message.channel.type !== 'text') { // drop bot messages and dms if (message.author.bot && message.channel.type !== 'text') {
// drop bot messages and dms
return return
} }
@ -232,10 +251,9 @@ class DiscordService extends Service {
} }
} }
async handleJoin (guild) { async handleJoin(guild) {
await this.ctx.server.ensure(guild) await this.ctx.server.ensure(guild)
} }
} }
module.exports = DiscordService module.exports = DiscordService

27
Server/services/presentation.js
View file

@ -2,7 +2,7 @@ const Service = require('./Service')
const LRU = require('lru-cache') const LRU = require('lru-cache')
class PresentationService extends Service { class PresentationService extends Service {
constructor (ctx) { constructor(ctx) {
super(ctx) super(ctx)
this.M = ctx.M this.M = ctx.M
this.discord = ctx.discord this.discord = ctx.discord
@ -10,16 +10,16 @@ class PresentationService extends Service {
this.cache = new LRU({ max: 500, maxAge: 100 * 60 * 5 }) this.cache = new LRU({ max: 500, maxAge: 100 * 60 * 5 })
} }
serverSlug (server) { serverSlug(server) {
return { return {
id: server.id, id: server.id,
name: server.name, name: server.name,
ownerID: server.ownerID, ownerID: server.ownerID,
icon: server.icon icon: server.icon,
} }
} }
async oldPresentableServers (collection, userId) { async oldPresentableServers(collection, userId) {
let servers = [] let servers = []
for (let server of collection.array()) { for (let server of collection.array()) {
@ -31,7 +31,7 @@ class PresentationService extends Service {
return servers return servers
} }
async presentableServers (collection, userId) { async presentableServers(collection, userId) {
return collection.array().areduce(async (acc, server) => { return collection.array().areduce(async (acc, server) => {
const gm = server.members.get(userId) const gm = server.members.get(userId)
acc.push(await this.presentableServer(server, gm, { incRoles: false })) acc.push(await this.presentableServer(server, gm, { incRoles: false }))
@ -39,24 +39,29 @@ class PresentationService extends Service {
}) })
} }
async presentableServer (server, gm, { incRoles = true } = {}) { async presentableServer(server, gm, { incRoles = true } = {}) {
const sd = await this.ctx.server.get(server.id) const sd = await this.ctx.server.get(server.id)
return { return {
id: server.id, id: server.id,
gm: { gm: {
nickname: gm.nickname, nickname: gm.nickname,
color: gm.displayHexColor color: gm.displayHexColor,
}, },
server: this.serverSlug(server), server: this.serverSlug(server),
roles: (incRoles) ? (await this.rolesByServer(server, sd)).map(r => ({ ...r, selected: gm.roles.has(r.id) })) : [], roles: incRoles
? (await this.rolesByServer(server, sd)).map(r => ({
...r,
selected: gm.roles.has(r.id),
}))
: [],
message: sd.message, message: sd.message,
categories: sd.categories, categories: sd.categories,
perms: this.discord.getPermissions(gm) perms: this.discord.getPermissions(gm),
} }
} }
async rolesByServer (server) { async rolesByServer(server) {
return server.roles return server.roles
.filter(r => r.id !== server.id) // get rid of @everyone .filter(r => r.id !== server.id) // get rid of @everyone
.map(r => ({ .map(r => ({
@ -64,7 +69,7 @@ class PresentationService extends Service {
color: r.color, color: r.color,
name: r.name, name: r.name,
position: r.position, position: r.position,
safe: this.discord.safeRole(server.id, r.id) safe: this.discord.safeRole(server.id, r.id),
})) }))
} }
} }

22
Server/services/server.js
View file

@ -1,46 +1,44 @@
const Service = require('./Service') const Service = require('./Service')
class ServerService extends Service { class ServerService extends Service {
constructor (ctx) { constructor(ctx) {
super(ctx) super(ctx)
this.Server = ctx.M.Server this.Server = ctx.M.Server
this.P = ctx.P this.P = ctx.P
} }
async ensure (server) { async ensure(server) {
let srv let srv
try { try {
srv = await this.get(server.id) srv = await this.get(server.id)
} catch (e) { } catch (e) {}
}
if (srv == null) { if (srv == null) {
return this.create({ return this.create({
id: server.id, id: server.id,
message: '', message: '',
categories: {} categories: {},
}) })
} }
} }
create ({ id, message, categories }) { create({ id, message, categories }) {
const srv = this.Server.build({ id, message, categories }) const srv = this.Server.build({ id, message, categories })
return srv.save() return srv.save()
} }
async update (id, newData) { async update(id, newData) {
const srv = await this.get(id, false) const srv = await this.get(id, false)
return srv.update(newData) return srv.update(newData)
} }
async get (id, plain = true) { async get(id, plain = true) {
const s = await this.Server.findOne({ const s = await this.Server.findOne({
where: { where: {
id id,
} },
}) })
if (!plain) { if (!plain) {
@ -50,7 +48,7 @@ class ServerService extends Service {
return s.get({ plain: true }) return s.get({ plain: true })
} }
async getAllowedRoles (id) { async getAllowedRoles(id) {
const server = await this.get(id) const server = await this.get(id)
return Object.values(server.categories).reduce((acc, c) => { return Object.values(server.categories).reduce((acc, c) => {

8
Server/services/sessions.js
View file

@ -1,12 +1,12 @@
const Service = require('./Service') const Service = require('./Service')
class SessionsService extends Service { class SessionsService extends Service {
constructor (ctx) { constructor(ctx) {
super(ctx) super(ctx)
this.Session = ctx.M.Session this.Session = ctx.M.Session
} }
async get (id, {rolling}) { async get(id, { rolling }) {
const user = await this.Session.findOne({ where: { id } }) const user = await this.Session.findOne({ where: { id } })
if (user === null) { if (user === null) {
@ -16,7 +16,7 @@ class SessionsService extends Service {
return user.data return user.data
} }
async set (id, data, {maxAge, rolling, changed}) { async set(id, data, { maxAge, rolling, changed }) {
let session = await this.Session.findOne({ where: { id } }) let session = await this.Session.findOne({ where: { id } })
if (session === null) { if (session === null) {
session = this.Session.build({ id }) session = this.Session.build({ id })
@ -28,7 +28,7 @@ class SessionsService extends Service {
return session.save() return session.save()
} }
async destroy (id) { async destroy(id) {
const sess = await this.Session.findOne({ where: { id } }) const sess = await this.Session.findOne({ where: { id } })
if (sess != null) { if (sess != null) {

6
Server/util/model-methods.js
View file

@ -1,10 +1,10 @@
const ksuid = require('ksuid') const ksuid = require('ksuid')
module.exports = { module.exports = {
ksuid (field = 'id') { ksuid(field = 'id') {
return async function () { return async function() {
this.id = await ksuid.random() this.id = await ksuid.random()
return this return this
} }
} },
} }

30
Server/yarn.lock
View file

@ -23,6 +23,13 @@
resolved "https://registry.yarnpkg.com/@discordjs/uws/-/uws-11.149.1.tgz#2e86f2825f43bed43d2e69eaf30a07d2dd8e8946" resolved "https://registry.yarnpkg.com/@discordjs/uws/-/uws-11.149.1.tgz#2e86f2825f43bed43d2e69eaf30a07d2dd8e8946"
integrity sha512-TmbwZaeXDSCq0ckmf2q10Fkt1220gu9AZJ/UvtQjsi2jyJDjy0i0OwL4/eb3vc9Cwr0mpC9EbfzltQ2si0qUiQ== integrity sha512-TmbwZaeXDSCq0ckmf2q10Fkt1220gu9AZJ/UvtQjsi2jyJDjy0i0OwL4/eb3vc9Cwr0mpC9EbfzltQ2si0qUiQ==
"@improbable-eng/grpc-web@0.11.0":
version "0.11.0"
resolved "https://registry.yarnpkg.com/@improbable-eng/grpc-web/-/grpc-web-0.11.0.tgz#c9d4097b4a947384e3dc0234299d910668a6e7ad"
integrity sha512-SS2YP6iHyZ7TSSuCShnSo9xJyUkNZHEhEPJpTSUcNoULe1LuLEk52OKHY+VW9XB0qXstejpHgZq2Hx+69PThiw==
dependencies:
browser-headers "^0.4.0"
"@opencensus/core@^0.0.8": "@opencensus/core@^0.0.8":
version "0.0.8" version "0.0.8"
resolved "https://registry.yarnpkg.com/@opencensus/core/-/core-0.0.8.tgz#df01f200c2d2fbfe14dae129a1a86fb87286db92" resolved "https://registry.yarnpkg.com/@opencensus/core/-/core-0.0.8.tgz#df01f200c2d2fbfe14dae129a1a86fb87286db92"
@ -108,6 +115,14 @@
eventemitter2 "^4.1.0" eventemitter2 "^4.1.0"
ws "^3.0.0" ws "^3.0.0"
"@roleypoly/rpc@^3.0.0-alpha.12":
version "3.0.0-alpha.12"
resolved "https://registry.yarnpkg.com/@roleypoly/rpc/-/rpc-3.0.0-alpha.12.tgz#61e519755ae5103a191f253e63302bed252e9ea8"
integrity sha512-Tl7G/yGF/3FmoF3GoYFZ2JdpSH7Fv5NGGbDB7KbVum+GOmnIoG7D8ETUb5Ge2YHpTYLoJSAmVhDGiuI8o3QC6A==
dependencies:
"@improbable-eng/grpc-web" "0.11.0"
google-protobuf "3.10.0"
"@types/node@*": "@types/node@*":
version "10.12.1" version "10.12.1"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.1.tgz#da61b64a2930a80fa708e57c45cd5441eb379d5b" resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.1.tgz#da61b64a2930a80fa708e57c45cd5441eb379d5b"
@ -434,6 +449,11 @@ braces@^2.3.1, braces@^2.3.2:
split-string "^3.0.2" split-string "^3.0.2"
to-regex "^3.0.1" to-regex "^3.0.1"
browser-headers@^0.4.0:
version "0.4.1"
resolved "https://registry.yarnpkg.com/browser-headers/-/browser-headers-0.4.1.tgz#4308a7ad3b240f4203dbb45acedb38dc2d65dd02"
integrity sha512-CA9hsySZVo9371qEHjHZtYxV2cFtVj5Wj/ZHi8ooEsrtm4vOnl9Y9HmyYWk9q+05d7K3rdoAE0j3MVEFVvtQtg==
buffer-from@^1.0.0: buffer-from@^1.0.0:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef" resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@ -1427,6 +1447,11 @@ globals@^11.7.0:
resolved "https://registry.yarnpkg.com/globals/-/globals-11.8.0.tgz#c1ef45ee9bed6badf0663c5cb90e8d1adec1321d" resolved "https://registry.yarnpkg.com/globals/-/globals-11.8.0.tgz#c1ef45ee9bed6badf0663c5cb90e8d1adec1321d"
integrity sha512-io6LkyPVuzCHBSQV9fmOwxZkUk6nIaGmxheLDgmuFv89j0fm2aqDbIXKAGfzCMHqz3HLF2Zf8WSG6VqMh2qFmA== integrity sha512-io6LkyPVuzCHBSQV9fmOwxZkUk6nIaGmxheLDgmuFv89j0fm2aqDbIXKAGfzCMHqz3HLF2Zf8WSG6VqMh2qFmA==
google-protobuf@3.10.0:
version "3.10.0"
resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.10.0.tgz#f36171128090615049f9b0e42252b1a10a4bc534"
integrity sha512-d0cMO8TJ6xtB/WrVHCv5U81L2ulX+aCD58IljyAN6mHwdHHJ2jbcauX5glvivi3s3hx7EYEo7eUA9WftzamMnw==
graceful-fs@^4.1.11: graceful-fs@^4.1.11:
version "4.1.11" version "4.1.11"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@ -2785,6 +2810,11 @@ prelude-ls@~1.1.2:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
prettier@^1.19.1:
version "1.19.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
prism-media@^0.0.3: prism-media@^0.0.3:
version "0.0.3" version "0.0.3"
resolved "https://registry.yarnpkg.com/prism-media/-/prism-media-0.0.3.tgz#8842d4fae804f099d3b48a9a38e3c2bab6f4855b" resolved "https://registry.yarnpkg.com/prism-media/-/prism-media-0.0.3.tgz#8842d4fae804f099d3b48a9a38e3c2bab6f4855b"

6
UI/config-overrides.js
View file

@ -1,4 +1,2 @@
const { override, addDecoratorsLegacy } = require('customize-cra') const { override, addDecoratorsLegacy } = require("customize-cra");
module.exports = override( module.exports = override(addDecoratorsLegacy());
addDecoratorsLegacy()
)

4
UI/package.json
View file

@ -31,7 +31,8 @@
"start": "react-app-rewired start", "start": "react-app-rewired start",
"build": "react-app-rewired build", "build": "react-app-rewired build",
"test": "react-app-rewired test", "test": "react-app-rewired test",
"eject": "react-app-rewired eject" "eject": "react-app-rewired eject",
"lint:prettier": "prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx}'"
}, },
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"
@ -53,6 +54,7 @@
"eslint-plugin-react": "^7.11.1", "eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0", "eslint-plugin-standard": "^4.0.0",
"node-sass-chokidar": "^1.3.4", "node-sass-chokidar": "^1.3.4",
"prettier": "^1.19.1",
"react-app-rewire-scss": "^1.0.2", "react-app-rewire-scss": "^1.0.2",
"react-app-rewired": "^2.1.1", "react-app-rewired": "^2.1.1",
"redux-devtools": "^3.4.1", "redux-devtools": "^3.4.1",

9
UI/src/.prettierrc.js Normal file
View file

@ -0,0 +1,9 @@
module.exports = {
printWidth: 90,
useTabs: false,
tabWidth: 2,
singleQuote: true,
trailingComma: 'es5',
bracketSpacing: true,
semi: false,
}

8
UI/src/App.css
View file

@ -23,6 +23,10 @@
} }
@keyframes App-logo-spin { @keyframes App-logo-spin {
from { transform: rotate(0deg); } from {
to { transform: rotate(360deg); } transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} }

4
UI/src/App.js
View file

@ -19,11 +19,11 @@ window.__APP_STORE__ = store
@DragDropContext(HTML5Backend) @DragDropContext(HTML5Backend)
class App extends Component { class App extends Component {
componentWillMount () { componentWillMount() {
store.dispatch(userInit) store.dispatch(userInit)
} }
render () { render() {
return ( return (
<Provider store={store}> <Provider store={store}>
<ConnectedRouter history={history}> <ConnectedRouter history={history}>

12
UI/src/App.test.js
View file

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react'
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom'
import App from './App'; import App from './App'
it('renders without crashing', () => { it('renders without crashing', () => {
const div = document.createElement('div'); const div = document.createElement('div')
ReactDOM.render(<App />, div); ReactDOM.render(<App />, div)
}); })

19
UI/src/actions/index.js
View file

@ -6,11 +6,11 @@ export const fetchServers = async dispatch => {
dispatch({ dispatch({
type: Symbol.for('update servers'), type: Symbol.for('update servers'),
data: rsp.body data: rsp.body,
}) })
dispatch({ dispatch({
type: Symbol.for('app ready') type: Symbol.for('app ready'),
}) })
} }
@ -21,19 +21,19 @@ export const userInit = async dispatch => {
dispatch({ dispatch({
type: Symbol.for('set user'), type: Symbol.for('set user'),
data: rsp.body data: rsp.body,
}) })
dispatch(fetchServers) dispatch(fetchServers)
} catch (e) { } catch (e) {
dispatch({ dispatch({
type: Symbol.for('app ready') type: Symbol.for('app ready'),
}) })
// window.location.href = '/oauth/flow' // window.location.href = '/oauth/flow'
} }
} else { } else {
dispatch({ dispatch({
type: Symbol.for('app ready') type: Symbol.for('app ready'),
}) })
} }
} }
@ -41,11 +41,10 @@ export const userInit = async dispatch => {
export const userLogout = async dispatch => { export const userLogout = async dispatch => {
try { try {
await superagent.post('/api/auth/logout') await superagent.post('/api/auth/logout')
} catch (e) { } catch (e) {}
}
dispatch({ dispatch({
type: Symbol.for('reset user') type: Symbol.for('reset user'),
}) })
window.location.href = '/' window.location.href = '/'
@ -58,7 +57,9 @@ export const startServerPolling = dispatch => {
const poll = (dispatch, getState) => { const poll = (dispatch, getState) => {
const { servers } = getState() const { servers } = getState()
let stop = false let stop = false
const stopPolling = () => { stop = true } const stopPolling = () => {
stop = true
}
const pollFunc = async () => { const pollFunc = async () => {
if (stop) { if (stop) {
return return

4
UI/src/actions/ui.js
View file

@ -1,7 +1,7 @@
export const fadeOut = cb => dispatch => { export const fadeOut = cb => dispatch => {
dispatch({ dispatch({
type: Symbol.for('app fade'), type: Symbol.for('app fade'),
data: true data: true,
}) })
setTimeout(cb, 300) setTimeout(cb, 300)
@ -9,5 +9,5 @@ export const fadeOut = cb => dispatch => {
export const fadeIn = { export const fadeIn = {
type: Symbol.for('app fade'), type: Symbol.for('app fade'),
data: false data: false,
} }

43
UI/src/components/add-server/index.js
View file

@ -9,33 +9,56 @@ import discordLogo from '../../pages/images/discord-logo.svg'
export default class AddServer extends Component { export default class AddServer extends Component {
polling = null polling = null
componentDidMount () { componentDidMount() {
if (this.props.match.params.server !== undefined) { if (this.props.match.params.server !== undefined) {
this.pollingStop = Actions.startServerPolling(this.props.dispatch) this.pollingStop = Actions.startServerPolling(this.props.dispatch)
} }
} }
componentWillUnmount () { componentWillUnmount() {
if (this.pollingStop != null) { if (this.pollingStop != null) {
this.pollingStop() this.pollingStop()
} }
} }
render () { render() {
return <div className="inner add-server"> return (
<div className="inner add-server">
<h2>What is Roleypoly?</h2> <h2>What is Roleypoly?</h2>
<p className="add-server__header"> <p className="add-server__header">
Roleypoly is a helper bot to help server members assign themselves roles on Discord. Roleypoly is a helper bot to help server members assign themselves roles on
Discord.
</p> </p>
<div className="add-server__grid"> <div className="add-server__grid">
<div><TypingDemo /></div> <div>
<div className="text">Could you easily remember 250 role names? You'd use images or bot commands to tell everyone what they can assign. This kinda limits how <i>many</i> roles you can reasonably have. And don't even start with emojis. <span alt="" role="img">💢</span></div> <TypingDemo />
<div className="text right">Just click. <span role="img">🌈 💖</span></div> </div>
<div className="add-server__darkbg"><RoleypolyDemo /></div> <div className="text">
Could you easily remember 250 role names? You'd use images or bot commands to
tell everyone what they can assign. This kinda limits how <i>many</i> roles
you can reasonably have. And don't even start with emojis.{' '}
<span alt="" role="img">
💢
</span>
</div>
<div className="text right">
Just click. <span role="img">🌈 💖</span>
</div>
<div className="add-server__darkbg">
<RoleypolyDemo />
</div>
</div> </div>
<div className="add-server__header"> <div className="add-server__header">
<a href="/oauth/bot/flow" target="_blank" className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo" alt=""/> Authorize via Discord</a> <a
href="/oauth/bot/flow"
target="_blank"
className="uk-button rp-button discord"
>
<img src={discordLogo} className="rp-button-logo" alt="" /> Authorize via
Discord
</a>
</div> </div>
</div> </div>
)
} }
} }

6
UI/src/components/demos/roleypoly.js
View file

@ -1,12 +1,14 @@
import React from 'react' import React from 'react'
import RoleDemo from '../role/demo' import RoleDemo from '../role/demo'
const RoleypolyDemo = () => <div className="demo__roleypoly"> const RoleypolyDemo = () => (
<div className="demo__roleypoly">
<RoleDemo name="a cute role ♡" color="#3EC1BF" /> <RoleDemo name="a cute role ♡" color="#3EC1BF" />
<RoleDemo name="a vanity role ♡" color="#F7335B" /> <RoleDemo name="a vanity role ♡" color="#F7335B" />
<RoleDemo name="a brave role ♡" color="#A8D0B8" /> <RoleDemo name="a brave role ♡" color="#A8D0B8" />
<RoleDemo name="a proud role ♡" color="#5C8B88" /> <RoleDemo name="a proud role ♡" color="#5C8B88" />
<RoleDemo name="a wonderful role ♡" color="#D6B3C7" /> <RoleDemo name="a wonderful role ♡" color="#D6B3C7" />
</div> </div>
)
export default RoleypolyDemo export default RoleypolyDemo

6
UI/src/components/demos/typing.js
View file

@ -3,7 +3,8 @@ import moment from 'moment'
import Typist from 'react-typist' import Typist from 'react-typist'
import './typing.sass' import './typing.sass'
const Typing = () => <div className="demo__discord rp-discord"> const Typing = () => (
<div className="demo__discord rp-discord">
<div className="discord__chat"> <div className="discord__chat">
<span className="timestamp">{moment().format('LT')}</span> <span className="timestamp">{moment().format('LT')}</span>
<span className="username">Kata カタ</span> <span className="username">Kata カタ</span>
@ -24,6 +25,7 @@ const Typing = () => <div className="demo__discord rp-discord">
<span>i have too many roles.</span> <span>i have too many roles.</span>
</Typist> </Typist>
</div> </div>
</div> </div>
)
export default Typing export default Typing

3
UI/src/components/dev-tools/index.js
View file

@ -4,8 +4,7 @@ import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor' import DockMonitor from 'redux-devtools-dock-monitor'
export default createDevTools( export default createDevTools(
<DockMonitor toggleVisibilityKey="`" <DockMonitor toggleVisibilityKey="`" changePositionKey="ctrl-w">
changePositionKey="ctrl-w">
<LogMonitor /> <LogMonitor />
</DockMonitor> </DockMonitor>
) )

36
UI/src/components/logotype/index.js
View file

File diff suppressed because one or more lines are too long

18
UI/src/components/oauth-bot-flow/index.js
View file

@ -10,17 +10,25 @@ class OauthCallback extends Component {
state = { state = {
notReady: true, notReady: true,
message: 'chotto matte kudasai...', message: 'chotto matte kudasai...',
url: null url: null,
} }
async componentDidMount () { async componentDidMount() {
const { body: { url } } = await superagent.get('/api/oauth/bot?url=✔️') const {
body: { url },
} = await superagent.get('/api/oauth/bot?url=✔️')
this.setState({ url, notReady: false }) this.setState({ url, notReady: false })
window.location.href = url window.location.href = url
} }
render () { render() {
return (this.state.notReady) ? this.state.message : <a style={{zIndex: 10000}} href={this.state.url}>Something oopsed, click me to get to where you meant.</a> return this.state.notReady ? (
this.state.message
) : (
<a style={{ zIndex: 10000 }} href={this.state.url}>
Something oopsed, click me to get to where you meant.
</a>
)
} }
} }

22
UI/src/components/oauth-callback/index.js
View file

@ -9,16 +9,16 @@ class OauthCallback extends Component {
state = { state = {
notReady: true, notReady: true,
message: 'chotto matte kudasai...', message: 'chotto matte kudasai...',
redirect: '/s' redirect: '/s',
} }
stopped = false stopped = false
componentDidUnmount () { componentDidUnmount() {
this.stopped = true this.stopped = true
} }
async componentDidMount () { async componentDidMount() {
// handle stuff in the url // handle stuff in the url
const sp = new URLSearchParams(this.props.location.search) const sp = new URLSearchParams(this.props.location.search)
const token = sp.get('code') const token = sp.get('code')
@ -44,7 +44,7 @@ class OauthCallback extends Component {
const rsp = await superagent.get('/api/auth/user') const rsp = await superagent.get('/api/auth/user')
this.props.dispatch({ this.props.dispatch({
type: Symbol.for('set user'), type: Symbol.for('set user'),
data: rsp.body data: rsp.body,
}) })
this.props.dispatch(fetchServers) this.props.dispatch(fetchServers)
this.setState({ notReady: false }) this.setState({ notReady: false })
@ -53,7 +53,9 @@ class OauthCallback extends Component {
if (counter > 10) { if (counter > 10) {
this.setState({ message: "i couldn't log you in. :c" }) this.setState({ message: "i couldn't log you in. :c" })
} else { } else {
setTimeout(() => { retry() }, 250) setTimeout(() => {
retry()
}, 250)
} }
} }
} }
@ -64,19 +66,21 @@ class OauthCallback extends Component {
// this.props.onLogin(rsp.body) // this.props.onLogin(rsp.body)
retry() retry()
} catch (e) { } catch (e) {
console.error('token pass error', e) console.error('token pass error', e)
this.setState({ message: 'g-gomen nasai... i broke it...' }) this.setState({ message: 'g-gomen nasai... i broke it...' })
return return
} }
// update user stuff here // update user stuff here
} }
render () { render() {
return (this.state.notReady) ? this.state.message : <Redirect to={this.state.redirect} /> return this.state.notReady ? (
this.state.message
) : (
<Redirect to={this.state.redirect} />
)
} }
} }

37
UI/src/components/oauth-flow/index.js
View file

@ -5,34 +5,33 @@ import { connect } from 'react-redux'
import uuidv4 from 'uuid/v4' import uuidv4 from 'uuid/v4'
import { fetchServers } from '../../actions' import { fetchServers } from '../../actions'
@connect() @connect()
class OauthCallback extends Component { class OauthCallback extends Component {
state = { state = {
notReady: true, notReady: true,
message: 'chotto matte kudasai...', message: 'chotto matte kudasai...',
redirect: '/s', redirect: '/s',
url: null url: null,
} }
async fetchUser () { async fetchUser() {
const rsp = await superagent.get('/api/auth/user') const rsp = await superagent.get('/api/auth/user')
sessionStorage.setItem('user', JSON.stringify(rsp.body)) sessionStorage.setItem('user', JSON.stringify(rsp.body))
sessionStorage.setItem('user.update', JSON.stringify(Date.now())) sessionStorage.setItem('user.update', JSON.stringify(Date.now()))
this.props.dispatch({ this.props.dispatch({
type: Symbol.for('set user'), type: Symbol.for('set user'),
data: rsp.body data: rsp.body,
}) })
} }
setupUser () { setupUser() {
const userUpdateTime = sessionStorage.getItem('user.update') || 0 const userUpdateTime = sessionStorage.getItem('user.update') || 0
if (+userUpdateTime + (1000 * 60 * 10) > Date.now()) { if (+userUpdateTime + 1000 * 60 * 10 > Date.now()) {
const user = sessionStorage.getItem('user') const user = sessionStorage.getItem('user')
if (user != null && user !== '') { if (user != null && user !== '') {
this.props.dispatch({ this.props.dispatch({
type: Symbol.for('set user'), type: Symbol.for('set user'),
data: JSON.parse(user) data: JSON.parse(user),
}) })
} }
} }
@ -40,7 +39,7 @@ class OauthCallback extends Component {
return this.fetchUser() return this.fetchUser()
} }
async componentDidMount () { async componentDidMount() {
const state = uuidv4() const state = uuidv4()
const oUrl = new URL(window.location.href) const oUrl = new URL(window.location.href)
@ -48,7 +47,10 @@ class OauthCallback extends Component {
this.setState({ redirect: oUrl.searchParams.get('r') }) this.setState({ redirect: oUrl.searchParams.get('r') })
} }
window.sessionStorage.setItem('state', JSON.stringify({ state, redirect: oUrl.searchParams.get('r') })) window.sessionStorage.setItem(
'state',
JSON.stringify({ state, redirect: oUrl.searchParams.get('r') })
)
try { try {
await this.setupUser() await this.setupUser()
@ -56,7 +58,9 @@ class OauthCallback extends Component {
this.props.dispatch(fetchServers) this.props.dispatch(fetchServers)
this.setState({ notReady: false }) this.setState({ notReady: false })
} catch (e) { } catch (e) {
const { body: { url } } = await superagent.get('/api/auth/redirect?url=✔️') const {
body: { url },
} = await superagent.get('/api/auth/redirect?url=✔️')
const nUrl = new URL(url) const nUrl = new URL(url)
nUrl.searchParams.set('state', state) nUrl.searchParams.set('state', state)
@ -65,8 +69,17 @@ class OauthCallback extends Component {
} }
} }
render () { render() {
return (this.state.notReady) ? this.state.message : <><Redirect to={this.state.redirect} /><a style={{zIndex: 10000}} href={this.state.url}>Something oopsed, click me to get to where you meant.</a></> return this.state.notReady ? (
this.state.message
) : (
<>
<Redirect to={this.state.redirect} />
<a style={{ zIndex: 10000 }} href={this.state.url}>
Something oopsed, click me to get to where you meant.
</a>
</>
)
} }
} }

64
UI/src/components/role-editor/Category.js
View file

@ -4,40 +4,66 @@ import { DropTarget } from 'react-dnd'
import Role from '../role/draggable' import Role from '../role/draggable'
import CategoryEditor from './CategoryEditor' import CategoryEditor from './CategoryEditor'
@DropTarget(Symbol.for('dnd: role'), { @DropTarget(
drop (props, monitor, element) { Symbol.for('dnd: role'),
{
drop(props, monitor, element) {
props.onDrop(monitor.getItem()) props.onDrop(monitor.getItem())
}, },
canDrop (props, monitor) { canDrop(props, monitor) {
return (props.mode !== Symbol.for('edit') && monitor.getItem().category !== props.name) return (
} props.mode !== Symbol.for('edit') && monitor.getItem().category !== props.name
}, (connect, monitor) => ({ )
},
},
(connect, monitor) => ({
connectDropTarget: connect.dropTarget(), connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(), isOver: monitor.isOver(),
isOverCurrent: monitor.isOver({ shallow: true }), isOverCurrent: monitor.isOver({ shallow: true }),
canDrop: monitor.canDrop(), canDrop: monitor.canDrop(),
itemType: monitor.getItemType() itemType: monitor.getItemType(),
})) })
)
class Category extends Component { class Category extends Component {
render () { render() {
const { category, name, isOver, canDrop, connectDropTarget, mode, onEditOpen, ...rest } = this.props const {
category,
name,
isOver,
canDrop,
connectDropTarget,
mode,
onEditOpen,
...rest
} = this.props
if (mode === Symbol.for('edit')) { if (mode === Symbol.for('edit')) {
return <CategoryEditor category={category} name={name} {...rest} /> return <CategoryEditor category={category} name={name} {...rest} />
} }
return connectDropTarget(<div key={name} className={`role-editor__category drop-zone ${(canDrop) ? 'can-drop' : ''} ${(isOver && canDrop) ? 'is-over' : ''}`}> return connectDropTarget(
<div className='role-editor__category-header'> <div
<h4>{ category.get('name') }</h4> key={name}
<div uk-tooltip='' title='Edit' uk-icon="icon: file-edit" onClick={onEditOpen} /> className={`role-editor__category drop-zone ${canDrop ? 'can-drop' : ''} ${
isOver && canDrop ? 'is-over' : ''
}`}
>
<div className="role-editor__category-header">
<h4>{category.get('name')}</h4>
<div
uk-tooltip=""
title="Edit"
uk-icon="icon: file-edit"
onClick={onEditOpen}
/>
</div> </div>
{ {category
category.get('roles_map') .get('roles_map')
.reverse() .reverse()
.map((r, k) => <Role key={k} role={r} categoryId={name} />) .map((r, k) => <Role key={k} role={r} categoryId={name} />)
.toArray() .toArray()}
} </div>
</div>) )
} }
} }
export default Category export default Category

65
UI/src/components/role-editor/CategoryEditor.js
View file

@ -1,8 +1,7 @@
import React, { Component } from 'react' import React, { Component } from 'react'
export default class CategoryEditor extends Component { export default class CategoryEditor extends Component {
onKeyPress = e => {
onKeyPress = (e) => {
const { onSave } = this.props const { onSave } = this.props
switch (e.key) { switch (e.key) {
@ -12,44 +11,52 @@ export default class CategoryEditor extends Component {
} }
} }
render () { render() {
const { const { category } = this.props
category
} = this.props
return <div className="role-editor__category editor" onKeyDown={this.onKeyPress}> return (
<div className="role-editor__category editor" onKeyDown={this.onKeyPress}>
<div className="uk-form-stacked uk-light"> <div className="uk-form-stacked uk-light">
<div> <div>
<label className="uk-form-label">Category Name</label> <label className="uk-form-label">Category Name</label>
<div className="uk-form-controls"> <div className="uk-form-controls">
<input type="text" className="uk-input" placeholder='' value={category.get('name')} onChange={this.props.onEdit('name', Symbol.for('edit: text'))} /> <input
type="text"
className="uk-input"
placeholder=""
value={category.get('name')}
onChange={this.props.onEdit('name', Symbol.for('edit: text'))}
/>
</div> </div>
<div className="role-editor__bumpers"> <div className="role-editor__bumpers">
<div <div
onClick={this.props.onBump(-1)} onClick={this.props.onBump(-1)}
className={ className={`role-editor__bumpers-bump
`role-editor__bumpers-bump
${category.get('position') === 0 ? 'yeet' : ''} ${category.get('position') === 0 ? 'yeet' : ''}
`} `}
uk-tooltip="delay: 1s" uk-tooltip="delay: 1s"
title="Move category up"> title="Move category up"
>
<i uk-icon="icon: chevron-up"></i> <i uk-icon="icon: chevron-up"></i>
</div> </div>
<div <div
onClick={this.props.onBump(1)} onClick={this.props.onBump(1)}
className={ className={`role-editor__bumpers-bump
`role-editor__bumpers-bump
${category.get('position') === this.props.arrMax - 1 ? 'yeet' : ''} ${category.get('position') === this.props.arrMax - 1 ? 'yeet' : ''}
`} `}
uk-tooltip="delay: 1s" uk-tooltip="delay: 1s"
title="Move category down"> title="Move category down"
>
<i uk-icon="icon: chevron-down"></i> <i uk-icon="icon: chevron-down"></i>
</div> </div>
</div> </div>
</div> </div>
<div style={{ marginTop: 10 }}> <div style={{ marginTop: 10 }}>
<div className="uk-form-controls"> <div className="uk-form-controls">
<label uk-tooltip="delay: 1s" title="Hides and disables roles in this category from being used."> <label
uk-tooltip="delay: 1s"
title="Hides and disables roles in this category from being used."
>
<input <input
style={{ marginRight: 5 }} style={{ marginRight: 5 }}
type="checkbox" type="checkbox"
@ -62,25 +69,41 @@ export default class CategoryEditor extends Component {
</div> </div>
</div> </div>
<div style={{ marginTop: 10 }}> <div style={{ marginTop: 10 }}>
<div className="uk-form-label">Type <i uk-icon="icon: info; ratio: 0.7" uk-tooltip="" title="Single mode only lets a user pick one role in this category." /></div> <div className="uk-form-label">
Type{' '}
<i
uk-icon="icon: info; ratio: 0.7"
uk-tooltip=""
title="Single mode only lets a user pick one role in this category."
/>
</div>
<div className="uk-form-controls"> <div className="uk-form-controls">
<select <select
className="uk-select" className="uk-select"
value={category.get('type')} value={category.get('type')}
onChange={this.props.onEdit('type', Symbol.for('edit: select'))} onChange={this.props.onEdit('type', Symbol.for('edit: select'))}
> >
<option value='multi'>Multiple</option> <option value="multi">Multiple</option>
<option value='single'>Single</option> <option value="single">Single</option>
</select> </select>
</div> </div>
</div> </div>
<div className='role-editor__actions'> <div className="role-editor__actions">
<button className="uk-button rp-button secondary role-editor__actions_delete" onClick={this.props.onDelete}> <button
className="uk-button rp-button secondary role-editor__actions_delete"
onClick={this.props.onDelete}
>
<i uk-icon="icon: trash" /> <i uk-icon="icon: trash" />
</button> </button>
<button className="uk-button rp-button primary role-editor__actions_save" onClick={this.props.onSave}>Save</button> <button
className="uk-button rp-button primary role-editor__actions_save"
onClick={this.props.onSave}
>
Save
</button>
</div> </div>
</div> </div>
</div> </div>
)
} }
} }

69
UI/src/components/role-editor/actions.js
View file

@ -16,20 +16,20 @@ export const constructView = id => async (dispatch, getState) => {
data: { data: {
hasSafeRoles, hasSafeRoles,
viewMap, viewMap,
originalSnapshot: viewMap originalSnapshot: viewMap,
} },
}) })
dispatch(UIActions.fadeIn) dispatch(UIActions.fadeIn)
} }
export const addRoleToCategory = (id, oldId, role, flip = true) => (dispatch) => { export const addRoleToCategory = (id, oldId, role, flip = true) => dispatch => {
dispatch({ dispatch({
type: Symbol.for('re: add role to category'), type: Symbol.for('re: add role to category'),
data: { data: {
id, id,
role role,
} },
}) })
if (flip) { if (flip) {
@ -37,13 +37,13 @@ export const addRoleToCategory = (id, oldId, role, flip = true) => (dispatch) =>
} }
} }
export const removeRoleFromCategory = (id, oldId, role, flip = true) => (dispatch) => { export const removeRoleFromCategory = (id, oldId, role, flip = true) => dispatch => {
dispatch({ dispatch({
type: Symbol.for('re: remove role from category'), type: Symbol.for('re: remove role from category'),
data: { data: {
id, id,
role role,
} },
}) })
if (flip) { if (flip) {
@ -57,12 +57,12 @@ export const editCategory = ({ id, key, value }) => dispatch => {
data: { data: {
id, id,
key, key,
value value,
} },
}) })
} }
export const saveCategory = (id, category) => (dispatch) => { export const saveCategory = (id, category) => dispatch => {
if (category.get('name') === '') { if (category.get('name') === '') {
return return
} }
@ -71,17 +71,17 @@ export const saveCategory = (id, category) => (dispatch) => {
type: Symbol.for('re: switch category mode'), type: Symbol.for('re: switch category mode'),
data: { data: {
id, id,
mode: Symbol.for('drop') mode: Symbol.for('drop'),
} },
}) })
} }
export const openEditor = (id) => ({ export const openEditor = id => ({
type: Symbol.for('re: switch category mode'), type: Symbol.for('re: switch category mode'),
data: { data: {
id, id,
mode: Symbol.for('edit') mode: Symbol.for('edit'),
} },
}) })
export const deleteCategory = (id, category) => (dispatch, getState) => { export const deleteCategory = (id, category) => (dispatch, getState) => {
@ -99,13 +99,13 @@ export const deleteCategory = (id, category) => (dispatch, getState) => {
roles_map: uncategorized.get('roles_map').union(rolesMap), roles_map: uncategorized.get('roles_map').union(rolesMap),
hidden: true, hidden: true,
type: 'multi', type: 'multi',
mode: null mode: null,
} },
}) })
dispatch({ dispatch({
type: Symbol.for('re: delete category'), type: Symbol.for('re: delete category'),
data: id data: id,
}) })
} }
@ -133,8 +133,8 @@ export const createCategory = (dispatch, getState) => {
hidden: true, hidden: true,
type: 'multi', type: 'multi',
position: idx, position: idx,
mode: Symbol.for('edit') mode: Symbol.for('edit'),
} },
}) })
} }
@ -152,8 +152,8 @@ export const bumpCategory = (category, name) => move => async (dispatch, getStat
data: { data: {
id: name, id: name,
key: 'position', key: 'position',
value: nextPos value: nextPos,
} },
}) })
if (!!replaceThisOne) { if (!!replaceThisOne) {
@ -162,25 +162,34 @@ export const bumpCategory = (category, name) => move => async (dispatch, getStat
data: { data: {
id: replaceThisOne, id: replaceThisOne,
key: 'position', key: 'position',
value: position value: position,
} },
}) })
} }
} }
export const saveServer = id => async (dispatch, getState) => { export const saveServer = id => async (dispatch, getState) => {
const viewMap = getState().roleEditor.get('viewMap') const viewMap = getState()
.roleEditor.get('viewMap')
.filterNot((_, k) => k === 'Uncategorized') .filterNot((_, k) => k === 'Uncategorized')
.map(v => v.delete('roles_map').delete('mode').delete('id')) .map(v =>
v
.delete('roles_map')
.delete('mode')
.delete('id')
)
viewMap.map((v, idx) => { viewMap.map((v, idx) => {
if (v.has('position')) { if (v.has('position')) {
return v return v
} }
console.warn('category position wasnt set, so fake ones are being made', {cat: v.toJS(), idx, position: viewMap.count()+idx}) console.warn('category position wasnt set, so fake ones are being made', {
return v.set('position', viewMap.count()+idx) cat: v.toJS(),
idx,
position: viewMap.count() + idx,
})
return v.set('position', viewMap.count() + idx)
}) })
await superagent.patch(`/api/server/${id}`).send({ categories: viewMap.toJS() }) await superagent.patch(`/api/server/${id}`).send({ categories: viewMap.toJS() })

141
UI/src/components/role-editor/index.js
View file

@ -16,38 +16,51 @@ import Role from '../role/draggable'
const mapState = ({ rolePicker, roleEditor, servers }, ownProps) => ({ const mapState = ({ rolePicker, roleEditor, servers }, ownProps) => ({
rp: rolePicker, rp: rolePicker,
editor: roleEditor, editor: roleEditor,
server: servers.get(ownProps.match.params.server) server: servers.get(ownProps.match.params.server),
}) })
@connect(mapState) @connect(mapState)
@DropTarget(Symbol.for('dnd: role'), { @DropTarget(
drop (props, monitor, element) { Symbol.for('dnd: role'),
{
drop(props, monitor, element) {
element.dropRole({}, 'Uncategorized')(monitor.getItem()) element.dropRole({}, 'Uncategorized')(monitor.getItem())
}, },
canDrop (props, monitor) { canDrop(props, monitor) {
return (monitor.getItem().category !== 'Uncategorized') return monitor.getItem().category !== 'Uncategorized'
} },
}, (connect, monitor) => ({ },
(connect, monitor) => ({
connectDropTarget: connect.dropTarget(), connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(), isOver: monitor.isOver(),
isOverCurrent: monitor.isOver({ shallow: true }), isOverCurrent: monitor.isOver({ shallow: true }),
canDrop: monitor.canDrop(), canDrop: monitor.canDrop(),
itemType: monitor.getItemType() itemType: monitor.getItemType(),
})) })
)
class RoleEditor extends Component { class RoleEditor extends Component {
componentWillMount () { componentWillMount() {
const { dispatch, match: { params: { server } } } = this.props const {
dispatch,
match: {
params: { server },
},
} = this.props
dispatch(Actions.constructView(server)) dispatch(Actions.constructView(server))
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.match.params.server !== nextProps.match.params.server) { if (this.props.match.params.server !== nextProps.match.params.server) {
const { dispatch } = this.props const { dispatch } = this.props
dispatch(UIActions.fadeOut(() => dispatch(Actions.constructView(nextProps.match.params.server)))) dispatch(
UIActions.fadeOut(() =>
dispatch(Actions.constructView(nextProps.match.params.server))
)
)
} }
} }
dropRole = (category, name) => ({role, category}) => { dropRole = (category, name) => ({ role, category }) => {
const { dispatch } = this.props const { dispatch } = this.props
console.log(role) console.log(role)
dispatch(Actions.addRoleToCategory(name, category, role)) dispatch(Actions.addRoleToCategory(name, category, role))
@ -103,17 +116,26 @@ class RoleEditor extends Component {
} }
saveServer = () => { saveServer = () => {
const { dispatch, match: { params: { server } } } = this.props const {
dispatch,
match: {
params: { server },
},
} = this.props
dispatch(Actions.saveServer(server)) dispatch(Actions.saveServer(server))
} }
onBump = (category, name) => (move) => () => this.props.dispatch(Actions.bumpCategory(category, name)(move)) onBump = (category, name) => move => () =>
this.props.dispatch(Actions.bumpCategory(category, name)(move))
get hasChanged () { get hasChanged() {
return this.props.editor.get('originalSnapshot').hashCode() !== this.props.editor.get('viewMap').hashCode() return (
this.props.editor.get('originalSnapshot').hashCode() !==
this.props.editor.get('viewMap').hashCode()
)
} }
render () { render() {
const { server } = this.props const { server } = this.props
if (server == null) { if (server == null) {
@ -125,28 +147,40 @@ class RoleEditor extends Component {
} }
const vm = this.props.editor.get('viewMap') const vm = this.props.editor.get('viewMap')
return <div className="inner role-editor"> return (
<Prompt when={this.hasChanged} message="Are you sure you want to leave? You have unsaved changes that will be lost." /> <div className="inner role-editor">
<Prompt
when={this.hasChanged}
message="Are you sure you want to leave? You have unsaved changes that will be lost."
/>
<div className="role-picker__header" style={{ marginBottom: 10 }}> <div className="role-picker__header" style={{ marginBottom: 10 }}>
<h3>{this.props.server.getIn(['server','name'])}</h3> <h3>{this.props.server.getIn(['server', 'name'])}</h3>
<div className="role-picker__spacer"></div> <div className="role-picker__spacer"></div>
<div className={`role-picker__actions ${(!this.hasChanged) ? 'hidden' : ''}`}> <div className={`role-picker__actions ${!this.hasChanged ? 'hidden' : ''}`}>
<button onClick={this.resetServer} disabled={!this.hasChanged} className="uk-button rp-button secondary"> <button
onClick={this.resetServer}
disabled={!this.hasChanged}
className="uk-button rp-button secondary"
>
Reset Reset
</button> </button>
<button onClick={this.saveServer} disabled={!this.hasChanged} className="uk-button rp-button primary"> <button
onClick={this.saveServer}
disabled={!this.hasChanged}
className="uk-button rp-button primary"
>
Save Changes Save Changes
</button> </button>
</div> </div>
</div> </div>
<div className="role-editor__grid"> <div className="role-editor__grid">
<div className="role-editor__grid__left"> <div className="role-editor__grid__left">
<Scrollbars autoHeight autoHeightMax='calc(100vh - 110px)'> <Scrollbars autoHeight autoHeightMax="calc(100vh - 110px)">
{ {vm
vm
.filter((_, k) => k !== 'Uncategorized') .filter((_, k) => k !== 'Uncategorized')
.sortBy(c => c.get('position')) .sortBy(c => c.get('position'))
.map((c, name, arr) => <Category .map((c, name, arr) => (
<Category
key={name} key={name}
name={name} name={name}
category={c} category={c}
@ -158,39 +192,46 @@ class RoleEditor extends Component {
onSave={this.saveCategory(c, name)} onSave={this.saveCategory(c, name)}
onDelete={this.deleteCategory(c, name)} onDelete={this.deleteCategory(c, name)}
onBump={this.onBump(c, name)} onBump={this.onBump(c, name)}
/>) />
.toArray() ))
} .toArray()}
<div onClick={this.createCategory} uk-tooltip="pos: bottom" title="Add new category" className="role-editor__category add-button"> <div
onClick={this.createCategory}
uk-tooltip="pos: bottom"
title="Add new category"
className="role-editor__category add-button"
>
<i uk-icon="icon: plus" /> <i uk-icon="icon: plus" />
</div> </div>
</Scrollbars> </Scrollbars>
</div> </div>
{ {this.props.connectDropTarget(
this.props.connectDropTarget( <div
<div className={`role-editor__grid__right drop-zone ${(this.props.canDrop) ? 'can-drop' : ''} ${(this.props.isOver && this.props.canDrop) ? 'is-over' : ''}`}> className={`role-editor__grid__right drop-zone ${
<Scrollbars autoHeight autoHeightMax='calc(100vh - 145px)'> this.props.canDrop ? 'can-drop' : ''
} ${this.props.isOver && this.props.canDrop ? 'is-over' : ''}`}
>
<Scrollbars autoHeight autoHeightMax="calc(100vh - 145px)">
<div className="role-editor__uncat-zone"> <div className="role-editor__uncat-zone">
{ {(vm.getIn(['Uncategorized', 'roles_map']) || Set())
(vm.getIn(['Uncategorized', 'roles_map']) || Set())
.sortBy(r => r.get('position')) .sortBy(r => r.get('position'))
.reverse() .reverse()
.map((r, k) => <Role key={k} categoryId='Uncategorized' role={r} />) .map((r, k) => <Role key={k} categoryId="Uncategorized" role={r} />)
.toArray() .toArray()}
} {this.props.editor.get('hasSafeRoles') !== true ? (
{ <div className="role-editor__alert">
(this.props.editor.get('hasSafeRoles') !== true) <Link to="/help/why-no-roles">
? <div className="role-editor__alert"> Why are there no roles here? <i uk-icon="icon: info" />
<Link to="/help/why-no-roles">Why are there no roles here? <i uk-icon="icon: info" /></Link> </Link>
</div> </div>
: null ) : null}
}
</div> </div>
</Scrollbars> </Scrollbars>
</div>) </div>
} )}
</div> </div>
</div> </div>
)
} }
} }

43
UI/src/components/role-picker/Category.js
View file

@ -4,28 +4,34 @@ import { Map } from 'immutable'
import Role from '../role' import Role from '../role'
class Category extends Component { class Category extends Component {
toggleRoleMulti(id, next) {
toggleRoleMulti (id, next) {
this.props.onChange(Map({ [id]: next })) this.props.onChange(Map({ [id]: next }))
} }
toggleRoleSingle (id, next) { toggleRoleSingle(id, next) {
this.props.onChange(this.props.category.get('roles').reduce((acc, i) => acc.set(i, false), Map()).set(id, next)) this.props.onChange(
this.props.category
.get('roles')
.reduce((acc, i) => acc.set(i, false), Map())
.set(id, next)
)
} }
onRoleToggle = id => (next, old) => { onRoleToggle = id => (next, old) => {
const type = this.props.category.get('type') const type = this.props.category.get('type')
switch (type) { switch (type) {
case 'single': return this.toggleRoleSingle(id, next) case 'single':
case 'multi': return this.toggleRoleMulti(id, next) return this.toggleRoleSingle(id, next)
case 'multi':
return this.toggleRoleMulti(id, next)
default: default:
console.warn('DEFAULTING TO MULTI', id, next, old) console.warn('DEFAULTING TO MULTI', id, next, old)
return this.toggleRoleMulti(id, next) return this.toggleRoleMulti(id, next)
} }
} }
render () { render() {
const { category, name, isSelected } = this.props const { category, name, isSelected } = this.props
if (category.get('hidden')) { if (category.get('hidden')) {
return null return null
@ -35,19 +41,28 @@ class Category extends Component {
return null return null
} }
return <div key={name} className="role-picker__category"> return (
<h4>{ category.get('name') }</h4> <div key={name} className="role-picker__category">
{ <h4>{category.get('name')}</h4>
category.get('roles_map') {category
.get('roles_map')
.sortBy(r => r.get('position')) .sortBy(r => r.get('position'))
.reverse() .reverse()
.map((r, k) => { .map((r, k) => {
const id = r.get('id') const id = r.get('id')
return <Role key={k} role={r} disabled={!r.get('safe')} selected={isSelected(id)} onToggle={this.onRoleToggle(id)}/> return (
<Role
key={k}
role={r}
disabled={!r.get('safe')}
selected={isSelected(id)}
onToggle={this.onRoleToggle(id)}
/>
)
}) })
.toArray() .toArray()}
}
</div> </div>
)
} }
} }
export default Category export default Category

72
UI/src/components/role-picker/actions.js
View file

@ -10,8 +10,8 @@ export const setup = id => async dispatch => {
type: Symbol.for('server: set'), type: Symbol.for('server: set'),
data: { data: {
id, id,
...data ...data,
} },
}) })
dispatch(constructView(id)) dispatch(constructView(id))
} }
@ -21,33 +21,44 @@ export const getViewMap = server => {
const categories = server.get('categories') const categories = server.get('categories')
const categoriesIds = server.get('categories').keySeq() const categoriesIds = server.get('categories').keySeq()
const allRoles = server.get('roles').filter(v => v.get('safe')).map(r => r.get('id')).toSet() const allRoles = server
const accountedRoles = categories.map(c => c.get('roles')).toSet().flatten() .get('roles')
.filter(v => v.get('safe'))
.map(r => r.get('id'))
.toSet()
const accountedRoles = categories
.map(c => c.get('roles'))
.toSet()
.flatten()
const unaccountedRoles = allRoles.subtract(accountedRoles) const unaccountedRoles = allRoles.subtract(accountedRoles)
// console.log('roles', allRoles.toJS(), accountedRoles.toJS(), unaccountedRoles.toJS()) // console.log('roles', allRoles.toJS(), accountedRoles.toJS(), unaccountedRoles.toJS())
const viewMap = categories.set('Uncategorized', fromJS({ const viewMap = categories
.set(
'Uncategorized',
fromJS({
roles: unaccountedRoles, roles: unaccountedRoles,
hidden: true, hidden: true,
type: 'multi', type: 'multi',
name: 'Uncategorized' name: 'Uncategorized',
})) })
.map( )
(cat, idx) => .map((cat, idx) =>
cat.set( cat.set(
'position', 'position',
cat.get('position', categoriesIds.findIndex(v => v === idx) cat.get(
'position',
categoriesIds.findIndex(v => v === idx)
) )
) )
) )
// .sortBy(cat => cat.get('position')) // .sortBy(cat => cat.get('position'))
.map(c => { .map(c => {
const roles = c.get('roles') const roles = c
.get('roles')
// fill in roles_map // fill in roles_map
.map(r => .map(r => server.get('roles').find(sr => sr.get('id') === r))
server.get('roles').find(sr => sr.get('id') === r)
)
.filter(r => r != null) .filter(r => r != null)
// sort by server position, backwards. // sort by server position, backwards.
.sort((a, b) => a.position > b.position) .sort((a, b) => a.position > b.position)
@ -55,14 +66,17 @@ export const getViewMap = server => {
return c.set('roles_map', Set(roles)).set('roles', Set(c.get('roles'))) return c.set('roles_map', Set(roles)).set('roles', Set(c.get('roles')))
}) })
const selected = roles.reduce((acc, r) => acc.set(r.get('id'), r.get('selected')), Map()) const selected = roles.reduce(
(acc, r) => acc.set(r.get('id'), r.get('selected')),
Map()
)
const hasSafeRoles = allRoles.size > 0 const hasSafeRoles = allRoles.size > 0
return { return {
viewMap, viewMap,
selected, selected,
hasSafeRoles hasSafeRoles,
} }
} }
@ -79,16 +93,16 @@ export const constructView = id => (dispatch, getState) => {
originalRolesSelected: selected, originalRolesSelected: selected,
hidden: false, hidden: false,
isEditingMessage: false, isEditingMessage: false,
messageBuffer: '' messageBuffer: '',
} },
}) })
dispatch(UIActions.fadeIn) dispatch(UIActions.fadeIn)
} }
export const resetSelected = (dispatch) => { export const resetSelected = dispatch => {
dispatch({ dispatch({
type: Symbol.for('rp: reset selected') type: Symbol.for('rp: reset selected'),
}) })
} }
@ -113,13 +127,13 @@ export const submitSelected = serverId => async (dispatch, getState) => {
await superagent.patch(`/api/servers/${serverId}/roles`).send(diff.toJS()) await superagent.patch(`/api/servers/${serverId}/roles`).send(diff.toJS())
dispatch({ dispatch({
type: Symbol.for('rp: sync selected roles') type: Symbol.for('rp: sync selected roles'),
}) })
} }
export const updateRoles = roles => ({ export const updateRoles = roles => ({
type: Symbol.for('rp: update selected roles'), type: Symbol.for('rp: update selected roles'),
data: roles data: roles,
}) })
export const openMessageEditor = id => (dispatch, getState) => { export const openMessageEditor = id => (dispatch, getState) => {
@ -127,7 +141,7 @@ export const openMessageEditor = id => (dispatch, getState) => {
dispatch(editServerMessage(id, message)) dispatch(editServerMessage(id, message))
dispatch({ dispatch({
type: Symbol.for('rp: set message editor state'), type: Symbol.for('rp: set message editor state'),
data: true data: true,
}) })
} }
@ -141,17 +155,17 @@ export const saveServerMessage = id => async (dispatch, getState) => {
type: Symbol.for('server: edit message'), type: Symbol.for('server: edit message'),
data: { data: {
id, id,
message message,
} },
}) })
} }
export const editServerMessage = (id, message) => ({ export const editServerMessage = (id, message) => ({
type: Symbol.for('rp: edit message buffer'), type: Symbol.for('rp: edit message buffer'),
data: message data: message,
}) })
export const closeMessageEditor = ({ export const closeMessageEditor = {
type: Symbol.for('rp: set message editor state'), type: Symbol.for('rp: set message editor state'),
data: false data: false,
}) }

141
UI/src/components/role-picker/index.js
View file

@ -8,49 +8,56 @@ import { msgToReal } from '../../utils'
import './RolePicker.sass' import './RolePicker.sass'
import Category from './Category' import Category from './Category'
import { Scrollbars } from 'react-custom-scrollbars'; import { Scrollbars } from 'react-custom-scrollbars'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom'
const mapState = ({ rolePicker, servers }, ownProps) => { const mapState = ({ rolePicker, servers }, ownProps) => {
return { return {
data: rolePicker, data: rolePicker,
server: servers.get(ownProps.match.params.server) server: servers.get(ownProps.match.params.server),
} }
} }
@connect(mapState) @connect(mapState)
class RolePicker extends Component { class RolePicker extends Component {
componentWillMount () { componentWillMount() {
const { dispatch, match: { params: { server } } } = this.props const {
dispatch,
match: {
params: { server },
},
} = this.props
dispatch(Actions.setup(server)) dispatch(Actions.setup(server))
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.match.params.server !== nextProps.match.params.server) { if (this.props.match.params.server !== nextProps.match.params.server) {
const { dispatch } = this.props const { dispatch } = this.props
dispatch(UIActions.fadeOut(() => dispatch(Actions.setup(nextProps.match.params.server)))) dispatch(
UIActions.fadeOut(() => dispatch(Actions.setup(nextProps.match.params.server)))
)
} }
} }
get serverId () { get serverId() {
return this.props.server.get('id') return this.props.server.get('id')
} }
isSelected = id => { isSelected = id => {
return this.props.data.getIn([ 'rolesSelected', id ]) return this.props.data.getIn(['rolesSelected', id])
} }
get rolesHaveChanged () { get rolesHaveChanged() {
const { data } = this.props const { data } = this.props
return !data.get('rolesSelected').equals(data.get('originalRolesSelected')) return !data.get('rolesSelected').equals(data.get('originalRolesSelected'))
} }
editServerMessage = (e) => { editServerMessage = e => {
const { dispatch } = this.props const { dispatch } = this.props
dispatch(Actions.editServerMessage(this.serverId, e.target.value)) dispatch(Actions.editServerMessage(this.serverId, e.target.value))
} }
saveServerMessage = (e) => { saveServerMessage = e => {
const { dispatch } = this.props const { dispatch } = this.props
dispatch(Actions.saveServerMessage(this.serverId)) dispatch(Actions.saveServerMessage(this.serverId))
} }
@ -65,7 +72,7 @@ class RolePicker extends Component {
dispatch(Actions.closeMessageEditor) dispatch(Actions.closeMessageEditor)
} }
renderServerMessage (server) { renderServerMessage(server) {
const isEditing = this.props.data.get('isEditingMessage') const isEditing = this.props.data.get('isEditingMessage')
const roleManager = server.getIn(['perms', 'canManageRoles']) const roleManager = server.getIn(['perms', 'canManageRoles'])
const msg = server.get('message') const msg = server.get('message')
@ -74,37 +81,69 @@ class RolePicker extends Component {
console.log(msg, roleManager, isEditing, this.props.data.toJS()) console.log(msg, roleManager, isEditing, this.props.data.toJS())
if (!roleManager && msg !== '') { if (!roleManager && msg !== '') {
return <section> return (
<section>
<h3>Server Message</h3> <h3>Server Message</h3>
<p dangerouslySetInnerHTML={{__html: msgToReal(msg)}}></p> <p dangerouslySetInnerHTML={{ __html: msgToReal(msg) }}></p>
</section> </section>
)
} }
if (roleManager && !isEditing) { if (roleManager && !isEditing) {
return <section> return (
<section>
<div className="role-picker__header"> <div className="role-picker__header">
<h3>Server Message</h3> <h3>Server Message</h3>
<div uk-tooltip='' title='Edit Server Message' uk-icon="icon: pencil" onClick={this.openMessageEditor} /> <div
uk-tooltip=""
title="Edit Server Message"
uk-icon="icon: pencil"
onClick={this.openMessageEditor}
/>
</div> </div>
<p dangerouslySetInnerHTML={{__html: msgToReal(msg) || '<i>no server message</i>'}}></p> <p
dangerouslySetInnerHTML={{
__html: msgToReal(msg) || '<i>no server message</i>',
}}
></p>
</section> </section>
)
} }
if (roleManager && isEditing) { if (roleManager && isEditing) {
return <section> return (
<section>
<div className="role-picker__header"> <div className="role-picker__header">
<h3>Server Message</h3> <h3>Server Message</h3>
<div uk-tooltip='' title='Save Server Message' onClick={this.saveServerMessage} style={{cursor: 'pointer', color: 'var(--c-green)'}} uk-icon="icon: check; ratio: 1.4" /> <div
<div uk-tooltip='' title='Discard Edits' onClick={this.closeMessageEditor} style={{cursor: 'pointer', color: 'var(--c-red)', marginLeft: 10}} uk-icon="icon: trash; ratio: 0.9" /> uk-tooltip=""
title="Save Server Message"
onClick={this.saveServerMessage}
style={{ cursor: 'pointer', color: 'var(--c-green)' }}
uk-icon="icon: check; ratio: 1.4"
/>
<div
uk-tooltip=""
title="Discard Edits"
onClick={this.closeMessageEditor}
style={{ cursor: 'pointer', color: 'var(--c-red)', marginLeft: 10 }}
uk-icon="icon: trash; ratio: 0.9"
/>
</div> </div>
<textarea className="uk-width-1-2 uk-textarea role-picker__msg-editor" rows="3" onChange={this.editServerMessage} value={msgBuffer} /> <textarea
className="uk-width-1-2 uk-textarea role-picker__msg-editor"
rows="3"
onChange={this.editServerMessage}
value={msgBuffer}
/>
</section> </section>
)
} }
return null return null
} }
render () { render() {
const { data, server, dispatch } = this.props const { data, server, dispatch } = this.props
const vm = data.get('viewMap') const vm = data.get('viewMap')
@ -112,33 +151,63 @@ class RolePicker extends Component {
return null return null
} }
return <div className={`inner role-picker ${(data.get('hidden')) ? 'hidden' : ''}`}> return (
<Prompt when={this.rolesHaveChanged} message="Are you sure you want to leave? You have unsaved changes that will be lost." /> <div className={`inner role-picker ${data.get('hidden') ? 'hidden' : ''}`}>
{ this.renderServerMessage(server) } <Prompt
when={this.rolesHaveChanged}
message="Are you sure you want to leave? You have unsaved changes that will be lost."
/>
{this.renderServerMessage(server)}
<section> <section>
<div className="role-picker__header sticky"> <div className="role-picker__header sticky">
<h3>Roles</h3> <h3>Roles</h3>
{ server.getIn(['perms', 'canManageRoles']) === true {server.getIn(['perms', 'canManageRoles']) === true ? (
? <Link to={`/s/${server.get('id')}/edit`} uk-tooltip='' title='Edit Categories' uk-icon="icon: file-edit"></Link> <Link
: null to={`/s/${server.get('id')}/edit`}
} uk-tooltip=""
title="Edit Categories"
uk-icon="icon: file-edit"
></Link>
) : null}
<div className="role-picker__spacer"></div> <div className="role-picker__spacer"></div>
<div className={`role-picker__actions ${(!this.rolesHaveChanged) ? 'hidden' : ''}`}> <div
<button disabled={!this.rolesHaveChanged} onClick={() => dispatch(Actions.resetSelected)} className="uk-button rp-button secondary"> className={`role-picker__actions ${!this.rolesHaveChanged ? 'hidden' : ''}`}
>
<button
disabled={!this.rolesHaveChanged}
onClick={() => dispatch(Actions.resetSelected)}
className="uk-button rp-button secondary"
>
Reset Reset
</button> </button>
<button disabled={!this.rolesHaveChanged} onClick={() => dispatch(Actions.submitSelected(this.props.match.params.server))} className="uk-button rp-button primary"> <button
disabled={!this.rolesHaveChanged}
onClick={() =>
dispatch(Actions.submitSelected(this.props.match.params.server))
}
className="uk-button rp-button primary"
>
Save Changes Save Changes
</button> </button>
</div> </div>
</div> </div>
<div className="role-picker__categories"> <div className="role-picker__categories">
{ {vm
vm.sortBy(v => v.get('position')).map((c, name) => <Category key={name} name={name} category={c} isSelected={this.isSelected} onChange={(roles) => dispatch(Actions.updateRoles(roles))} />).toArray() .sortBy(v => v.get('position'))
} .map((c, name) => (
<Category
key={name}
name={name}
category={c}
isSelected={this.isSelected}
onChange={roles => dispatch(Actions.updateRoles(roles))}
/>
))
.toArray()}
</div> </div>
</section> </section>
</div> </div>
)
} }
} }

14
UI/src/components/role/demo.js
View file

@ -5,15 +5,21 @@ import Role from './index'
export default class DemoRole extends Component { export default class DemoRole extends Component {
state = { state = {
isSelected: false isSelected: false,
} }
handleToggle = () => { handleToggle = () => {
this.setState({ isSelected: !this.state.isSelected }) this.setState({ isSelected: !this.state.isSelected })
} }
render() {
render () { return (
return <Role selected={this.state.isSelected} role={Map({ name: this.props.name, color: this.props.color })} onToggle={this.handleToggle} type='button' /> <Role
selected={this.state.isSelected}
role={Map({ name: this.props.name, color: this.props.color })}
onToggle={this.handleToggle}
type="button"
/>
)
} }
} }

14
UI/src/components/role/draggable.js
View file

@ -13,20 +13,20 @@ import Role from './index'
// isDragging: monitor.isDragging() // isDragging: monitor.isDragging()
// })) // }))
export default export default
@DragSource( @DragSource(
Symbol.for('dnd: role'), Symbol.for('dnd: role'),
{ {
beginDrag ({ role, categoryId }) { beginDrag({ role, categoryId }) {
return { role, category: categoryId } return { role, category: categoryId }
} },
}, },
(connect, monitor) => ({ (connect, monitor) => ({
connectDragSource: connect.dragSource(), connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging() isDragging: monitor.isDragging(),
}) })
) )
class DraggableRole extends Component { class DraggableRole extends Component {
render () { render() {
return <Role {...this.props} type='drag' /> return <Role {...this.props} type="drag" />
} }
} }

31
UI/src/components/role/index.js
View file

@ -11,10 +11,10 @@ class Role extends Component {
onToggle: PropTypes.func, onToggle: PropTypes.func,
type: PropTypes.string, type: PropTypes.string,
selected: PropTypes.bool, selected: PropTypes.bool,
disabled: PropTypes.bool disabled: PropTypes.bool,
} }
render () { render() {
let { role, selected, disabled, type, isDragging } = this.props let { role, selected, disabled, type, isDragging } = this.props
type = type || 'button' type = type || 'button'
@ -29,25 +29,30 @@ class Role extends Component {
const c = color const c = color
let hc = color.lighten(0.1) let hc = color.lighten(0.1)
const out = <div const out = (
<div
onClick={() => { onClick={() => {
if (!disabled && this.props.onToggle != null) { if (!disabled && this.props.onToggle != null) {
this.props.onToggle(!selected, selected) } this.props.onToggle(!selected, selected)
} }
} }}
{...((disabled) ? { 'uk-tooltip': '', title: "I don't have permissions to grant this." } : {})} {...(disabled
className={`role font-sans-serif ${(disabled) ? 'disabled' : ''} ${(isDragging) ? 'is-dragging' : ''} role__${type}`} ? { 'uk-tooltip': '', title: "I don't have permissions to grant this." }
: {})}
className={`role font-sans-serif ${disabled ? 'disabled' : ''} ${
isDragging ? 'is-dragging' : ''
} role__${type}`}
title={role.get('name')} title={role.get('name')}
style={{ style={{
'--role-color-hex': c.string(), '--role-color-hex': c.string(),
'--role-color-hover': hc.string(), '--role-color-hover': hc.string(),
'--role-color-rgba': `rgba(${c.red()}, ${c.green()}, ${c.blue()}, 0.7)` '--role-color-rgba': `rgba(${c.red()}, ${c.green()}, ${c.blue()}, 0.7)`,
}}> }}
<div className={`role__option ${(selected) ? 'selected' : ''}`}/> >
<div className='role__name'> <div className={`role__option ${selected ? 'selected' : ''}`} />
{role.get('name')} <div className="role__name">{role.get('name')}</div>
</div>
</div> </div>
)
if (type === 'drag' && this.props.connectDragSource != null) { if (type === 'drag' && this.props.connectDragSource != null) {
return this.props.connectDragSource(out) return this.props.connectDragSource(out)

27
UI/src/components/servers/Navigation.js
View file

@ -10,30 +10,33 @@ class ServersNavigation extends Component {
static propTypes = { static propTypes = {
user: ImmutablePropTypes.map.isRequired, user: ImmutablePropTypes.map.isRequired,
servers: ImmutablePropTypes.orderedMapOf(ImmutablePropTypes.map).isRequired, servers: ImmutablePropTypes.orderedMapOf(ImmutablePropTypes.map).isRequired,
className: PropTypes.string className: PropTypes.string,
} }
render () { render() {
// console.log(this.props.servers) // console.log(this.props.servers)
return <Fragment> return (
<Fragment>
<UserCard user={this.props.user} /> <UserCard user={this.props.user} />
<div className={this.props.className}> <div className={this.props.className}>
<Scrollbars autoHeight autoHeightMax='calc(100vh - 180px)'> <Scrollbars autoHeight autoHeightMax="calc(100vh - 180px)">
{ {this.props.servers.reduce((acc, s, i) => {
this.props.servers.reduce((acc, s, i) => {
acc.push(<ServerCard server={s} user={this.props.user} key={i} />) acc.push(<ServerCard server={s} user={this.props.user} key={i} />)
return acc return acc
}, []) }, [])}
} <NavLink
<NavLink className='server-list__item add-new' activeClassName='active' to={`/s/add`}> className="server-list__item add-new"
<div className='server-list__item__info'> activeClassName="active"
<i uk-icon="icon: plus; ratio: 0.9"></i>&nbsp; to={`/s/add`}
Add to your server >
<div className="server-list__item__info">
<i uk-icon="icon: plus; ratio: 0.9"></i>&nbsp; Add to your server
</div> </div>
</NavLink> </NavLink>
</Scrollbars> </Scrollbars>
</div> </div>
</Fragment> </Fragment>
)
} }
} }

51
UI/src/components/servers/ServerCard.js
View file

@ -3,7 +3,7 @@ import { connect } from 'react-redux'
import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePropTypes from 'react-immutable-proptypes'
import { NavLink } from 'react-router-dom' import { NavLink } from 'react-router-dom'
import './ServerCard.sass' import './ServerCard.sass'
import { withRouter } from 'react-router'; import { withRouter } from 'react-router'
class ServerCard extends Component { class ServerCard extends Component {
static propTypes = { static propTypes = {
@ -11,7 +11,7 @@ class ServerCard extends Component {
server: ImmutablePropTypes.map.isRequired, server: ImmutablePropTypes.map.isRequired,
} }
render () { render() {
const { server, user } = this.props const { server, user } = this.props
let icon = '' let icon = ''
@ -23,22 +23,53 @@ class ServerCard extends Component {
const perms = server.get('perms') const perms = server.get('perms')
if (perms.get('canManageRoles')) { if (perms.get('canManageRoles')) {
icon = <span title='Role Manager' uk-tooltip='' role='img' aria-label='Role Manager' className="server-list__item__tag" uk-icon="icon: bolt; ratio: 0.7" /> icon = (
<span
title="Role Manager"
uk-tooltip=""
role="img"
aria-label="Role Manager"
className="server-list__item__tag"
uk-icon="icon: bolt; ratio: 0.7"
/>
)
} }
if (perms.get('isAdmin')) { if (perms.get('isAdmin')) {
icon = <span title='Server Admin' uk-tooltip='' role='img' aria-label='Server Admin' className="server-list__item__tag" uk-icon="icon: star; ratio: 0.7" /> icon = (
<span
title="Server Admin"
uk-tooltip=""
role="img"
aria-label="Server Admin"
className="server-list__item__tag"
uk-icon="icon: star; ratio: 0.7"
/>
)
} }
return <NavLink className='server-list__item' activeClassName='active' to={`/s/${s.get('id')}`}> return (
<div className='server-list__item__icon'> <NavLink
<img src={`https://cdn.discordapp.com/icons/${s.get('id')}/${s.get('icon')}.png`} alt={s.name} /> className="server-list__item"
activeClassName="active"
to={`/s/${s.get('id')}`}
>
<div className="server-list__item__icon">
<img
src={`https://cdn.discordapp.com/icons/${s.get('id')}/${s.get('icon')}.png`}
alt={s.name}
/>
</div> </div>
<div className='server-list__item__info'> <div className="server-list__item__info">
<b>{s.get('name')}</b><br /> <b>{s.get('name')}</b>
<span style={{ color: gm.get('color') }}>{ gm.get('nickname') || user.get('username') }</span> { icon } <br />
<span style={{ color: gm.get('color') }}>
{gm.get('nickname') || user.get('username')}
</span>{' '}
{icon}
</div> </div>
</NavLink> </NavLink>
)
} }
} }

30
UI/src/components/servers/ServerLanding.js
View file

@ -6,23 +6,24 @@ import discordLogo from '../../pages/images/discord-logo.svg'
export default class ServerLanding extends Component { export default class ServerLanding extends Component {
state = { state = {
server: null, server: null,
exit: false exit: false,
} }
async componentWillMount () { async componentWillMount() {
console.log(this.props) console.log(this.props)
try { try {
const rsp = await superagent.get(`/api/server/${this.props.match.params.server}/slug`) const rsp = await superagent.get(
`/api/server/${this.props.match.params.server}/slug`
)
this.setState({ server: rsp.body }) this.setState({ server: rsp.body })
} catch (e) { } catch (e) {
this.setState({ exit: true }) this.setState({ exit: true })
return return
} }
} }
render () { render() {
if (this.state.exit === true) { if (this.state.exit === true) {
return <Redirect to="/" /> return <Redirect to="/" />
} }
@ -31,17 +32,28 @@ export default class ServerLanding extends Component {
return null //SPINNER return null //SPINNER
} }
return <div className="landing uk-width-1-1 uk-text-center"> return (
<div className="landing uk-width-1-1 uk-text-center">
<div className="uk-container"> <div className="uk-container">
<section> <section>
<h1>Hey there.</h1> <h1>Hey there.</h1>
<h4>{this.state.server.name} uses Roleypoly to manage self-assignable roles.</h4> <h4>
<h5><span role="img">💖</span></h5> {this.state.server.name} uses Roleypoly to manage self-assignable roles.
</h4>
<h5>
<span role="img">💖</span>
</h5>
</section> </section>
<section> <section>
<Link to={`/oauth/flow?r=${window.location.pathname}`} className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo"/> Sign in with Discord</Link> <Link
to={`/oauth/flow?r=${window.location.pathname}`}
className="uk-button rp-button discord"
>
<img src={discordLogo} className="rp-button-logo" /> Sign in with Discord
</Link>
</section> </section>
</div> </div>
</div> </div>
)
} }
} }

51
UI/src/components/servers/UserCard.js
View file

@ -8,43 +8,62 @@ import './UserCard.sass'
@connect() @connect()
class UserCard extends Component { class UserCard extends Component {
static propTypes = { static propTypes = {
user: ImmutablePropTypes.map user: ImmutablePropTypes.map,
} }
get avatar () { get avatar() {
const { user } = this.props const { user } = this.props
const avatar = user.get('avatar') const avatar = user.get('avatar')
if (avatar === '' || avatar == null) { if (avatar === '' || avatar == null) {
return `https://cdn.discordapp.com/embed/avatars/${Math.ceil(Math.random() * 9999) % 5}.png` return `https://cdn.discordapp.com/embed/avatars/${Math.ceil(Math.random() * 9999) %
5}.png`
} }
return `https://cdn.discordapp.com/avatars/${user.get('id')}/${avatar}.png` return `https://cdn.discordapp.com/avatars/${user.get('id')}/${avatar}.png`
} }
render () { render() {
const { user } = this.props const { user } = this.props
// console.log(this.props) // console.log(this.props)
return <div className='user-card'> return (
<div className='user-card__icon'> <div className="user-card">
<div className="user-card__icon">
<img src={this.avatar} alt={user.get('username')} /> <img src={this.avatar} alt={user.get('username')} />
</div> </div>
<div className='user-card__info'> <div className="user-card__info">
<span className='user-card__info__name'>{user.get('username')}</span><span className='user-card__info__discrim'>#{user.get('discriminator')}</span> <span className="user-card__info__name">{user.get('username')}</span>
<span className="user-card__info__discrim">#{user.get('discriminator')}</span>
</div> </div>
<div className='user-card__actions'> <div className="user-card__actions">
<ul className='uk-iconnav uk-iconnav-vertical'> <ul className="uk-iconnav uk-iconnav-vertical">
<li><a uk-tooltip='' title='Sign out' uk-icon='icon: sign-out' onClick={() => { this.props.dispatch(Actions.userLogout) }} /></li> <li>
{ <a
(this.props.user.isRoot === true) uk-tooltip=""
? <li><NavLink uk-tooltip='' title='Root' uk-icon='icon: bolt' to='/root/' activeClassName='uk-active' /></li> title="Sign out"
: null uk-icon="icon: sign-out"
} onClick={() => {
this.props.dispatch(Actions.userLogout)
}}
/>
</li>
{this.props.user.isRoot === true ? (
<li>
<NavLink
uk-tooltip=""
title="Root"
uk-icon="icon: bolt"
to="/root/"
activeClassName="uk-active"
/>
</li>
) : null}
</ul> </ul>
</div> </div>
</div> </div>
)
} }
} }

36
UI/src/components/servers/index.js
View file

@ -17,13 +17,13 @@ const mapState = ({ servers, user, appState }) => {
return { return {
servers, servers,
user, user,
fade: appState.fade fade: appState.fade,
} }
} }
@connect(mapState) @connect(mapState)
class Servers extends Component { class Servers extends Component {
get defaultPath () { get defaultPath() {
console.log(this.props.servers.toJS()) console.log(this.props.servers.toJS())
const first = this.props.servers.first() const first = this.props.servers.first()
@ -34,21 +34,35 @@ class Servers extends Component {
return 'add' return 'add'
} }
render () { render() {
return <div className="servers"> return (
<Navigation className="servers__nav" servers={this.props.servers} user={this.props.user} /> <div className="servers">
<div className='servers__content'> <Navigation
<Scrollbars className={`fade-element ${(this.props.fade) ? 'fade' : ''}`} autoHeight autoHeightMax='calc(100vh - 80px)'> className="servers__nav"
servers={this.props.servers}
user={this.props.user}
/>
<div className="servers__content">
<Scrollbars
className={`fade-element ${this.props.fade ? 'fade' : ''}`}
autoHeight
autoHeightMax="calc(100vh - 80px)"
>
<Switch> <Switch>
<Route path='/s/add' component={AddServer} exact /> <Route path="/s/add" component={AddServer} exact />
<Route path='/s/:server/edit' component={RoleEditor} /> <Route path="/s/:server/edit" component={RoleEditor} />
<Route path='/s/:server' component={RolePicker} /> <Route path="/s/:server" component={RolePicker} />
<Route path='/s' exact render={() => <Redirect to={`/s/${this.defaultPath}`} />} /> <Route
path="/s"
exact
render={() => <Redirect to={`/s/${this.defaultPath}`} />}
/>
<Route component={Error404} /> <Route component={Error404} />
</Switch> </Switch>
</Scrollbars> </Scrollbars>
</div> </div>
</div> </div>
)
} }
} }

51
UI/src/components/wrapper/index.js
View file

@ -6,35 +6,46 @@ import './wrapper.sass'
import discordLogo from '../../pages/images/discord-logo.svg' import discordLogo from '../../pages/images/discord-logo.svg'
class Wrapper extends Component { class Wrapper extends Component {
render () { render() {
return <div className='wrapper'> return (
<Scrollbars autoHeight autoHeightMax='calc(100vh + 2px)'> <div className="wrapper">
<div className='wrapper__background' /> <Scrollbars autoHeight autoHeightMax="calc(100vh + 2px)">
<div className='wrapper__container'> <div className="wrapper__background" />
<nav uk-navbar='' className='uk-navbar-transparent wrapper__nav'> <div className="wrapper__container">
<div className='uk-navbar-left'> <nav uk-navbar="" className="uk-navbar-transparent wrapper__nav">
<div className="uk-navbar-left">
<Link to="/"> <Link to="/">
<Logotype style={{ height: '2rem' }} className='wrapper__logotype' /> <Logotype style={{ height: '2rem' }} className="wrapper__logotype" />
</Link> </Link>
</div> </div>
<div className='uk-navbar-right'> <div className="uk-navbar-right">
<ul className='uk-navbar-nav'> <ul className="uk-navbar-nav">
<li><div className='wrapper__nav__button'> <li>
<a href="/oauth/bot/flow" target="_blank" className="uk-button rp-button discord-alt"><img src={discordLogo} className="rp-button-logo" alt=""/> Add Roleypoly</a> <div className="wrapper__nav__button">
</div></li> <a
<li><a href='https://discord.gg/PWQUVsd'>Join the Discord</a></li> href="/oauth/bot/flow"
<li><a href='https://patreon.com/kata'>Patreon</a></li> target="_blank"
className="uk-button rp-button discord-alt"
>
<img src={discordLogo} className="rp-button-logo" alt="" /> Add
Roleypoly
</a>
</div>
</li>
<li>
<a href="https://discord.gg/PWQUVsd">Join the Discord</a>
</li>
<li>
<a href="https://patreon.com/kata">Patreon</a>
</li>
</ul> </ul>
</div> </div>
</nav> </nav>
<main className="wrapper__content"> <main className="wrapper__content">{this.props.children}</main>
{
this.props.children
}
</main>
</div> </div>
</Scrollbars> </Scrollbars>
</div> </div>
)
} }
} }

16
UI/src/index.css
View file

@ -1,19 +1,20 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "source-han-sans-japanese", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: 'source-han-sans-japanese', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.font-sans-serif { .font-sans-serif {
font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
} }
:root { :root {
--c-white: #efefef; --c-white: #efefef;
--c-9: #EBD6D4; --c-9: #ebd6d4;
--c-7: #ab9b9a; --c-7: #ab9b9a;
--c-5: #756867; --c-5: #756867;
--c-3: #5d5352; --c-3: #5d5352;
@ -47,11 +48,16 @@ body {
overflow-y: hidden; overflow-y: hidden;
} }
h1,h2,h3,h4,h5,h6 { h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--c-9); color: var(--c-9);
} }
.uk-navbar-nav>li>a { .uk-navbar-nav > li > a {
color: var(--c-7); color: var(--c-7);
} }

2
UI/src/index.js
View file

@ -2,7 +2,7 @@ import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import './index.css' import './index.css'
import App from './App' import App from './App'
import {unregister} from './registerServiceWorker' import { unregister } from './registerServiceWorker'
ReactDOM.render(<App />, document.getElementById('root')) ReactDOM.render(<App />, document.getElementById('root'))
unregister() unregister()

11
UI/src/pages/Error404.js
View file

@ -1,14 +1,19 @@
import React from 'react' import React from 'react'
import './landing.sass' import './landing.sass'
const Error404 = ({ root = false }) => const Error404 = ({ root = false }) => (
<div className="landing uk-width-1-1 uk-text-center"> <div className="landing uk-width-1-1 uk-text-center">
<div className="uk-container"> <div className="uk-container">
<section> <section>
<h1><span role="img">💔</span> g-gomen nasai</h1> <h1>
<h4>I'm not sure what page you were looking for <span role="img">😢</span></h4> <span role="img">💔</span> g-gomen nasai
</h1>
<h4>
I'm not sure what page you were looking for <span role="img">😢</span>
</h4>
</section> </section>
</div> </div>
</div> </div>
)
export default Error404 export default Error404

9
UI/src/pages/Landing.js
View file

@ -8,7 +8,7 @@ import discordLogo from './images/discord-logo.svg'
import RoleypolyDemo from '../components/demos/roleypoly' import RoleypolyDemo from '../components/demos/roleypoly'
import TypingDemo from '../components/demos/typing' import TypingDemo from '../components/demos/typing'
const Landing = ({ root = false }) => const Landing = ({ root = false }) => (
<div className="landing uk-width-1-1 uk-text-center"> <div className="landing uk-width-1-1 uk-text-center">
<div className="uk-container"> <div className="uk-container">
<section> <section>
@ -16,7 +16,9 @@ const Landing = ({ root = false }) =>
<h4>Ditch bot commands once and for all.</h4> <h4>Ditch bot commands once and for all.</h4>
</section> </section>
<section> <section>
<Link to="/oauth/flow" className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo"/> Sign in with Discord</Link> <Link to="/oauth/flow" className="uk-button rp-button discord">
<img src={discordLogo} className="rp-button-logo" /> Sign in with Discord
</Link>
</section> </section>
<section uk-grid=""> <section uk-grid="">
{/* Typist */} {/* Typist */}
@ -27,9 +29,10 @@ const Landing = ({ root = false }) =>
{/* role side */} {/* role side */}
<div className="uk-width-1-2"> <div className="uk-width-1-2">
<RoleypolyDemo /> <RoleypolyDemo />
<p className="subtext">It's {(new Date()).getUTCFullYear()}. We can do better.</p> <p className="subtext">It's {new Date().getUTCFullYear()}. We can do better.</p>
</div> </div>
</section> </section>
</div> </div>
</div> </div>
)
export default Landing export default Landing

32
UI/src/pages/WhyNoRoles.js
View file

@ -3,17 +3,31 @@ import React, { Fragment } from 'react'
import goodImg from './images/whynoroles-good.png' import goodImg from './images/whynoroles-good.png'
import badImg from './images/whynoroles-bad.png' import badImg from './images/whynoroles-bad.png'
const WhyNoRoles = (props) => { const WhyNoRoles = props => {
return <Fragment> return (
<Fragment>
<h2>Why don't I see any roles in my editor?</h2> <h2>Why don't I see any roles in my editor?</h2>
<p>Roleypoly needs to be a higher role position than other roles in order to assign them to anyone.</p> <p>
<h3 className="pages__bad">Bad <i uk-icon="icon: ban"></i></h3> Roleypoly needs to be a higher role position than other roles in order to assign
<img src={badImg} className="rp-discord" alt="Bad example"/> them to anyone.
<p>In this example, Roleypoly is at the bottom of the list. It can't assign anyone any roles above it.</p> </p>
<h3 className="pages__good">Good <i uk-icon="icon: check"></i></h3> <h3 className="pages__bad">
<img src={goodImg} className="rp-discord" alt="Good example"/> Bad <i uk-icon="icon: ban"></i>
<p>In this example, Roleypoly is above other roles, and will be able to assign them.</p> </h3>
<img src={badImg} className="rp-discord" alt="Bad example" />
<p>
In this example, Roleypoly is at the bottom of the list. It can't assign anyone
any roles above it.
</p>
<h3 className="pages__good">
Good <i uk-icon="icon: check"></i>
</h3>
<img src={goodImg} className="rp-discord" alt="Good example" />
<p>
In this example, Roleypoly is above other roles, and will be able to assign them.
</p>
</Fragment> </Fragment>
)
} }
export default WhyNoRoles export default WhyNoRoles

8
UI/src/pages/index.js
View file

@ -8,9 +8,10 @@ import Error404 from './Error404'
export { default as Landing } from './Landing' export { default as Landing } from './Landing'
export { default as Error404 } from './Error404' export { default as Error404 } from './Error404'
const Pages = (props) => { const Pages = props => {
return <div className="pages"> return (
<Scrollbars autoHeight autoHeightMax='calc(100vh - 80px)'> <div className="pages">
<Scrollbars autoHeight autoHeightMax="calc(100vh - 80px)">
<div className="pages-inner"> <div className="pages-inner">
<Switch> <Switch>
<Route path="/help/why-no-roles" component={WhyNoRoles} /> <Route path="/help/why-no-roles" component={WhyNoRoles} />
@ -20,6 +21,7 @@ const Pages = (props) => {
</div> </div>
</Scrollbars> </Scrollbars>
</div> </div>
)
} }
export default Pages export default Pages

8
UI/src/reducers/index.js
View file

@ -9,7 +9,7 @@ import { routerMiddleware } from 'react-router-redux'
const initialState = { const initialState = {
ready: false, ready: false,
fade: true fade: true,
} }
const appState = (state = initialState, { type, data }) => { const appState = (state = initialState, { type, data }) => {
@ -18,13 +18,13 @@ const appState = (state = initialState, { type, data }) => {
return { return {
...state, ...state,
ready: true, ready: true,
fade: false fade: false,
} }
case Symbol.for('app fade'): case Symbol.for('app fade'):
return { return {
...state, ...state,
fade: data fade: data,
} }
default: default:
@ -39,7 +39,7 @@ const rootReducer = combineReducers({
router: routerMiddleware, router: routerMiddleware,
// roles, // roles,
rolePicker, rolePicker,
roleEditor roleEditor,
}) })
export default rootReducer export default rootReducer

24
UI/src/reducers/role-editor.js
View file

@ -3,14 +3,18 @@ import { Map, OrderedMap, fromJS } from 'immutable'
const initialState = Map({ const initialState = Map({
viewMap: OrderedMap({}), viewMap: OrderedMap({}),
originalSnapshot: OrderedMap({}), originalSnapshot: OrderedMap({}),
hasAvailableRoles: true hasAvailableRoles: true,
}) })
const reducer = (state = initialState, { type, data }) => { const reducer = (state = initialState, { type, data }) => {
switch (type) { switch (type) {
case Symbol.for('re: setup'): case Symbol.for('re: setup'):
const { viewMap, originalSnapshot, ...rest } = data const { viewMap, originalSnapshot, ...rest } = data
return state.merge({ viewMap: OrderedMap(viewMap), originalSnapshot: OrderedMap(originalSnapshot), ...rest }) return state.merge({
viewMap: OrderedMap(viewMap),
originalSnapshot: OrderedMap(originalSnapshot),
...rest,
})
case Symbol.for('re: set category'): case Symbol.for('re: set category'):
return state.setIn(['viewMap', data.id], Map(data)) return state.setIn(['viewMap', data.id], Map(data))
@ -26,7 +30,8 @@ const reducer = (state = initialState, { type, data }) => {
case Symbol.for('re: add role to category'): case Symbol.for('re: add role to category'):
const category = state.getIn(['viewMap', data.id]) const category = state.getIn(['viewMap', data.id])
return state.setIn(['viewMap', data.id], return state.setIn(
['viewMap', data.id],
category category
.set('roles', category.get('roles').add(data.role.get('id'))) .set('roles', category.get('roles').add(data.role.get('id')))
.set('roles_map', category.get('roles_map').add(data.role)) .set('roles_map', category.get('roles_map').add(data.role))
@ -34,10 +39,17 @@ const reducer = (state = initialState, { type, data }) => {
case Symbol.for('re: remove role from category'): case Symbol.for('re: remove role from category'):
const rmCat = state.getIn(['viewMap', data.id]) const rmCat = state.getIn(['viewMap', data.id])
return state.setIn(['viewMap', data.id], return state.setIn(
['viewMap', data.id],
rmCat rmCat
.set('roles', rmCat.get('roles').filterNot(r => r === data.role.get('id'))) .set(
.set('roles_map', rmCat.get('roles_map').filterNot(r => r.get('id') === data.role.get('id'))) 'roles',
rmCat.get('roles').filterNot(r => r === data.role.get('id'))
)
.set(
'roles_map',
rmCat.get('roles_map').filterNot(r => r.get('id') === data.role.get('id'))
)
) )
case Symbol.for('re: reset'): case Symbol.for('re: reset'):

2
UI/src/reducers/role-picker.js
View file

@ -7,7 +7,7 @@ const initialState = Map({
messageBuffer: '', messageBuffer: '',
viewMap: OrderedMap({}), // roles in categories viewMap: OrderedMap({}), // roles in categories
originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected
rolesSelected: Map({}) // Map<role id, bool> -- new roles for diffing rolesSelected: Map({}), // Map<role id, bool> -- new roles for diffing
}) })
export default (state = initialState, { type, data }) => { export default (state = initialState, { type, data }) => {

8
UI/src/reducers/servers.js
View file

@ -4,21 +4,21 @@ const blankServer = Map({
id: '386659935687147521', id: '386659935687147521',
gm: { gm: {
nickname: null, nickname: null,
color: '#cca1a1' color: '#cca1a1',
}, },
message: 'Hey hey!', message: 'Hey hey!',
server: { server: {
id: '386659935687147521', id: '386659935687147521',
name: 'Roleypoly', name: 'Roleypoly',
ownerID: '62601275618889728', ownerID: '62601275618889728',
icon: '4fa0c1063649a739f3fe1a0589aa2c03' icon: '4fa0c1063649a739f3fe1a0589aa2c03',
}, },
roles: Set([]), roles: Set([]),
categories: OrderedMap(), categories: OrderedMap(),
perms: { perms: {
isAdmin: true, isAdmin: true,
canManageRoles: true canManageRoles: true,
} },
}) })
const initialState = OrderedMap({}) const initialState = OrderedMap({})

4
UI/src/reducers/user.js
View file

@ -5,13 +5,13 @@ const initialState = Map({
username: 'あたし', username: 'あたし',
discriminator: '0001', discriminator: '0001',
id: '', id: '',
avatar: null avatar: null,
}) })
export default (state = initialState, { type, data }) => { export default (state = initialState, { type, data }) => {
switch (type) { switch (type) {
case Symbol.for('set user'): case Symbol.for('set user'):
return Map({...data, isLoggedIn: true}) return Map({ ...data, isLoggedIn: true })
case Symbol.for('reset user'): case Symbol.for('reset user'):
return initialState return initialState

46
UI/src/registerServiceWorker.js
View file

@ -16,30 +16,30 @@ const isLocalhost = Boolean(
window.location.hostname.match( window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
) )
); )
export default function register() { export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW. // The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location); const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
if (publicUrl.origin !== window.location.origin) { if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin // Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to // from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
return; return
} }
window.addEventListener('load', () => { window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
if (isLocalhost) { if (isLocalhost) {
// This is running on localhost. Lets check if a service worker still exists or not. // This is running on localhost. Lets check if a service worker still exists or not.
checkValidServiceWorker(swUrl); checkValidServiceWorker(swUrl)
} else { } else {
// Is not local host. Just register service worker // Is not local host. Just register service worker
registerValidSW(swUrl); registerValidSW(swUrl)
} }
}); })
} }
} }
@ -48,7 +48,7 @@ function registerValidSW(swUrl) {
.register(swUrl) .register(swUrl)
.then(registration => { .then(registration => {
registration.onupdatefound = () => { registration.onupdatefound = () => {
const installingWorker = registration.installing; const installingWorker = registration.installing
installingWorker.onstatechange = () => { installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') { if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) { if (navigator.serviceWorker.controller) {
@ -56,20 +56,20 @@ function registerValidSW(swUrl) {
// the fresh content will have been added to the cache. // the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is // It's the perfect time to display a "New content is
// available; please refresh." message in your web app. // available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); console.log('New content is available; please refresh.')
} else { } else {
// At this point, everything has been precached. // At this point, everything has been precached.
// It's the perfect time to display a // It's the perfect time to display a
// "Content is cached for offline use." message. // "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); console.log('Content is cached for offline use.')
}
}
} }
} }
};
};
}) })
.catch(error => { .catch(error => {
console.error('Error during service worker registration:', error); console.error('Error during service worker registration:', error)
}); })
} }
function checkValidServiceWorker(swUrl) { function checkValidServiceWorker(swUrl) {
@ -84,25 +84,23 @@ function checkValidServiceWorker(swUrl) {
// No service worker found. Probably a different app. Reload the page. // No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => { registration.unregister().then(() => {
window.location.reload(); window.location.reload()
}); })
}); })
} else { } else {
// Service worker found. Proceed as normal. // Service worker found. Proceed as normal.
registerValidSW(swUrl); registerValidSW(swUrl)
} }
}) })
.catch(() => { .catch(() => {
console.log( console.log('No internet connection found. App is running in offline mode.')
'No internet connection found. App is running in offline mode.' })
);
});
} }
export function unregister() { export function unregister() {
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then(registration => {
registration.unregister(); registration.unregister()
}); })
} }
} }

48
UI/src/router/index.js
View file

@ -10,46 +10,48 @@ import OauthBotFlow from '../components/oauth-bot-flow'
import Pages, { Landing, Error404 } from '../pages' import Pages, { Landing, Error404 } from '../pages'
import ServerLanding from '../components/servers/ServerLanding' import ServerLanding from '../components/servers/ServerLanding'
const aaa = (props) => (<div>{ JSON.stringify(props) }</div>) const aaa = props => <div>{JSON.stringify(props)}</div>
export default export default
@withRouter @withRouter
@connect(({ appState, user }) => ({ ready: appState.ready, user })) @connect(({ appState, user }) => ({ ready: appState.ready, user }))
class AppRouter extends Component { class AppRouter extends Component {
render () { render() {
const isLoggedIn = this.props.user.get('isLoggedIn') const isLoggedIn = this.props.user.get('isLoggedIn')
if (!this.props.ready) { if (!this.props.ready) {
return null return null
} }
return <Switch> return (
{ (isLoggedIn === true) <Switch>
{isLoggedIn === true ? (
// YES LOGGED IN // YES LOGGED IN
? <Route path='/s' component={Servers} /> <Route path="/s" component={Servers} />
) : (
// NOT LOGGED IN // NOT LOGGED IN
: [<Route path='/s/:server' key={1} component={ServerLanding} />, <Route path='/s' key={2} render={() => <Redirect to="/" />} />] [
<Route path="/s/:server" key={1} component={ServerLanding} />,
} <Route path="/s" key={2} render={() => <Redirect to="/" />} />,
]
)}
{/* GENERAL ROUTES */} {/* GENERAL ROUTES */}
<Route path='/oauth/callback' component={OauthCallback} /> <Route path="/oauth/callback" component={OauthCallback} />
<Route path='/oauth/flow' component={OauthFlow} /> <Route path="/oauth/flow" component={OauthFlow} />
<Route path='/oauth/bot/flow' component={OauthBotFlow} /> <Route path="/oauth/bot/flow" component={OauthBotFlow} />
<Route path="/p/landing" exact component={Landing} /> <Route path="/p/landing" exact component={Landing} />
<Route path='/p' component={Pages} /> <Route path="/p" component={Pages} />
<Route path='/help' component={Pages} /> <Route path="/help" component={Pages} />
<Route exact path='/' render={() => <Route
isLoggedIn exact
? <Redirect to="/s" /> path="/"
: <Landing root={true} /> render={() => (isLoggedIn ? <Redirect to="/s" /> : <Landing root={true} />)}
} /> />
<Route component={Error404} /> <Route component={Error404} />
</Switch> </Switch>
)
} }
} }

3
UI/src/store/configureStore.dev.js
View file

@ -1,4 +1,3 @@
import { createStore, applyMiddleware, compose } from 'redux' import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk' import thunk from 'redux-thunk'
import { createLogger } from 'redux-logger' import { createLogger } from 'redux-logger'
@ -12,7 +11,7 @@ const configureStore = (preloadedState, history) => {
rootReducer, rootReducer,
preloadedState, preloadedState,
compose( compose(
applyMiddleware(thunk, routerMiddleware(history), createLogger()), applyMiddleware(thunk, routerMiddleware(history), createLogger())
// DevTools.instrument() // DevTools.instrument()
) )
) )

5
UI/src/store/configureStore.prod.js
View file

@ -5,10 +5,11 @@ import thunk from 'redux-thunk'
// import api from '../middleware/api' // import api from '../middleware/api'
import rootReducer from '../reducers' import rootReducer from '../reducers'
const configureStore = (preloadedState, history) => createStore( const configureStore = (preloadedState, history) =>
createStore(
rootReducer, rootReducer,
preloadedState, preloadedState,
applyMiddleware(thunk, routerMiddleware(history)) applyMiddleware(thunk, routerMiddleware(history))
) )
export default configureStore export default configureStore

2
UI/src/utils.js
View file

@ -1 +1 @@
export const msgToReal = (msg) => (msg.replace(/</g, '&lt;').replace(/\n/g, '<br />')) export const msgToReal = msg => msg.replace(/</g, '&lt;').replace(/\n/g, '<br />')

5
UI/yarn.lock
View file

@ -8458,6 +8458,11 @@ preserve@^0.2.0:
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks= integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
prettier@^1.19.1:
version "1.19.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
pretty-bytes@^4.0.2: pretty-bytes@^4.0.2:
version "4.0.2" version "4.0.2"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"