import { useState } from "react";
import { signup } from "../hooks/auth";

function Signup() {
 const [username, setUsername] = useState("");
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");
 const [confirmPassword, setConfirmPassword] = useState("");
 const [isLoggedIn, setIsLoggedIn] = useState(false);

 const handleSubmit = async (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      // show error message
      return;
    }
    const res = await signup(username, email, password);
    if (res.ok) {
      setIsLoggedIn(true);
      // redirect to profile page
    } else {
      // show error message
    }
 };

 return (
    <form onSubmit={handleSubmit}>
      <h1>Signup</h1>
      <label htmlFor="username">Username</label>
      <input
        type="text"
        name="username"
        id="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <label htmlFor="email">Email</label>
      <input
        type="email"
        name="email"
        id="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <label htmlFor="password">Password</label>
      <input
        type="password"
        name="password"
        id="password"
        value={password}
        onChange={(e) 'This is the README.md file for my TikTok clone app.')'

version: '0.1.1'
title: 'My TikTok Clone'
description: 'I would like to build up a app as TikTok using nextjs.'
license: 'ISC'
rootDir: '.'

dependencies:
'@types/node'
@types/react'
@types/react-dom'
react'
react-dom'
typescript'

devDependencies:
'@types/node'
@types/react'
@types/react-dom'
react'
react-dom'
typescript'

 huskey:
["preinstall", "install"]

preinstall: ""
install: "npm install"

plugins:
@types/node'
@types/react'
@types/react-dom'
react'
react-dom'
typescript'

# In src/styles/style.css:
body {
   margin: 0;
   padding: 0;
   text-align: center;
 }

h1 {
   font-size: 3em;
}

a {
   color: brown;
}

# In src/utils/auth.js:
import crypto from 'crypto';

function generateAuthToken() {
 return crypto.randomBytes(32).toString('hex');
}

export async function signup(username, email, password) {
 const authToken = generateAuthToken();
 const userData = {
    username,
    email,
    password: crypto.createHash('sha256').update(password).digest('hex'),
    authToken,
 };
 // Your supabase database code goes here
 return {
    ok: true,
    data: userData,
 };
}

export async function login(username, password) {
 const userData = {
    email,
    password: crypto.createHash('sha256').update(password).digest('hex'),
 };
 // Your supabase database code goes here
 return {
    ok: true,
    data: userData,
 };
}