I am setting up a mobile app. I have set up my site to display the sign up page first. Unfortunatly, I am not able to gather the informations written in the form.
This is a part of the code for my sever, in server/app.js:
app.post("/signup", (req, res) => {
const user = {
username: req.body.username,
password: req.body.password,
email: req.body.email
}
// Check if user exists
users.findOne({ username: user.username })
.then(existingUser => {
if (existingUser) {
return res.status(400).json({ error: "Username already exists" });
} else {
users.findOne({ email: user.email })
.then(existingUserWithEmail => {
if (existingUserWithEmail) {
return res.status(400).json({ error: "Email already exists. Please log in instead" });
} else {
users.insertOne(user)
.then(result => {
res.status(201).json({ message: "User created successfully!" });
console.log("CA MARCHE OMG");
})
.catch(err => {
console.error(err);
res.status(500).json({ error: "Error inserting user into database" });
});
}
})
.catch(err => {
console.error(err);
res.status(500).json({ error: "Internal server error" });
});
}
})
.catch(err => {
console.error(err);
res.status(500).json({ error: "Internal server error" });
});
});
And here is the login.f7 code that I guess I need to change somehow:
<template>
<!-- Default view-page layout -->
<div class="view">
<div class="page" data-name="login-screen-page">
<!-- page-content has additional login-screen content -->
<div class="page-content login-screen-content">
<div class="login-screen-title">Geo Cach'eirb</div>
<!-- Login form -->
<form>
<div class="list">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Username</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Username" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Password" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li>
<a href="#" class="item-link list-button login-button" @click="save">Sign In</a>
</li>
</ul>
<div class="block-footer">Some text with login information.</div>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: {}
};
},
methods: {
cancel() {
this.$router.back();
},
save() {
const username = document.querySelector("#input-username").value;
const password = document.querySelector("#input-password").value;
const queryData = this.getSaveQueryData();
fetch(queryData.url, {
method: queryData.method,
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
username: username,
password: password
})
})
.then((res) => res.json())
.then((data) => {
console.log(data);
localStorage.setItem("token", data.token);
this.$router.push("/");
})
.catch((err) => this.$app.dialog.alert("Error " + err));
},
getSaveQueryData() {
return {
url: "http://localhost:3000/signup",
method: "POST"
};
}
}
};
</script>
I just don’t really understand what’s wrong. Thank you for you help !