From cbcbe8d7080afa633786066a998bf2b105e7fe10 Mon Sep 17 00:00:00 2001 From: Yannic Kilcher Date: Wed, 28 Dec 2022 17:33:33 +0100 Subject: [PATCH 01/19] added environment variable DEBUG_LOGIN to display debug credentials provider even in production mode --- docker-compose.yaml | 1 + website/README.md | 4 ++-- website/package-lock.json | 11 +++++++++++ website/package.json | 1 + website/src/pages/api/auth/[...nextauth].ts | 3 ++- 5 files changed, 17 insertions(+), 3 deletions(-) diff --git a/docker-compose.yaml b/docker-compose.yaml index 014f44dc..1e51fb95 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -92,6 +92,7 @@ services: - EMAIL_SERVER_PORT=1025 - EMAIL_FROM=info@example.com - NEXTAUTH_URL=http://localhost:3000 + - DEBUG_LOGIN=true depends_on: webdb: condition: service_healthy diff --git a/website/README.md b/website/README.md index ab1a6f36..dc0db0f8 100644 --- a/website/README.md +++ b/website/README.md @@ -65,9 +65,9 @@ If you're doing active development we suggest the following workflow: ### Using debug user credentials -Whenever the website runs in development mode, you can use the debug credentials provider to log in without fancy emails or OAuth. +You can use the debug credentials provider to log in without fancy emails or OAuth. -1. Development mode is automatically active when you start the website with `npm run dev`. +1. This feature is automatically on in development mode, i.e. when you run `npm run dev`. In case you want to do the same with a production build (for example, the docker image), then run the website with environment variable `DEBUG_LOGIN=true`. 1. Use the `Login` button in the top right to go to the login page. 1. You should see a section for debug credentials. Enter any username you wish, you will be logged in as that user. diff --git a/website/package-lock.json b/website/package-lock.json index 19a32f1b..b6ef0126 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -19,6 +19,7 @@ "@tailwindcss/forms": "^0.5.3", "autoprefixer": "^10.4.13", "axios": "^1.2.1", + "boolean": "^3.2.0", "clsx": "^1.2.1", "eslint": "8.29.0", "eslint-config-next": "13.0.6", @@ -2777,6 +2778,11 @@ "readable-stream": "^3.4.0" } }, + "node_modules/boolean": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz", + "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -8683,6 +8689,11 @@ "readable-stream": "^3.4.0" } }, + "boolean": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz", + "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/website/package.json b/website/package.json index 7fa59848..40888d92 100644 --- a/website/package.json +++ b/website/package.json @@ -21,6 +21,7 @@ "@tailwindcss/forms": "^0.5.3", "autoprefixer": "^10.4.13", "axios": "^1.2.1", + "boolean": "^3.2.0", "clsx": "^1.2.1", "eslint": "8.29.0", "eslint-config-next": "13.0.6", diff --git a/website/src/pages/api/auth/[...nextauth].ts b/website/src/pages/api/auth/[...nextauth].ts index 62767c98..223d8c02 100644 --- a/website/src/pages/api/auth/[...nextauth].ts +++ b/website/src/pages/api/auth/[...nextauth].ts @@ -4,6 +4,7 @@ import DiscordProvider from "next-auth/providers/discord"; import EmailProvider from "next-auth/providers/email"; import CredentialsProvider from "next-auth/providers/credentials"; import { PrismaAdapter } from "@next-auth/prisma-adapter"; +import { boolean } from "boolean"; import prisma from "src/lib/prismadb"; @@ -33,7 +34,7 @@ if (process.env.DISCORD_CLIENT_ID) { ); } -if (process.env.NODE_ENV === "development") { +if (boolean(process.env.DEBUG_LOGIN) || process.env.NODE_ENV === "development") { providers.push( CredentialsProvider({ name: "Debug Credentials", From 73fb5eec3d826e96572d764409db0d6eb805d88c Mon Sep 17 00:00:00 2001 From: Yannic Kilcher Date: Wed, 28 Dec 2022 17:38:19 +0100 Subject: [PATCH 02/19] removed the reference to the magic email link in readme --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index a75dc477..fe2b5c0b 100644 --- a/README.md +++ b/README.md @@ -103,9 +103,7 @@ To start the demo, run this, in root directory: docker compose up --build ``` -Then, navigate to `http://localhost:3000` and interact with the website. When -logging in, navigate to `http://localhost:1080` to get the magic email login -link. +Then, navigate to `http://localhost:3000` and interact with the website. ### Website From c597e7317c86d500f4fdd4a8984bb3b812d05648 Mon Sep 17 00:00:00 2001 From: Desmond Grealy Date: Thu, 29 Dec 2022 05:07:14 -0800 Subject: [PATCH 03/19] Adding a specific layout for Home so other pages are not coupled to the the header / footer / grid used on Home; Make header transparent on Home --- website/src/components/Header/Header.tsx | 6 ++++-- website/src/pages/index.tsx | 10 ++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx index 67b0d53c..774c2d2a 100644 --- a/website/src/components/Header/Header.tsx +++ b/website/src/components/Header/Header.tsx @@ -5,6 +5,7 @@ import Image from "next/image"; import Link from "next/link"; import { signOut, useSession } from "next-auth/react"; import { FaUser, FaSignOutAlt } from "react-icons/fa"; +import clsx from "clsx"; import { Container } from "src/components/Container"; import { NavLinks } from "./NavLinks"; @@ -53,9 +54,10 @@ function AccountButton() { ); } -export function Header() { +export function Header(props) { + const transparent = props.transparent ?? false; return ( -
+