Skip to content

Commit

Permalink
fix(footer): fix news letter in footer
Browse files Browse the repository at this point in the history 
fix news letter in footer

resolve #75
  • Loading branch information
@dzc0d3r
dzc0d3r committed Nov 26, 2023
1 parent cc772f6 commit d44359f
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 87 deletions.
2 changes: 1 addition & 1 deletion public/locales/ar/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,4 +161,4 @@
"passwordMin": "يجب أن تكون كلمة المرور 8 أحرف على الأقل",
"passwordMatch": "كلمة المرور غير متطابقة"
}
}
}
2 changes: 1 addition & 1 deletion public/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,4 +161,4 @@
"passwordMatch": "Password don't match",
"passwordINvalid": "Password invalid"
}
}
}
78 changes: 39 additions & 39 deletions src/components/Footer/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,47 @@
import {addDoc, collection} from "firebase/firestore"
import Image from "next/image"
import Link from "next/link"
import {useTranslation} from "next-i18next"
import {useState} from "react"
import {useForm} from "react-hook-form"
import {BsTwitterX} from "react-icons/bs"
import {FaFacebook, FaGithub} from "react-icons/fa"
import {toast} from "react-toastify"
import { addDoc, collection } from "firebase/firestore";
import Image from "next/image";
import Link from "next/link";
import { useTranslation } from "next-i18next";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { BsTwitterX } from "react-icons/bs";
import { FaFacebook, FaGithub } from "react-icons/fa";
import { toast } from "react-toastify";

import {db} from "@/util/firebase"
import { db } from "@/util/firebase";

import DropDown from "./DropDown"
export default function Footer () {
const {t} = useTranslation("common")
import DropDown from "./DropDown";
export default function Footer() {
const { t } = useTranslation("common");

const [formData, setFormData] = useState([{
email: "",
}])
const [formData, setFormData] = useState([
{
email: "",
},
]);
const onChange = (e) => {
const {name, value} = e.target
setFormData({...formData, [name]: value})
}
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const onSubmit = async (data) => {

try {
const response = await fetch("/api/news/subscribe", {
method: "POST",
body: JSON.stringify(data),
type: "application/json",
})
});
if (response.ok) {

setFormData([{email: ""}])
toast.success(t("footer.email_sent"))
setFormData([{ email: "" }]);
toast.success(t("footer.email_sent"));
}

await addDoc(collection(db, "news_emails"), {email: data.email})


await addDoc(collection(db, "news_emails"), { email: data.email });
} catch (err) {
toast.success(err)
toast.success(err);
}
}
const {register, handleSubmit, formState} = useForm()
const {errors} = formState
};
const { register, handleSubmit, formState } = useForm();
const { errors } = formState;
return (
<footer className='bg-DarkTeal'>
<div className='mx-auto w-full max-w-screen-xl p-10 xl:p-2 py-8'>
Expand Down Expand Up @@ -107,24 +105,26 @@ export default function Footer () {

<div className='flex items-center flex-shrink-0 w-full mx-auto sm:w-auto rtl:ml-4 ltr:md:mr-4'>
<form

className='flex flex-col items-start w-full md:flex-row rtl:text-right'
onSubmit={handleSubmit(onSubmit)}
>
<div className="flex flex-col items-start w-full">
<div className='flex flex-col items-start w-full'>
<input
type='email'
id='email'
placeholder={t("footer.email")}
className='bg-white border border-gray-300 md:w-64 mb-2 md:mb-0 md:mr-2 text-sm rounded-lg block w-full p-2.5 focus:outline-none md:rtl:mx-2'
value={formData.email}
onChange={onChange}
{
...register("email", {required: t("formErrors.email")})
}

{...register("email", {
required: t("formErrors.email"),
})}
/>
{errors?.email && <p className='mx-1 rtl:mr-2 rtl:text-base text-sm text-red-400 mt-1 animate-pulse'>{errors.email.message}</p>}
{errors?.email && (
<p className='mx-1 rtl:mr-2 rtl:text-base text-sm text-red-400 mt-1 animate-pulse'>
{errors.email.message}
</p>
)}
</div>
<button
className='text-white bg-Teal hover:bg-white hover:text-Teal focus:ring-4 focus:outline-none font-medium rounded-lg text-sm w-full sm:w-full px-5 py-2.5 center '
Expand Down Expand Up @@ -177,5 +177,5 @@ export default function Footer () {
</div>
</div>
</footer>
)
);
}
87 changes: 41 additions & 46 deletions src/pages/api/news/subscribe.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,33 @@
import nodemailer from "nodemailer";

import nodemailer from 'nodemailer'


export default async function handler (req, res) {
if (req.method !== 'POST') {
return res.status(405).json({error: "method not allowed"})
}
const {email} = JSON.parse(req.body)
if (!email) {
return res.status(400).json({error: 'Email is required'})
}
export default async function handler(req, res) {
if (req.method !== "POST") {
return res.status(405).json({ error: "method not allowed" });
}
const { email } = JSON.parse(req.body);
if (!email) {
return res.status(400).json({ error: "Email is required" });
}

try {
// Create a Nodemailer transporter using Gmail credentials from .env
const transporter = nodemailer.createTransport({
service: 'gmail',
host: "smtp.gmail.com",
port: 465,
secure: true,
auth: {
user: process.env.GMAIL_USER,
pass: process.env.GMAIL_PASS,
},
})
try {
// Create a Nodemailer transporter using Gmail credentials from .env
const transporter = nodemailer.createTransport({
service: "gmail",
host: "smtp.gmail.com",
port: 465,
secure: true,
auth: {
user: process.env.GMAIL_USER,
pass: process.env.GMAIL_PASS,
},
});

// Email configuration with HTML content
const mailOptions = {
from: process.env.FROM_INNERSPACE,
to: email,
subject: 'Subscription Confirmation',
html: `
// Email configuration with HTML content
const mailOptions = {
from: process.env.FROM_INNERSPACE,
to: email,
subject: "Subscription Confirmation",
html: `
<html>
<head>
<style>
Expand Down Expand Up @@ -57,22 +55,19 @@ export default async function handler (req, res) {
</body>
</html>
`,
}
};

// Send the email
await transporter.sendMail(mailOptions
, (error, info) => {
if (error) {
return res.status(500).json({error: 'Oops something went wrong'})
} else {
return res.status(200).json({success: true})
}
}
)


} catch (error) {

return res.status(500).json({error: 'Internal Server Error'})
}
// Send the email
await transporter.sendMail(mailOptions, (error, info) => {
if (error) {
return res
.status(500)
.json({ error: "Oops something went wrong" });
} else {
return res.status(200).json({ success: true });
}
});
} catch (error) {
return res.status(500).json({ error: "Internal Server Error" });
}
}

0 comments on commit d44359f

Please sign in to comment.