I use the next for the login of my application. When you successfuly login you're redirected to a dashboard with a Form.
async function loginUser(e) {
e.preventDefault()
await Axios.post("http://localhost:3005/users/login", {
email,
password
}).then((response) => {
if (!response.data.auth){
setSession(null)
} else{
setSession(response.data.token, response.data.user)
}
});
};
export const getUser = () =>{
const user = sessionStorage.getItem("user");
if(user) return JSON.parse(user);
else return null;
}
export const getToken = () => {
return sessionStorage.getItem("token") || null
}
export const setSession = (token, user) => {
sessionStorage.setItem("token", token)
sessionStorage.setItem("user", JSON.stringify(user))
}
export const removeSession = () => {
sessionStorage.removeItem("token")
sessionStorage.removeItem("user")
}
In that dashboard the user can fill the next form. This works good, the forms are posted and the user get to see all the forms that he posted.
I want the user to be able to share the form link with his id embedded to it so whenever someone fill the form you can associate it with the user who shared it.
My problem is that whenever someone tries to fill the form it wont post as the person isnt logged in and form cant get an user id, and even if the person was logged it would pass his id and not the one of the person who shared the form.
const Form = () => {
const user = getUser();
const [firstName, setFirstName] = useState();
const [middleName, setMiddleName] = useState();
const [surname, setSurname] = useState();
const [secondSurname, setSecondSurname] = useState();
const [email, setEmail] = useState();
const [contactNumber, setContactNumber] = useState();
const createForm = () => {
Axios.post("http://localhost:3005/forms", {
firstName,
middleName,
surname,
secondSurname,
email,
contactNumber,
ownerUser: user._id
}).then((response) => {
alert("Form sent");
});
};`
Any help on how to embed the user._id is deeply thanked!
Yeah, I wouldn't think there's a way to embed it just sharing the form's link with no further reference. You could generate some sort of other usable ID that you can add to the specific form's URL, if you don't want to use the user's ID directly. And associate that one to the user ID in the back-end. Then finally grab it through the form's page through dynamic variable.
Example:
website.com/form/:id
And using props.match.params.id with Router, or your decided strategy.
Edits: Minor wording
Okay so here is what I did, i created 2 components; one form for the logged user he can fill it normally and it has a button that redirect to a form that is intendeed to be shared:
So logged user form looks like this:
const Form = () => {
const user = getUser();
const own = user._id;
const navigate = useNavigate();
const nav = (own) => {
navigate(`/form/${own}`)
}
/// states, axios and the form
<button onClick={createForm}>Send</button>
<button onClick={() => nav(own)} >Go to</button>
Then in the form to be shared I used useMatch from react router dom in the next way to retrieve the user id:
import { useMatch } from "react-router-dom";
const SharedForm = () => {
const params = useMatch(`/form/:own`)
/// console.dir(params)
const owner = params.params.own
On this way the logged user id is embedded to the form and anyone with the link can fill it.