منتصر احمد نشر 22 مارس 2023 أرسل تقرير مشاركة نشر 22 مارس 2023 السلام عليكم ورحمة الله وبركاته. انا بعمل موقع facebook-clone بس كل اما اعمل login بيحمل الصفحه كده ولما بعمل reload بتظهر عادي زي كده فايه الحل هذا هو رابط ال repo https://github.com/mohamed-montaser1/facebook-clone/tree/testing 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 22 مارس 2023 أرسل تقرير مشاركة نشر 22 مارس 2023 جرب عمل reload بشكل تلقائي بعد عملية تسجيل الدخول : windows.location.reload() بحيث يتم إعادة تحميل الصفحة بعد عملية تسجيل الدخول بدلاً من ان تقوم بفعلها تلقائياً. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 منتصر احمد نشر 22 مارس 2023 الكاتب أرسل تقرير مشاركة نشر 22 مارس 2023 بتاريخ الآن قال عمر قره محمد: جرب عمل reload بشكل تلقائي بعد عملية تسجيل الدخول : windows.location.reload() بحيث يتم إعادة تحميل الصفحة بعد عملية تسجيل الدخول بدلاً من ان تقوم بفعلها تلقائياً. جربت ولكن بيحدث infinite reload ملحوظه انا بستخدم react 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 22 مارس 2023 أرسل تقرير مشاركة نشر 22 مارس 2023 جرب تعديل كود الـ login للشكل التالي : import { ChangeEvent, FormEvent, useRef, useState } from "react"; import { Link, Navigate } from "react-router-dom"; import "../scss/styles.scss"; import { UilEye, UilEyeSlash } from "@iconscout/react-unicons"; import api_key from "../Services/Api_Url"; import { LoginType, SignupType } from "../../types/mainTypes"; import axios from "axios"; import { useLogin } from "../Context/Login"; let emailReg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; export default function Login() { let { jwt, setJwt, setIsLoggedIn, isLoggedIn } = useLogin(); // email error message const emailRef = useRef<HTMLInputElement>(null); const emailErrorMessage = useRef<HTMLParagraphElement>(null); // email error message const passwordRef = useRef<HTMLInputElement>(null); const passwordErrorMessage = useRef<HTMLParagraphElement>(null); const [isShowPassword, setIsShowPassword] = useState(false); const LoginReq = async ({ email, password }: LoginType) => { const res = await axios.post(`${api_key}/auth/login`, { data: { email, password, }, }); let data = res.data; setJwt(data.data.accessToken); localStorage.setItem("jwt", data.data.accessToken); setIsLoggedIn(true); localStorage.setItem("isLoggedin", "true"); window.location.href = window.location.origin; // الكود المضاف }; function handleSubmit(e: FormEvent<HTMLFormElement>) { e.preventDefault(); // validate email if (emailRef.current.value.toLowerCase().match(emailReg) === null) { emailErrorMessage.current.innerText = "Please Enter A Valid Email !"; emailRef.current.classList.add("invalid"); } else { emailErrorMessage.current.innerText = ""; emailRef.current.classList.remove("invalid"); } // validate password if (passwordRef.current.value.length <= 6) { passwordErrorMessage.current.innerText = "Password Is Too Short !"; passwordRef.current.classList.add("invalid"); } else { passwordErrorMessage.current.innerText = ""; passwordRef.current.classList.remove("invalid"); } let inputs = [emailRef.current, passwordRef.current]; let invalidInputs = []; for (let i = 0; i < inputs.length; i++) { if (inputs[i].classList.contains("invalid")) { invalidInputs.push(inputs[i]); } } if (invalidInputs.length === 0) { // send req console.log(typeof emailRef.current.value); console.log(typeof passwordRef.current.value); LoginReq({ email: emailRef.current.value, password: passwordRef.current.value, }); } } const validateEmail = (e: ChangeEvent<HTMLInputElement>) => { const inputValue = e.target.value; const errorMessage = emailErrorMessage.current; // validate email if (inputValue.toLowerCase().match(emailReg) === null) errorMessage.innerText = "Please Enter A Valid Email !"; else errorMessage.innerText = ""; }; const validatePassword = (e: ChangeEvent<HTMLInputElement>) => { if (e.target.value.length <= 6) { passwordErrorMessage.current.innerText = "Password Is Too Short !"; } else { passwordErrorMessage.current.innerText = ""; } }; document.body.classList.add("login-page"); return ( <> {/* {isLoggedIn ? <Navigate to={"/"} /> : ""} الغي الكود التالي */} <div className='about'> <h1>Mohamed Montaser's Social Media</h1> <p style={{ textTransform: "capitalize" }}> Hello I'm mohamed montaser, I'm Building This Project To Improve my Fullstack Skills. I Hope You Enjoy With My Social Media Website </p> </div> <form id='form' className='form-container' onSubmit={handleSubmit} spellCheck='false'> <div className='form-control form-username'> <label htmlFor='email' className='label'> Email: </label> <input type='text' onChange={(e) => validateEmail(e)} id='email' ref={emailRef} autoFocus /> <p className='error-msg' ref={emailErrorMessage}></p> </div> <div className='form-control form-username'> <label htmlFor='password' className='label'> Password: </label> <div className='input'> <input type={isShowPassword ? "text" : "password"} id='password' ref={passwordRef} onChange={(e) => validatePassword(e)} /> <button type='button' onClick={(e) => setIsShowPassword(!isShowPassword)}> {isShowPassword ? <UilEyeSlash /> : <UilEye />} </button> </div> <p ref={passwordErrorMessage} className='error-msg'></p> </div> <input type='submit' value='Submit' /> <p className='register-link'> You Have Already An Account ? <Link to={"/register"}>Sign up</Link> </p> </form> </> ); } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 منتصر احمد نشر 22 مارس 2023 الكاتب أرسل تقرير مشاركة نشر 22 مارس 2023 بتاريخ 4 دقائق مضت قال عمر قره محمد: جرب تعديل كود الـ login للشكل التالي : import { ChangeEvent, FormEvent, useRef, useState } from "react"; import { Link, Navigate } from "react-router-dom"; import "../scss/styles.scss"; import { UilEye, UilEyeSlash } from "@iconscout/react-unicons"; import api_key from "../Services/Api_Url"; import { LoginType, SignupType } from "../../types/mainTypes"; import axios from "axios"; import { useLogin } from "../Context/Login"; let emailReg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; export default function Login() { let { jwt, setJwt, setIsLoggedIn, isLoggedIn } = useLogin(); // email error message const emailRef = useRef<HTMLInputElement>(null); const emailErrorMessage = useRef<HTMLParagraphElement>(null); // email error message const passwordRef = useRef<HTMLInputElement>(null); const passwordErrorMessage = useRef<HTMLParagraphElement>(null); const [isShowPassword, setIsShowPassword] = useState(false); const LoginReq = async ({ email, password }: LoginType) => { const res = await axios.post(`${api_key}/auth/login`, { data: { email, password, }, }); let data = res.data; setJwt(data.data.accessToken); localStorage.setItem("jwt", data.data.accessToken); setIsLoggedIn(true); localStorage.setItem("isLoggedin", "true"); window.location.href = window.location.origin; // الكود المضاف }; function handleSubmit(e: FormEvent<HTMLFormElement>) { e.preventDefault(); // validate email if (emailRef.current.value.toLowerCase().match(emailReg) === null) { emailErrorMessage.current.innerText = "Please Enter A Valid Email !"; emailRef.current.classList.add("invalid"); } else { emailErrorMessage.current.innerText = ""; emailRef.current.classList.remove("invalid"); } // validate password if (passwordRef.current.value.length <= 6) { passwordErrorMessage.current.innerText = "Password Is Too Short !"; passwordRef.current.classList.add("invalid"); } else { passwordErrorMessage.current.innerText = ""; passwordRef.current.classList.remove("invalid"); } let inputs = [emailRef.current, passwordRef.current]; let invalidInputs = []; for (let i = 0; i < inputs.length; i++) { if (inputs[i].classList.contains("invalid")) { invalidInputs.push(inputs[i]); } } if (invalidInputs.length === 0) { // send req console.log(typeof emailRef.current.value); console.log(typeof passwordRef.current.value); LoginReq({ email: emailRef.current.value, password: passwordRef.current.value, }); } } const validateEmail = (e: ChangeEvent<HTMLInputElement>) => { const inputValue = e.target.value; const errorMessage = emailErrorMessage.current; // validate email if (inputValue.toLowerCase().match(emailReg) === null) errorMessage.innerText = "Please Enter A Valid Email !"; else errorMessage.innerText = ""; }; const validatePassword = (e: ChangeEvent<HTMLInputElement>) => { if (e.target.value.length <= 6) { passwordErrorMessage.current.innerText = "Password Is Too Short !"; } else { passwordErrorMessage.current.innerText = ""; } }; document.body.classList.add("login-page"); return ( <> {/* {isLoggedIn ? <Navigate to={"/"} /> : ""} الغي الكود التالي */} <div className='about'> <h1>Mohamed Montaser's Social Media</h1> <p style={{ textTransform: "capitalize" }}> Hello I'm mohamed montaser, I'm Building This Project To Improve my Fullstack Skills. I Hope You Enjoy With My Social Media Website </p> </div> <form id='form' className='form-container' onSubmit={handleSubmit} spellCheck='false'> <div className='form-control form-username'> <label htmlFor='email' className='label'> Email: </label> <input type='text' onChange={(e) => validateEmail(e)} id='email' ref={emailRef} autoFocus /> <p className='error-msg' ref={emailErrorMessage}></p> </div> <div className='form-control form-username'> <label htmlFor='password' className='label'> Password: </label> <div className='input'> <input type={isShowPassword ? "text" : "password"} id='password' ref={passwordRef} onChange={(e) => validatePassword(e)} /> <button type='button' onClick={(e) => setIsShowPassword(!isShowPassword)}> {isShowPassword ? <UilEyeSlash /> : <UilEye />} </button> </div> <p ref={passwordErrorMessage} className='error-msg'></p> </div> <input type='submit' value='Submit' /> <p className='register-link'> You Have Already An Account ? <Link to={"/register"}>Sign up</Link> </p> </form> </> ); } شكراََ جزيلا اشتغلت ممكن تقولي ايه رايك في الكود اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
منتصر احمد
السلام عليكم ورحمة الله وبركاته.
انا بعمل موقع facebook-clone بس كل اما اعمل login بيحمل الصفحه كده
ولما بعمل reload بتظهر عادي زي كده
فايه الحل
هذا هو رابط ال repo
https://github.com/mohamed-montaser1/facebook-clone/tree/testing
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.