From 118c6f7991e2b20e6ceadf89703e9079d537c349 Mon Sep 17 00:00:00 2001 From: Corban-Lee Jones Date: Tue, 28 Jan 2025 23:59:15 +0000 Subject: [PATCH] login stuffs --- src/app.ts | 2 + src/client/public/css/tailwind.css | 158 ++++++++++++++++++++++++- src/client/views/guild.ejs | 6 +- src/client/views/login.ejs | 35 ++++++ src/server/controllers/login.ts | 7 ++ src/server/middleware/authenticated.ts | 9 ++ src/server/routes/login.ts | 6 + 7 files changed, 217 insertions(+), 6 deletions(-) create mode 100644 src/client/views/login.ejs create mode 100644 src/server/controllers/login.ts create mode 100644 src/server/middleware/authenticated.ts create mode 100644 src/server/routes/login.ts diff --git a/src/app.ts b/src/app.ts index e7abbef..1fe401b 100644 --- a/src/app.ts +++ b/src/app.ts @@ -11,6 +11,7 @@ import { attachGuilds } from "@server/middleware/attachGuilds"; // import routers import { router as homeRouter } from "@server/routes/home"; import { router as guildRouter } from "@server/routes/guild"; +import { router as loginRouter } from "@server/routes/login"; const app = express(); @@ -27,6 +28,7 @@ app.use(attachGuilds); // register routers app.use("/", homeRouter); app.use("/guild", guildRouter); +app.use("/login", loginRouter); const PORT = process.env.PORT || 3000; diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css index fc3925b..ce6ad9f 100644 --- a/src/client/public/css/tailwind.css +++ b/src/client/public/css/tailwind.css @@ -759,6 +759,10 @@ video { margin-inline-start: auto; } +.mt-0\.5 { + margin-top: 0.125rem; +} + .mt-1 { margin-top: 0.25rem; } @@ -775,6 +779,14 @@ video { margin-top: 1.25rem; } +.mt-64 { + margin-top: 16rem; +} + +.mt-7 { + margin-top: 1.75rem; +} + .mt-auto { margin-top: auto; } @@ -901,6 +913,10 @@ video { width: 7rem; } +.w-4 { + width: 1rem; +} + .w-60 { width: 15rem; } @@ -933,6 +949,10 @@ video { max-width: 100%; } +.max-w-md { + max-width: 28rem; +} + .flex-none { flex: none; } @@ -1044,6 +1064,10 @@ video { column-gap: 0.875rem; } +.gap-y-4 { + row-gap: 1rem; +} + .space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); @@ -1367,6 +1391,11 @@ video { line-height: 1.25rem !important; } +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + .text-4xl { font-size: 2.25rem; line-height: 2.5rem; @@ -1400,6 +1429,10 @@ video { font-weight: 500 !important; } +.font-bold { + font-weight: 700; +} + .font-medium { font-weight: 500; } @@ -1456,6 +1489,11 @@ video { color: rgb(22 163 74 / var(--tw-text-opacity, 1)); } +.text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); +} + .text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)); @@ -1466,6 +1504,10 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } +.decoration-2 { + text-decoration-thickness: 2px; +} + .opacity-0 { opacity: 0; } @@ -1482,6 +1524,12 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .outline { outline-style: solid; } @@ -1708,6 +1756,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te inset-inline-start: 0px; } +.before\:me-6::before { + content: var(--tw-content); + margin-inline-end: 1.5rem; +} + .before\:h-4::before { content: var(--tw-content); height: 1rem; @@ -1718,6 +1771,22 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te width: 100%; } +.before\:flex-1::before { + content: var(--tw-content); + flex: 1 1 0%; +} + +.before\:border-t::before { + content: var(--tw-content); + border-top-width: 1px; +} + +.before\:border-gray-200::before { + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); +} + .after\:absolute::after { content: var(--tw-content); position: absolute; @@ -1733,6 +1802,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te inset-inline-start: 0px; } +.after\:ms-6::after { + content: var(--tw-content); + margin-inline-start: 1.5rem; +} + .after\:h-4::after { content: var(--tw-content); height: 1rem; @@ -1743,6 +1817,22 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te width: 100%; } +.after\:flex-1::after { + content: var(--tw-content); + flex: 1 1 0%; +} + +.after\:border-t::after { + content: var(--tw-content); + border-top-width: 1px; +} + +.after\:border-gray-200::after { + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); +} + .hover\:bg-blue-700:hover { --tw-bg-opacity: 1; background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)); @@ -1753,6 +1843,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } +.hover\:bg-gray-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); +} + .hover\:text-blue-600:hover { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); @@ -1768,16 +1863,30 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te color: rgb(31 41 55 / var(--tw-text-opacity, 1)); } +.hover\:underline:hover { + text-decoration-line: underline; +} + .focus\:border-blue-500:focus { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); } +.focus\:bg-blue-700:focus { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)); +} + .focus\:bg-gray-100:focus { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } +.focus\:bg-gray-50:focus { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); +} + .focus\:text-blue-600:focus { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); @@ -1788,6 +1897,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } +.focus\:underline:focus { + text-decoration-line: underline; +} + .focus\:opacity-80:focus { opacity: 0.8; } @@ -1961,6 +2074,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te padding: 1.5rem; } + .sm\:p-7 { + padding: 1.75rem; + } + .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; @@ -2134,11 +2251,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te color: rgb(115 115 115 / var(--tw-text-opacity, 1)); } -.dark\:text-neutral-800:where(.dark, .dark *) { - --tw-text-opacity: 1; - color: rgb(38 38 38 / var(--tw-text-opacity, 1)); -} - .dark\:text-white:where(.dark, .dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); @@ -2148,6 +2260,16 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te color: rgb(255 255 255 / 0.6); } +.dark\:placeholder-neutral-500:where(.dark, .dark *)::-moz-placeholder { + --tw-placeholder-opacity: 1; + color: rgb(115 115 115 / var(--tw-placeholder-opacity, 1)); +} + +.dark\:placeholder-neutral-500:where(.dark, .dark *)::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(115 115 115 / var(--tw-placeholder-opacity, 1)); +} + .dark\:placeholder\:text-neutral-400:where(.dark, .dark *)::-moz-placeholder { --tw-text-opacity: 1; color: rgb(163 163 163 / var(--tw-text-opacity, 1)); @@ -2158,6 +2280,28 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te color: rgb(163 163 163 / var(--tw-text-opacity, 1)); } +.dark\:before\:border-neutral-600:where(.dark, .dark *)::before { + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(82 82 82 / var(--tw-border-opacity, 1)); +} + +.dark\:after\:border-neutral-600:where(.dark, .dark *)::after { + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(82 82 82 / var(--tw-border-opacity, 1)); +} + +.dark\:checked\:border-blue-500:checked:where(.dark, .dark *) { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); +} + +.dark\:checked\:bg-blue-500:checked:where(.dark, .dark *) { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); +} + .dark\:hover\:bg-neutral-700:hover:where(.dark, .dark *) { --tw-bg-opacity: 1; background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1)); @@ -2218,6 +2362,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te --tw-ring-color: rgb(82 82 82 / var(--tw-ring-opacity, 1)); } +.dark\:focus\:ring-offset-gray-800:focus:where(.dark, .dark *) { + --tw-ring-offset-color: #1f2937; +} + .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb { border-radius: 9999px; } diff --git a/src/client/views/guild.ejs b/src/client/views/guild.ejs index 10cfb2a..91cbf45 100644 --- a/src/client/views/guild.ejs +++ b/src/client/views/guild.ejs @@ -1,4 +1,8 @@ -<% layout("layout") -%> +<% layout("layout") -%> + + + +

