spytec / modshark Goto Github PK

As a moderator I want to configure settings for

• App theme
• Whether to be authenticated locally or through a server
• Toggle toolbox functionality
• Change language
• Choose default landing page
• Have toolbox settings (with ability to restore from subreddit)
  • what subreddits go into r/mod's modqueue (multireddit, sub+sub, etc.)
  • what subreddits go into r/mod's unmoderated (multireddit, sub+sub, etc.)
  • use removal reasons for comments

I have a server we can host ModShark on. Just need to set it up for hosting once v0.1 is released.

• Setup production environment
• Create systemd unit file to keep server running
• Setup CloudFlare proxy and domain to point to server
• Start the server and make sure it works with modshark.app

Only applies if the user is using a server.

If a new version is available the user should be notified instantly instead of having to restart the app. This can be done the easiest through WebSockets where we send a message as soon as a new version is available.

Once server is live and running on modshark.app, we need a way to automatically deploy it to the server

I propose we do following:

• Create GitHub Action that runs for new tags in master
• Create SSH key on server
• Make GH Action build, test, and then SSH in to server to deploy it
• Restart server through GH Action SSH

It might not be as straightforward and needs some experimentation

We should make it possible for the user to favorite their subreddits. This should bring them to the top of the list

Maybe replace the current subreddit icon with a star?

This should be two parts

The design of the info of a comment. That is to say it’s content, upvotes, user, and how long ago it was posted, and see user notes

And the moderation actions to it for approving, removing with toolbox, marking as spam, view reports, and other stuff

If the comment is in modqueue: show all actions with the comment

If the comment is in a submission the user is viewing: have a button that shows the actions as a pop up or underneath the comment

We should have a changelog page to tell what has been changed. Best would probably be to use Vuetify timelines.

ModShark needs an icon, preferably a custom one that one can associate with a shark. Most shark icons are scary, maybe go for a goofy hammerhead look?

Whitetip sharks go into small areas to find prey, might be a good fit too

Upon loading for the first time, send a GET request to api/authenticate. If response code is 200 OK, the payload should have the token needed. If response code is 401 Unauthorized, redirect to Login page.

If newly authenticated and client has a new token, send a POST request to api/authenticate with a field token containing the Reddit token. Server should respond with a 204 No content

How submissions should be displayed as.

As a moderator I want to quickly see:

• who posted,
• the amount of upvotes it has,
• how long ago it was posted,
• how many comments it has,
• the type of submission and the content it may link to,
• in what subreddit it was posted in,
• the reports it had if there are any, and
• see toolbox user notes

As a moderator I want to be able to take the following actions:

• Approve
• Remove with toolbox removal reasons
• Mark as spam
• Lock the thread
• Send a modmail asking for second opinion
• Ignore reports

Right now all modmails will display in modmail tab. Including new, and in progress conversations.

We should figure out a way to toggle subreddits in modmail on the fly

This can be a pull to refresh and a button for refreshing. Button can probably be disabled for anything below md to not clutter

Logged in user's view:

• Top sticky toolbar
  • contains hamburger icon for navigation drawer on left if on smaller devices
  • subreddit name
  • if an item from main view is selected, replace hamburger icon with a back button. Be able to go back multiple times. Clicking the selected item in bottom navigation will bring back to that view
• Left-side navigation drawer
  • Logged in user's name and profile picture
  • moderated subreddits + "mod" subreddit for all moderated subreddits (/r/mod)
• Right-side navigation drawer
  • ModShark name, icon and version
  • About button
  • Settings button
• Bottom navigation
  • Contains buttons for Modqueue, Unmoderated, Modmail, More
  • More should bring up a popup from bottom with more buttons, such as Moderation log, AutoModerator config, and Moderators
• Main/Router view:
  • List of items depending on selected bottom navigation and subreddit

TypeScript would be an interesting choice here. Not something neither of us have dabbled in previously from my knowledge so it will be a challenge.

1. Add TSLint (do this first)
2. vue add @vue/typescript
3. Revert tests to .js, follow same suite as Vuetify: Code - .TS, Tests - .JS
4. Fix introduced errors from vue add
5. Fix tests and components to work with TypeScript
6. Create PR for review

Server should store a Reddit token and username in an encrypted cookie.

[GET] api/authenticate

1. If token exists in cookie, return 200 OK and payload object: { token: <token> }
2. If token does not exist in cookie, return 401 Unauthorized with empty payload.

[POST] api/authenticate

1. Payload must contain field token.
2. Store token in cookie under token field.
3. Retrieve userdata and store hashed token with username in database.
4. Return 204 No content

Toolbox allows you to currently see the latest AutoMod action taken on a comment. In alpha versions of toolbox this is a table of recent actions.

We should copy the code from toolbox to display this under removed and filtered content. We need to cache the modlog as well

We should retrieve and cache subreddit toolbox config for the same duration as toolbox caches it. This can be stored in Vuex state under some subreddits_config object

The main question now is: how do we retrieve the data in the simplest and most reliable way?

We might be able to utilize async Vuex getters that fetch the data either from cache or Reddit. But getters might not be able to dispatch actions or commit mutations.. if so we need to do some sort of check somewhere

In commit 326dc9e LoginForm was changed. This did not include changes to the tests.

