[Feat]

[Abdus-8747]

Description

Issue Title: Add Email Validation to Newsletter Subscription Form with Stylish Alert

Description: Currently, the email input in the newsletter subscription section allows any text input.

We need to enhance the user experience by:

Ensuring the input field accepts only valid email addresses. Displaying a cool and visually appealing alert message when the "Subscribe" button is clicked: If the email format is valid, show a success message. If the email format is invalid, prompt the user to enter a valid email address. Acceptance Criteria:

The email field should validate the format of the input using a regular expression. When the "Subscribe" button is clicked: If the email is valid, display a stylish success alert (e.g., with custom colors, icons, and animations). If the email is invalid, display a stylish error alert (e.g., with appropriate colors and icons to indicate an error). Suggested Implementation:

Add an id attribute to the email input field and the subscribe button.

Use JavaScript to validate the email input.

Use CSS to design visually appealing alerts.

Screenshots

Checklist

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I'm a GSSoC'24-Extd contributor
• [X] I'm a Hacktoberfest'24 contributor
• [X] I am willing to work on this issue (optional)

[github-actions[bot]]

Hello Abdus-8747! Thanks for opening an issue in Ezyshop! 🚀

• We'll get back to you as soon as possible.

• Hope you star our Repo.

• Join our Discord Server to collaborate and discuss further.

[mdazfar2]

Hey @Abdus-8747, you want it so that when a user enters an email, only valid emails will be fetched, right? And for invalid emails, a popup alert message should appear? If I'm correct, please let me know, or describe in detail what exactly you mean.

Also, tell me one thing, Abdus: how are you fetching so many valid emails? Is there any API or library that can fetch unlimited emails for free? We aren't using any paid service.

[Abdus-8747]

Hey @mdazfar2 first of all thank you for your response,

Yes, you're correct! I want to make sure that only valid emails (with use of @ and .)are accepted when a user enters an email, and if an invalid email is entered, a popup alert should notify the user immediately. The main goal is to prevent any wrong formatted email in the system and enhance user experience.

And I am exited to work with you as it's first time for me as a beginner.

[mdazfar2]

@Abdus-8747, I’m not only talking about fetching "@"—I mean whether there is any free service available for fetching emails. If not, then using a non-existent email like (e.g., lke2oi3rksdj993@lksjd.com) is not ideal, so let's leave that aside.

Can you implement the newsletter functionality so that when a user enters their name and email and clicks the subscribe button, they receive an email from Ezyshop? Additionally, can the user details be stored in my MongoDB database to track subscriptions? If a user tries to subscribe again with an already registered email, a popup should appear saying, Already subscribed to our newsletter. Let me know if you can implement this.

Checkout the below demo video for better understand 👇

https://github.com/user-attachments/assets/a7833364-4b0d-4821-85e4-dd20ac3df8b6

[Abdus-8747]

@mdazfar2 Bro actually i am just a begginer and dont have much knowledge of Mongo Db and Data bases......so i might not be right fit for this task

[mdazfar2]

No problem @Abdus-8747.

[A7Lavinraj]

Well I can add this functionality

[A7Lavinraj]

I want a final confirmation that what I have to build

• subscription mail sender
• subscription mail validation

Am I correct?

[mdazfar2]

@A7Lavinraj

Can you implement the newsletter functionality so that when a user enters their name and email and clicks the subscribe button, they receive an email from Ezyshop? Additionally, can the user details be stored in my MongoDB database to track subscriptions? If a user tries to subscribe again with an already registered email, a popup should appear saying, Already subscribed to our newsletter. Let me know if you can implement this.

Checkout the below demo video for better understand 👇

https://github.com/user-attachments/assets/a7833364-4b0d-4821-85e4-dd20ac3df8b6

[A7Lavinraj]

Ok but I would need some feedback as I work on it 😁

[A7Lavinraj]

Your CONTRIBUTING.md doesn't provide any help for development setup and facing problems with setting up nodemailer

there should be a proper docs for setting this project, Need help for setting nodemailer

[mdazfar2]

@A7Lavinraj I know it's not easy for a newbie contributor to set up Ezyshop locally. I'm thinking of adding a demo video on how to set up Ezyshop locally in the contributing.md file. I am closing the issue for now. Please raise another issue, which I am happy to assign to you, but make sure that the issue is valid and addresses something important on our website. Otherwise, invalid issues will be closed. Thank you!