diff --git a/.gitignore b/.gitignore index 7cc28c9..b68ce2d 100644 --- a/.gitignore +++ b/.gitignore @@ -49,4 +49,6 @@ amplify-gradle-config.json amplifytools.xcconfig .secret-* **.sample -#amplify-do-not-edit-end \ No newline at end of file +#amplify-do-not-edit-end + +.next \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..dceda2d --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "semi": false +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 585036f..e20721b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "united-way-next", "version": "0.1.0", "dependencies": { + "dotenv": "^16.4.4", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", "next": "14.1.0", @@ -1425,6 +1426,17 @@ "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==", "optional": true }, + "node_modules/dotenv": { + "version": "16.4.4", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.4.tgz", + "integrity": "sha512-XvPXc8XAQThSjAbY6cQ/9PcBXmFoWuw1sQ3b8HqUCR6ziGXjkTi//kB9SWa2UwqlgdAIuRqAa/9hVljzPehbYg==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", diff --git a/package.json b/package.json index f41ba96..d367171 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "dotenv": "^16.4.4", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", "next": "14.1.0", diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx new file mode 100644 index 0000000..2ae3c7c --- /dev/null +++ b/src/app/admin/page.tsx @@ -0,0 +1,134 @@ +'use client' + +import React, { useState } from "react" + +interface FormData { + pinNumber: string +} + +function AdminLogin() { + const [formData, setFormData] = useState({ + pinNumber: "", + }) + + const handleInputChange = (event: React.ChangeEvent) => { + const { name, value } = event.target + console.log(name, value) + setFormData({ + ...formData, + [name]: value, + }) + // const newText = event.target.value; + // setInputText(newText); + + // Call the function that returns the output + } + + const handleFormSubmit = (e: { preventDefault: () => void }) => { + e.preventDefault() + // PLACEHOLDER - alert saying "Submitted!" + const verifyPIN = async (pin: string) => { + try { + const res = await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}/api/verify/`, { + method: "Post", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ pin: pin }), + }) + if (!res.ok) { + throw new Error(res.statusText) + } + console.log(res) + const resJSON = await res.json() + console.log(resJSON) + alert(resJSON["message"]) + } catch (error) { + console.error("Error verifying PIN:", error) + } + } + verifyPIN(formData.pinNumber) + } + + const [password, setPassword] = useState("") + const [showPassword, setShowPassword] = useState(false) + + return ( +
+
+

+ Admin Sign in +

