feat: improve login page

different-ai · Apr 20, 2024 · 8e6e4ba · 8e6e4ba
1 parent 1d3abc7
commit 8e6e4ba
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 106 deletions.
diff --git a/app/app/keys/client.tsx b/app/app/keys/client.tsx
@@ -14,7 +14,7 @@ import { Label } from "@/components/ui/label";
 import { useState } from "react";
 import { create } from "./create";
 
-const UnkeyElements = () => {
+const APIKEYForm = () => {
   const [key, setKey] = useState<string>("");
   async function onCreate(formData: FormData) {
     const res = await create(formData);
@@ -38,22 +38,21 @@ const UnkeyElements = () => {
   return (
     <div className="mt-8">
       <Card className="w-[350px]">
-        <CardHeader>
-          <CardTitle>Create API Key</CardTitle>
-          <CardDescription>
-            Create your API key so you can interact with our API.
-          </CardDescription>
-        </CardHeader>
+        <CardHeader></CardHeader>
         <form action={onCreate} onSubmit={handleSubmit}>
-
           <CardFooter className="flex justify-between">
-          <Button type="submit" disabled={loading}>
-      {loading ?  'Generating Key...' : 'Create Key'}       </Button>     </CardFooter>
+            <Button type="submit" disabled={loading} className="w-full mt-4">
+              {loading ? "Generating Key..." : "Create Key"}{" "}
+            </Button>{" "}
+          </CardFooter>
+          <CardDescription>
+            You'll need it to unlock File Organizer 2000 in your plugin
+            settings.
+          </CardDescription>
         </form>
       </Card>
       {key && key.length > 0 && (
-        <>      
-
+        <>
           <Card className="w-[350px] mt-8">
             <CardHeader>
               <CardTitle>API Key</CardTitle>
@@ -76,4 +75,4 @@ const UnkeyElements = () => {
   );
 };
 
-export { UnkeyElements };
+export { APIKEYForm as UnkeyElements };
diff --git a/app/app/page.tsx b/app/app/page.tsx
@@ -1,26 +1,70 @@
 import { UnkeyElements } from "./keys/client";
+import { Button } from "@/components/ui/button";
+
+function DownloadIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" x2="12" y1="15" y2="3" />
+    </svg>
+  );
+}
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="flex flex-col items-center justify-center">
-        <h1 className="text-4xl font-bold">Welcome to File Organizer 2000</h1>
-        { process.env.ENABLE_USER_MANAGEMENT == 'true' ? ( 
-        <div className="flex flex-col items-center justify-center">
-          <p className="text-xl mt-4">
-            Just paste this inside File Organizer 2000 and you're good to go!
-          </p>
-          <UnkeyElements />
+    <div className="flex min-h-screen flex-col bg-gray-100 dark:bg-gray-900">
+      <header className="flex items-center justify-between bg-white px-6 py-4 shadow dark:bg-gray-800">
+        {/* Header content */}
+      </header>
+      <main className="flex-1 px-6 py-8">
+        <div className="mx-auto max-w-3xl space-y-8">
+          <div className="rounded-lg bg-white border border-gray-200 p-6 dark:bg-gray-800 dark:border-gray-700">
+            <div className="flex flex-col items-center justify-center space-y-4">
+              <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-200">
+                Welcome to File Organizer 2000
+              </h2>
+              {process.env.ENABLE_USER_MANAGEMENT == "true" ? (
+                <UnkeyElements />
+              ) : (
+                <p className="text-gray-500 dark:text-gray-400">
+                  Just paste this URL in the plugin settings in Obsidian and
+                  you're good to go!
+                </p>
+              )}
+            </div>
+          </div>
+          <div className="rounded-lg bg-white border border-gray-200 p-6 dark:bg-gray-800 dark:border-gray-700">
+            <div className="flex flex-col items-center justify-center space-y-4">
+              <DownloadIcon className="h-12 w-12 text-gray-600 dark:text-gray-400" />
+              <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-200">
+                Download File Organizer 2000
+              </h2>
+              <p className="text-gray-500 dark:text-gray-400">
+                Get the latest version of File Organizer 2000 to keep your files
+                organized.
+              </p>
+              <Button>Download</Button>
+            </div>
+          </div>
         </div>
-        ) :  (
-          <div className="flex flex-col items-center justify-center">
-
-        <p className="text-xl mt-4">
-          Just paste this URL in the plugin settings in Obsidian and you're good to go!
-        </p>
+      </main>
+      <footer className="bg-white px-6 py-4 shadow dark:bg-gray-800">
+        <div className="mx-auto max-w-3xl text-center text-gray-500 dark:text-gray-400">
+          © 2024 File Organizer 2000. All rights reserved.
         </div>
-        )}
-   </div>
-    </main>
+      </footer>
+    </div>
   );
 }
diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+      className={cn("bg-card", className)}
       {...props}
     />
   ),
@@ -15,7 +15,7 @@ Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 ", className)} {...props} />
   ),
 );
 CardHeader.displayName = "CardHeader";
@@ -35,20 +35,20 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  <p ref={ref} className={cn("text-sm text-muted-foreground mt-3", className)} {...props} />
 ));
 CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+    <div ref={ref} className={cn(" pt-0", className)} {...props} />
   ),
 );
 CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+    <div ref={ref} className={cn("flex items-center pt-0", className)} {...props} />
   ),
 );
 CardFooter.displayName = "CardFooter";

diff --git a/app/lib/posthog.js b/app/lib/posthog.js
@@ -4,12 +4,16 @@ import { PostHog } from 'posthog-node'
 export default function PostHogClient() {
     if (!process.env.NEXT_PUBLIC_POSTHOG_KEY) {
         return null
-    }
-
+    } 
     const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
         host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
         flushAt: 1,
         flushInterval: 0
     })
     return posthogClient
-}
+}`
+
+
+
+
+