pierreandreis / g4m3r-dashboard

g4m3r-dashboard's Issues

Sidebar menu items not clickable on mobile

This bug is a critical one since many users will use the dashboard on mobile

Embed Creator

• gives options for all embed parameters (like Nadeko embed builder)
• gives preview how the embed will look like
• allows to save the output of the embed into the respective item that called the embed builder
• allows to open existing embeds (e.g. from welcome messages) to edit (or at least replace) the embeds

Error message way too low when scrolling

Sidebar Doesnt Hide On Ipads

for width<1000 the sidebar should disappear

https://media.discordapp.net/attachments/416884846611398667/504705067040112665/Schermata_2018-10-24_alle_19.17.21.png

Guild Selector

On the sidebar, there should be an option to navigate between different guilds

Width on Iphone5 resolution (<= 320px) is a problem

Snackbar Layout on mobile

The snackbar on mobile hides the most bottom setting so you can’t edit that one anymore.

My proposal would be to position the snackbar at the top of the screen in full width so it can’t overlap with a setting.

Investigate if mobX is really needed

MobX is currently only being used for authentication, everything else is being hold either on Apollo cache or local react components.

Is it necessary? I recommend moving authentication to apollo state management and getting rid of it. This will also allow us to update to react-scripts@2

Component: Notification Alert

When a user takes an action on the website some of those actions can take some time to finish doing on the server. We need a way to create a small notification alert that users can see their action is finished on the server. Although the notification should be easily viewable it should not be distracting the users experience.

Component: Select Component Needs A Create New Option

One of the things that people love about g4m3r is how we automate some actions for them. For example, to create a Mute module is very complicated process.

• create a new role
• take away all permissions from this role
• Take away all permissions from all channels on that server and even new channels that are made

That takes a lot of effort for a user to do so we need a way for a user to click a button that creates a new role on the server and sets it. I can do all this with an eval script but we need to find a way to add a button on it.

Select component is not visible on Mobile

On mobile if you try to select a permission on the events category the drop down show ups but you can’t scroll down to see all selections. Cause when you click the drop down goes away

Launch To Do List

Components Needed

• Role selector: Select a role from a guild. Must also be able to be used to allow selecting multiple roles for a setting.

• Channel Selector: Select a channel from a guild.

• Permission Selection: Dropdown to select a permission from clientStorage.

• Color Picker: Allow users to pick a color.

• Input Validator: Check if an integer.

• Input Validator: Check if a string and also option to check if using embed format.

Moderation

Mod Logs

• Mod log status toggle
• mod log channel selector
• public log status toggle
• public log channel selector

Mod Log Colors

• warn
• kick
• ban
• mute
• unmute
• unban?
• nick?
• role?

Server Logs

• status toggle
• main channel selector
• Individual event toggles
• indvidiual event channel selectors

Default Mod Values

• Max warnings
• Max inactive time
• roles to ignore
• inactivity role
• max warnings role

Mod Roles

Mute Roles

• text muted role selector
• voice muted role selector
• option to make a new role for each if none exists
• option to delete the role from setting if selected

Mod Mails

• status toggle
• permission to reply selector
• max mails per guild
• max mails per user

Auto Mod

• auto assign main role selector
• Capital spam toggle
• capital spam percentage
• naughty word filter status toggle
• naughty words add/remove
• Unique role sets

Welcome/Goodbye

• welcome channel status toggle
• welcome dm status toggle
• welcome messages
• goodbye channel status toggle
• goodbye dm status toggle
• goodbye messages

Role Messages

• add role messages
• remove role messages

Verification

• verify status toggle
• verify category toggle
• verify first message
• verify role selector
• reset verification settings

Basic

• prefix
• add/remove Admins

General

• default timezone
• menu closing time
• 24h time format toggle
• allow afk responses permission selector
• track server analytics toggle

Notifications

• delete nuke responses toggle
• delete notifications toggle
• delete notification time

Feedback

• idea status toggle
• idea channel selector
• idea color selector
• idea thumbs up emoji selector
• idea thumbs down emojji selector
• bug status toggle
• bug channel selector
• bug color selector
• bug thumbs up emoji selector
• bug thumbs down emoji selector

Leveling

• create level
• delete level
• edit level name, xp, rewards
• edit points per commands
• server in channel level up notification status toggle
• global in channel level up notification status toggle
• server dm level up notification status toggle

Events

• creation permission selector
• add members permission selector
• use default status toggle
• type selector
• duration
• attendees
• platform
• game
• ad channel selector
• ad all events status toggle
• default reminder time

Tags

• tag creation permission selector
• tag usage permission selector
• tag trigger deletion

Stories

• stories creation permission selector
• stories usage permission selector
• stories trigger deletion

Change favicon

Our current favicon is the react default favicon. We should change for g4m3r logo, and also include open graph headers

Help Content is too repetitive

HelpModal's content should be reworked to avoid copy&pasting the same jsx code 100s time.