+
+
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+
+ ) +} + +export default AdminLogin diff --git a/src/app/api/data/route.ts b/src/app/api/data/route.ts new file mode 100644 index 0000000..f237201 --- /dev/null +++ b/src/app/api/data/route.ts @@ -0,0 +1,24 @@ +import { NextResponse } from "next/server" + +export async function GET(request: Request) { + // the json format: + return NextResponse.json( + { + stability: 0.3, + development: 0.5, + healthcare: 0.2, + escape: 0.1, + basicNeeds: 0.1, + totalPeople: 0.4, + }, + { status: 200 } + ) +} + +// { "dollarsRaised": 500000, +// "stability": 75, +// "development": 95, +// "healthcare": 85, +// "escape": 60, +// "basicNeeds": 98, +// "totalPeople": 10000 } diff --git a/src/app/api/verify/route.ts b/src/app/api/verify/route.ts new file mode 100644 index 0000000..b163fe0 --- /dev/null +++ b/src/app/api/verify/route.ts @@ -0,0 +1,18 @@ +import { NextResponse } from 'next/server' + +export async function POST(req: Request) { + + // how to get the user pin ? + const { userPin } = await req.json(); + + // get the password from the env file + const actualPin = process.env.PRIVATE_KEY; + + // compare the + if (actualPin === userPin) { + return NextResponse.json({ response: 'Correct Pin' }, { status: 200 }); + } + else { + return NextResponse.json({ response: 'Incorrect Pin' }, { status: 200 }); + } +} diff --git a/src/app/donations/Donation.tsx b/src/app/donations/Donation.tsx new file mode 100644 index 0000000..9bc4838 --- /dev/null +++ b/src/app/donations/Donation.tsx @@ -0,0 +1,50 @@ +"use client" +import ImpactCarousel from "./ImpactCarousel" +import { useEffect, useState } from "react" +import { Downloads } from "./Downloads" + +type DonationInputs = { + companyName: string | null + dollarsRaised: number +} + +function Donation({companyName, dollarsRaised}: DonationInputs) { + // Import the proportions from the route.ts => how to + async function GetData() { + let data = await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}/api/data/`) + console.log(data) + let data_json = await data.json() + console.log(data_json) + setProportionsMap(data_json) + } + + // get the proportions + const [proportionsMap, setProportionsMap] = useState(null) + + useEffect(() => { + GetData() + }, []) + + return ( + <> +
+ {proportionsMap != null ? ( + + ) : ( + Loading... + )} +
+ + + ) +} + +export default Donation diff --git a/src/app/donations/Downloads.tsx b/src/app/donations/Downloads.tsx new file mode 100644 index 0000000..6bad777 --- /dev/null +++ b/src/app/donations/Downloads.tsx @@ -0,0 +1,68 @@ +"use client" + +import html2canvas from "html2canvas" +import { jsPDF } from "jspdf" +import React, { useState } from "react" + +export function Downloads() { + const downloadRef = React.createRef() + + const handleDownloadPdf = async () => { + setSharebool(true) + const element = downloadRef.current + const canvas = await html2canvas(element as HTMLElement) + const data = canvas.toDataURL("image/png") + + const pdf = new jsPDF() + const imgProperties = pdf.getImageProperties(data) + const pdfWidth = pdf.internal.pageSize.getWidth() + const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width + + pdf.addImage(data, "PNG", 0, 0, pdfWidth, pdfHeight) + pdf.save("donation.pdf") + setSharebool(false) + } + + const handleDownloadImage = async () => { + const element = downloadRef.current + console.log(element) + const canvas = await html2canvas(element as HTMLElement) + + const data = canvas.toDataURL("image/jpg") + const link = document.createElement("a") + + if (typeof link.download === "string") { + link.href = data + link.download = "image.jpg" + + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + } else { + window.open(data) + } + setSharebool(false) + } + + const [shareBool, setSharebool] = useState(false) + + return ( + <> +
+ hahahahahahahahhahahasdfhalskdfjhalskjjdfh blah blah this is the thing + that downloads hopefully or something +
+
+ + +
+ + ) +} diff --git a/src/app/donations/page.tsx b/src/app/donations/page.tsx index 5f918e7..888273b 100644 --- a/src/app/donations/page.tsx +++ b/src/app/donations/page.tsx @@ -1,120 +1,39 @@ -"use client" +import Donation from "./Donation" + +const page = ({ + params, + searchParams, +}: { + params: { slug: string } + searchParams?: { [key: string]: string | string[] | undefined } +}) => { + const companyName = searchParams?.name + const amount = searchParams?.amount || 0 -import { jsPDF } from "jspdf" -import { useSearchParams } from "next/navigation" -import html2canvas from "html2canvas" -import Image from "next/image" -import ImpactCarousel from "./ImpactCarousel" -import React, { useState } from "react" - -function Donation() { - const searchParams = useSearchParams() - const companyName = searchParams.get("name") - const amount = searchParams.get("amount") + var label = "Here's what your donation" + if (companyName) { + label = `Here's what the ${companyName} United Way campaign` + } // make sure dollarRaised is a number if (amount === null) { throw new Error("dollarsRaised is null") } const dollarsRaised = parseFloat(amount) - - // dummy proportions - const proportionsMap: { [key: string]: number } = { - stability: 0.3, - development: 0.5, - healthcare: 0.2, - escape: 0.1, - basicNeeds: 0.1, - totalPeople: 0.4, - } - - const downloadRef = React.createRef() - - const handleDownloadPdf = async () => { - setSharebool(true) - const element = downloadRef.current - const canvas = await html2canvas(element as HTMLElement) - const data = canvas.toDataURL("image/png") - - const pdf = new jsPDF() - const imgProperties = pdf.getImageProperties(data) - const pdfWidth = pdf.internal.pageSize.getWidth() - const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width - - pdf.addImage(data, "PNG", 0, 0, pdfWidth, pdfHeight) - pdf.save("donation.pdf") - setSharebool(false) - } - - const handleDownloadImage = async () => { - const element = downloadRef.current - console.log(element) - const canvas = await html2canvas(element as HTMLElement) - - const data = canvas.toDataURL("image/jpg") - const link = document.createElement("a") - - if (typeof link.download === "string") { - link.href = data - link.download = "image.jpg" - - document.body.appendChild(link) - link.click() - document.body.removeChild(link) - } else { - window.open(data) - } - setSharebool(false) - } - - const [shareBool, setSharebool] = useState(false) - - var label = "Here's what your donation" - if (companyName) { - label = `Here's what the ${companyName} United Way campaign` - } - return ( - <> + ) } - -export default Donation +export default page