From 8b397dfff46fe13b632b1be146e973414ac84b2c Mon Sep 17 00:00:00 2001
From: Emmanuel Norambuena <eanorambuena@uc.cl>
Date: Sat, 6 Jan 2024 03:44:04 -0300
Subject: [PATCH] feat: add .env to .gitignore and implement sign up
 functionality

---
 .env.example           |  2 ++
 .gitignore             |  6 +++++-
 app/login.js           | 17 +++++++++++++++++
 app/services/client.js | 17 ++++++++++++++++-
 app/signup.js          | 31 +++++++++++++++++++++++++++++++
 prerender.js           | 22 ++++++++++++++++++++++
 6 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 .env.example
 create mode 100644 app/login.js
 create mode 100644 app/signup.js

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..ae3028d
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+SUPABASE_PUBLIC_URL = 
+SUPABASE_ANON_PUBLIC_KEY = 
diff --git a/.gitignore b/.gitignore
index 0a961c4..efb623d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,5 +22,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-index.html
 package-lock.json
+.env
+
+*.html
+!template.html
+
diff --git a/app/login.js b/app/login.js
new file mode 100644
index 0000000..3318c33
--- /dev/null
+++ b/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')
diff --git a/app/services/client.js b/app/services/client.js
index 3a4c8b7..b55707e 100644
--- a/app/services/client.js
+++ b/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
+}
diff --git a/app/signup.js b/app/signup.js
new file mode 100644
index 0000000..1b2f2c8
--- /dev/null
+++ b/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')
diff --git a/prerender.js b/prerender.js
index c99d542..76d5e7e 100644
--- a/prerender.js
+++ b/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'
+})