Working on user preferences for dashboards

migrations/20240630150936_dashboard_preferences.sql

@@ -0,0 +1,10 @@
+ALTER TABLE users ADD COLUMN `reset_inputs_on_create` BOOLEAN NOT NULL DEFAULT 0;
+ALTER TABLE users ADD COLUMN `use_browser_timezone` BOOLEAN NOT NULL DEFAULT 1;
+ALTER TABLE users ADD COLUMN `dashboard_color_scheme` ENUM('system', 'light', 'dark') NOT NULL DEFAULT 'system';
+
+ALTER TABLE users DROP COLUMN `language`;
+ALTER TABLE users DROP COLUMN `patreon`;
+ALTER TABLE users DROP COLUMN `name`;
+
+ALTER TABLE users DROP PRIMARY KEY, ADD PRIMARY KEY (`user`);
+ALTER TABLE users RENAME COLUMN `user` TO `id`;

reminder-dashboard/src/api.ts

@@ -4,6 +4,7 @@ type UserInfo = {
     name: string;
     patreon: boolean;
     timezone: string | null;
+    reset_inputs_on_create: boolean;
 };
 
 export type GuildInfo = {

reminder-dashboard/src/components/App/index.tsx

@@ -12,12 +12,17 @@ import { GuildTodos } from "../Guild/GuildTodos";
 export function App() {
     const queryClient = new QueryClient();
 
+    let scheme = "light";
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        scheme = "dark";
+    }
+
     return (
         <TimezoneProvider>
             <FlashProvider>
                 <QueryClientProvider client={queryClient}>
                     <Router base={"/dashboard"}>
-                        <div class="columns is-gapless dashboard-frame">
+                        <div class={`columns is-gapless dashboard-frame scheme-${scheme}`}>
                             <Sidebar />
                             <div class="column is-main-content">
                                 <div style={{ margin: "0 12px 12px 12px" }}>

reminder-dashboard/src/components/Reminder/ButtonRow/CreateButtonRow.tsx

@@ -1,21 +1,28 @@
 import { LoadTemplate } from "../LoadTemplate";
 import { useReminder } from "../ReminderContext";
-import { useMutation, useQueryClient } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
-import { postGuildReminder, postGuildTemplate, postUserReminder } from "../../../api";
+import {
+    fetchUserInfo,
+    postGuildReminder,
+    postGuildTemplate,
+    postUserReminder,
+} from "../../../api";
 import { useState } from "preact/hooks";
 import { ICON_FLASH_TIME } from "../../../consts";
 import { useFlash } from "../../App/FlashContext";
 import { useGuild } from "../../App/useGuild";
+import { defaultReminder } from "../CreateReminder";
 
 export const CreateButtonRow = () => {
     const guild = useGuild();
-    const [reminder] = useReminder();
+    const [reminder, setReminder] = useReminder();
 
     const [recentlyCreated, setRecentlyCreated] = useState(false);
     const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
 
     const flash = useFlash();
     const queryClient = useQueryClient();
+    const { data: userInfo } = useQuery({ ...fetchUserInfo() });
     const mutation = useMutation({
         ...(guild ? postGuildReminder(guild) : postUserReminder()),
         onError: (error) => {
@@ -44,6 +51,9 @@ export const CreateButtonRow = () => {
                         queryKey: ["USER_REMINDERS"],
                     });
                 }
+                if (userInfo.reset_inputs_on_create) {
+                    setReminder(() => defaultReminder());
+                }
                 setRecentlyCreated(true);
                 setTimeout(() => {
                     setRecentlyCreated(false);

reminder-dashboard/src/components/Reminder/CreateReminder.tsx

@@ -11,7 +11,7 @@ import "./styles.scss";
 import { useGuild } from "../App/useGuild";
 import { DEFAULT_COLOR } from "./Embed";
 
-function defaultReminder(): Reminder {
+export function defaultReminder(): Reminder {
     return {
         attachment: null,
         attachment_name: null,

src/models/user_data.rs

@@ -6,9 +6,7 @@ use sqlx::MySqlPool;
 use crate::consts::LOCAL_TIMEZONE;
 
 pub struct UserData {
-    pub id: u32,
+    pub id: u64,
-    #[allow(dead_code)]
-    pub user: u64,
     pub dm_channel: u32,
     pub timezone: String,
     pub allowed_dm: bool,
@@ -23,7 +21,9 @@ impl UserData {
 
         match sqlx::query!(
             "
-            SELECT IFNULL(timezone, 'UTC') AS timezone FROM users WHERE user = ?
+            SELECT IFNULL(timezone, 'UTC') AS timezone
+            FROM users
+            WHERE id = ?
             ",
             user_id
         )
@@ -48,7 +48,9 @@ impl UserData {
         match sqlx::query_as_unchecked!(
             Self,
             "
-SELECT id, user, dm_channel, IF(timezone IS NULL, ?, timezone) AS timezone, allowed_dm FROM users WHERE user = ?
+            SELECT id, dm_channel, IF(timezone IS NULL, ?, timezone) AS timezone, allowed_dm
+            FROM users
+            WHERE id = ?
             ",
             *LOCAL_TIMEZONE,
             user_id.get()
@@ -64,7 +66,8 @@ SELECT id, user, dm_channel, IF(timezone IS NULL, ?, timezone) AS timezone, allo
 
                 sqlx::query!(
                     "
-INSERT IGNORE INTO channels (channel) VALUES (?)
+                    INSERT IGNORE INTO channels (channel)
+                    VALUES (?)
                     ",
                     dm_channel.id.get()
                 )
@@ -73,7 +76,8 @@ INSERT IGNORE INTO channels (channel) VALUES (?)
 
                 sqlx::query!(
                     "
-INSERT INTO users (name, user, dm_channel, timezone) VALUES ('', ?, (SELECT id FROM channels WHERE channel = ?), ?)
+                    INSERT INTO users (id, dm_channel, timezone)
+                    VALUES (?, (SELECT id FROM channels WHERE channel = ?), ?)
                     ",
                     user_id.get(),
                     dm_channel.id.get(),
@@ -85,7 +89,9 @@ INSERT INTO users (name, user, dm_channel, timezone) VALUES ('', ?, (SELECT id F
                 Ok(sqlx::query_as_unchecked!(
                     Self,
                     "
-SELECT id, user, dm_channel, timezone, allowed_dm FROM users WHERE user = ?
+                    SELECT id, dm_channel, timezone, allowed_dm
+                    FROM users
+                    WHERE id = ?
                     ",
                     user_id.get()
                 )
@@ -104,7 +110,9 @@ SELECT id, user, dm_channel, timezone, allowed_dm FROM users WHERE user = ?
     pub async fn commit_changes(&self, pool: &MySqlPool) {
         sqlx::query!(
             "
-UPDATE users SET timezone = ?, allowed_dm = ? WHERE id = ?
+            UPDATE users
+            SET timezone = ?, allowed_dm = ?
+            WHERE id = ?
             ",
             self.timezone,
             self.allowed_dm,

src/web/routes/dashboard/api/user/mod.rs

@@ -21,16 +21,29 @@ use serenity::{
 };
 use sqlx::{MySql, Pool};
 
+use crate::web::guards::transaction::Transaction;
+
+#[derive(Serialize)]
+struct UserPreferences {
+    timezone: String,
+    use_browser_timezone: bool,
+    dashboard_color_scheme: String,
+    reset_inputs_on_create: bool,
+}
+
 #[derive(Serialize)]
 struct UserInfo {
     name: String,
     patreon: bool,
-    timezone: Option<String>,
+    preferences: UserPreferences,
 }
 
 #[derive(Deserialize)]
-pub struct UpdateUser {
+pub struct UpdateUserPreferences {
-    timezone: String,
+    timezone: Option<String>,
+    use_browser_timezone: Option<bool>,
+    dashboard_color_scheme: Option<String>,
+    reset_inputs_on_create: Option<bool>,
 }
 
 #[get("/api/user")]
@@ -39,7 +52,16 @@ pub async fn get_user_info(
     ctx: &State<Context>,
     pool: &State<Pool<MySql>>,
 ) -> JsonValue {
-    offline!(json!(UserInfo { name: "Discord".to_string(), patreon: true, timezone: None }));
+    offline!(json!(UserInfo {
+        name: "Discord".to_string(),
+        patreon: true,
+        preferences: UserPreferences {
+            timezone: "UTC".to_string(),
+            use_browser_timezone: false,
+            dashboard_color_scheme: "system".to_string(),
+            reset_inputs_on_create: false,
+        }
+    }));
 
     if let Some(user_id) =
         cookies.get_private("userid").map(|u| u.value().parse::<u64>().ok()).flatten()
@@ -48,8 +70,16 @@ pub async fn get_user_info(
             .member(&ctx.inner(), user_id)
             .await;
 
-        let timezone = sqlx::query!(
+        let prefs = sqlx::query!(
-            "SELECT IFNULL(timezone, 'UTC') AS timezone FROM users WHERE user = ?",
+            "
+            SELECT
+                IFNULL(timezone, 'UTC') AS timezone,
+                use_browser_timezone,
+                dashboard_color_scheme,
+                reset_inputs_on_create
+            FROM users
+            WHERE id = ?
+            ",
             user_id
         )
         .fetch_one(pool.inner())
@@ -65,7 +95,12 @@ pub async fn get_user_info(
                     .roles
                     .contains(&RoleId::new(env::var("PATREON_ROLE_ID").unwrap().parse().unwrap()))
             }),
-            timezone,
+            preferences: UserPreferences {
+                timezone: prefs.timezone,
+                use_browser_timezone: prefs.use_browser_timezone,
+                dashboard_color_scheme: prefs.dashboard_color_scheme,
+                reset_inputs_on_create: prefs.reset_inputs_on_create,
+            },
         };
 
         json!(user_info)
@@ -74,28 +109,55 @@ pub async fn get_user_info(
     }
 }
 
-#[patch("/api/user", data = "<user>")]
+#[patch("/api/user", data = "<preferences>")]
 pub async fn update_user_info(
     cookies: &CookieJar<'_>,
-    user: Json<UpdateUser>,
+    preferences: Json<UpdateUserPreferences>,
-    pool: &State<Pool<MySql>>,
+    mut transaction: Transaction<'_>,
 ) -> JsonValue {
     if let Some(user_id) =
         cookies.get_private("userid").map(|u| u.value().parse::<u64>().ok()).flatten()
     {
-        if user.timezone.parse::<Tz>().is_ok() {
+        if let Some(timezone) = &preferences.timezone {
+            if timezone.parse::<Tz>().is_ok() {
                 let _ = sqlx::query!(
-                "UPDATE users SET timezone = ? WHERE user = ?",
+                    "
-                user.timezone,
+                    UPDATE users
+                    SET timezone = ?
+                    WHERE id = ?
+                    ",
+                    timezone,
                     user_id,
                 )
-            .execute(pool.inner())
+                .execute(transaction.executor())
                 .await;
-
-            json!({})
             } else {
-            json!({"error": "Timezone not recognized"})
+                return json!({"error": "Timezone not recognised"});
             }
+        }
+
+        if let Some(dashboard_color_scheme) = &preferences.dashboard_color_scheme {
+            if vec!["system", "light", "dark"].contains(dashboard_color_scheme) {
+                let _ = sqlx::query!(
+                    "
+                    UPDATE users
+                    SET dashboard_color_scheme = ?
+                    WHERE id = ?
+                    ",
+                    dashboard_color_scheme,
+                    user_id,
+                )
+                .execute(transaction.executor())
+                .await;
+            } else {
+                return json!({"error": "Color scheme not recognised"});
+            }
+        }
+
+        // todo handle other two options
+
+        transaction.commit().await;
+        json!({})
     } else {
         json!({"error": "Not authorized"})
     }

templates/dashboard.html.tera

@@ -1,389 +0,0 @@
-<!DOCTYPE html>
-<html lang="EN">
-<head>
-    <script src="/static/js/reporter.js" type="application/javascript"></script>
-
-    <meta name="description" content="The most powerful Discord Reminders Bot">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta charset="UTF-8">
-    <meta name="yandex-verification" content="bb77b8681eb64a90"/>
-    <meta name="google-site-verification" content="7h7UVTeEe0AOzHiH3cFtsqMULYGN-zCZdMT_YCkW1Ho"/>
-    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *; font-src fonts.gstatic.com 'self'"> -->
-
-    <!-- favicon -->
-    <link rel="apple-touch-icon" sizes="180x180"
-          href="/static/favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32"
-          href="/static/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16"
-          href="/static/favicon/favicon-16x16.png">
-    <link rel="manifest" href="/static/favicon/site.webmanifest">
-    <meta name="msapplication-TileColor" content="#da532c">
-    <meta name="theme-color" content="#ffffff">
-
-    <title>Reminder Bot | Dashboard</title>
-
-    <!-- styles -->
-    <link rel="stylesheet" href="/static/css/bulma.min.css">
-    <link rel="stylesheet" href="/static/css/fa.css">
-    <link rel="stylesheet" href="/static/css/font.css">
-    <link rel="stylesheet" href="/static/css/style.css?v{{ version }}">
-    <link rel="stylesheet" href="/static/css/dtsel.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.css" integrity="sha512-GnwBnXd+ZGO9CdP343MUr0jCcJXCr++JVtQRnllexRW2IDq4Zvrh/McTQjooAKnSUbXZ7wamp7AQSweTnfMVoA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-
-    <script src="/static/js/luxon.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.min.js" integrity="sha512-KJYWC7RKz/Abtsu1QXd7VJ1IJua7P7GTpl3IKUqfa21Otg2opvRYmkui/CXBC6qeDYCNlQZ7c+7JfDXnKdILUA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-</head>
-<body>
-<nav class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar" role="navigation"
-     aria-label="main navigation">
-    <div class="navbar-brand">
-        <a class="navbar-item" href="/">
-            <figure class="image">
-                <img width="28px" height="28px" src="/static/img/logo_nobg.webp" alt="Reminder Bot Logo">
-            </figure>
-        </a>
-
-        <p class="navbar-item pageTitle">
-        </p>
-
-        <a role="button" class="dashboard-burger navbar-burger is-right" aria-label="menu" aria-expanded="false"
-           data-target="mobileSidebar">
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-        </a>
-    </div>
-</nav>
-
-<div id="loader" class="is-hidden hero is-fullheight">
-    <div class="hero-body">
-        <div class="container has-text-centered">
-            <p class="title">
-                <i class="fas fa-cog fa-spin"></i>
-            </p>
-            <p class="subtitle">
-                <strong>Loading...</strong>
-            </p>
-        </div>
-    </div>
-</div>
-
-<!-- dead image used to check which other images are dead -->
-<img src="" id="dead">
-
-<div class="notification is-danger flash-message" id="errors">
-    <span class="icon"><i class="far fa-exclamation-circle"></i></span> <span class="error-message"></span>
-</div>
-
-<div class="notification is-success flash-message" id="success">
-    <span class="icon"><i class="far fa-check"></i></span> <span class="success-message"></span>
-</div>
-
-<div class="modal" id="addImageModal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-        <header class="modal-card-head">
-            <label class="modal-card-title" for="urlInput">Enter Image URL</label>
-            <button class="delete close-modal" aria-label="close"></button>
-        </header>
-        <section class="modal-card-body">
-            <input class="input" id="urlInput" placeholder="Image URL...">
-        </section>
-        <footer class="modal-card-foot">
-            <button class="button is-success" id="setImgUrl">Save</button>
-            <button class="button close-modal">Cancel</button>
-        </footer>
-    </div>
-    <button class="modal-close is-large close-modal" aria-label="close"></button>
-</div>
-
-<div class="modal" id="pickColorModal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-        <header class="modal-card-head">
-            <label class="modal-card-title" for="colorInput">Select Color</label>
-            <button class="delete close-modal" aria-label="close"></button>
-        </header>
-        <section class="modal-card-body">
-            <div class="colorpicker-container">
-                <div id="colorpicker"></div>
-            </div>
-            <input class="input" id="colorInput">
-        </section>
-        <footer class="modal-card-foot">
-            <button class="button is-success">Save</button>
-            <button class="button close-modal">Cancel</button>
-        </footer>
-    </div>
-    <button class="modal-close is-large close-modal" aria-label="close"></button>
-</div>
-
-<div class="modal" id="chooseTimezoneModal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-        <header class="modal-card-head">
-            <label class="modal-card-title" for="urlInput">Update Timezone <a href="/help/timezone"><span><i class="fa fa-question-circle"></i></span></a></label>
-            <button class="delete close-modal" aria-label="close"></button>
-        </header>
-        <section class="modal-card-body">
-            <p>
-                Your configured timezone is: <strong><span class="set-timezone">%browsertimezone%</span></strong> (<span class="set-time">HH:mm</span>)
-                <br>
-                <br>
-                Your browser timezone is: <strong><span class="browser-timezone">%browsertimezone%</span></strong> (<span class="browser-time">HH:mm</span>)
-                <br>
-                Your bot timezone is: <strong><span class="bot-timezone">%bottimezone%</span></strong> (<span class="bot-time">HH:mm</span>)
-            </p>
-            <br>
-            <div class="has-text-centered">
-                <button class="button is-success close-modal" id="set-browser-timezone">Use Browser Timezone</button>
-                <button class="button is-link close-modal" id="set-bot-timezone">Use Bot Timezone</button>
-                <button class="button is-warning close-modal" id="update-bot-timezone">Set Bot Timezone</button>
-            </div>
-        </section>
-    </div>
-    <button class="modal-close is-large close-modal" aria-label="close"></button>
-</div>
-
-<div class="modal" id="chooseTemplateModal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-        <header class="modal-card-head">
-            <label class="modal-card-title" for="urlInput">Load Template</label>
-            <button class="delete close-modal" aria-label="close"></button>
-        </header>
-        <section class="modal-card-body">
-            <div class="control has-icons-left">
-                <div class="select is-fullwidth">
-                    <select id="templateSelect">
-                    </select>
-                </div>
-                <div class="icon is-small is-left">
-                    <i class="fas fa-file-spreadsheet"></i>
-                </div>
-            </div>
-            <br>
-            <div class="has-text-centered">
-                <button class="button is-success close-modal" id="load-template">Load Template</button>
-                <button class="button is-danger" id="delete-template">Delete</button>
-            </div>
-        </section>
-    </div>
-    <button class="modal-close is-large close-modal" aria-label="close"></button>
-</div>
-
-<div class="modal" id="dataManagerModal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-        <header class="modal-card-head">
-            <label class="modal-card-title" for="urlInput">Import/Export Manager <a href="/help/iemanager"><span><i class="fa fa-question-circle"></i></span></a></label>
-            <button class="delete close-modal" aria-label="close"></button>
-        </header>
-        <section class="modal-card-body">
-            <div class="control">
-                <div class="field">
-                    <label>
-                        <input type="radio" class="default-width" name="exportSelect" value="reminders" checked>
-                        Reminders
-                    </label>
-                </div>
-            </div>
-            <br>
-            <div class="has-text-centered">
-                <div style="color: red">
-                    Please first read the <a href="/help/iemanager">support page</a>
-                </div>
-                <button class="button is-success is-outlined" id="import-data">Import Data</button>
-                <button class="button is-success" id="export-data">Export Data</button>
-            </div>
-            <a id="downloader" download="export.csv" class="is-hidden"></a>
-            <input id="uploader" type="file" hidden></input>
-        </section>
-    </div>
-    <button class="modal-close is-large close-modal" aria-label="close"></button>
-</div>
-
-<div class="modal" id="deleteReminderModal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-        <header class="modal-card-head">
-            <label class="modal-card-title">Delete Reminder</label>
-            <button class="delete close-modal" aria-label="close"></button>
-        </header>
-        <section class="modal-card-body">
-            <p>
-                This reminder will be permanently deleted. Are you sure?
-            </p>
-            <br>
-            <div class="has-text-centered">
-                <button class="button is-danger" id="delete-reminder-confirm">Delete</button>
-                <button class="button is-light close-modal">Cancel</button>
-            </div>
-        </section>
-    </div>
-    <button class="modal-close is-large close-modal" aria-label="close"></button>
-</div>
-
-<div class="columns is-gapless dashboard-frame">
-    <div class="column is-2 is-sidebar-menu dashboard-sidebar is-hidden-touch">
-        <a href="/">
-            <div class="brand">
-                <img src="/static/img/logo_nobg.webp" alt="Reminder bot logo"
-                     width="52px" height="52px"
-                     class="dashboard-brand">
-            </div>
-        </a>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 160">
-            <g transform="scale(1, 0.5)">
-                <path fill="#8fb677" fill-opacity="1"
-                      d="M0,192L60,170.7C120,149,240,107,360,96C480,85,600,107,720,138.7C840,171,960,213,1080,197.3C1200,181,1320,107,1380,69.3L1440,32L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path>
-            </g>
-        </svg>
-        <aside class="menu">
-            <p class="menu-label">
-                Servers
-            </p>
-            <ul class="menu-list guildList">
-
-            </ul>
-            <div class="aside-footer">
-                <p class="menu-label">
-                    Options
-                </p>
-                <ul class="menu-list">
-                    <li>
-                        <a class="show-modal" data-modal="dataManagerModal">
-                            <span class="icon"><i class="fas fa-exchange"></i></span> Import/Export
-                        </a>
-                        <a class="show-modal" data-modal="chooseTimezoneModal">
-                            <span class="icon"><i class="fas fa-map-marked"></i></span> Timezone
-                        </a>
-                        <a href="/login/discord/logout">
-                            <span class="icon"><i class="fas fa-sign-out"></i></span> Log out
-                        </a>
-                        <a href="https://discord.jellywx.com" class="feedback">
-                            <span class="icon"><i class="fab fa-discord"></i></span> Give feedback
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </aside>
-    </div>
-
-    <div class="dashboard-sidebar mobile-sidebar is-hidden-desktop" id="mobileSidebar">
-        <a href="/">
-            <div class="brand">
-                <img src="/static/img/logo_nobg.webp" alt="Reminder bot logo"
-                     class="dashboard-brand">
-            </div>
-        </a>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 160">
-            <g transform="scale(1, 0.5)">
-                <path fill="#8fb677" fill-opacity="1"
-                      d="M0,192L60,170.7C120,149,240,107,360,96C480,85,600,107,720,138.7C840,171,960,213,1080,197.3C1200,181,1320,107,1380,69.3L1440,32L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path>
-            </g>
-        </svg>
-        <aside class="menu">
-            <p class="menu-label">
-                Servers
-            </p>
-            <ul class="menu-list guildList">
-
-            </ul>
-            <div class="aside-footer">
-                <p class="menu-label">
-                    Settings
-                </p>
-                <ul class="menu-list">
-                    <li>
-                        <a class="show-modal" data-modal="dataManagerModal">
-                            <span class="icon"><i class="fas fa-exchange"></i></span> Import/Export
-                        </a>
-                        <a class="show-modal" data-modal="chooseTimezoneModal">
-                            <span class="icon"><i class="fas fa-map-marked"></i></span> Timezone
-                        </a>
-                        <a href="/login/discord/logout">
-                            <span class="icon"><i class="fas fa-sign-out"></i></span> Log out
-                        </a>
-                        <a href="https://discord.jellywx.com/" class="feedback">
-                            <span class="icon"><i class="fab fa-discord"></i></span> Give feedback
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </aside>
-    </div>
-
-    <!-- main content -->
-    <div class="column is-main-content">
-        <p class="title pageTitle"></p>
-        <section id="welcome">
-            <div class="has-text-centered">
-                <p class="title">Welcome!</p>
-                <p class="subtitle is-hidden-touch">Select an option from the side to get started</p>
-                <p class="subtitle is-hidden-desktop">Press the <span class="icon"><i class="fal fa-bars"></i></span> to get started</p>
-            </div>
-        </section>
-        <section id="reminders" class="is-hidden">
-            {% include "reminder_dashboard/reminder_dashboard" %}
-        </section>
-        <section id="reminder-errors" class="is-hidden">
-            {% include "reminder_dashboard/reminder_errors" %}
-        </section>
-        <section id="guild-error" class="is-hidden">
-            {% include "reminder_dashboard/guild_error" %}
-        </section>
-        <section id="user-error" class="is-hidden">
-            {% include "reminder_dashboard/user_error" %}
-        </section>
-    </div>
-    <!-- /main content -->
-</div>
-
-<template id="embedFieldTemplate">
-    <div data-inlined="1" class="embed-field-box">
-        <div class="is-flex">
-            <label>
-                <span class="is-sr-only">Field Title</span>
-                <textarea class="discord-field-title field-input message-input autoresize"
-                          placeholder="Field Title..." rows="1"
-                          maxlength="256" name="embed_field_title[]"></textarea>
-            </label>
-            <button class="button is-small inline-btn">
-                <span class="is-sr-only">Toggle field inline</span><i class="fas fa-arrows-h"></i>
-            </button>
-        </div>
-
-        <label>
-            <span class="is-sr-only">Field Value</span>
-            <textarea
-                    class="discord-field-value field-input message-input autoresize"
-                    placeholder="Field Value..."
-                    maxlength="1024" name="embed_field_value[]"
-                    rows="1"></textarea>
-        </label>
-    </div>
-</template>
-
-<template id="guildListEntry">
-    <li>
-        <a class="switch-pane" data-pane="guild">
-            <span class="icon"><i class="fas fa-map-pin"></i></span> <span class="guild-name">%guildname%</span>
-        </a>
-    </li>
-</template>
-
-<template id="guildReminder">
-    {% include "reminder_dashboard/guild_reminder" %}
-</template>
-
-<script src="/static/js/iro.js"></script>
-<script src="/static/js/dtsel.js"></script>
-
-<script src="/static/js/interval.js?v{{ version }}"></script>
-<script src="/static/js/timezone.js?v{{ version }}" defer></script>
-<script src="/static/js/main.js?v{{ version }}" defer></script>
-
-</body>
-</html>

templates/reminder_dashboard/guild_error.html.tera

@@ -1,17 +0,0 @@
-<div class="hero is-fullheight">
-    <div class="hero-body">
-        <div class="container has-text-centered">
-            <p class="title">
-                We couldn't get this server's data
-            </p>
-            <p class="subtitle">
-                Please check Reminder Bot is in the server, and has correct permissions.
-            </p>
-            <a class="button is-size-4 is-rounded is-success" href="https://invite.reminder-bot.com">
-                <p class="is-size-4">
-                    <span>Add to Server</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
-                </p>
-            </a>
-        </div>
-    </div>
-</div>

templates/reminder_dashboard/guild_reminder.html.tera

@@ -1,269 +0,0 @@
-<div class="reminderContent {% if creating %}creator{% endif %}">
-    <div class="columns is-mobile column reminder-topbar">
-        {% if not creating %}
-        <div class="invert-collapses channel-bar">
-            #channel
-        </div>
-        {% endif %}
-        <div class="name-bar">
-            <div class="field">
-                <div class="control">
-                    <label class="label sr-only">Reminder Name</label>
-                    <input class="input" type="text" name="name" placeholder="Reminder Name" maxlength="100">
-                </div>
-            </div>
-        </div>
-        <div class="hide-button-bar">
-            <button class="button hide-box">
-                <span class="is-sr-only">Hide reminder</span><i class="fas fa-chevron-down"></i>
-            </button>
-        </div>
-    </div>
-    <div class="columns reminder-settings">
-        <div class="column discord-frame">
-            <article class="media">
-                <figure class="media-left">
-                    <p class="image is-32x32 customizable">
-                        <a>
-                            <img class="is-rounded avatar" src="/static/img/bg.webp" alt="Image for discord avatar">
-                        </a>
-                    </p>
-                </figure>
-                <div class="media-content">
-                    <div class="content">
-                        <div class="discord-message-header">
-                            <label class="is-sr-only">Username Override</label>
-                            <input class="discord-username message-input" placeholder="Username Override"
-                                   maxlength="32" name="username">
-                        </div>
-                        <label class="is-sr-only">Message</label>
-                        <textarea class="message-input autoresize discord-content"
-                                  placeholder="Message Content..."
-                                  maxlength="2000" name="content" rows="1"></textarea>
-
-                        <div class="discord-embed">
-                            <div class="embed-body">
-                                <button class="change-color button is-rounded is-small">
-                                    <span class="is-sr-only">Choose embed color</span><i class="fas fa-eye-dropper"></i>
-                                </button>
-                                <div class="a">
-                                    <div class="embed-author-box">
-                                        <div class="a">
-                                            <p class="image is-24x24 customizable">
-                                                <a>
-                                                    <img class="is-rounded embed_author_url" src="/static/img/bg.webp" alt="Image for embed author">
-                                                </a>
-                                            </p>
-                                        </div>
-
-                                        <div class="b">
-                                            <label class="is-sr-only" for="embedAuthor">Embed Author</label>
-                                            <textarea
-                                                    class="discord-embed-author message-input autoresize"
-                                                    placeholder="Embed Author..." rows="1" maxlength="256"
-                                                    name="embed_author"></textarea>
-                                        </div>
-                                    </div>
-
-                                    <label class="is-sr-only" for="embedTitle">Embed Title</label>
-                                    <textarea class="discord-title message-input  autoresize"
-                                              placeholder="Embed Title..."
-                                              maxlength="256" rows="1"
-                                              name="embed_title"></textarea>
-                                    <br>
-                                    <label class="is-sr-only" for="embedDescription">Embed Description</label>
-                                    <textarea class="discord-description message-input autoresize "
-                                              placeholder="Embed Description..."
-                                              maxlength="4096" name="embed_description"
-                                              rows="1"></textarea>
-                                    <br>
-
-                                    <div class="embed-multifield-box">
-                                        <div data-inlined="1" class="embed-field-box">
-                                            <label class="is-sr-only" for="embedFieldTitle">Field Title</label>
-                                            <div class="is-flex">
-                                                <textarea class="discord-field-title field-input message-input autoresize"
-                                                          placeholder="Field Title..." rows="1"
-                                                          maxlength="256" name="embed_field_title[]"></textarea>
-                                                <button class="button is-small inline-btn">
-                                                    <span class="is-sr-only">Toggle field inline</span><i class="fas fa-arrows-h"></i>
-                                                </button>
-                                            </div>
-
-                                            <label class="is-sr-only" for="embedFieldValue">Field Value</label>
-                                            <textarea
-                                                    class="discord-field-value field-input message-input autoresize "
-                                                    placeholder="Field Value..."
-                                                    maxlength="1024" name="embed_field_value[]"
-                                                    rows="1"></textarea>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="b">
-                                    <p class="image thumbnail customizable">
-                                        <a>
-                                            <img class="embed_thumbnail_url" src="/static/img/bg.webp" alt="Square thumbnail embedded image">
-                                        </a>
-                                    </p>
-                                </div>
-                            </div>
-
-                            <p class="image is-400x300 customizable">
-                                <a>
-                                    <img class="embed_image_url" src="/static/img/bg.webp" alt="Large embedded image">
-                                </a>
-                            </p>
-
-                            <div class="embed-footer-box">
-                                <p class="image is-20x20 customizable">
-                                    <a>
-                                        <img class="is-rounded embed_footer_url" src="/static/img/bg.webp" alt="Footer profile-like image">
-                                    </a>
-                                </p>
-
-                                <label class="is-sr-only" for="embedFooter">Embed Footer text</label>
-                                <textarea class="discord-embed-footer message-input autoresize "
-                                          placeholder="Embed Footer..."
-                                          maxlength="2048" name="embed_footer" rows="1"></textarea>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </article>
-        </div>
-        <div class="column settings">
-            <div class="field channel-field">
-                <div class="collapses">
-                    <label class="label" for="channelOption">Channel*</label>
-                </div>
-                <div class="control has-icons-left">
-                    <div class="select">
-                        <select name="channel" class="channel-selector">
-                        </select>
-                    </div>
-                    <div class="icon is-small is-left">
-                        <i class="fas fa-hashtag"></i>
-                    </div>
-                </div>
-            </div>
-
-            <div class="field">
-                <div class="control">
-                    <label class="label collapses">
-                        Time*
-                        <input class="input prefill-now" type="datetime-local" step="1" name="time">
-                    </label>
-                </div>
-            </div>
-
-            <div class="collapses split-controls">
-                <div>
-                    <div class="patreon-only">
-                        <div class="patreon-invert foreground">
-                            Intervals available on <a href="https://patreon.com/jellywx">Patreon</a> or <a href="https://gitea.jellypro.xyz/jude/reminder-bot">self-hosting</a>
-                        </div>
-                        <div class="field">
-                            <label class="label">Interval <a class="foreground" href="/help/intervals"><i class="fas fa-question-circle"></i></a></label>
-                            <div class="control intervalSelector">
-                                <div class="input interval-group">
-                                    <div class="interval-group-left">
-                                        <span class="no-break">
-                                            <label>
-                                                <span class="is-sr-only">Interval months</span>
-                                                <input class="w2" type="text" pattern="\d*" name="interval_months" maxlength="2" placeholder=""> <span class="half-rem"></span> months, <span class="half-rem"></span>
-                                            </label>
-                                            <label>
-                                                <span class="is-sr-only">Interval days</span>
-                                                <input class="w3" type="text" pattern="\d*" name="interval_days" maxlength="4" placeholder=""> <span class="half-rem"></span> days, <span class="half-rem"></span>
-                                            </label>
-                                        </span>
-                                        <span class="no-break">
-                                            <label>
-                                                <span class="is-sr-only">Interval hours</span>
-                                                <input class="w2" type="text" pattern="\d*" name="interval_hours" maxlength="2" placeholder="HH">:
-                                            </label>
-                                            <label>
-                                                <span class="is-sr-only">Interval minutes</span>
-                                                <input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
-                                            </label>
-                                            <label>
-                                                <span class="is-sr-only">Interval seconds</span>
-                                                <input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
-                                            </label>
-                                        </span>
-                                    </div>
-                                    <button class="clear"><span class="is-sr-only">Clear interval</span><span class="icon"><i class="fas fa-trash"></i></span></button>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="field">
-                            <div class="control">
-                                <label class="label">
-                                    Expiration
-                                    <input class="input" type="datetime-local" step="1" name="expiration">
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="columns is-mobile tts-row">
-                        <div class="column has-text-centered">
-                            <div class="is-boxed">
-                                <label class="label">Enable TTS <input type="checkbox" name="tts"></label>
-                            </div>
-                        </div>
-                        <div class="column has-text-centered">
-                            <div class="file is-small is-boxed">
-                                <label class="file-label">
-                                    <input class="file-input" type="file" name="attachment">
-                                    <span class="file-cta">
-                                        <span class="file-label">
-                                            Add Attachment
-                                        </span>
-                                        <span class="file-icon">
-                                            <i class="fas fa-upload"></i>
-                                        </span>
-                                    </span>
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    {% if creating %}
-        <div class="button-row">
-            <div class="button-row-reminder">
-                <button class="button is-success" id="createReminder">
-                    <span>Create Reminder</span> <span class="icon"><i class="fas fa-sparkles"></i></span>
-                </button>
-            </div>
-            <div class="button-row-template">
-                <div>
-                    <button class="button is-success is-outlined" id="createTemplate">
-                        <span>Create Template</span> <span class="icon"><i class="fas fa-file-spreadsheet"></i></span>
-                    </button>
-                </div>
-                <div>
-                    <button class="button is-outlined show-modal is-pulled-right" data-modal="chooseTemplateModal">
-                        Load Template
-                    </button>
-                </div>
-            </div>
-        </div>
-    {% else %}
-        <div class="button-row-edit">
-            <button class="button is-success save-btn">
-                <span>Save</span> <span class="icon"><i class="fas fa-save"></i></span>
-            </button>
-            <button class="button is-warning disable-enable">
-            </button>
-            <button class="button is-danger delete-reminder">
-                Delete
-            </button>
-        </div>
-    {% endif %}
-</div>

templates/reminder_dashboard/reminder_dashboard.html.tera

@@ -1,52 +0,0 @@
-<div class="create-reminder">
-    <strong>Create Reminder</strong>
-    <div id="reminderCreator">
-        {% set creating = true %}
-        {% include "reminder_dashboard/guild_reminder" %}
-        {% set creating = false %}
-    </div>
-    <br>
-
-    <div class="field">
-        <div class="columns is-mobile">
-            <div class="column">
-                <strong>Reminders</strong>
-            </div>
-            <div class="column is-narrow">
-                <div class="control has-icons-left">
-                    <div class="select is-small">
-                        <select id="orderBy">
-                            <option value="time" selected>Time</option>
-                            <option value="name">Name</option>
-                            <option value="channel">Channel</option>
-                        </select>
-                    </div>
-                    <div class="icon is-small is-left">
-                        <i class="fas fa-sort-amount-down"></i>
-                    </div>
-                </div>
-            </div>
-            <div class="column is-narrow">
-                <div class="control has-icons-left">
-                    <div class="select is-small">
-                        <select id="expandAll">
-                            <option value="" selected></option>
-                            <option value="expand">Expand All</option>
-                            <option value="collapse">Collapse All</option>
-                        </select>
-                    </div>
-                    <div class="icon is-small is-left">
-                        <i class="fas fa-expand-arrows"></i>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div id="guildReminders">
-
-    </div>
-</div>
-
-<script src="/static/js/sort.js"></script>
-<script src="/static/js/expand.js"></script>

templates/reminder_dashboard/reminder_errors.html.tera

@@ -1,5 +0,0 @@
-<div>
-
-</div>
-
-<!--<script src="/static/js/reminder_errors.js"></script>-->

templates/reminder_dashboard/user_error.html.tera

@@ -1,12 +0,0 @@
-<div class="hero is-fullheight">
-    <div class="hero-body">
-        <div class="container has-text-centered">
-            <p class="title">
-                You do not have permissions for this server
-            </p>
-            <p class="subtitle">
-                Ask an admin to grant you the "Manage Messages" permission.
-            </p>
-        </div>
-    </div>
-</div>