Strings will then be organized in 1 file per help category (e.g. General) to be imported into the General page.

Urgent: Sidebar broken on long pages

Reset A Value

There are some values that can not be reset. There should be a small button next to this where you can reset the value back to default value or in this case removing the role. There is no way to remove the role.

Errors Should Dissappear Once Revert Is Clicked

Color picker

lets the user choose his color visually (e.g. for embed creator component or for moderation colors)

Reduce space on serverlist screen

we could reduce some of the empty space above the logo

Change text on editor snackbar

Change text on snackbar to be more user friendly. Currently we have example texts which isn't helpful at all

Images on each box

images to make the UI to look less clinical

Editor should highlight inputs that have changes

Currently there is no way to know which inputs have changes staged on them. We should highlight in a way that it is easy to identify which input was changed by the user, and when saving they will be sent to the backend.

Reload of serverlist via refresh button / icon

at the moment one needs to logoff and login again to refresh the serverlist after adding a new server

Component: Text Area for large text is needed

A component is necessary to show large amounts of text nicely.

As an example, this can technically go up to 2048 characters.

Infinite Loading

There is a bug that makes the Chrome browser infinitely stuck on loading with no chance to login.

EDIT: Also happening on Safari now once cache was cleared.

Expected behavior
It should login and show servers when discord authorizes it

Device related website behaviour (e.g. Sidebar)

I tested the current Sidebar on its behaviour on several devices and I come to the conclusion that some parts do not make sense only related to window size (xxxx pixels).

When a mobile is turned to horizontal mode I would as example still hide the sidebar since it just doesnt work on mobile to have it there permanently (check the following screenshots for the reason)

I found this package that could help us in terms of device detection.

https://www.npmjs.com/package/react-device-detect

Iphone 6/7/8 horizontal mode

Iphone 6/7/8 Plus horizontal mode

Iphone X horizontal mode

Pixel 2 horizonal mode

Google Analytics

It would be good to know what is happening inside the dashboard

Arrow on Select does not open the dropdown anymore

Channel/Role Selector Component Locked In With Choice

Once you have selected a channel even by accident, you can no longer change that channel to another channel unless you refresh the page. This is fine for a v1 but this does need a proper solution that allows users to be able to change channels easily.

Time picker

a component that lets the user pick a number and a format (e.g. 2 and days, or 10 and minutes) as input for the input fields related to time values

Input Mask doesn't mask placeholder

Placeholder should also be masked

Sentry

Sentry should provide us with error tracking features

[polish] have small "info" icons that open modals

modals can show further information to explain consequences / preliminary stuff:

• with gifs
• images
• embedded videos
• text

Refresh button should show feedback

On serverlist component, refresh button should show some feedback that it was pressed, and it is current refreshing the content.

Otherwise users will just click tons of times without knowing it is refreshing

Change default branch to dev on github

Make similar changes as we have on the bot repo.

Commands / Permission Page

There is already a commands page, currently commented out in the router.js, where all the permission regarding the commands can be set. To be able to have the commands page working properly we need the following:

Data Logic

1. Get all current command settings from bot (already fetched anyway) and merge those with the default command settings (to be able to show all commands - also already done on the api)

2. Reflect changes in the command permissions (enable / disable, deletion trigger on / off, exceptions for channels / roles)

3. Remove commands from array that are the default, and save final commands array to the database (current settings will be overwritten as the whole array will be overwritten)

Component dependencies

• #35 is needed for the exceptions per command

Editor List / table

• will be used for Admins, Moderation Roles, Levels, Tags, Stories
• needs variable amount of columns and column types
• column types can be image, text, checkbox, button
• columns should have properties like "read only" or "mutable" or "trigger for action"

Validation changes

• Change validation function to object with type methods

const validation = {

number: () => result,
string: () => result,

};

• also only return null on NO error and string on error

• change input to not run logic but to receive validate prop
  <Editor.Input validate={Validation.numbers(0, 10)} />

Default Server Logo Necessary

Missing features

Missing

• Admins (connected to List component) Post launch
• Moderation Roles (connected to List component) Post launch
• Link filter (Status, whitelisted roles, channels, users) Post launch
• Unique Role Sets (connected to Set component) Post launch
• Role Messages (Role add, Role Remove) (connected to list component) Post launch

Uncompleted

• Naughty Words themselves (only toggle implemented) Post launch
• Moderation -> Mod Log Colors Post launch
• Welcome / Goodbye messages (only toggles implemented) Post launch
• Verification Message input (connected to Embed creator component) Post launch
• Event default settings (type, platform) Post launch

Proposal for settings structure

General

Basics

• Prefix
• Timezone
• Menu Closing Time
• Notifications Deletion Toggle + Time
• Enable Analytics
• 24 Hour Time Format
• set server logo (image selection from browser)

Feedback

• All feedback settings as currently, but split idea and bug in separate boxes

Announcement

• announce message (embed or normal) inlcuding pinging multiple roles on a certain channel

