docs: add API structure

package.json

@@ -12,6 +12,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@supabase/ssr": "^0.5.2",
     "@supabase/supabase-js": "^2.49.1",
+    "@types/zxcvbn": "^4.4.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.476.0",
@@ -20,7 +21,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.0.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/app/api/README.md

@@ -0,0 +1,30 @@
+# Todoist API
+
+## Create Task
+POST /api/task
+
+## Read Task
+GET /api/task -> List all task
+GET /api/task/[taskId] -> Get specific task
+
+## Update Task
+PATCH /api/task/[taskId]
+
+## Delete Task
+DELETE /api/task/[taskId]
+
+## Task Structure
+*Subject to change*
+
+```js
+{
+    taskId: number,
+    userId: string,
+    title: string,
+    description: string,
+    dueDate: Date,
+    createdAt: Date,
+    modifiedAt: Date,
+    markedAsDone: boolean,
+}
+```

src/app/register/page.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { motion } from "motion/react";
+import { Navbar } from "@/components/navbar";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Lock, Mail, User } from "lucide-react";
+import { useState } from "react";
+import { createClient } from '@/utils/supabase/client'
+import zxcvbn from "zxcvbn";
+
+export default function Register() {
+    const supabase = createClient();
+
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [passwordStrength, setPasswordStrength] = useState<number | null>(null);
+
+    const handlePasswordInput = async (pass: string) => {
+        // This function is called whenever the user types in the password field
+        setPassword(pass);
+
+        // Calculate password strength with Dropbox's zxcvbn library
+        setPasswordStrength(zxcvbn(password).score);
+
+        // TODO: Display password strength to the user
+        console.log(passwordStrength);
+    }
+
+    const handleSignUp = async () => {
+        setError(null);
+
+        // TODO: Validate email address
+        // TODO: Validate password strength
+        // TODO: Validate password confirmation
+
+        const { error } = await supabase.auth.signUp({
+            email, password, options: {
+                data: {
+                    name: name
+                }
+            }
+        });
+        if (error) setError(error.message);
+
+        // TODO: Clear form fields after successful sign up
+        // TODO: Display email verification message to the user
+    };
+
+    const handleGoogleSignIn = async () => {
+        const { error } = await supabase.auth.signInWithOAuth({ provider: 'google' });
+        if (error) setError(error.message);
+    };
+
+    return (
+        <div className="min-h-screen bg-gray-900 text-white flex flex-col">
+            <div className="w-full">
+                <Navbar />
+            </div>
+
+            <div className="flex-1 flex items-center justify-center px-6">
+                {/* Card */}
+                <motion.div
+                    initial={{ opacity: 0, y: -20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.8 }}
+                    className="w-full max-w-md p-8 bg-gray-800 rounded-lg shadow-md"
+                >
+                    <h2 className="text-3xl font-bold text-center mb-6">Register</h2>
+
+                    {error && <p className="text-red-500 text-center mb-4">{error}</p>}
+
+                    <div className="space-y-4">
+                        <div>
+                            <label className="block text-gray-400 mb-1">Name</label>
+                            <div className="relative">
+                                <User className="absolute left-3 top-2 text-gray-500" size={20} />
+                                <Input
+                                    type="text"
+                                    placeholder="John Doe"
+                                    className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="block text-gray-400 mb-1">Email</label>
+                            <div className="relative">
+                                <Mail className="absolute left-3 top-2 text-gray-500" size={20} />
+                                <Input
+                                    type="email"
+                                    placeholder="john@example.com"
+                                    className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="block text-gray-400 mb-1">Password</label>
+                            <div className="relative">
+                                <Lock className="absolute left-3 top-2 text-gray-500" size={20} />
+                                <Input
+                                    type="password"
+                                    placeholder="Password"
+                                    className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
+                                    value={password}
+                                    onChange={(e) => handlePasswordInput(e.target.value)}
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="block text-gray-400 mb-1">Confirm Password</label>
+                            <div className="relative">
+                                <Lock className="absolute left-3 top-2 text-gray-500" size={20} />
+                                <Input
+                                    type="password"
+                                    placeholder="Confirm password"
+                                    className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
+                                    value={confirmPassword}
+                                    onChange={(e) => setConfirmPassword(e.target.value)}
+                                />
+                            </div>
+                        </div>
+
+                        <Button
+                            className="w-full bg-white text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-lg mt-4 hover:bg-gray-200"
+                            onClick={handleSignUp}
+                        >
+                            Sign Up
+                        </Button>
+
+                        <div className="text-center text-gray-400">
+                            <p>By signing up, you agree to our <a href="#" className="text-blue-400 hover:underline">Terms of Service</a> and <a href="#" className="text-blue-400 hover:underline">Privacy Policy</a></p>
+                        </div>
+
+
+                        <div className="my-6 flex items-center">
+                            <div className="flex-1 border-t border-gray-600"></div>
+                            <p className="px-4 text-gray-400">or</p>
+                            <div className="flex-1 border-t border-gray-600"></div>
+                        </div>
+                        <Button
+                            className="w-full bg-blue-500 text-white font-semibold px-6 py-3 rounded-lg shadow-lg mt-2 hover:bg-blue-600"
+                            onClick={handleGoogleSignIn}
+                        >
+                            Sign in with Google
+                        </Button>
+                    </div>
+
+                    <p className="text-center text-gray-400 mt-4">
+                        Already have an account? <a href="/login" className="text-blue-400 hover:underline">Login</a>
+                    </p>
+                </motion.div>
+            </div>
+
+        </div>
+    );
+}

yarn.lock

@@ -507,6 +507,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/zxcvbn@^4.4.5":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@types/zxcvbn/-/zxcvbn-4.4.5.tgz#8ce8623ed7a36e3a76d1c0b539708dfb2e859bc0"
+  integrity sha512-FZJgC5Bxuqg7Rhsm/bx6gAruHHhDQ55r+s0JhDh8CQ16fD7NsJJ+p8YMMQDhSQoIrSmjpqqYWA96oQVMNkjRyA==
+
 "@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
   version "8.24.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.24.1.tgz#d104c2a6212304c649105b18af2c110b4a1dd4ae"
@@ -3169,3 +3174,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zxcvbn@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
+  integrity sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==