fix user issues + start settings page

Co-Authored-By: Bloxs <[email protected]>

README.md

@@ -1,12 +1,16 @@
 # Events
 
-Events is a simple and easy to use event ticketing system. View the production website on https://events.deno.dev/!
+Events is a simple and easy to use event ticketing system. View the production
+website on https://events.deno.dev/!
 
 ## Contributing
 
 Contribution guide coming soon!
 
 ## Hosting
 
-Events is built with [Deno Deploy](https://deno.com/deploy) support in mind but you should be able to selfhost this anywhere, just copy `.env.example` to `.env` and update the variables.
-If you're selfhosting then KV requires an extra step with either creating a `db` folder for the database to be stored in or setting `DENO_DEPLOYMENT_ID` to anything for it to use the global version.
+Events is built with [Deno Deploy](https://deno.com/deploy) support in mind but
+you should be able to selfhost this anywhere, just copy `.env.example` to `.env`
+and update the variables. If you're selfhosting then KV requires an extra step
+with either creating a `db` folder for the database to be stored in or setting
+`DENO_DEPLOYMENT_ID` to anything for it to use the global version.

components/buttons/toggle.tsx

@@ -1,4 +1,3 @@
-
 // basic switch if we ever need to use it
 export const Switch = ({
   enabled,

components/hooks/fakeFormik/index.tsx

@@ -3,16 +3,6 @@ import { useState } from "preact/hooks";
 import { ComponentChild, JSX } from "preact";
 import * as Yup from "yup";
 
-type Json =
-  | null
-  | string
-  | number
-  | boolean
-  | Array<JSON>
-  | {
-      [prop: string]: Json;
-    };
-
 interface FormProps extends JSX.HTMLAttributes<HTMLFormElement> {
   children: ComponentChild;
 }

components/layout/navbar.tsx

@@ -1,7 +1,7 @@
-import { UserPartial } from "@/utils/db/kv.ts";
+import { User } from "@/utils/db/kv.ts";
 import NavbarDropDown from "../../islands/components/pieces/navDropDown.tsx";
 
-const Navbar = ({ user }: { user: UserPartial | undefined }) => {
+const Navbar = ({ user }: { user: User | undefined }) => {
   const loggedIn = true;
 
   return (

deno.jsonc

@@ -2,13 +2,16 @@
   "lock": false,
   "tasks": {
     "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
-    "fmt": "npx prettier . --write",
+    // Do items like reordering imports
+    "fmt": "deno fmt && npx prettier . --write",
     "start": "deno run -A --unstable --watch=static/,routes/ dev.ts",
     "build": "deno run -A --unstable dev.ts build",
     "preview": "deno run --unstable -A main.ts",
     "update": "deno run --unstable -A -r https://fresh.deno.dev/update ."
   },
-  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "lint": {
+    "rules": { "tags": ["fresh", "recommended"], "include": ["no-unused-vars"] }
+  },
   "imports": {
     "$fresh/": "https://deno.land/x/[email protected]/",
     "preact": "https://esm.sh/[email protected]",

emails/login.tsx

@@ -1,18 +1,18 @@
 import {
   Body,
+  Column,
   Container,
+  Font,
   Head,
   Heading,
   Html,
   Img,
   Link,
+  Preview,
+  Row,
   Section,
   Tailwind,
   Text,
-  Preview,
-  Font,
-  Column,
-  Row,
 } from "@react-email/components";
 import * as React from "react";
 import config from "../tailwind.config.ts";

fresh.gen.ts

@@ -11,6 +11,7 @@ import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $_layout from "./routes/_layout.tsx";
 import * as $api_auth_login from "./routes/api/auth/login.tsx";
+import * as $api_auth_regen from "./routes/api/auth/regen.ts";
 import * as $api_auth_signout from "./routes/api/auth/signout.ts";
 import * as $api_events_create from "./routes/api/events/create.ts";
 import * as $api_events_delete from "./routes/api/events/delete.ts";
@@ -46,6 +47,9 @@ import * as $index from "./routes/index.tsx";
 import * as $kv_insights_layout from "./routes/kv-insights/_layout.tsx";
 import * as $kv_insights_middleware from "./routes/kv-insights/_middleware.ts";
 import * as $login from "./routes/login.tsx";
+import * as $user_settings_layout from "./routes/user/settings/_layout.tsx";
+import * as $user_settings_authentication from "./routes/user/settings/authentication.ts";
+import * as $user_settings_index from "./routes/user/settings/index.tsx";
 import * as $components_dropinUI_trash from "./islands/components/dropinUI/trash.tsx";
 import * as $components_pickers_calender from "./islands/components/pickers/calender.tsx";
 import * as $components_pickers_dropdown from "./islands/components/pickers/dropdown.tsx";
@@ -97,6 +101,7 @@ const manifest = {
     "./routes/_app.tsx": $_app,
     "./routes/_layout.tsx": $_layout,
     "./routes/api/auth/login.tsx": $api_auth_login,
+    "./routes/api/auth/regen.ts": $api_auth_regen,
     "./routes/api/auth/signout.ts": $api_auth_signout,
     "./routes/api/events/create.ts": $api_events_create,
     "./routes/api/events/delete.ts": $api_events_delete,
@@ -141,6 +146,9 @@ const manifest = {
     "./routes/kv-insights/_layout.tsx": $kv_insights_layout,
     "./routes/kv-insights/_middleware.ts": $kv_insights_middleware,
     "./routes/login.tsx": $login,
+    "./routes/user/settings/_layout.tsx": $user_settings_layout,
+    "./routes/user/settings/authentication.ts": $user_settings_authentication,
+    "./routes/user/settings/index.tsx": $user_settings_index,
   },
   islands: {
     "./islands/components/dropinUI/trash.tsx": $components_dropinUI_trash,

islands/components/pickers/dropdown.tsx

@@ -13,7 +13,7 @@ export default function Dropdown({
     content: ComponentChild;
     onClick?: () => void;
     link?: string;
-    className?: string
+    className?: string;
   }[];
   children: ComponentChild;
   className?: string;

islands/components/pieces/navDropDown.tsx

@@ -1,16 +1,15 @@
-import { UserPartial } from "@/utils/db/kv.types.ts";
+import { User } from "@/utils/db/kv.types.ts";
 import Selector from "$tabler/selector.tsx";
 import Dropdown from "@/islands/components/pickers/dropdown.tsx";
 import CirclePlus from "$tabler/circle-plus.tsx";
 import Settings from "$tabler/settings.tsx";
 import UserCircle from "$tabler/user-circle.tsx";
-import Logout from "$tabler/logout-2.tsx"
+import Logout from "$tabler/logout-2.tsx";
 import { useSignal } from "@preact/signals";
 import { deleteCookie } from "$std/http/cookie.ts";
 
-const NavbarDropDown = ({ user }: { user: UserPartial }) => {
+const NavbarDropDown = ({ user }: { user: User }) => {
   const open = useSignal(false);
-  const headers = new Headers();
 
   return (
     <Dropdown
@@ -31,7 +30,7 @@ const NavbarDropDown = ({ user }: { user: UserPartial }) => {
               <Settings class="size-5 mr-2" /> <p>Settings</p>
             </div>
           ),
-          onClick: () => alert("Settings is coming soon!"),
+          link: "/user/settings",
         },
         {
           content: (
@@ -40,7 +39,11 @@ const NavbarDropDown = ({ user }: { user: UserPartial }) => {
             </div>
           ),
           className: "bg-red-100 hover:!bg-red-200",
-          onClick: () => {deleteCookie(headers, "authToken", {path: "/"})},
+          onClick: () => {
+            document.cookie =
+              "authToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+            location.href = "/";
+          },
           //link: "/"
         },
       ]}

islands/events/creation/three.tsx

@@ -1,5 +1,5 @@
 import { Signal } from "@preact/signals";
-import { StateUpdater, useState, useEffect } from "preact/hooks";
+import { StateUpdater, useEffect, useState } from "preact/hooks";
 import { Event } from "@/utils/db/kv.types.ts";
 import ImagePicker from "../../components/pickers/image.tsx";
 import CTA from "@/components/buttons/cta.tsx";

islands/events/editing/settings.tsx

@@ -1,11 +1,7 @@
-import { signal, useSignal } from "@preact/signals";
 import CTA from "@/components/buttons/cta.tsx";
-import useForm from "@/components/hooks/fakeFormik/index.tsx";
-import { Event } from "@/utils/db/kv.types.ts";
 import { useState } from "preact/hooks";
 import { FirstPageEventValidation } from "@/utils/types/events.ts";
 import { removeKeysWithSameValues } from "@/utils/misc.ts";
-import * as Yup from "yup";
 import { JSX } from "preact";
 import { Loading } from "@/utils/loading.ts";
 

islands/events/editing/ticketSettings.tsx

@@ -1,18 +1,13 @@
-import { signal, useSignal } from "@preact/signals";
 import CTA from "@/components/buttons/cta.tsx";
-import useForm from "@/components/hooks/fakeFormik/index.tsx";
 import { Event, Field } from "@/utils/db/kv.types.ts";
 import { StateUpdater, useState } from "preact/hooks";
-import { FirstPageEventValidation } from "@/utils/types/events.ts";
 import { removeKeysWithSameValues } from "@/utils/misc.ts";
-import * as Yup from "yup";
-import { JSX } from "preact";
 import { Loading } from "@/utils/loading.ts";
 import { Toggle } from "@/components/buttons/toggle.tsx";
 import {
   AdditionalInputs,
-  FieldInput,
   defaultField,
+  FieldInput,
 } from "@/islands/events/creation/two.tsx";
 import Plus from "$tabler/plus.tsx";
 

islands/events/scanning.tsx

@@ -197,8 +197,9 @@ export default function Scanner({ eventID }: { eventID: string }) {
               const highestX = code.boundingBox.right;
               const highestY = code.boundingBox.bottom;
 
-              if (x < lowestX || x > highestX || y < lowestY || y > highestY)
+              if (x < lowestX || x > highestX || y < lowestY || y > highestY) {
                 continue;
+              }
 
               console.log("Found code!", code.rawValue);
 
@@ -302,13 +303,12 @@ export default function Scanner({ eventID }: { eventID: string }) {
 
                 topY -= padding;
                 bottomY += padding;
-                
+
                 ctx.lineWidth = 5;
                 ctx.beginPath();
                 ctx.roundRect(leftX, topY, rightX - leftX, bottomY - topY, 20);
                 ctx.stroke();
                 ctx.closePath();
-
 
                 switch (codeData.status) {
                   case "loading": {

islands/events/viewing/register.tsx

@@ -45,13 +45,10 @@ export default function EventRegister({
   const toggles = useSignal<Record<string, boolean>>({
     ...additionalFields
       .filter((field) => field.type == "toggle")
-      .reduce(
-        (acc, field) => {
-          acc[field.id] = false;
-          return acc;
-        },
-        {} as Record<string, boolean>,
-      ),
+      .reduce((acc, field) => {
+        acc[field.id] = false;
+        return acc;
+      }, {} as Record<string, boolean>),
   });
 
   const perfEntries = performance.getEntriesByType("navigation");
@@ -77,13 +74,10 @@ export default function EventRegister({
       email: email || "",
       ...additionalFields
         .filter((field) => field.type != "toggle")
-        .reduce(
-          (acc, field) => {
-            acc[field.id] = field.type === "number" ? 0 : "";
-            return acc;
-          },
-          {} as Record<string, string | number>,
-        ),
+        .reduce((acc, field) => {
+          acc[field.id] = field.type === "number" ? 0 : "";
+          return acc;
+        }, {} as Record<string, string | number>),
     },
     onSubmit: (form) => createTicket(form.formState!),
     // TODO: add client side validation

islands/events/viewing/showtimes.tsx

@@ -1,5 +1,5 @@
 import { Event, Roles, User } from "@/utils/db/kv.ts";
-import { happened, fmtDate, fmtTime } from "@/utils/dates.ts";
+import { fmtDate, fmtTime, happened } from "@/utils/dates.ts";
 import { Availability } from "@/islands/events/viewing/availability.tsx";
 import { EventContext } from "@/routes/events/[id]/_layout.tsx";
 import { acquired } from "@/utils/tickets.ts";

islands/loginForm.tsx

@@ -25,9 +25,9 @@ const LoginForm = ({ attending }: { attending: boolean }) => {
       if (code.value.length != 0 || !/^[0-9]{6}$/g.test(clipboard)) return;
       login(undefined, clipboard);
     };
-    window.addEventListener("focus", onFocus);
+    globalThis.addEventListener("focus", onFocus);
     return () => {
-      window.removeEventListener("focus", onFocus);
+      globalThis.removeEventListener("focus", onFocus);
     };
   }, []);
 

routes/api/auth/login.tsx

@@ -49,7 +49,9 @@ export const handler: Handlers<{ email: string; otp: string }> = {
     const otp = await generateOTP(email);
 
     // jank
-    const otpHTML = emailHTML.replace("{{OTP-PART-1}}", otp.slice(0,5)).replace("{{OTP-PART-2}}", otp.slice(5));
+    const otpHTML = emailHTML
+      .replace("{{OTP-PART-1}}", otp.slice(0, 5))
+      .replace("{{OTP-PART-2}}", otp.slice(5));
 
     try {
       await sendEmail([email], "Your Events Authorization Code", {
@@ -140,4 +142,3 @@ export const handler: Handlers<{ email: string; otp: string }> = {
     return resp;
   },
 };
-

routes/api/auth/regen.ts

@@ -0,0 +1,32 @@
+import { Handlers } from "$fresh/server.ts";
+import { deleteCookie } from "$std/http/cookie.ts";
+import { generateAuthToken, getUser, getUserAuthToken } from "@/utils/db/kv.ts";
+
+export const handler: Handlers = {
+  async GET(req, _ctx) {
+    const token = getUserAuthToken(req);
+
+    if (token == undefined) {
+      return new Response(JSON.stringify({ error: "Not logged in" }), {
+        status: 400,
+      });
+    }
+
+    const user = await getUser(req);
+
+    if (user == undefined) {
+      deleteCookie(req.headers, "authToken");
+      return new Response(JSON.stringify({ error: "User not found" }), {
+        status: 400,
+      });
+    }
+
+    await generateAuthToken(user.email, true);
+
+    deleteCookie(req.headers, "authToken");
+
+    return new Response(JSON.stringify({ status: 200 }), {
+      status: 200,
+    });
+  },
+};

routes/api/events/create.ts

@@ -1,11 +1,11 @@
 import { Handlers } from "$fresh/server.ts";
 import {
   Event,
-  Roles,
-  User,
   getUser,
   kv,
   PlanMaxEvents,
+  Roles,
+  User,
 } from "@/utils/db/kv.ts";
 import { FullEventValidation } from "@/utils/types/events.ts";
 

routes/api/events/scan.ts

@@ -54,7 +54,10 @@ export const handler: Handlers = {
       );
     }
 
-    const isValidTicket = ticketID.split("_").map((s) => isUUID(s)).includes(false);
+    const isValidTicket = ticketID
+      .split("_")
+      .map((s) => isUUID(s))
+      .includes(false);
 
     if (!isValidTicket) {
       return new Response(

routes/api/events/ticket/delete.ts

@@ -54,6 +54,5 @@ export const handler: Handlers = {
     return new Response(JSON.stringify({ error: "occurred" }), {
       status: 400,
     });
-
   },
 };

routes/api/events/ticket/index.ts

@@ -4,9 +4,9 @@ import {
   getUser,
   getUserAuthToken,
   kv,
+  Plan,
   Roles,
   User,
-  Plan,
 } from "@/utils/db/kv.ts";
 import * as Yup from "yup";
 import { EventRegisterError } from "@/utils/event/register.ts";