Frontend Fixed
This commit is contained in:
12
React/src/app/auth/session/route.ts
Normal file
12
React/src/app/auth/session/route.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { auth0 } from "../../../lib/auth0";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const session = await auth0.getSession();
|
||||
return NextResponse.json({ session });
|
||||
} catch (error) {
|
||||
console.error("Error getting session:", error);
|
||||
return NextResponse.json({ session: null }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -1,67 +1,94 @@
|
||||
import { useState } from "react";
|
||||
import { auth0 } from "../lib/auth0";
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
|
||||
export default async function Home() {
|
||||
|
||||
export default function Home() {
|
||||
const [contacts, setContacts] = useState<string[]>([]);
|
||||
const [codeword, setCodeword] = useState("");
|
||||
const [session, setSession] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
|
||||
const session = await auth0.getSession();
|
||||
|
||||
console.log("Session:", session?.user);
|
||||
useEffect(() => {
|
||||
// Fetch session data from an API route
|
||||
fetch("/auth/session")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setSession(data.session);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to fetch session:", error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
function saveToDB() {
|
||||
//e.preventDefault();
|
||||
alert("Saving contacts...");
|
||||
// const contactInputs = document.querySelectorAll(".text-input") as NodeListOf<HTMLInputElement>;
|
||||
// const contactValues = Array.from(contactInputs).map(input => input.value);
|
||||
// console.log("Contact values:", contactValues);
|
||||
// // save codeword and contacts to database
|
||||
// fetch("/api/databaseStorage", {
|
||||
// method: "POST",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// },
|
||||
// body: JSON.stringify({
|
||||
// email: session?.user?.email || "",
|
||||
// codeword: (document.getElementById("codeword") as HTMLInputElement)?.value,
|
||||
// contacts: contactValues,
|
||||
// }),
|
||||
// })
|
||||
// .then((response) => {
|
||||
// if (response.ok) {
|
||||
// alert("Contacts saved successfully!");
|
||||
// } else {
|
||||
// alert("Error saving contacts.");
|
||||
// }
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error("Error:", error);
|
||||
// alert("Error saving contacts.");
|
||||
// });
|
||||
|
||||
const contactInputs = document.querySelectorAll(
|
||||
".text-input"
|
||||
) as NodeListOf<HTMLInputElement>;
|
||||
const contactValues = Array.from(contactInputs).map((input) => input.value);
|
||||
|
||||
fetch("/api/databaseStorage", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: session?.user?.email || "",
|
||||
codeword: codeword,
|
||||
contacts: contactValues,
|
||||
}),
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert("Contacts saved successfully!");
|
||||
} else {
|
||||
alert("Error saving contacts.");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
alert("Error saving contacts.");
|
||||
});
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
// If no session, show sign-up and login buttons
|
||||
if (!session) {
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<div className="space-y-7 bg-indigo-800 items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="space-x-2 flex flex-row gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<a href="/auth/login?screen_hint=signup">
|
||||
<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-300">Sign up</button>
|
||||
<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-300">
|
||||
Sign up
|
||||
</button>
|
||||
</a>
|
||||
<a href="/auth/login">
|
||||
<button className = "box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-400">Log in</button>
|
||||
<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-400">
|
||||
Log in
|
||||
</button>
|
||||
</a>
|
||||
</main>
|
||||
<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">Fauxcall</h1>
|
||||
<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">Set emergency contacts</h2>
|
||||
<p>If you stop speaking or say the codeword, these contacts will be notified</p>
|
||||
<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">
|
||||
Fauxcall
|
||||
</h1>
|
||||
<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">
|
||||
Set emergency contacts
|
||||
</h2>
|
||||
<p>
|
||||
If you stop speaking or say the codeword, these contacts will be
|
||||
notified
|
||||
</p>
|
||||
{/* form for setting codeword */}
|
||||
<form className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}>
|
||||
<form
|
||||
className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={codeword}
|
||||
@@ -70,11 +97,17 @@ export default async function Home() {
|
||||
className="border border-gray-300 rounded-md p-2"
|
||||
/>
|
||||
<button
|
||||
className="bg-blue-500 text-white font-semibold font-lg rounded-md p-2"
|
||||
type="submit">Set codeword</button>
|
||||
className="bg-blue-500 text-white font-semibold font-lg rounded-md p-2"
|
||||
type="submit"
|
||||
>
|
||||
Set codeword
|
||||
</button>
|
||||
</form>
|
||||
{/* form for adding contacts */}
|
||||
<form className="space-y-5 flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}>
|
||||
<form
|
||||
className="space-y-5 flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={contacts}
|
||||
@@ -97,7 +130,12 @@ export default async function Home() {
|
||||
className="border border-gray-300 rounded-md p-2"
|
||||
/>
|
||||
<button type="button">Add</button>
|
||||
<button className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2" type="submit">Set contacts</button>
|
||||
<button
|
||||
className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2"
|
||||
type="submit"
|
||||
>
|
||||
Set contacts
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
@@ -107,25 +145,42 @@ export default async function Home() {
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<h1>Welcome, {session.user.name}!</h1>
|
||||
|
||||
<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">Fauxcall</h1>
|
||||
<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">Set emergency contacts</h2>
|
||||
<p>If you stop speaking or say the codeword, these contacts will be notified</p>
|
||||
{/* form for setting codeword */}
|
||||
<form className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}>
|
||||
<input
|
||||
type="text"
|
||||
value={codeword}
|
||||
onChange={(e) => setCodeword(e.target.value)}
|
||||
placeholder="Codeword"
|
||||
className="border border-gray-300 rounded-md p-2"
|
||||
/>
|
||||
<button
|
||||
|
||||
<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">
|
||||
Fauxcall
|
||||
</h1>
|
||||
<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">
|
||||
Set emergency contacts
|
||||
</h2>
|
||||
<p>
|
||||
If you stop speaking or say the codeword, these contacts will be
|
||||
notified
|
||||
</p>
|
||||
{/* form for setting codeword */}
|
||||
<form
|
||||
className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={codeword}
|
||||
onChange={(e) => setCodeword(e.target.value)}
|
||||
placeholder="Codeword"
|
||||
className="border border-gray-300 rounded-md p-2"
|
||||
/>
|
||||
<button
|
||||
className="bg-blue-500 text-white font-semibold font-lg rounded-md p-2"
|
||||
type="submit">Set codeword</button>
|
||||
</form>
|
||||
{/* form for adding contacts */}
|
||||
<form id="Contacts" className="space-y-5 flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}>
|
||||
type="submit"
|
||||
>
|
||||
Set codeword
|
||||
</button>
|
||||
</form>
|
||||
{/* form for adding contacts */}
|
||||
<form
|
||||
id="Contacts"
|
||||
className="space-y-5 flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={contacts}
|
||||
@@ -154,26 +209,37 @@ export default async function Home() {
|
||||
placeholder="Write down an emergency contact"
|
||||
className="text-input border border-gray-300 rounded-md p-2"
|
||||
/>
|
||||
<button onClick={() => {
|
||||
alert("Adding contact...");
|
||||
let elem = document.getElementsByClassName("text-input")[0] as HTMLElement;
|
||||
console.log("Element:", elem);
|
||||
let d = elem.cloneNode(true) as HTMLElement;
|
||||
document.getElementById("Contacts")?.appendChild(d);
|
||||
}}
|
||||
className="bg-emerald-500 text-fuchsia-300"
|
||||
type="button">Add</button>
|
||||
|
||||
<button
|
||||
<button
|
||||
onClick={() => {
|
||||
alert("Adding contact...");
|
||||
let elem = document.getElementsByClassName(
|
||||
"text-input"
|
||||
)[0] as HTMLElement;
|
||||
console.log("Element:", elem);
|
||||
let d = elem.cloneNode(true) as HTMLElement;
|
||||
document.getElementById("Contacts")?.appendChild(d);
|
||||
}}
|
||||
className="bg-emerald-500 text-fuchsia-300"
|
||||
type="button"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={saveToDB}
|
||||
className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2">Save</button>
|
||||
</form>
|
||||
<div>
|
||||
<a href="/call">
|
||||
<button className="bg-zinc-700 text-lime-300 font-semibold font-lg rounded-md p-2">Call</button>
|
||||
</a>
|
||||
</div>
|
||||
className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
<div>
|
||||
<a href="/call">
|
||||
<button className="bg-zinc-700 text-lime-300 font-semibold font-lg rounded-md p-2">
|
||||
Call
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
<a href="/auth/logout">
|
||||
<button>Log out</button>
|
||||
@@ -182,6 +248,4 @@ export default async function Home() {
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user