An about page describing the application, how to report issues, how to report security issues, as well as how to contribute or see source code.

Should also display a list of contributors/maintainers by name, avatar, short bio, and links.

Vue's reactivity is working against us. snoowrap has a "feature" which in this case is a bug, where it would trigger requests when Vue walks over the object for reactivity reasons.

Moving this out of Vuex and Vue into a singleton would help us a lot. Since we do not change the snoowrap instance when it is created having a singleton means we can use it everywhere without moving it around. And we do not need to worry about Vue's reactivity creating requests.

We should add Sentry as our logging platform. To focus on privacy we should make this opt-in through settings rather than opt-out.

For back-end we can add Sentry as well, which wouldn't log anything related to specific users.

• Front-end
• Back-end

Right we utilize SQLite for development purposes, but for production environment we should use PostgreSQL.

This will need some back-end work and local testing to make sure it works as intended.

No testing or linting is being done to PRs atm. Should be easily done with GH Actions

We want modmail functionality. There’s two ways of using modmail right now. I’m not sure if we can support both the old and new modmail.

For new modmail though I have created this feature for snoowrap but it is under code review. Once it’s live we can create a conversation type interface between us mods and the user

Biggest reason for doing this is so that we can load in the settings from both Vue and ANC.

The environment variables moved to .env file should be referenced in the Vuex store so they are included in compilation

When we are getting close to initial alpha release we should document what the project does and how to contribute in a good way.

Right now we are using GitHub issues integrated with ZenHub for issue management.

We get With useBuiltInsoption, required direct setting ofcorejs option outputted to terminal whenever we run tests. It clutters up everything.

Does not seem to break anything, but it should be fixed nonetheless

The main authorization flow should be as follows:
Not authenticated:

1. Client sends GET request to server to api/authenticate.
2. Server checks cookies for token and username.
3. Server responds with 401 Unauthorized.
4. Client redirects to Login page.
5. User clicks Login and becomes authenticated with a token.

Authenticated:

1. Client sends GET request to server to api/authenticate.
2. Server checks cookies for token and username.
3. Server returns 200 OK with an object as payload. Object should have property token which contains the Reddit token.

User has a new token:

1. Client sends POST request with token to server to api/authenticate.
2. Server checks if cookies has token:
   1. If cookie matches:
      1. Returns 204 No Content
   2. If cookie does not match:
      1. Use token to retrieve the username from Reddit.
         1. Should token be invalid clear cookies and, return with 401 Unauthorized.
      2. Store token and username in a cookie.
      3. Returns 204 No Content

For users and posts we should display

• removal reasons,
• user notes,
• ban macros, and
• action history.

This is the primary focus of ModShark and we should have removal reasons and user notes in alpha release.

This requires some insight into PWA and how it works. Whenever the user is without connectivity and cannot load the app we should display a ModShark icon, and name with info about connectivity and a loading circle.

Retrieve user notes and cache it upon loading a specific subreddit. We should cache it for the same period as toolbox itself does

Whenever a user launches a new version of ModShark we should display a popup describing the new features. This can be the latest changelog available or a list of changelogs since they last logged in.

If done without a server we check localStorage ModShark version and compare it with the loaded JS ModShark version. Then we fetch the changelog.

If done with a server, we check with the server what their last reported version and the latest ModShark versino. Then we can compare it with the JavaScript version and either display a new version is available or a list of changelogs

When the app is refreshed, we need show a splash screen whilst we authenticate and setup the relevant objects. This is especially true if the user uses server-orientated system as we need to request, and retrieve the refreshToken from the server.

Splash screen should contain:

1. ModShark icon
2. Text underneath the icon: "Loading"

This is something we should do as soon as we have gotten some pieces of code and tests written which we believe will go into the initial release.

Create two or three GitHub Actions to run unit and e2e tests for front-end and potentially back-end. These should all be separate GitHub actions so we can more clearly see which part is failing.

JS

• Linter
• Unit
• e2e

C#

• Unit

Whenever a change to a setting is made, this should be stored on localStorage as well as sent to the server. localStorage should take precedent but should ultimately kept in sync with server

Bold marks what needs to be in for initial release

Without internet:

• /offline (default) ModShark icon and name with info about connectivity and a loading circle.

Any:

• /about About page
• /settings Settings page. In this we have settings for changing authentication type (server, localstorage), server URL, colour theme.

Not authenticated:

• /login (default) ModShark icon, name, description and Login button. Only visible to not authenticated.

Authenticated

• /r/{subreddit} last selected subreddit from Vuex state. If none was ever selected default to mod
  • /modqueue (default) Contains list of comments and submissions
  • /unmoderated Contains list of unmoderated submissions
  • /modmail Contains a list of modmail threads
    • /{id} List of replies to a thread. Reply button at the bottom of the thread.
  • /moderators List of moderators
  • /submission/{id} Detail of submission and comments below that
    • /comment/{id} Linked comment with context if it is a reply to another comment.
• /u/{user} Shows account age, karma, and buttons for submissions and comments
  • /submitted List of submissions, clicking goes to /r/{subreddit}/submission/{id}
  • /comments List of comments, clicking goes to /r/{subreddit}/submission/{id}comment/{id}