feat: add .env to .gitignore and implement sign up functionality

.env.example

@@ -0,0 +1,2 @@
+SUPABASE_PUBLIC_URL = 
+SUPABASE_ANON_PUBLIC_KEY = 

.gitignore

@@ -22,5 +22,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-index.html
 package-lock.json
+.env
+
+*.html
+!template.html
+

app/login.js

@@ -0,0 +1,17 @@
+import { load, html } from 'emmy-dom/dist/server.js'
+
+export function login () {
+  this.className = 'flex flex-col justify-center items-center text-center w-full h-fit text-gray-800 gap-0'
+
+  return html`
+    <form class="flex flex-col justify-center items-center text-center w-full h-fit text-gray-800 gap-0">
+      <input class="w-[80%] h-[50px] rounded-lg border-2 border-gray-300" type="text" placeholder="Correo electrónico">
+      <input class="w-[80%] h-[50px] rounded-lg border-2 border-gray-300" type="password" placeholder="Contraseña">
+      <button class="w-[80%] h-[50px] rounded-lg bg-[#384DBF] text-white text-2xl md:text-4xl px-4 py-2 rounded-lg drop-shadow-lg">
+        Iniciar sesión
+      </button>
+    </form>
+  `
+}
+
+export const Login = load(login, 'Login')

app/services/client.js

@@ -2,4 +2,19 @@ import { createClient } from '@supabase/supabase-js'
 
 const supabaseUrl = process.env.SUPABASE_PUBLIC_URL
 const supabaseKey = process.env.SUPABASE_ANON_PUBLIC_KEY
-createClient(supabaseUrl, supabaseKey)
+export const client = createClient(supabaseUrl, supabaseKey)
+
+export async function signUpNewUser (email, password) {
+  const { data, error } = await client.auth.signUp({
+    email,
+    password,
+    options: {
+      emailRedirectTo: 'https//example.com/welcome'
+    }
+  })
+  if (error) {
+    console.log(error)
+    return
+  }
+  return data
+}

app/signup.js

@@ -0,0 +1,31 @@
+import { load, html } from 'emmy-dom/dist/server.js'
+import { signUpNewUser } from './services/client.js'
+
+export function signup () {
+  this.className = 'flex flex-col justify-center items-center text-center w-full h-fit text-gray-800 gap-0'
+
+  const [email, setEmail] = this.useState('')
+  const [password, setPassword] = this.useState('')
+
+  this.useEffect(() => {
+    this.querySelector('#signup').addEventListener('submit', async (e) => {
+      e.preventDefault()
+      setEmail(e.target[0].value)
+      setPassword(e.target[1].value)
+      await signUpNewUser(email, password)
+    })
+    console.log('didMount')
+  }, ['didMount'])
+
+  return html`
+    <form class="flex flex-col justify-center items-center text-center w-full h-fit text-gray-800 gap-0" id="signup">
+      <input class="w-[80%] h-[50px] rounded-lg border-2 border-gray-300" type="text" placeholder="Correo electrónico">
+      <input class="w-[80%] h-[50px] rounded-lg border-2 border-gray-300" type="password" placeholder="Contraseña">
+      <button class="w-[80%] h-[50px] rounded-lg bg-[#384DBF] text-white text-2xl md:text-4xl px-4 py-2 rounded-lg drop-shadow-lg" type="submit">
+        Registrarse
+      </button>
+    </form>
+  `
+}
+
+export const Signup = load(signup, 'Signup')

prerender.js

@@ -1,5 +1,7 @@
 import { build, javascript } from 'emmy-dom/dist/server.js'
 import { app, App } from './app/index.js'
+import { login, Login } from './app/login.js'
+import { signup, Signup } from './app/signup.js'
 import { gallery } from './app/components/gallery.js'
 
 build({
@@ -10,3 +12,23 @@ build({
     import { load, html } from 'emmy-dom'
   `
 })
+
+build({
+  app: Login,
+  template: 'template.html',
+  generators: { login },
+  dependencies: javascript`
+    import { load, html } from 'emmy-dom'
+  `,
+  path: 'login.html'
+})
+
+build({
+  app: Signup,
+  template: 'template.html',
+  generators: { signup },
+  dependencies: javascript`
+    import { load, html } from 'emmy-dom'
+  `,
+  path: 'signup.html'
+})