<%= guild.name %> diff --git a/src/client/views/login.ejs b/src/client/views/login.ejs new file mode 100644 index 0000000..749d120 --- /dev/null +++ b/src/client/views/login.ejs @@ -0,0 +1,35 @@ + + + + + + <%= title %> + + + +
+
+
+
+
+

Sign in

+

+ Login is required to use Relay. +

+
+ +
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/src/server/controllers/login.ts b/src/server/controllers/login.ts new file mode 100644 index 0000000..ee942c4 --- /dev/null +++ b/src/server/controllers/login.ts @@ -0,0 +1,7 @@ +import { Request, Response } from "express"; + +export const get = async (_request: Request, response: Response) => { + response.render("login", { + title: "Login - Relay" + }); +}; diff --git a/src/server/middleware/authenticated.ts b/src/server/middleware/authenticated.ts new file mode 100644 index 0000000..1fdb590 --- /dev/null +++ b/src/server/middleware/authenticated.ts @@ -0,0 +1,9 @@ +import { Request, Response, NextFunction } from "express"; + +// export const ensureAuthenticated = (request: Request, response: Response, next: NextFunction) => { +// if (request.isAuthenticated()) { +// return next(); +// } + +// response.redirect("/login"); +// }; \ No newline at end of file diff --git a/src/server/routes/login.ts b/src/server/routes/login.ts new file mode 100644 index 0000000..73cbf35 --- /dev/null +++ b/src/server/routes/login.ts @@ -0,0 +1,6 @@ +import { Router } from "express"; +import * as controller from "@server/controllers/login"; + +export const router = Router(); + +router.get("/", controller.get); \ No newline at end of file