Authorized Requests (#18)

* upgrade to v13 * updating to app directory pattern * updating to next 13 pages * trying to fix the version * upgrades to rollup v3 * new seed script * fast store * moving everything in app dir and updates to browser-extension * adding svelte-demo * upgrade to 13.0.2 * save the svelte experiment for later and fix the tests * adding apollo in favor of fastify * upgrading next.js * formmating * upgrading integration tests * adding more tests and apollo client * removing instantiating apollo client * updating tests to use tag * updating deps * updating workspace package numbers * adding turbo 1.6.3 * updating parcel * changing input to another blog * adding more tests * adding playwright * fulfilling all the test cases for integration test * small fixes * fixes to CI and deps * [ci skip]: remove unnecessary lockfile * fix to authorization headers * updates to sign up flow Co-authored-by: Charlie ⚡ <[email protected]>
charliewilco · Dec 28, 2022 · 42b085e · 42b085e · vercel · Dec 28, 2022
1 parent d491e93
commit 42b085e
Show file tree

Hide file tree

Showing 20 changed files with 134 additions and 52 deletions.
diff --git a/apps/ui/next.config.mjs b/apps/ui/next.config.mjs
@@ -5,10 +5,8 @@
 export default {
  reactStrictMode: true,
  optimizeFonts: true,
- cleanDistDir: true,
  swcMinify: true,
  experimental: {
- gzipSize: true,
  appDir: true,
  },
  async rewrites() {

diff --git a/apps/ui/src/app/(auth)/layout.tsx b/apps/ui/src/app/(auth)/layout.tsx
@@ -1,8 +1,11 @@
+import { LogoDisplay } from "../../components/logo";
+
 export default function Layout({ children }: React.PropsWithChildren<{}>) {
  return (
- <div>
- <h1> AAUTHH LAYOUT</h1>
-
+ <div className="py-16 px-2">
+ <div className="mb-4 flex justify-center">
+ <LogoDisplay />
+ </div>
  <div className="mx-auto max-w-md">{children}</div>
  </div>
  );

diff --git a/apps/ui/src/app/(auth)/login/page.tsx b/apps/ui/src/app/(auth)/login/page.tsx
@@ -1,13 +1,22 @@
+import Link from "next/link";
 import { LoginForm } from "../../../components/login-form";
+import { Card } from "../../../components/ui/card";
 
 export default function LoginPage() {
  return (
  <div>
- <header className="">
- <h2 className="mb-6 text-2xl font-bold dark:text-gray-100">Sign in to your account</h2>
+ <header className="text-center">
+ <h2 className="mb-4 text-2xl font-bold dark:text-gray-100">Sign in to your account</h2>
+ <p>
+ <span className="opacity-75">Or sign up for an account</span>{" "}
+ <Link href="/register" className="text-sky-600">
+ here
+ </Link>
+ </p>
  </header>
-
- <LoginForm />
+ <Card className="px-8 py-6">
+ <LoginForm />
+ </Card>
  </div>
  );
 }
diff --git a/apps/ui/src/app/(auth)/register/page.tsx b/apps/ui/src/app/(auth)/register/page.tsx
@@ -1,12 +1,22 @@
+import Link from "next/link";
 import { RegisterForm } from "../../../components/register-form";
+import { Card } from "../../../components/ui/card";
 
 export default function RegistrationPage() {
  return (
  <div>
- <header className="">
- <h2 className="mb-6 text-2xl font-bold dark:text-gray-100">Sign up for an account</h2>
+ <header className="mb-8 text-center">
+ <h2 className="mb-4 text-2xl font-bold dark:text-gray-100">Sign up for an account</h2>
+ <p>
+ <span className="opacity-75">Or sign in to your account</span>{" "}
+ <Link href="/login" className="text-sky-600">
+ here
+ </Link>
+ </p>
  </header>
- <RegisterForm />
+ <Card className="px-8 py-6">
+ <RegisterForm />
+ </Card>
  </div>
  );
 }
diff --git a/apps/ui/src/app/(dashboard)/feeds/page.tsx b/apps/ui/src/app/(dashboard)/feeds/page.tsx
@@ -6,17 +6,17 @@ import { ConnectedEntryList } from "../../../components/entries-list";
 import { ConnectedEntryFull } from "../../../components/entry-full";
 import { FeedList } from "../../../components/feed-list";
 import { getFeeds } from "../../../lib/graphql";
-import { TOKEN_NAME } from "../../../lib/auth-token";
+import { authorizeRequest } from "../../../lib/authorized-request";
 
 export const runtime = "experimental-edge";
 
 export default function DashboardPage() {
  const nextCookies = cookies();
- const _ = use(getFeeds(nextCookies.get(TOKEN_NAME)?.value));
+ const _ = use(authorizeRequest(nextCookies, getFeeds()));
 
  return (
  <DashboardProvider>
- <div className="grid w-full flex-1 grid-cols-12">
+ <div className="grid h-full w-full flex-1 grid-cols-12">
  <aside className="col-span-2 overflow-y-scroll border-r border-zinc-200 dark:border-zinc-700">
  <div className="relative h-full dark:bg-zinc-900">
  <FeedList initialData={_} />

diff --git a/apps/ui/src/app/(dashboard)/settings/page.tsx b/apps/ui/src/app/(dashboard)/settings/page.tsx
@@ -5,13 +5,13 @@ import { CreateTagForm } from "../../../components/create-tag";
 import { TagRemovalList } from "../../../components/tag-lists";
 import { getAllTags, me } from "../../../lib/graphql";
 import type { AllTagsQuery } from "../../../lib/__generated__";
-import { TOKEN_NAME } from "../../../lib/auth-token";
+import { authorizeRequest } from "../../../lib/authorized-request";
 
 export default function SettingsPage() {
  const nextCookies = cookies();
- const _ = use<AllTagsQuery>(getAllTags(nextCookies.get(TOKEN_NAME)?.value));
+ const _ = use<AllTagsQuery>(authorizeRequest(nextCookies, getAllTags()));
 
- const __ = use(me(nextCookies.get(TOKEN_NAME)?.value));
+ const __ = use(me());
 
  console.log(__);
 

diff --git a/apps/ui/src/app/layout.tsx b/apps/ui/src/app/layout.tsx
@@ -3,6 +3,7 @@ import "../components/styles.css";
 export default function RootLayout({ children }: React.PropsWithChildren<{}>) {
  return (
  <html className="dark:bg-zinc-900 dark:text-white">
+ <head />
  <body>{children}</body>
  </html>
  );

diff --git a/apps/ui/src/components/add-feed.tsx b/apps/ui/src/components/add-feed.tsx
@@ -71,7 +71,7 @@ export function AddFeed() {
  <Plus size={24} />
  </Button>
  <Dialog isOpen={isOpen} onClose={() => setOpen(false)} title="Add Feed">
- <div className="mt-2 mb-8 text-sm opacity-50">
+ <div className="mt-2 mb-8 text-sm opacity-50" data-testid="add-feed-modal">
  Make changes to your profile here. Click save when you&apos;re done.
  </div>
  <AddFeedForm onSubmit={handleSubmit} />

diff --git a/apps/ui/src/components/app-header.tsx b/apps/ui/src/components/app-header.tsx
@@ -1,4 +1,4 @@
-import { Logo } from "./logo";
+import { LogoSmall } from "./logo";
 
 interface AppHeaderProps {
  title?: string;
@@ -10,7 +10,7 @@ export function AppHeader(props: AppHeaderProps) {
  <header className="w-full border-b border-zinc-200 px-4 backdrop-blur-sm backdrop-saturate-150 dark:border-zinc-700">
  <div className="flex items-center justify-between">
  <div className="flex items-center">
- <Logo />
+ <LogoSmall />
  {props.title && <h1 className="ml-4">{props.title}</h1>}
  </div>
 

diff --git a/apps/ui/src/components/login-form.tsx b/apps/ui/src/components/login-form.tsx
@@ -37,7 +37,7 @@ export function LoginForm() {
  );
 
  return (
- <form {...getFormProps()} className="space-y-6">
+ <form {...getFormProps()} className="space-y-8">
  <div>
  <Label htmlFor="email">
  <TextLabel>Email</TextLabel>

diff --git a/apps/ui/src/components/logo.tsx b/apps/ui/src/components/logo.tsx
@@ -1,4 +1,4 @@
-export function Logo() {
+export function LogoSmall() {
  return (
  <svg
  className="max-w-[1.5rem]"
@@ -24,3 +24,29 @@ export function Logo() {
  </svg>
  );
 }
+
+export function LogoDisplay() {
+ return (
+ <svg
+ width="45"
+ height="56"
+ viewBox="0 0 45 56"
+ fill="none"
+ xmlns="http:https://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M1.12542 6.83245C-1.33382 4.25504 0.505064 0 4.05476 0H27.3155C29.8944 0 32.2314 1.51874 33.2788 3.87533L43.1533 26.0931C43.1683 26.1267 43.182 26.1609 43.1946 26.1956C44.0833 28.6528 44.7856 31.7459 43.379 34.2765C41.9036 36.9307 38.5797 38.2212 33.3459 38.2217H33.3434L33.3277 38.2217H26.7409C25.9856 38.2217 25.4867 37.3993 25.6488 36.6616C26.0374 34.8934 25.6328 32.9346 24.1762 31.3834L18.342 25.1704H18.408C16.9506 23.5746 14.9351 21.4125 12.6939 19.0294C8.78564 14.8737 4.28383 10.1426 1.12542 6.83245ZM8.85576 4.97192C8.0712 4.97192 7.63752 5.88194 8.13167 6.49132L10.5958 9.53012C11.1268 10.185 11.925 10.5653 12.7681 10.5653H28.3647C29.5688 10.5653 30.3153 9.25488 29.7012 8.21917L28.5882 6.34223C28.0845 5.49277 27.1702 4.97192 26.1826 4.97192H8.85576ZM17.0266 12.4298C15.8504 12.4298 15.22 13.8135 15.9918 14.7011C16.4537 15.2323 17.1231 15.5373 17.827 15.5373H25.671C26.583 15.5373 27.196 14.6023 26.8324 13.7659C26.4796 12.9546 25.6793 12.4298 24.7946 12.4298H17.0266ZM21.6815 17.4017C20.5068 17.4017 19.8762 18.7826 20.6456 19.6704C21.1073 20.2031 21.7776 20.5092 22.4826 20.5092H32.8207C33.7318 20.5092 34.3446 19.5758 33.9823 18.7398C33.6303 17.9275 32.8295 17.4017 31.9442 17.4017H21.6815Z"
+ fill="currentColor"
+ />
+ <path
+ d="M14.3755 25.4858C14.1865 25.2845 13.9227 25.1704 13.6465 25.1704H7.78918C7.58113 25.1589 7.36612 25.1595 7.14385 25.1734C7.05679 25.1788 6.97034 25.1916 6.88541 25.2115C6.46696 25.3099 6.00778 25.4869 5.562 25.7562C4.79101 26.2219 5.45292 27.2446 6.32778 27.459C7.17339 27.6662 8.00697 28.1027 8.7756 28.7291C10.2905 29.9638 11.6657 32.001 12.7364 34.8841C13.1906 36.1073 14.3673 36.9895 15.9368 37.5608C17.1404 37.9989 18.3876 38.1813 19.2539 38.2217H19.8721C22.3216 38.2217 23.5876 35.2961 21.9109 33.5105L14.3755 25.4858Z"
+ fill="currentColor"
+ />
+ <path
+ d="M3.96478 32.9376C4.21215 33.5632 4.53298 34.2186 4.93079 34.9037C5.61164 36.3462 7.53103 39.4974 9.79964 43.0862C12.1366 46.7832 14.9243 51.0682 17.3324 54.728C19.0106 57.2786 22.9043 55.6755 22.4047 52.7253L20.5511 41.7787C20.5072 41.5191 20.2823 41.3292 20.019 41.3292C19.7757 41.3405 19.4975 41.3412 19.1922 41.3291H18.7383V41.3029C17.6181 41.2185 16.2277 40.9736 14.874 40.4809C12.9272 39.7723 10.7375 38.4275 9.82332 35.9659C8.87451 33.411 7.76391 31.9134 6.81243 31.1379C5.865 30.3658 5.19059 30.3766 4.86629 30.4869C4.54677 30.5955 4.13236 30.9461 3.9838 31.8016C3.92847 32.1203 3.91493 32.5012 3.96478 32.9376Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
diff --git a/apps/ui/src/components/site-footer.tsx b/apps/ui/src/components/site-footer.tsx
@@ -17,6 +17,9 @@ export function SiteFooter() {
  <div className="px-5 py-2">
  <Link href="/login">Login</Link>
  </div>
+ <div className="px-5 py-2">
+ <Link href="/register">Register</Link>
+ </div>
  <div className="px-5 py-2">
  <Link href="/privacy">Privacy Policy</Link>
  </div>

diff --git a/apps/ui/src/components/styles.css b/apps/ui/src/components/styles.css
@@ -5,11 +5,3 @@
 article {
  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1, "ss06" 1;
 }
-
-/**
-* This hack is for the extra divs created by nested layouts in Next.js
-*/
-#feed-container > div,
-#feed-container > div > div {
- @apply flex h-full flex-1;
-}
diff --git a/apps/ui/src/components/ui/card.tsx b/apps/ui/src/components/ui/card.tsx
@@ -0,0 +1,9 @@
+import { classNames } from "./class-names";
+
+interface CardProps
+ extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+
+export function Card({ className, ...props }: CardProps) {
+ const _className = classNames(className, "bg-white dark:bg-zinc-800 shadow rounded-lg p-4");
+ return <div className={_className} {...props} />;
+}
diff --git a/apps/ui/src/components/ui/input.tsx b/apps/ui/src/components/ui/input.tsx
@@ -50,7 +50,7 @@ type TextLabelProps = React.DetailedHTMLProps<
 const TextLabel = forwardRef<HTMLSpanElement, TextLabelProps>(
  ({ className, ...props }, ref) => {
  return (
- <span {...props} className={classNames("block pb-2 text-xs", className)} ref={ref} />
+ <span {...props} className={classNames("block pb-2 text-sm", className)} ref={ref} />
  );
  }
 );

diff --git a/apps/ui/src/lib/authorized-request.ts b/apps/ui/src/lib/authorized-request.ts
@@ -0,0 +1,15 @@
+import type { ReadonlyRequestCookies } from "next/dist/server/app-render";
+import type { RequestCookies } from "next/dist/server/web/spec-extension/cookies";
+import { TOKEN_NAME } from "./auth-token";
+import { setHeaders } from "./graphql";
+
+export async function authorizeRequest<TReturnValue>(
+ cookies: RequestCookies | ReadonlyRequestCookies,
+ request: Promise<TReturnValue>
+) {
+ const token = cookies.get(TOKEN_NAME)?.value;
+ if (token) {
+ setHeaders(token);
+ }
+ return request;
+}
diff --git a/apps/ui/src/lib/graphql.ts b/apps/ui/src/lib/graphql.ts
@@ -52,11 +52,7 @@ export const getFeed = async (id: string) => {
  }
 };
 
-export const getFeeds = async (authorization?: string) => {
- if (authorization) {
- setHeaders(authorization);
- }
-
+export const getFeeds = async () => {
  try {
  return sdk.GetFeeds();
  } catch (error: any) {
@@ -72,11 +68,7 @@ export const getEntriesFromFeed = async (feedID: string, filter?: EntryFilter) =
  }
 };
 
-export const getAllTags = async (authorization?: string) => {
- if (authorization) {
- setHeaders(authorization);
- }
-
+export const getAllTags = async () => {
  try {
  return sdk.AllTags();
  } catch (error: any) {
@@ -175,10 +167,7 @@ export const register = async (email: string, password: string) => {
  }
 };
 
-export const me = async (authorization?: string) => {
- if (authorization) {
- setHeaders(authorization);
- }
+export const me = async () => {
  try {
  return sdk.Me();
  } catch (error: any) {

diff --git a/e2e/package.json b/e2e/package.json
@@ -4,7 +4,8 @@
  "private": true,
  "scripts": {
  "test": "playwright test",
- "deps": "playwright install --with-deps"
+ "deps": "playwright install --with-deps",
+ "codegen": "playwright codegen localhost:3000"
  },
  "devDependencies": {
  "@playwright/test": "^1.29.1",

diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
@@ -56,11 +56,22 @@ const config: PlaywrightTestConfig = {
  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
  outputDir: "test-results/",
 
- /* Run your local dev server before starting the tests */
- // webServer: {
- // command: 'npm run start',
- // port: 3000,
- // },
+ /* A successful `npm run build` will need to happen in order for these to actually work */
+
+ webServer: [
+ {
+ command: "npm start --workspace=@reubin/ui",
+ port: 3000,
+ timeout: 120 * 1000,
+ reuseExistingServer: !process.env.CI,
+ },
+ {
+ command: "npm start --workspace=@reubin/graphql",
+ port: 4000,
+ timeout: 120 * 1000,
+ reuseExistingServer: !process.env.CI,
+ },
+ ],
 };
 
 export default config;
diff --git a/e2e/tests/signup.spec.ts b/e2e/tests/signup.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from "@playwright/test";
+
+test("Register for an account", async ({ page }) => {
+ await page.goto("http:https://localhost:3000/");
+ await page.getByRole("link", { name: "Register" }).click();
+ await page.getByTestId("register-email-input").click();
+ await page.getByTestId("register-email-input").fill("[email protected]");
+ await page.getByTestId("register-email-input").press("Tab");
+ await page.getByTestId("register-password-input").fill("P@ssw0rd");
+ await page.getByRole("button", { name: "Register" }).click();
+ await page.getByRole("button", { name: "Add Feed" }).click();
+ await expect(page).toHaveURL("http:https://localhost:3000/feeds");
+ await expect(page.getByTestId("add-feed-modal")).toHaveText("Add Feed");
+ await page.getByTestId("add-feed-url").fill("https://charliewil.co/rss");
+});