Merge screenlink-web into screenlink-desktop with Unified Project Structure

.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,28 @@ release
 *.njsproj
 *.sln
 *.sw?
+
+# Misc & OS generated files
+*.pem
+*.tsbuildinfo
+next-env.d.ts
+.vscode
+.cursorignore
+
+# Debug logs
+.pnpm-debug.log*
+
+# Vercel
+.vercel
+
+# Framework-specific
+.next/
+/out/
+
+# Contentlayer
+.contentlayer
+
+# Sentry Config File
+.sentryclirc
+
+.env

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,77 @@
+<div align="center">
+<h1 align="center">
+<img src="./public/assets/screenlink.svg" width="100" />
+<br>ScreenLink Web</h1>
+
+<p align="center">
+<img src="https://img.shields.io/badge/Next.js-000000.svg?style=flat-square&logo=Next.js&logoColor=white" alt="Next.js" />
+<img src="https://img.shields.io/badge/React-61DAFB.svg?style=flat-square&logo=React&logoColor=black" alt="React" />
+<img src="https://img.shields.io/badge/TypeScript-3178C6.svg?style=flat-square&logo=TypeScript&logoColor=white" alt="TypeScript" />
+<img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC.svg?style=flat-square&logo=Tailwind-CSS&logoColor=white" alt="Tailwind CSS" />
+<img src="https://img.shields.io/badge/Vercel-000000.svg?style=flat-square&logo=Vercel&logoColor=white" alt="Vercel" />
+</p>
+
+<p align="center">
+<a href="https://screenlink.io">Visit ScreenLink.io</a>
+</p>
+
+</div>
+
+---
+
+## 📖 Table of Contents
+
+- [📖 Table of Contents](#-table-of-contents)
+- [📍 Overview](#-overview)
+- [🚀 Getting Started](#-getting-started)
+- [🔧 Installation](#-installation)
+- [📦 Features](#-features)
+- [🤝 Contributing](#-contributing)
+
+---
+
+## 📍 Overview
+
+ScreenLink Web is the web platform for ScreenLink, the open-source alternative to Loom for screen recording. It manages user accounts, video uploads, and serves as the landing page for new users. Built with Next.js, it leverages the best of React and server-side rendering for a fast and seamless user experience.
+
+---
+
+## 🚀 Getting Started
+
+To run the development server:
+```bash
+yarn dev
+```
+
+
+Visit [http://localhost:3000](http://localhost:3000) to view the application.
+
+## 🔧 Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/mangledbottles/screenlink
+```
+
+
+2. Install dependencies:
+```bash
+   cd screenlink/apps/web && yarn
+```
+
+
+3. Start the development server:
+```bash
+yarn dev
+```
+
+
+## 📦 Features
+
+- **User Account Management:** Sign up, sign in, and manage user profiles.
+- **Video Uploads:** Upload and manage screen recordings.
+- **Landing Page:** Informational landing page for new users.
+
+## 🤝 Contributing
+
+Contributions are welcome! Check out the [issues](https://github.com/mangledbottles/screenlink-web/issues) or submit a pull request.

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>
+  );
+}