Merge branch 'screenlink-web-temp' into merge-projects

Author: mangledbottles

.gitignore

@@ -7,13 +7,24 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-node_modules
+# Dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# Testing
+/coverage
+
+# Build directories
 dist
 dist-ssr
 dist-electron
 release
+/build
+
+# Local environment overrides
 *.local
-.env
+.env*.local
 
 # Editor directories and files
 .vscode/*
@@ -25,3 +36,26 @@ release
 *.njsproj
 *.sln
 *.sw?
+
+# Misc & OS generated files
+*.pem
+*.tsbuildinfo
+next-env.d.ts
+
+# Debug logs
+.pnpm-debug.log*
+
+# Vercel
+.vercel
+
+# Framework-specific
+.next/
+/out/
+
+# Contentlayer
+.contentlayer
+
+# Sentry Config File
+.sentryclirc
+
+.env

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

apps/web/CHANGELOG.md

@@ -0,0 +1,14 @@
+# CHANGELOG.md
+
+## [1.0.3] - 2023-10-04
+
+- Update Twitter icon
+- Update dependencies
+
+## [1.0.1] - 2023-05-06
+
+- Dependencies update
+
+## [1.0.0] - 2023-04-11
+
+First release

apps/web/README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/web/actions/index.ts

@@ -0,0 +1,3 @@
+export * from './updateUploadTitle';
+export * from './navigate';
+

apps/web/actions/navigate.ts

@@ -0,0 +1,8 @@
+'use server'
+ 
+import { redirect } from 'next/navigation'
+ 
+export async function navigate(url: string) {
+  redirect(url);
+}
+

apps/web/actions/updateUploadTitle.ts

@@ -0,0 +1,31 @@
+'use server';
+
+import { prisma } from '@/app/utils';
+import { z } from 'zod';
+import { revalidatePath } from 'next/cache';
+
+// Define the schema for the title update payload
+const updateTitleSchema = z.object({
+    id: z.string(),
+    newTitle: z.string().min(1, "Title cannot be empty"),
+});
+
+// Adjust the function signature to match useFormState expectations
+export async function updateTitle(params: { id: string, newTitle: string }) {
+    const result = updateTitleSchema.safeParse(params);
+
+    if (!result.success) {
+        return { success: false, error: 'Validation failed' }; // Handle error case
+    }
+
+    const { id, newTitle } = result.data;
+
+    await prisma.upload.update({
+        where: { id },
+        data: { sourceTitle: newTitle },
+    });
+
+    await revalidatePath(`/view/${id}`);
+
+    return { success: true };
+}

apps/web/app/(auth)/AuthForm.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { BuiltInProviderType, Provider } from "next-auth/providers";
+import {
+  ClientSafeProvider,
+  LiteralUnion,
+  signIn,
+  useSession,
+} from "next-auth/react";
+import React from "react";
+import {
+  AiFillGithub,
+  AiOutlineGoogle,
+  AiOutlineQuestionCircle,
+  AiOutlineSlack,
+} from "react-icons/ai";
+
+const ICONS: {
+  [key: string]: React.ComponentType<any>;
+} = {
+  github: AiFillGithub,
+  google: AiOutlineGoogle,
+  slack: AiOutlineSlack,
+};
+
+const SocialButton = ({
+  provider,
+  redirect,
+}: {
+  provider: any;
+  redirect?: string;
+}) => {
+  const icon =
+    ICONS[provider.id as keyof typeof ICONS] || AiOutlineQuestionCircle;
+  return (
+    <div className="mb-4 w-full" key={provider.name}>
+      <button
+        onClick={() => signIn(provider.id, { callbackUrl: redirect ?? "/app" })}
+        type="button"
+        className="inline-flex items-center gap-x-1.5 rounded px-2.5 py-2.5 text-base shadow-sm text-white bg-indigo-500 hover:bg-indigo-600  w-full"
+      >
+        {React.cloneElement(React.createElement(icon), {
+          className: "w-5 h-5",
+        })}
+        <span className={"ml-4"}>Continue with {provider.name}</span>
+      </button>
+    </div>
+  );
+};
+
+export default function AuthForm({
+  providers,
+  redirect,
+}: {
+  providers: Record<
+    LiteralUnion<BuiltInProviderType, string>,
+    ClientSafeProvider
+  > | null;
+  redirect?: string;
+}) {
+  if (!providers) return null;
+  return (
+    <div className="flex flex-col">
+      {Object.values(providers).map((provider: ClientSafeProvider) => {
+        if (!provider?.name || !provider?.id) return null;
+        return (
+          <SocialButton
+            key={provider.name}
+            provider={provider}
+            redirect={redirect}
+          />
+        );
+      })}
+    </div>
+  );
+}

apps/web/app/(auth)/layout.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image'
+import Header from '@/components/ui/header'
+import Illustration from '@/public/images/auth-illustration.svg'
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {  
+  return (
+    <>
+      <Header nav={false} />
+
+      <main className="grow">
+        <section className="relative">
+
+          {/* Illustration */}
+          <div className="hidden md:block absolute left-1/2 -translate-x-1/2 pointer-events-none -z-10" aria-hidden="true">
+            <Image src={Illustration} className="max-w-none" priority alt="Page Illustration" />
+          </div>      
+
+          {children}
+
+        </section>
+      </main>
+    </>
+  )
+}

apps/web/app/(auth)/signin/page.tsx

@@ -0,0 +1,56 @@
+import { getProviders } from "next-auth/react";
+import Link from "next/link";
+import AuthForm from "../AuthForm";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/AuthOptions";
+import { redirect } from "next/navigation";
+import { constructMetadata } from "@/app/utils";
+
+export const metadata = constructMetadata({
+  description:
+    "Login to ScreenLink to start recording demos with your screen and camera.",
+  title: "Sign In - ScreenLink",
+});
+
+export default async function SignIn({
+  searchParams,
+}: {
+  searchParams?: { [key: string]: string | string[] | undefined };
+}) {
+  const session = await getServerSession(authOptions);
+
+  // If the user is already logged in, redirect.
+  // Note: Make sure not to redirect to the same page
+  // To avoid an infinite loop!
+  if (session) {
+    redirect("/app");
+  }
+
+  // Get redirect from query
+  const redirectTo = searchParams?.redirect
+    ? String(searchParams?.redirect)
+    : "/app";
+
+  return (
+    <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
+      <div className="pt-32 pb-12 md:pt-40 md:pb-20">
+        {/* Page header */}
+        <div className="max-w-3xl mx-auto text-center pb-12">
+          <h1 className="h2 font-hkgrotesk">Welcome back!</h1>
+        </div>
+        <div className="max-w-sm mx-auto">
+          {/* Social logins */}
+          <AuthForm providers={await getProviders()} redirect={redirectTo} />
+          <div className="text-center mt-6">
+            <div className="text-sm text-slate-500">
+              Don't you have an account?{" "}
+              <Link className="font-medium text-indigo-500" href="/signup">
+                Get Started
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}