We Keep Coding

creating custom error when no entries has been made using toast for React

I am in the middle of creating error handlings using toast function for my react app signin and register pages, I was able to successfully create a toast function that when logging in with wrong email or password they should receive an error message.
however, I am trying to accomplish the same thing with a different error message when the user clicks on sign in without entering any information, but I can't get it to work, when I click on the login without entering anything it gives me the same error messgae as i set up when entering wrong credentials.
what am I missing?
please help me
from signin.js
import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
class Signin extends React.Component {
constructor(props) {
super(props);
this.state = {
signInEmail: "",
signInPassword: "",
};
}
showToast = () => {
toast.error("invalid username or password", {
position: "top-right",
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
};
showToast1 = () => {
toast.error("invalid username or password", {
position: "top-right",
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
};
onEmailChange = (event) => {
this.setState({ signInEmail: event.target.value });
};
onPasswordChange = (event) => {
this.setState({ signInPassword: event.target.value });
};
onSubmitSignIn = (event) => {
event.preventDefault();
let regex = /^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+#[A-Za-z0-9.-]+$/g;
const isEmailValid = this.state.signInEmail.match(regex);
const signInEmail = this.state.signInEmail
const signInPassword = this.state.signInPassword
if (!isEmailValid) {
return this.showToast();
} else if(!signInEmail || !signInPassword) {
return this.showToast1()
}
fetch("https://ancient-sea-46547.herokuapp.com/signin", {
method: "post",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
email: this.state.signInEmail,
password: this.state.signInPassword,
}),
})
.then((response) => {
if (!response.ok) throw new Error("invalid");
return response.json();
})
.then((user) => {
if (user.id) {
this.props.loadUser(user);
this.props.onRouteChange("home");
}
})
.catch((error) => this.showToast(), this.showToast1);
};
render() {
const { onRouteChange } = this.props;
return (
<article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
<ToastContainer />
<main className="pa4 black-80">
<form className="measure">
<fieldset id="sign_up" className="ba b--transparent ph0 mh0">
<legend className="f1 fw6 ph0 mh0">Sign In</legend>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="email-address">
Email
</label>
<input
className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="email"
name="email-address"
id="email-address"
onChange={this.onEmailChange}
/>
</div>
<div className="mv3">
<label className="db fw6 lh-copy f6" htmlFor="password">
Password
</label>
<input
className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="password"
name="password"
id="password"
onChange={this.onPasswordChange}
/>
</div>
</fieldset>
<div className="">
<input
onClick={this.onSubmitSignIn}
className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="submit"
value="Sign in"
/>
</div>
<div className="lh-copy mt3">
<p
onClick={() => onRouteChange("register")}
className="f6 link dim black db pointer"
>
Register
</p>
</div>
</form>
</main>
</article>
);
}
}
export default Signin;

VueJs3 sending data from one component to another

I am currently working on a VueJs3 Project. I already coded a login system, which works perfectly fine. I now want to have a div on the homepage, that tells the user with which account they are logged in.
"You are logged in as:" + username
I therefore, have to send the username from the login component to the home component. Can someone help me out here? I have tried out a lot of ways but none of them seem to work.
Btw. the components are all saved in the components folder
Here is my code:
home.vue
<div class="home">
<h1>You are logged in as: {{currentusername}}</h1>
<Maschinen/>
</div>
</template>
<script>
import Maschinen from '#/components/Maschinen.vue'
import axios from 'axios'
export default {
name: 'Home',
components: {
Maschinen
},
data() {
return {
currentusername: null,
}
},
async created() {
const response = await axios.get('http://localhost:8080/user/hetwinuser', {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
}
});
this.currentusername= (response.data.username);
}
}
</script>
login.vue:
<template>
<form #submit.prevent="handleSubmit">
<h1>Login</h1>
<!--username + pw input for login-->
<div class="form-group">
<label id="username">Username:</label>
<input id="usernameinput" type="text" class="form-control" v-model="username" placeholder="Username">
</div>
<div>
<label id="password">Password:</label>
<input id="passwordinput" type="password" class="form-control" v-model="password" placeholder="Password">
</div>
<!--enter buttons-->
<button class="enter">Enter</button>
<router-link to="/register" id="goToRegister" tag="button">Register</router-link>
</form>
</template>
<script>
import axios from 'axios';
export default {
name: "Login",
data: () => {
return {
username: '',
password: ''
}
},
methods: {
async handleSubmit() {//executed when enter button is pressed
const data = {
username: this.username,
password: this.password
};
axios.post('http://localhost:8080/authenticate', data) //post the username + pw and will receive the token in exchange
.then(
res => {
localStorage.setItem('token', res.data.jwt);
localStorage.setItem('currentusername', this.username);
//console.log(localStorage.getItem('token'));
}
).catch(
err => {
console.log(err)
}
);
}
},
}
</script>```

username and password
Define it under store -> state.js. Then where you want it
Use it as "this.$store.state.username"

How to use Axios from backend to frontend

I'm using reactjs as my development tool and mongoDB as my backend database.
I have my backend react code as following:
const express = require("express");
const jwt = require("jsonwebtoken");
const bcrypt = require("bcrypt");
const { User, VerificationCode } = require("../models");
const { isLoggedIn, getLoggedInUserId, generateRefreshToken } = require("./middlewares");
const sendVerificationEMail = require("./bin/send_email").sendVerificationEmail;
require("dotenv").config();
const router = express.Router();
router.post("/register", async (req, res, next) => {
const { email, username, password, first_name, last_name } = req.body;
try {
// Check if the email is duplicating
let existingUser = await User.findOne({ where: { email } });
if (existingUser) {
return res.status(409).json({
success: false,
message: "User already exists.",
});
}
existingUser = await User.findOne({ where: { username } });
if (existingUser) {
return res.status(409).json({
success: false,
message: "Same nickname user exists.",
});
}
const hash = await bcrypt.hash(password, 12);
await User.create({
email,
username,
password: hash,
first_name,
last_name,
});
return res.status(200).json({
success: true,
message: "Signup successful.",
});
} catch (error) {
return res.json({
success: false,
message: "Signup failed.",
});
}
});
// Login
// Create token and return to user (httpOnly cookies)
router.post("/login", async (req, res, next) => {
const { email, password } = req.body;
// Make a inquiry of the user through email
try {
const user = await User.findOne({ where: { email }, raw: true });
if (!user) {
return res.status(401).json({
success: false,
message: "No member exists.",
});
}
// Check password
const isMatch = await bcrypt.compare(password, user.password);
if (isMatch) {
// If the password matches,create JWT payload
const payload = {
uid: user.id,
};
// JWT token create
const token = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: req.app.get("jwt_expiration") });
// New refresh token and create expiration for it
let refresh_token = generateRefreshToken(req, user.id);
let refresh_token_maxage = new Date() + req.app.get("jwt_refresh_expiration");
// Browswer httpOnly cookie setting
res.cookie("access_token", token, {
// secure: true,
httpOnly: true,
});
res.cookie("refresh_token", refresh_token, {
// secure: true,
httpOnly: true,
});
// Save the account id as key and save in Redis server
req.client.set(
user.id,
JSON.stringify({
refresh_token: refresh_token,
expires: refresh_token_maxage,
}),
req.client.print
);
return res.json({
success: true,
uid: user.id,
message: "Login Successful",
});
} else {
return res.status(401).json({
success: false,
message: "Password's don't match.",
});
}
} catch (error) {
console.error(error);
res.status(401).json({
success: false,
message: "Login Error",
});
}
});
module.exports = router;
And I have my Login frontend code as following: (Login.js)
import React, { Component } from "react";
import login from "../picture/login.png";
import Form from "react-bootstrap/Form";
import axios from "axios";
export default class SignUp extends Component {
render() {
return (
<div style = {{
backgroundColor:'#f7feff'
}}>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-6">
<br/><br/><br/>
<h2>Login</h2>
<hr />
<div class="row h-100 justify-content-center align-items-center">
<img src = {login}
width = '550'
height = '200'
alt='Login2'/>
</div>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Enter password" />
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Remember me" />
</Form.Group>
<button type="submit" className="btn btn-info btn-block">Submit</button>
<div className = "App-wrapper">
<p className="forgot-password text-right">
<a href="signup"to="/signup">
Sign Up | </a>
<a href="password"to="/pasword">
Find Password</a>
</p>
</div>
</form>
</div>
</div>
</div>
);
}
}
My Signup frontend code is:(Signup.js)
import React, { Component } from "react";
import Form from "react-bootstrap/Form";
import welcome from "../picture/welcome.png";
export default class SignUp extends Component {
render() {
return (
<div style = {{
backgroundColor:'#f7feff'
}}>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-6">
<br/><br/><br/>
<h2>Sign Up</h2>
<hr />
<div class = "row h-100 justify-content-center align-items-center">
<img src = {welcome}
width = '550'
height = '200'
alt='signup'/>
</div>
<Form.Group controlId="formBasicEmail">
<Form.Label>*Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formBasicUsername">
<Form.Label>*Username</Form.Label>
<Form.Control placeholder="Enter username" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>*Password</Form.Label>
<Form.Control type="password" placeholder="Enter password" />
</Form.Group>
<Form.Group controlId="formBasicFirstname">
<Form.Label>*Firstname</Form.Label>
<Form.Control placeholder="Enter firstname" />
</Form.Group>
<Form.Group controlId="formBasicLastname">
<Form.Label>*Lastname</Form.Label>
<Form.Control type placeholder="Enter lastname" />
</Form.Group>
<Form.Group controlId="formBasicTelephone">
<Form.Label>Telephone</Form.Label>
<Form.Control type="number"placeholder="Enter telephone number"/>
</Form.Group>
<Form.Text className="text-muted">
Fields that are marked with asterisk(*) are compulsory.
</Form.Text>
<button type="submit" className="btn btn-info btn-block">Sign Up</button>
<p className="forgot-password text-right">
Already registered? sign in?
</p>
</form>
</div>
</div>
</div>
);
}
}
I really don't know how to connect backend and frontend using axios. The login server url is localhost:8002/auth/login and for signup: localhost:8002/auth/signup

In your React component, you have to make a function that uses axios to call the backend, and then add that as a onClick handler to the submit button.
To make a request with axios you have to use the functions available on the axios module. In your case, this could look something like this:
function onSubmit() {
axios.post('localhost:8002/auth/login',
{username: username,
password: password });
}
Be aware that axios.post returns a promise, so you would have to await it/use .then to get the response from the backend. When you have the function, you can attach it to your login button like this:
<button type="submit" className="btn btn-info btn-block" onClick={onSubmit}>Submit</button>
EDIT: And the username and password values are of course the values that the user has entered via the input fields. You can store these in the state of the component.

If Else in react component always run else condition

I am trying to build a contact form where an if else statement checks the validity of the email address entered, then with a nested if else checks whether the honeypot filed has a value and sends an ajaxj post request to an aws api gateway.
The ajax post runs without problem, but the outer else is always run.
Here the code:
import React from 'react'
import './style.scss'
const $ = require('jquery')
class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email:'',
subject:'',
message:'',
honeypot:'',
result:'',
alertType:'',
formErrors:{
email:'',
name:'',
message:''
},
isFormValid:false,
emailValid:false,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target
const value = target.value
const name = target.name
this.setState({ [name]: value })
}
handleSubmit(event) {
event.preventDefault();
var URL = "https://someaddress/";
var form =this
var data = {
name: this.cleanInput(this.state.name.trim()),
email: this.cleanInput(this.state.email.trim()),
subject: this.cleanInput(this.state.subject.trim()),
message: this.cleanInput(this.state.message.trim()),
}
this.validateField('email',data.email)
data.message = "Bilgiler şunlar:\nAdı:"+data.name+"\nEmail Adresi: "+data.email+"\nKonu:"+data.subject+"\nMesaj:"+data.message
data.subject = "[Bestpet Web Sitesinden Doldurulan Form] "+data.subject;
data.email = "info#atlaspet.com.tr";
if(this.state.emailValid ===true){
if (this.state.honeypot=== ''){
$.ajax({
type: "POST",
url: URL,
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
success: function(){
form.setState({name:'',email:'',message:'',subject:'',result:'Form başarıyla gönderildi.',alertType:'alert alert-success'})
},
error: function () {
// show an error message
form.setState({result: 'Sorunlar oluştu. Formu gönderemedik.',alertType:'alert alert-danger'});
},
});
} else {console.log("Hi there, I guess you are not human baby");}
} else { form.setState({result: 'Lütfen girmiş olduğunuz email adresini kontrol ediniz.',alertType:'alert alert-danger'})}
}
validateField(fieldName, value) {
let fieldValidationErrors = this.state.formErrors;
let emailValid = this.state.emailValid;
;
switch (fieldName) {
case 'email':
emailValid = value.match(/^([\w.%+-]+)#([\w-]+\.)+([\w]{2,})$/i);
fieldValidationErrors.email = emailValid ? true : false;
break;
default:
break;
}
this.setState({
formErrors: fieldValidationErrors,
emailValid: fieldValidationErrors.email
}, this.validateForm);
console.log(this)
}
validateForm() {
this.setState({ isFormValid: this.state.emailValid });
}
cleanInput(input){
var search = [
'<script[^>]*?>.*?</script>', // Strip out javascript
'<[/!]*?[^<>]*?>', // Strip out HTML tags
'<style[^>]*?>.*?</style>', // Strip style tags properly
'<![sS]*?--[ \t\n\r]*>', // Strip multi-line comments
]
var text = input
// console.log(search.length)
//var output = preg_replace($search, '', input);
for (let i = 0; i < search.length; i++) {
text = text.replace(new RegExp(search[i], 'gi'), '')
}
return text
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div>
<div className={"col-md-12 "+this.state.alertType}>{this.state.result!=='' && this.state.result}</div>
<input name="honeypot" type="text" style={{display:"none"}} value={this.state.honeypot} onChange={this.handleChange}/>
</div>
<div className="form-group">
<div className="col-md-6">
<label>
Name:
{this.state.formErrors.name!=='' && <div className="col-md-12 alert alert-danger">'Sizinle iletişim kurabilmemiz için bir isim girmelisiniz'</div>}
<input name="name" type="text" value={this.state.name} className ="form-control required" onChange={this.handleChange} />
</label>
</div>
<div className="col-md-6">
<label>
email
<input type="text" name="email" className="form-control required" value={this.state.email} onChange={this.handleChange}/>
</label>
</div>
</div>
<div className="form-group">
<div className="col-md-12">
<label>
Subject
<input type="text" name="subject" className="form-control required" value={this.state.subject} onChange={this.handleChange}/>
</label>
</div>
</div>
<div className="form-group">
<div className="col-md-12">
<label>
Message
<textarea name="message" rows="6" className="form-control required" value={this.state.message} onChange={this.handleChange}/>
</label>
</div>
</div>
<div className="form-group">
<div className="col-md-12">
<input type="submit" value="Submit" className="btn btn-sm btn-block btn-primary"/>
</div>
</div>
</form>
);
}
}
export default ContactForm
The section of code I have problems with is in handleSubmit function.
Thanks for help in advance and a happy new year to all.

I have moved the validity check to handleChange function and it is now working as intended.
Thanks a lot!

"user.profile" undefined despite its declaration in Accounts.createUser()

I am working on a "settings" page where a logged in user can change their profile picture. However it seems that Meteor is having trouble finding the profile attribute for a user.
signup.js (here is where I create the user on signup and create the profile attribute)
import React, { Component } from 'react';
import { browserHistory } from 'react-router';
export default class Signup extends Component {
handleSubmit(event) {
event.preventDefault();
var signupEmail = event.target.signupEmail.value;
var signupPassword = event.target.signupPassword.value;
if (signupPassword !== '') {
Accounts.createUser({
email: signupEmail,
password: signupPassword,
profile: {
avatar: "/user-default.svg"
}
}, (err) => {
err ? (console.log(err.reason)) : browserHistory.push("/app/profile");
});
}
}
render() {
return (
<div className="login-form">
<form onSubmit={this.handleSubmit}>
<div className="input-options">
<input type="text" placeholder="Email" name="signupEmail" />
</div>
<div className="input-options">
<input type="password" placeholder="Password" name="signupPassword" />
</div>
<button className="login-submit bold">Sign me up!</button>
</form>
</div>
);
}
}
profile_settings.js
import React, { Component } from 'react';
import { Link } from 'react-router';
import reactMixin from 'react-mixin';
import ReactMeteorData from 'meteor/react-meteor-data';
export default class ProfileSettings extends Component {
constructor(props) {
super(props);
this.state = {
avatar: this.props.user.profile.avatar
}
}
getMeteorData(){
return{
user: Meteor.user()
}
}
componentWillMount(){
// we create this rule both on client and server
Slingshot.fileRestrictions("avatar", {
allowedFileTypes: ["image/png", "image/jpeg", "image/gif"],
maxSize: 2 * 500 * 500
});
}
upload(){
var userId = Meteor.user()._id;
var metaContext = {avatarId: userId};
var uploader = new Slingshot.Upload("UsersAvatar", metaContext);
uploader.send(document.getElementById('input').files[0], function (error, downloadUrl) { // you can use refs if you like
if (error) {
// Log service detailed response
console.error('Error uploading', uploader.xhr.response);
alert (error); // you may want to fancy this up when you're ready instead of a popup.
}
else {
// we use $set because the user can change their avatar so it overwrites the url :)
Meteor.users.update(Meteor.userId(), {$set: {"profile.avatar": downloadUrl}});
}
// you will need this in the event the user hit the update button because it will remove the avatar url
this.setState({avatar: downloadUrl});
}.bind(this));
}
formSubmit(){
let avatarUrl = this.state.avatar;
Meteor.users.update( {_id: Meteor.userId() }, {
$set: {profile: avatarUrl}
});
}
render() {
return (
<div>
<div className="sticky-header">
<h3>Settings</h3>
</div>
<form>
<div className="row well">
<div className="col-md-6">
<div className="form-group">
<label htmlFor="exampleInputFile">File input</label>
<input type="file" id="input" onChange={this.upload.bind(this)} />
<p className="help-block">Image max restriction: 2MB, 500x500. Cropped: 200x200</p>
</div>
</div>
<div className="col-md-6 utar-r">
<img src={this.state.avatar} height="200" width="200" alt="..." className="img-rounded" />
</div>
<div className="form-group">
<button className="btn btn-lg btn-primary btn-block" type="submit" onClick={this.formSubmit.bind(this)}>Update Profile</button>
</div>
</div>
</form>
<footer className="sticky-footer">
<Link to="/app/profile">
<button className="profile-edit bg-black">
<h3>Cancel</h3>
</button>
</Link>
<Link to="">
<button className="profile-edit">
<h3>Save Changes</h3>
</button>
</Link>
</footer>
</div>
);
}
}
reactMixin(ProfileSettings.prototype, ReactMeteorData);
Here is the error I am getting: TypeError: Cannot read property 'profile' of undefined

The error is not failing to find an profile attribute, but says that there's no user (or that user is undefined) This is exactly what TypeError: Cannot read property 'profile' of undefined means.
There are a few errors in your code:
the return of getMeteorData is available under this.data and not this.props
getMeteorData will run after constructor so there's no way to get Meteor's data in the constructor
getMeteorData returns data reactively, and is likely not to have the data you want when you instantiate the class anyway
So I'd recommend using the container/component approach that is like:
export default class ProfileSettingsContainer extends Component {
getMeteorData(){
return{
user: Meteor.user()
}
}
render() {
const user = this.data.user;
if (user) {
return <ProfileSettings user={user} />
} else {
return null; // or what ever placeholder you want while the data is being loaded
}
}
}
class ProfileSettings extends Component {
constructor(props) {
super(props);
this.state = {
avatar: props.user.profile.avatar
}
}
}
with this structure, the ProfileSettings will instantiate with something under props.user
Finnaly,
Meteor.users.update( {_id: Meteor.userId() }, {
$set: {profile: avatarUrl}
});
should be
Meteor.users.update( {_id: Meteor.userId() }, {
$set: {'profile.avatar': avatarUrl}
});
but that's unrelated