2.2.2

fix image file path bug and add deletion of image file entity

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,68 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+# ******** NOTE ********
+
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ next ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ next ]
+  schedule:
+    - cron: '25 2 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

README.md

@@ -1,14 +1,38 @@
-## ![](https://raw.githubusercontent.com/ZiplineProject/zipline/next/public/zipline.png)
+<p align="center"><img src="https://raw.githubusercontent.com/ZiplineProject/zipline/next/public/zipline_small.png"/></p>
 
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/29a3d02f0df447acadd721d93229d072)](https://app.codacy.com/gh/ZiplineProject/zipline?utm_source=github.com&utm_medium=referral&utm_content=ZiplineProject/zipline&utm_campaign=Badge_Grade)
+![Version](https://img.shields.io/github/package-json/v/dicedtomatoreal/zipline)
+![LICENCE](https://img.shields.io/github/license/dicedtomatoreal/zipline)
+[![Discord](https://img.shields.io/discord/729771078196527176)](https://discord.gg/AtTSecwqeV)
+![Stars](https://img.shields.io/github/stars/dicedtomatoreal/zipline)
+![GitHub repo size](https://img.shields.io/github/repo-size/dicedtomatoreal/zipline)
+![GitHub last commit (branch)](https://img.shields.io/github/last-commit/dicedtomatoreal/zipline/next)
+<br>
+![David](https://img.shields.io/david/dicedtomatoreal/zipline)
+![David](https://img.shields.io/david/dev/dicedtomatoreal/zipline)
+![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/dicedtomatoreal/zipline/react)
+![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/dicedtomatoreal/zipline/next)
+![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/dicedtomatoreal/zipline/fastify)
 
-# ZiplineNext
-Speed & reliable
+# Zipline
+The best and only **React + Next.js** ShareX / File Uploader you would ever want.
 
+# Comparison
+Wondering how Zipline compares to other popular uploaders? We have done some benchmarking on other popular upload servers, see how Zipline compares.
+
+| Uploader | Average ms (3 batches/1.5k files) |
+|-|-|
+| **[Zipline](https://github.com/dicedtomatoreal/zipline)** | **61 ms** |
+| [ShareX-Upload-Server](https://github.com/TannerReynolds/ShareX-Upload-Server) | 86 ms |
+
+*Note: there were 3 batches of 1.5k requests, the average ms of each was averaged again*<br>
+*Note 2: results will vary because its very dependent on the server, location, and your internet (these tests were run on the same machine with local dbs)*
+
+# Features
 - Configurable
 - Fast (API)
 - Built with Next.js & React
-- Support for multible database types (mongo soon)
+- Support for **multible database types** (*literally the only one that supports multiple dbs*, mongo soon)
+
+# Installing
+[See how to install here](https://zipline.diced.wtf/docs/)
 
-# Documentation
-You can view current documentation [here](https://zipline.diced.wtf/)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zipline-next",
-  "version": "2.1.0",
+  "version": "2.2.2",
   "private": true,
   "dependencies": {
     "@dicedtomato/colors": "^1.0.3",
@@ -23,6 +23,7 @@
     "fastify-typeorm-plugin": "^2.1.2",
     "figlet": "^1.5.0",
     "inquirer": "^7.3.3",
+    "ioredis": "^4.19.2",
     "material-ui-dropzone": "^3.5.0",
     "next": "^9.5.4",
     "pg": "^8.4.1",
@@ -47,10 +48,12 @@
   "devDependencies": {
     "@types/bcrypt": "^3.0.0",
     "@types/crypto-js": "^3.1.47",
+    "@types/ioredis": "^4.17.7",
     "@types/mongodb": "^3.5.27",
     "@types/node": "^14.11.2",
     "@types/react": "^16.9.49",
     "@types/react-redux": "^7.1.9",
+    "@types/semver": "^7.3.4",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.4.0",
     "eslint": "^7.10.0",
@@ -60,4 +63,4 @@
     "ts-node": "^9.0.0",
     "typescript": "^4.0.3"
   }
-}
+}

src/components/UI.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
 import AppBar from '@material-ui/core/AppBar';
+import Box from '@material-ui/core/Box';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import Drawer from '@material-ui/core/Drawer';
@@ -31,11 +32,13 @@ import FileCopyIcon from '@material-ui/icons/FileCopy';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import PublishIcon from '@material-ui/icons/Publish';
 import RotateLeftIcon from '@material-ui/icons/RotateLeft';
+import Divider from '@material-ui/core/Divider';
 import copy from 'copy-to-clipboard';
 import { LOGOUT, UPDATE_USER } from '../reducer';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
 import { useRouter } from 'next/router';
 import { useDispatch } from 'react-redux';
+import { store } from '../store';
 
 const drawerWidth = 240;
 
@@ -53,13 +56,13 @@ const useStyles = makeStyles(theme => ({
   },
   appBar: {
     display: 'flex',
-    backgroundColor: '#000',
-    color: '#fff',
+    backgroundColor: theme.palette.type === 'dark' ? '#000' : '#fff',
+    color: theme.palette.type !== 'dark' ? '#000' : '#fff',
     [theme.breakpoints.up('sm')]: {
       width: 'calc(100%)',
       marginLeft: drawerWidth
     },
-    borderBottom: '1px solid #1f1f1f'
+    borderBottom: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0'
   },
   menuButton: {
     marginRight: theme.spacing(2),
@@ -84,9 +87,18 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+const NoFocusMenuItem = withStyles(theme => ({
+  root: {
+    '&:hover': {
+      backgroundColor: theme.palette.type === 'dark' ? '#000' : '#f7f7f7'
+    }
+  }
+}))(MenuItem);
+
 export default function UI({ children }) {
   const classes = useStyles();
   const theme = useTheme();
+  const state = store.getState();
   const router = useRouter();
   const dispatch = useDispatch();
   const [mobileOpen, setMobileOpen] = useState(false);
@@ -161,16 +173,19 @@ export default function UI({ children }) {
             <MenuIcon />
           </IconButton>
           <Typography variant='h6'>Zipline</Typography>
-          <IconButton
-            aria-label='account of current user'
-            aria-controls='menu-appbar'
-            aria-haspopup='true'
-            onClick={event => setAnchorEl(event.currentTarget)}
-            color='inherit'
-            className={classes.rightButton}
-          >
-            <AccountCircleIcon className={classes.rightButton} />
-          </IconButton>
+          <Box className={classes.rightButton}>
+            <IconButton
+              aria-label='account of current user'
+              aria-controls='menu-appbar'
+              aria-haspopup='true'
+              onClick={event => setAnchorEl(event.currentTarget)}
+              color='inherit'
+              className={classes.rightButton}
+            >
+              <AccountCircleIcon className={classes.rightButton} />
+            </IconButton>
+          </Box>
+
           <Menu
             id='menu-appbar'
             anchorEl={anchorEl}
@@ -186,6 +201,12 @@ export default function UI({ children }) {
             open={open}
             onClose={() => setAnchorEl(null)}
           >
+            <NoFocusMenuItem>
+              <Typography variant='h6'>
+                {state.user.username}
+              </Typography>
+            </NoFocusMenuItem>
+            <Divider />
             <Link href='/user/manage'>
               <MenuItem onClick={() => setAnchorEl(null)}>
                 <AccountCircleIcon className={classes.menuIcon} />

src/components/ZiplineTheming.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider } from '@material-ui/core/styles';
+import dark from '../lib/themes/dark';
+import light from '../lib/themes/light';
+
+export default function ZiplineTheming({ Component, pageProps, theme }) {
+  console.log(theme);
+  return (
+    <ThemeProvider theme={theme == 'light' ? light : dark}>
+      <CssBaseline />
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}

src/controllers/ImagesController.ts

@@ -1,3 +1,5 @@
+import { unlinkSync } from 'fs';
+import { join } from 'path';
 import { FastifyReply, FastifyRequest, FastifyInstance } from 'fastify';
 import {
   Controller,
@@ -57,14 +59,24 @@ export class ImagesController {
       id: req.params.id
     });
 
-    Console.logger(Image).info(`image ${image.id} was deleted`);
-    if (this.webhooks.events.includes(WebhookType.DELETE_IMAGE))
-      WebhookHelper.sendWebhook(this.webhooks.upload.content, {
-        image,
-        host: `${config.core.secure ? 'https' : 'http'}://${req.hostname}${config.uploader.route}/`
-      });
+    const dir = config.uploader.directory ? config.uploader.directory : 'uploads';
+    const path = join(dir.charAt(0) == '/' ? dir : join(process.cwd(), dir), image.file);
 
-    return reply.send(image);
+    try {
+      unlinkSync(path);
+
+      Console.logger(Image).info(`image ${image.id} was deleted`);
+      if (this.webhooks.events.includes(WebhookType.DELETE_IMAGE))
+        WebhookHelper.sendWebhook(this.webhooks.upload.content, {
+          image,
+          host: `${config.core.secure ? 'https' : 'http'}://${req.hostname}${config.uploader.route}/`
+        });
+
+      return reply.send(image);
+    } catch (e) {
+      Console.logger(Image).error(`image ${image.id} could not be deleted...`);
+      return reply.status(401).send({ error: 'Could not delete image.' });
+    }
   }
 
   @GET('/recent')

src/controllers/RootController.ts

@@ -42,6 +42,11 @@ export class RootController {
     return first;
   }
 
+  @GET('/theme')
+  async getTheme() {
+    return { theme: config.core.theme || 'dark' };
+  }
+
   @GET('/users')
   async allUsers(req: FastifyRequest, reply: FastifyReply) {
     if (!req.cookies.zipline) throw new Error('Not logged in.');

src/controllers/UserController.ts

@@ -236,9 +236,7 @@ export class UserController {
       this.logger.verbose(
         `attempting to delete ${existing.username} (${existing.id})`
       );
-      await this.users.delete({
-        id: existing.id
-      });
+      await this.users.remove(existing);
 
       this.logger.info(`deleted ${existing.username} (${existing.id})`);
       if (this.webhooks.events.includes(WebhookType.USER_DELETE))

src/index.ts

@@ -11,18 +11,27 @@ import { bootstrap } from 'fastify-decorators';
 import { Console } from './lib/logger';
 import { AddressInfo } from 'net';
 import { magenta, bold, green, reset, blue, red } from '@dicedtomato/colors';
+import Redis from 'ioredis';
 import { Configuration } from './lib/Config';
 import { UserController } from './controllers/UserController';
 import { RootController } from './controllers/RootController';
 import { join } from 'path';
 import { ImagesController } from './controllers/ImagesController';
 import { URLSController } from './controllers/URLSController';
+import { checkVersion } from './lib/Util';
+import { readFileSync } from 'fs';
+import { Image } from './entities/Image';
+import { User } from './entities/User';
+import { Zipline } from './entities/Zipline';
 import { URL } from './entities/URL';
 const dev = process.env.NODE_ENV !== 'production';
 
+(async () => { if (await checkVersion()) Console.logger('Zipline').info('running an outdated version of zipline, please update soon!'); })();
+
 console.log(`
 ${magenta(text('Zipline'))}
 
+Version : ${blue(process.env.npm_package_version || readFileSync(join(process.cwd(), 'package.json'), 'utf8'))}
 GitHub  : ${blue('https://github.com/ZiplineProject/zipline')}
 Issues  : ${blue('https://github.com/ZiplineProject/zipline/issues')}
 Docs    : ${blue('https://zipline.diced.wtf/')}
@@ -39,6 +48,9 @@ if (!config) {
   process.exit(0);
 }
 
+const dir = config.uploader.directory ? config.uploader.directory : 'uploads';
+const path = dir.charAt(0) == '/' ? dir : join(process.cwd(), dir);
+
 const server = fastify({});
 const app = next({
   dev,
@@ -102,7 +114,7 @@ server.register(fastifyMultipart);
 
 server.register(fastifyTypeorm, {
   ...config.database,
-  entities: [dev ? './src/entities/**/*.ts' : './dist/entities/**/*.js'],
+  entities: [Image, URL, User, Zipline],
   synchronize: true,
   logging: false
 });
@@ -121,7 +133,7 @@ server.register(fastifyCookies, {
 });
 
 server.register(fastifyStatic, {
-  root: join(process.cwd(), config.uploader.directory),
+  root: path,
   prefix: config.uploader.route
 });
 
@@ -148,6 +160,7 @@ server.listen({
 });
 
 server.addHook('preHandler', async (req, reply) => {
+
   if (
     config.core.blacklisted_ips &&
     config.core.blacklisted_ips.includes(req.ip)
@@ -155,4 +168,4 @@ server.addHook('preHandler', async (req, reply) => {
     await app.render404(req.raw, reply.raw);
     return (reply.sent = true);
   }
-});
+});

src/lib/Config.ts

@@ -46,6 +46,7 @@ export interface ConfigCore {
   secure?: boolean;
   blacklisted_ips?: string[];
   ratelimiter?: ConfigCoreRateLimiter;
+  theme?: 'dark' | 'light';
 }
 
 export interface ConfigWebhooks {

src/lib/Util.ts

@@ -2,7 +2,10 @@ import aes from 'crypto-js/aes';
 import { compareSync, hashSync } from 'bcrypt';
 import { Configuration } from './Config';
 import { Connection } from 'typeorm';
+import { compare } from 'semver';
 import { Zipline } from '../entities/Zipline';
+import { readFileSync } from 'fs';
+import { join } from 'path';
 
 const config = Configuration.readConfig();
 
@@ -44,3 +47,15 @@ export async function getFirst(orm: Connection): Promise<boolean> {
   if (!d) d = await zipline.save(new Zipline());
   return d.first;
 }
+
+export async function checkVersion(): Promise<boolean> {
+  const res = await fetch('https://raw.githubusercontent.com/dicedtomatoreal/zipline/next/package.json');
+  if (!res.ok) return true;
+
+  const latestVersion = (await res.json()).version;
+  const currentVersion = process.env.npm_package_version || readFileSync(join(process.cwd(), 'package.json'), 'utf8');
+
+  const compared = compare(currentVersion, latestVersion);
+
+  return compared == 0 || compared == 1 ? false : true;
+}

src/lib/logger/Console.ts

@@ -9,6 +9,7 @@ declare global {
   }
 }
 
+
 if (!global.logr) global.logr = { formatter: null };
 
 export enum ConsoleLevel {

src/lib/themes/light.ts

@@ -0,0 +1,38 @@
+import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+
+const lightTheme = createMuiTheme({
+  palette: {
+    type: 'light',
+    primary: {
+      main: '#000000'
+    },
+    secondary: {
+      main: '#4a5bb0'
+    },
+    background: {
+      default: '#fff',
+      paper: '#f7f7f7'
+    }
+  },
+  overrides: {
+    MuiListItem: {
+      root: {
+        '&$selected': {
+          backgroundColor: '#e0e0e0'
+        }
+      }
+    },
+    MuiCard: {
+      root: {
+        backgroundColor: '#fff'
+      }
+    },
+    MuiButton: {
+      root: {
+        margin: '132'
+      }
+    }
+  }
+});
+
+export default lightTheme;

src/pages/_app.tsx

@@ -1,21 +1,26 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { store, persistor } from '../store';
-import theme from '../lib/themes/dark';
+import ZiplineTheming from '../components/ZiplineTheming';
+
 
 function MyApp({ Component, pageProps }) {
+  const [theme, setTheme] = useState<'dark' | 'light'>('dark');
   useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side');
     if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);
-  }, []);
 
+    (async () => {
+      const d = await (await fetch('/api/theme')).json();
+      if (!d.error) setTheme(d.theme);
+    })();
+  }, []);
   return (
-    <ThemeProvider theme={theme}>
+
+    <React.Fragment>
       <Head>
         <title>Zipline</title>
         <meta
@@ -25,12 +30,11 @@ function MyApp({ Component, pageProps }) {
       </Head>
 
       <Provider store={store}>
-        <PersistGate loading={<div>loading</div>} persistor={persistor}>
-          <CssBaseline />
-          <Component {...pageProps} />
+        <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
+          <ZiplineTheming Component={Component} pageProps={pageProps} theme={theme} />
         </PersistGate>
       </Provider>
-    </ThemeProvider>
+    </React.Fragment>
   );
 }
 
@@ -39,4 +43,4 @@ MyApp.propTypes = {
   pageProps: PropTypes.object.isRequired
 };
 
-export default MyApp;
+export default MyApp;

src/pages/_document.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 
 import React from 'react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
@@ -33,7 +34,7 @@ export default class MyDocument extends Document<DocumentProps> {
           </Head>
         ) : null}
         <body>
-          <Main />
+          <Main/>
           <NextScript />
         </body>
       </Html>
@@ -43,17 +44,18 @@ export default class MyDocument extends Document<DocumentProps> {
 
 MyDocument.getInitialProps = async ctx => {
   const sheets = new ServerStyleSheets();
+  const config = Configuration.readConfig();
   const originalRenderPage = ctx.renderPage;
 
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: App => props => sheets.collect(<App {...props} />)
+      enhanceApp: App => props => sheets.collect(<App {...props}/>)
     });
 
   const initialProps = await Document.getInitialProps(ctx);
   return {
     ...initialProps,
-    config: Configuration.readConfig(),
+    config,
     styles: [
       ...React.Children.toArray(initialProps.styles),
       sheets.getStyleElement()

src/pages/dash.tsx

@@ -19,7 +19,7 @@ const useStyles = makeStyles(theme => ({
     margin: '5px'
   },
   padding: {
-    border: '1px solid #1f1f1f',
+    border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0',
     padding: '10px'
   },
   backdrop: {

src/pages/dash/images.tsx

@@ -24,7 +24,7 @@ const useStyles = makeStyles(theme => ({
     margin: '5px'
   },
   padding: {
-    border: '1px solid #1f1f1f',
+    border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0',
     padding: '10px'
   },
   backdrop: {
@@ -136,18 +136,18 @@ export default function Images({ config }) {
                 <Pagination count={chunks.length} onChange={changePage} />
               </>
             ) : (
-                <Grid
-                  container
-                  spacing={0}
-                  direction='column'
-                  alignItems='center'
-                  justify='center'
-                >
-                  <Grid item xs={6} sm={12}>
-                    <AddToPhotosIcon style={{ fontSize: 100 }} />
-                  </Grid>
+              <Grid
+                container
+                spacing={0}
+                direction='column'
+                alignItems='center'
+                justify='center'
+              >
+                <Grid item xs={6} sm={12}>
+                  <AddToPhotosIcon style={{ fontSize: 100 }} />
                 </Grid>
-              )}
+              </Grid>
+            )}
           </Paper>
         ) : null}
         <Popover

src/pages/dash/statistics.tsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
     margin: '5px'
   },
   padding: {
-    border: '1px solid #1f1f1f',
+    border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0',
     padding: '10px'
   },
   backdrop: {
@@ -28,7 +28,7 @@ const useStyles = makeStyles(theme => ({
     color: '#fff'
   },
   tableBorder: {
-    borderColor: '#121212'
+    borderColor: theme.palette.type === 'dark' ? '#1f1f1f' : '#e0e0e0'
   }
 }));
 

src/pages/dash/upload.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
     margin: '5px'
   },
   padding: {
-    border: '1px solid #1f1f1f',
+    border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0',
     padding: '10px'
   },
   backdrop: {

src/pages/dash/urls.tsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => ({
     margin: '5px'
   },
   padding: {
-    border: '1px solid #1f1f1f',
+    border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0',
     padding: '10px'
   },
   backdrop: {

src/pages/dash/users.tsx

@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
     margin: '5px'
   },
   padding: {
-    border: '1px solid #1f1f1f',
+    border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0',
     padding: '10px'
   },
   field: {
@@ -219,7 +219,7 @@ export default function Users() {
                       }
                       title={`${u.username} (${u.id})`}
                       subheader={`${u.administrator ? 'Administrator' : 'User'
-                      }`}
+                        }`}
                     />
                   </Card>
                 </Grid>

src/reducer.ts

@@ -6,6 +6,7 @@ export const LOGOUT = 'LOGOUT';
 export const UPDATE_USER = 'UPDATE_USER';
 export const STOP_LOADING = 'STOP_LOADING';
 export const START_LOADING = 'START_LOADING';
+export const SET_THEME = 'SET_THEME';
 
 export interface State {
   loggedIn: boolean;