Event Settings

• as currently implemented but just replaced

---

Permissions

Admins

• Admin list (also with explanation what admins are allowed)

Moderators

• Moderation Roles list (also with explanation what mods are allowed)

Commands

• commands list

Special permissions

• Allow AFK in the server
• permission to add new subscriptions (twitch, yt, mixer)

---

Moderation

Internal Logging

Public Logging

Mod Mails

Mute Module

Server Logging

Welcome & Goodbye System

---

XP & Leveling

Basics

• enable / disable
• Levels list (add / edit / remove) where you define xp needed, rewards, prizes
• Have level presets for different "seasons"
• Monitor current "season"
• Actions for leveling season (add / remove xp to user / role), reset "season"

---

Tags / Stories

• all tags / stories as implemented currently
• tag / story trigger deletion
• later: tag / stories as list to be edited / added / deleted

---

Verification System

• all current verification settings
• later: verification steps incl (embed) messages + todos

---

Role related Settings

Basics

• role on join

Self-Roles

• list to maintain selfroles for users / mods (switchable)

Unique Role Sets

• create / edit / remove Unique Role sets

Reaction Roles

• create / edit / remove reaction roles (incl. messages, emojis, roles)

Role Messages

• role add
• role remove

---

Subscriptions

Twitch

• add / remove streamers and define announcement channel, roles, texts with variables to be shown on go live / go offline message per streamer

Youtube

• add / remove streamers and define announcement channel, roles, texts with variables to be shown on go live / go offline message per streamer

Mixer

• add / remove streamers and define announcement channel, roles, texts with variables to be shown on go live / go offline message per streamer

---

Shortcuts

• add / edit / remove shortcuts for the bot

---

Emojis

• add / edit / remove custom emojis per server that are registered with the bot and can be used in tags, stories, embeds, welcome / goodbye, role messages, etc.

---

Giveaways

• create new giveaways (incl. announcement message, recurring reminder message, channel for the messages, prize(s), time period)
• monitor running giveaways (amount of participations, button for selection winner, button for cancel, button for communcation or reminder messages)

---

VIP settings

(only show if user is vip OR show information about becoming vip as advertisement)

• current vip settings

Run Script On Action(Click/Save)

Just had a server activate the verification system on the website but it didnt run the verification script on the bot so the system was not enabled leading to a bunch of confusion.

One very important thing we are going to need on the dashboard is a way to run a script on the bot. I have created an IPCPiece called broadcastEval that will run a script on all shards. The script will run on all shards and will just return null if the guildId does not match.

IPCPiece will take two arguments, the guildId and type. The type will be a string indicating the name of the script to run on the bot.

this.client.ipcPieces.get('broadcastEval').run({ data: { payload: { guildId: 'xxx', type: 'createServerLogs' } } })

Ideally, the server logs will have 2 buttons that will do the following:

1. Enable or disable the logs. Turns the feature on or off. By default on will do Advanced Logging(it is more popular choice).
2. Advanced/Basic Logs button: Advanced will create multiple channels like #role-logs, #member-logs, #mod-logs, etc... and basic will just have one #server-logs.

There are a lot of settings that when toggled must run scripts on the server. For example, setting/creating mute role system, verification system etc... This is a very important feature and I would say this should be a top priority issue.

Note: If possible it would be very useful to also pass in the user id of the user that ran this script for purposes of logging. We can log which user conducted these actions.

Align Switches To Left

Currently we have a ton of boolean values that just get toggled for settings. Having each one in a separate box is a bit overwhelming and the box is so empty. Setting the {width=100} makes it look squished so feels wrong.

Merging all the toggles on a page into one box will make it look really nice in my opinion but we need to change the buttons to be aligned to the left and the text on the right so we never have to worry about text length breaking the button

Bot Developer/Mod Loads Any Server

There should be a way for a bot dev or a bot mod to be able to override the Admin authorization and access any servers settings. For example, when our mods are providing setup support to other VIP servers they don't need to tell them to go to x setting and do this on x page instead they can backdoor in and change the setting as needed.

Trusted By Logos On Front

One of the things I would really like to see is a Trusted By section where we can promote like our best servers that trust us.

Example:

Trusted By:

Vainglory 92K+ member
Arena of Valor 34K+ members

And if they are part of the premium enterprise package we can include their discord invite links so if someone clicks on their logo they automatically join that server using OAuth.

Component: Multiple Key Words

A simple component is needed that allows a user to see all the saved "keywords" and also an easy way to add or remove words. For example, i can use this for blacklisted words on a server or i can use this to have users type in all the IGN's of their guild members and easily add or remove them.

https://media.discordapp.net/attachments/257944245569191936/505914171104428063/Screen_Shot_2018-10-27_at_9.21.14_PM.png

EDIT: This would be nice to also be done with Select as well. For example, for our link filter a user can add multiple roles, or channels or users to be whitelisted. In that case they could just select to add stuff and press the x to remove.