Greenstand / treetracker-wallet-app

The Greenstand Wallet App
https://wallet.treetracker.org
14 stars 43 forks source link

Add description for login and signup page #262

Open pierrelstan opened 3 weeks ago

pierrelstan commented 3 weeks ago

Issue: Focused on the web Next.js app. The login and signup pages currently lack a brief description that helps guide users. We’d like to add a short description to both pages to improve clarity and user experience.

Tasks:

Design Reference: You can find the design and placement details in the Figma file here.

Note: Feel free to start working on this issue right away—you don’t need to wait to be assigned. The first completed pull request will be prioritized for review and considered for acceptance. If you have any questions or need help with design specifics, please reach out!

Image.

Image.

VoQuocBangB2111916 commented 2 weeks ago

Hello @pierrelstan, I have some improvements in the signup page that can show some descriptions like the design in Figma Can you assign me this one I can push for you to check it. Thanks for your support! ------------------------------------ update in signup/page ----------------------------- "use client";

import React, { useEffect, useState } from "react"; import { Box, Typography } from "@mui/material"; import Wrapper from "@/components/common/Wrapper"; import CustomHeadingTitle from "@/components/common/CustomHeadingTitle"; import CustomTextField from "@/components/common/CustomTextFieldProps"; import CustomSubmitButton from "@/components/common/CustomSubmitButton"; import CenteredColumnBox from "@/components/common/CenteredColumnBox";

export default function SignUp() { const [formData, setFormData] = useState({ name: "", email: "", password: "", confirmPassword: "", });

const [isButtonDisabled, setIsButtonDisabled] = useState(true); const [passwordRequirements, setPasswordRequirements] = useState({ length: false, upperCase: false, lowerCase: false, number: false, specialChar: false, noSpaces: false, });

// Validate password requirements const validatePasswordRequirements = (password: string) => { setPasswordRequirements({ length: password.length >= 8, upperCase: /[A-Z]/.test(password), lowerCase: /[a-z]/.test(password), number: /[0-9]/.test(password), specialChar: /[~`!@#$%^&*()_-+={[}]|\:;"'<>,.?/]/.test(password), noSpaces: !/\s/.test(password), }); };

// Handle input change const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData(prevData => ({ ...prevData,

}));

if (name === "password") validatePasswordRequirements(value);

};

// Form submission const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (formData.password !== formData.confirmPassword) { alert("Passwords do not match!"); return; } console.log("Form Data:", formData); };

// Button activation logic useEffect(() => { const allRequirementsMet = Object.values(passwordRequirements).every(Boolean); const isFormValid = formData.name !== "" && formData.email !== "" && allRequirementsMet && formData.password === formData.confirmPassword;

setIsButtonDisabled(!isFormValid);

}, [formData, passwordRequirements]);

return (

Password must have: ✓ Minimum length 8 characters ✓ At least one uppercase letter (A-Z) ✓ At least one lowercase letter (a-z) ✓ At least one number (0-9) ✓ At least one special character (~`!@#$%^&*()_-+=|\\:;"'<>,.?/) ✓ No spaces

); }

pierrelstan commented 2 weeks ago

Hi @VoQuocBangB2111916,

Thanks for working on the validation logic—it’s a helpful enhancement for ensuring data quality on the signup page! However, since this issue specifically focuses on adding descriptions to improve user guidance, could you create a separate pull request (PR) for the validation updates? This way, we can keep the tasks distinct and review each change more effectively.

For this issue, could you focus on creating the Description component as outlined, adding it to both the login and signup pages, and ensuring the styling matches the Figma design? Let me know if you need assistance accessing the design file!

Thanks again for your contributions—I look forward to seeing the description updates!

pierrelstan commented 1 week ago

Hi @VoQuocBangB2111916 , just checking in on issue #262 . Can you share your progress? Let me know if you need assistance