Blog resolved

src/Components/Login.js

@@ -102,15 +102,16 @@ const LogIn = () => {
   const handleLogin = async (e) => {
     e.preventDefault();
     const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+    const passwordPattern = /^(?=.*[a-zA-Z])(?=.*\d)[A-Za-z\d]{8,}$/;
     let valid = true;
 
     if (!emailPattern.test(email)) {
       displayAlert('* Please enter a valid email address.');
       valid = false;
     }
 
-    if (password.length < 6) {
-      displayAlert('* Password must be at least 6 characters.');
+    if (!passwordPattern.test(password)) {
+      displayAlert('* Password must be alphanumeric with at least one letter and one digit, and at least 8 characters long.');
       valid = false;
     }
 
@@ -139,6 +140,8 @@ const LogIn = () => {
   const handleSignUp = async (e) => {
     e.preventDefault();
     const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+    const passwordPattern = /^(?=.*[a-zA-Z])(?=.*\d)[A-Za-z\d]{8,}$/;
+
     let valid = true;
 
     if (!username) {
@@ -151,8 +154,8 @@ const LogIn = () => {
       valid = false;
     }
 
-    if (password.length < 6) {
-      displayAlert('* Password must be at least 6 characters.');
+    if (!passwordPattern.test(password)) {
+      displayAlert('* Password must be alphanumeric with at least one letter and one digit, and at least 8 characters long.');
       valid = false;
     }
 

src/Components/footer_section/BlogPage/BlogPage.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import './BlogPage.css';
 import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 import homeIcon from '../../../img/homeicon.png';
+import './BlogPage.css';
 
 const blogs = [
     {
@@ -39,6 +39,10 @@ const blogs = [
         title: "Advanced Git Techniques",
         date: "March 10, 2024",
         content: `Git is a powerful version control system. This article explores some advanced techniques like rebase, stash, and cherry-pick to enhance your workflow. Rebasing can be used to maintain a clean project history, while stashing allows you to save your work in progress and switch contexts quickly. Cherry-picking lets you apply specific commits from one branch to another. Understanding these advanced Git commands can help you manage your codebase more effectively and collaborate more efficiently with your team.`
+    }, {
+        title: "React Virtual DOM",
+        date: "July 30, 2024",
+        content: `React JS Virtual DOM is an in-memory representation of the DOM. DOM refers to the Document Object Model that represents the content of XML or HTML documents as a tree structure so that the programs can be read, accessed and changed in the document structure, style, and content.The virtual DOM is a lightweight copy of the real DOM that allows React to manage changes more efficiently by minimizing the direct manipulation required on the real DOM. This process significantly enhances the performance of web apps.`
     }
 ];
 
@@ -52,8 +56,8 @@ const BlogPage = () => {
     return (
         <div className="blog-page">
             <Link to="/">
-            <img src={homeIcon} alt="Home" className="home-icon" />
-        </Link>
+                <img src={homeIcon} alt="Home" className="home-icon" />
+            </Link>
             <h1>Our Blogs</h1>
             <div className="blogs">
                 {blogs.map((blog, index) => (
@@ -64,8 +68,8 @@ const BlogPage = () => {
                             onClick={() => toggleBlog(index)}
                         >
                             <h2>
-                                {blog.title} 
-                                <span>{activeIndex === index ? <FaAngleUp/> : <FaAngleDown/>}</span>
+                                {blog.title}
+                                <span>{activeIndex === index ? <FaAngleUp /> : <FaAngleDown />}</span>
                             </h2>
                             <p className="date">{blog.date}</p>
                         </div>