Category Archives: Node JS

DNY client (11 – Profile Photo Display)

February 9, 2020javascript, Node JS, Reactadmin

Server side

First we put in the route

routes/user.js

const express = require('express')

const {

// other code

userPhoto,

} = require('../controllers/user')

const { requireSignin } = require("../controllers/auth");

// other code

// photo route

router.get("/user/photo/:userId", userPhoto)

// other code

module.exports = router;

Then we implement the function responder for when the user goes to /user/photo/:userId

Since we already retrieved the user object at function userById, everything is already in req.profile
We simply check for the image data, and then set the content type.

controllers/user.js

exports.userPhoto = (req, res, next) => {

console.log('content type', req.profile.photo.contentType)

if (req.profile.photo.data) {

// sets the format of the image

res.set("Content-Type", req.profile.photo.contentType);

// sends the photo data

return res.send(req.profile.photo.data);

}

next();

}

Client Side

we create a photoUrl so that our image control has a src.

src/user/EditProfile.js

render() {

const { id, name, email, password, redirectToProfile, error, loading } = this.state

if (redirectToProfile) {

return <Redirect to={`/user/${id}`} />

}

const photoUrl = data._i`http://localhost:8080/user/photo/${data._id}` : DefaultImage,

// cache image issue

return (

<h2 className="mt-5 mb-5">Edit Profile</h2>

<div

className="alert alert-danger"

style={{ display: error ? "" : "none" }}

{error}

</div>

{loading ? (

<h2>Loading...</h2>

</div>

) : ("")}

{this.renderEditForm(name, email, password)}

</div>

)

}

export default EditProfile

However, there is an issue. The browser cache images and when you try to upload another image, and you come back to this page, the browser will be showing the old image.

In this situation, simply give the latest time and append it to the URL

<img style={{height: "200px", width: 'auto'}}

className="img-thumbnail"

alt={user.name}

src={`http://localhost:8080/user/photo/${user._id}?${new Date().getTime()}`}

onError={i =>(i.target.src=`${DefaultProfile}`)}

DNY client (9 – Edit Users)

February 7, 2020javascript, Node JS, Reactadmin

We first create our EditProfile component

src/user/EditProfile.js

import React, { Component } from 'react';

import { IsAuthenticated } from '../auth';

import { Redirect } from 'react-router-dom';

import { getUserInfo, UpdateUser } from './apiUser';

class EditProfile extends Component {

constructor() {

super()

this.state = {}

}

render() {

return (

<h2 className="mt-5 mb-5">Edit Profile</h2>

</div>

)

}

export default EditProfile

Then, we add a Route to our EditProfile component. Whenever this link is clicked, it hits our EditProfile component.
src/MainRouter.js

...

import EditProfile from './user/EditProfile'

const MainRouter = () => (

<div>

</Switch>

</div>

)

export default MainRouter;

Make sure we implement UpdateUser fetch operation, which does a PUT operation on the server for a particular user. That way, we can tell the server to update this particular user with this particular data.

Remember that when we give the user data in body, we need to stringify it. The server does not take objects as data. It takes a string.
If you were to send a body, the updateUser function on the server side won’t be triggered and it will be hard to debug. So make sure you always JSON stringify body data.

src/user/apiUser.js

export const UpdateUser = async (userId, token, user) => {

return await fetch(`http://localhost:8080/user/${userId}`, {

method: "PUT",

mode: "cors",

headers: {

Accept : "application/json",

"Content-Type": "application/json",

Authorization: `Bearer ${token}`,

'Access-Control-Allow-Origin':'*'

body: JSON.stringify(user) // remember to json stringify this or else, server side can't receive such data

})

.then(response => {

return response.json()

})

.catch(err => {

return err

})

}

EditProfile component source

Editing forms is about presenting a html form with textfield controls. We then put our state’s value in the textfield’s value property. Our state has already been updated with the latest value from the server via the initUserID function when the component was loaded.

renderEditForm = (name, email, password) => {

return (<form>

<input

onChange={this.handleChange("name")}

type="text"

className="form-control"

value={name || ""} />

</div>

...

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

import React, { Component } from 'react';

import { IsAuthenticated } from '../auth';

import { Redirect } from 'react-router-dom';

import { getUserInfo, UpdateUser } from './apiUser';

// 1) get user information from backend based on user id

class EditProfile extends Component {

constructor() {

super()

this.state = {

redirectToProfile: false,

password: "",

email: "",

id: "",

error: "",

}

handleChange = (name) => (event) => {

this.setState({ [name] : event.target.value })

}

// in our Node API

// auth.js - router.post('/signup', userSignupValidator, signup)

clickUpdate = event => {

event.preventDefault()

if (this.isValid()) {

const { name, email, password } = this.state

const user = {

name,

email,

password: password || undefined

}

const userId = this.props.match.params.userId;

const token = IsAuthenticated().token;

UpdateUser(userId, token, user).then(data => {

console.log('clickUpdate', data)

if (data.error) {

this.setState({ error: data.error })

} else {

this.setState({

redirectToProfile: true

})

}

})

}

renderEditForm = (name, email, password) => {

return (<form>

<input

onChange={this.handleChange("name")}

type="text"

className="form-control"

value={name || ""} />

</div>

<label className="text-muted">Email</label>

<input

onChange={this.handleChange("email")}

type="email"

className="form-control"

value={email || ""}

</div>

<label className="text-muted">Password</label>

<input

onChange={this.handleChange("password")}

type="password "

className="form-control"

value={password || ""}

</div>

<button onClick={this.clickUpdate} className="btn btn-raised btn-primary">Update</button>

</form>);

}

initUserID = userId => {

let token = IsAuthenticated().token

getUserInfo(userId, token)

.then(data => {

if (data.error) {

this.setState({ redirectToSignin: true })

} else {

this.setState({

id: data._id,

email: data.email

})

}

})

}

componentDidMount() {

console.log('user/EditProfile.js', 'componentDidMount');

const userId = this.props.match.params.userId

this.initUserID(userId)

}

isValid = () => {

const { name, email, password } = this.state

if (name.length == 0) {

this.setState({ error: "name is required"})

return false

}

if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {

this.setState({ error: "Email is required"})

return false

}

if (password.length >= 1 && password.length <= 5) {

this.setState({ error: "Password must be at least 6 characters"})

return false

}

return true;

}

render() {

const { id, name, email, password, redirectToProfile, error } = this.state

if (redirectToProfile) {

return <Redirect to={`/user/${id}`} />

}

return (

<h2 className="mt-5 mb-5">Edit Profile</h2>

<div

className="alert alert-danger"

style={{ display: error ? "" : "none" }}

{error}

</div>

{this.renderEditForm(name, email, password)}

</div>

)

}

export default EditProfile

DNY client (8 – Delete Users)

February 6, 2020javascript, Node JS, Reactadmin

Client Side

removeUser tells the server side to look for the user with the specific ID. Then, remove that user from the database.

user/apiUser.js

export const removeUser = async (userId, token) => {

console.log(`removeUser', '1) remove user for user id: ${userId} from the server` )

return await fetch(`http://localhost:8080/user/${userId}`, {

method: "DELETE",

mode: "cors",

headers: {

Accept : "application/json",

"Content-Type": "application/json",

Authorization: `Bearer ${token}`,

'Access-Control-Allow-Origin':'*'

}

})

.then(response => {

console.log('removeUser', '3) response received')

return response.json()

})

.catch(err => {

this.setState({ redirectToSignin: true })

return err

})

}

auth/index.js

SignOutUser first looks at the client’s local storage. It removes the jwt key/value.
Then it tells the server to clear the cookie for this client.

Cookies are stored per-user on the users machine. A cookie is usually just a bit of information. Cookies are usually used for simple user settings colours preferences ect.

Cookies can be cleared through the browser’s settings via a “clear cookie” button. A cookie file can also be opened by the user when they go through your temporary Internet files history and can locate your cookie there. They can then open it and look at the contents. Hence, No sensitive information should ever be stored in a cookie.

// next is just a callback

export const SignOutUser = (next) => {

console.log('SignOutUser - clear cookie for this client!')

if (typeof window !== "undefined") localStorage.removeItem("jwt")

next()

// tells server to clear cookie

return fetch("http://localhost:8080/signout", {

method: "GET"

}).then(response => {

console.log('signout', response)

return response.json()

}).catch(err => console.log(err))

}

We use server calls for removing the user and clearing the cookie in our DeleteUser functionality. After deleting is complete, we simply redirect the user to the home screen.

user/DeleteUser.js

import React, { Component } from 'react';

import { IsAuthenticated } from '../auth';

import { removeUser } from './apiUser';

import { SignOutUser } from '../auth';

import { Redirect } from 'react-router-dom';

class DeleteUser extends Component {

state = {

redirect: false

}

deleteAccount = () => {

console.log('delete this account!!!');

const token = IsAuthenticated().token;

const userId = this.props.userId

console.log(`deleting user ID ${userId} with token ${token}`)

removeUser(userId, token)

.then(data => {

if (data.error) {

console.log(data.error)

} else {

// signout user

// we provide callback for next() in SignOutUser

SignOutUser( () => console.log('User is deleted')) ;

// redirect

this.setState({ redirect: true });

}

})

}

deleteConfirm = () => {

let answer = window.confirm("Are you sure you want to Delete your account?")

if (answer) {

this.deleteAccount();

}

render() {

if (this.state.redirect) {

return <Redirect to="/" />

}

return (

Delete Profile

</button>

);

}

export default DeleteUser

Server side

controllers/user.js

exports.deleteUser = (req, res, next) => {

console.log(`controllers/user.js -- deleteUser -- `)

let user = req.profile;

user.remove((err, user) => {

if (err) { return res.json({ error: err }) }

console.log('deleteUser', 'no errors, going to delete' );

user.hashed_password = undefined

user.salt = undefined

res.json({message: `User ${user.name} deleted succesfully`})

})

}

DNY client (7 – Users)

February 5, 2020javascript, Node JS, Reactadmin

Create the User file under user folder.

Include it into the router.

Then put it into the menu.

user/Users.js

import React, { Component } from "react";

import { getUserList } from "./apiUser";

import DefaultProfile from '../images/default-profile.png';

import { Link } from 'react-router-dom';

class Users extends Component {

constructor() {

super()

this.state = {

users: []

}

componentDidMount() {

getUserList().then(data => {

if (data.error) {

console.log(data.error)

} else {

this.setState({users:data})

}

})

}

renderUsers = users => (

{users.map((user, i) => (

<img

className="card-img-top"

src={DefaultProfile}

alt={user.name}

style={{width: '100%', height: '15vw', objectFit: 'cover' }}

<p className="card-text">{user.email}</p>

<Link

to={`/user/${user._id}`}

className="btn btn-primary">View Profile

</Link>

</div>

))}

</div>

);

render() {

const { users } = this.state

return (

<h2 className="mt-5 mb-5"> Users </h2>

{this.renderUsers(users)}

</div>

);

}

export default Users;

The result is a list of users.

Props Change on Users

1) Go the users list http://localhost:3000/users
2) Click on View Profile link of any user. You’ll get to the profile page of that user with that user’s data.
3) If you were to click on your own profile link above, the component data wouldn’t change. This is because the URL is part of prop. Since you’ve changed the URL, you’re changing the prop. This change happens at this.props.match.params.userId.

This is the props of the component and when it changes, we need to fetch data for the profile user again. However, in our Profile component, we only do this for when componentDidMount. Thus, we need to implement fetch data in a component hook called componentDidUpdate like so:

class Profile extends Component {

// etc

componentDidMount() {

const userId = this.props.match.params.userId

this.initUserID(userId)

}

// componentWillReceiveProps is required if you want to update the state values with new props values,

// this method will get called whenever any change happens to props values.

// However, "componentWillReceiveProps()" has been deprecated.

// You should use, "componentDidUpdate(prevProps, prevState, snapshot)".

//https://stackoverflow.com/questions/46113044/when-to-use-componentwillreceiveprops-lifecycle-method?r=SearchResults

//https://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(prevProps) {

// Typical usage (don't forget to compare props):

if (this.props.match.params.userId !== prevProps.match.params.userId) {

console.log('user/Profile.js', 'componentDidUpdate');

const userId = this.props.match.params.userId

this.initUserID(userId)

}

// other code

}

user/Profile.js

100

101

102

103

104

import React, { Component } from 'react';

import { IsAuthenticated } from '../auth';

import { Redirect, Link} from 'react-router-dom';

import { getUserInfo } from './apiUser';

import DefaultProfile from '../images/default-profile.png'

class Profile extends Component {

constructor() {

super()

this.state = {

user: "",

redirectToSignin: false

}

initUserID = userId => {

let token = IsAuthenticated().token

console.log('0) get user info')

getUserInfo(userId, token)

.then(data => {

console.log('4) callback for logging and presentation')

if (data.error) {

this.setState({ redirectToSignin: true })

} else { this.setState({ user: data }) }

})

console.log('2) finish him!!!')

}

componentDidMount() {

console.log('user/Profile.js', 'componentDidMount');

const userId = this.props.match.params.userId

this.initUserID(userId)

}

// componentWillReceiveProps is required if you want to update the state values with new props values,

// this method will get called whenever any change happens to props values.

// However, "componentWillReceiveProps()" has been deprecated.

// You should use, "componentDidUpdate(prevProps, prevState, snapshot)".

//https://stackoverflow.com/questions/46113044/when-to-use-componentwillreceiveprops-lifecycle-method?r=SearchResults

//https://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(prevProps) {

// Typical usage (don't forget to compare props):

if (this.props.match.params.userId !== prevProps.match.params.userId) {

console.log('user/Profile.js', 'componentDidUpdate');

const userId = this.props.match.params.userId

this.initUserID(userId)

}

// when route parameter changes, we need to capture that change

// make another fetch request so that our data can be updated

// current when componet mounts, it fetches that time.

render() {

const { user, redirectToSignin } = this.state

if (redirectToSignin) return <Redirect to="/signin" />

return (

<h2 className="mt-5 mb-5">Profile</h2>

<img

className="card-img-top"

src={DefaultProfile}

alt={user.name}

style={{width: '100%', height: '15vw', objectFit: 'cover' }}

<ul>

<li>{user.email}</li>

<li>{user.created && `Joined on ${new Date(user.created).toDateString()}`}</li>

</ul>

</div>

{/* if the authenticated user is same as getUserInfo's id */}

{IsAuthenticated().user &&

IsAuthenticated().user._id === user._id &&

(<div className="d-line-block mt-5">

<Link className="btn btn-raised btn-success mr-5"

to={`/user/edit/${user._id}`}>

Edit Profile

</Link>

<button className="btn btn-raised btn-danger"

to={`/user/delete/${user._id}`}>

Delete Profile

</button>

</div>)

}

</div>

);

}

export default Profile

DNY client (6 – Profile Page)

February 2, 2020javascript, Node JS, Projects, Reactadmin

src/user/Profile.js

import React, { Component } from 'react';

class Profile extends Component {

constructor() {

super()

this.state = {

}

render() {

return (

<h2 className="mt-5 mb-5">Profile</h2>

</div>

);

}

export default Profile

Notice when we added our Profile page, the path is /user/:userId.
This says whenever we have a URL in that format, we’ll hit the Profile component.

src/MainRouter.js

import React from 'react'

import {Route, Switch} from 'react-router-dom'

import Home from './core/Home'

import Signup from './user/Signup'

import Signin from './user/Signin'

import Profile from './user/Profile'

import Menu from './core/Menu'

const MainRouter = () => (

<div>

</Switch>

</div>

)

export default MainRouter;

Use the user object you get from localStorage. Inside that object, you’ll get the user object. Access the _id of the user and use it for the url parameter when we click on the profile link.

src/core/Menu.js

{`${IsAuthenticated().user.name}'s profile`}

</Link>

</li>

When fetching data from Server

import React, { Component } from 'react';

import { IsAuthenticated} from '../auth';

import { Redirect } from 'react-router-dom';

class Profile extends Component {

constructor() {

super()

this.state = {

user: "",

redirectToSignin: false

}

getUserInfo = async (userId, token) => {

console.log(`1) get user info for user id: ${userId}` )

return await fetch(`http://localhost:8080/user/${userId}`, {

method: "GET",

mode: "cors",

headers: {

Accept : "application/json",

"Content-Type": "application/json",

Authorization: `Bearer ${token}`,

'Access-Control-Allow-Origin':'*'

}

})

.then(response => {

console.log('3) response received')

return response.json()

})

.catch(err => {

this.setState({ redirectToSignin: true })

return err

})

}

componentDidMount() {

const userId = this.props.match.params.userId

let token = IsAuthenticated().token

console.log('0) get user info')

this.getUserInfo(userId, token).then(response => {

console.log('4) callback for logging and presentation')

this.setState({ user: response })

})

console.log('2) finish him!!!')

}

render() {

const { user, redirectToSignin } = this.state

if (redirectToSignin) return <Redirect to="/signin" />

return (

<h2 className="mt-5 mb-5">Profile</h2>

<ul>

<li>{user.email}</li>

<li>{`Joined on ${new Date(user.created).toDateString()}`}</li>

</ul>

</div>

);

}

export default Profile

DNY client (5 – Menu and filtering authenticated content)

February 1, 2020javascript, Node JS, Reactadmin

dny-client-5 source code
src/core/Menu.js

We first look at how we decide whether a link is active or not. We do so by looking at the history’s path name and the current path. If they match, then we’re on that page and we color it orange.

The way how we get history is to import withRouter from ‘react-router-dom’ and then using it as middleware on our Menu component.

import React from 'react'

import { Link, withRouter} from 'react-router-dom'

const isActive = (history, path) => {

if (history.location.pathname === path) return {color: "#ff9900"}

else return {color: "#000000"}

}

The history object is returned to our component as an object. Within this object, we look at property location, and find the pathname of what page we’re on.

// history object

{

"length":7,

"action":"POP",

"location": {

"pathname":"/signin",

"search":"",

"hash":"",

"key":"irdfys"

}

Then we implement signout functionality for when we click on sign out link.
1) We first clear out jwt from the local storage
2) we then make a request to the server for it to signout the current user.

export const signout = (next) => {

console.log('Menu.js - sign out function execute')

if (typeof window !== "undefined") localStorage.removeItem("jwt")

next()

return fetch("http://localhost:8080/signout", {

method: "GET"

}).then(response => {

console.log('signout', response)

return response.json()

}).catch(err => console.log(err))

}

Finally, we implment the filtering of which menu item should be visible depending on whether we’re authenticated or not.

Basically, if our local storage has jwt property, then we’re signed in. We need to get this string, parse it into an JS object, and return it. Else, if this jwt property is empty, then we’re not signed in.

export const isAuthenticated = () => {

if (typeof window == "undefined") { return false }

if (localStorage.getItem("jwt")) {

// gets string from localString's key jwt

// parse this string into a JS object

let obj = JSON.parse(localStorage.getItem("jwt"))

console.log('user obj', obj);

return JSON.parse(localStorage.getItem("jwt"))

} else { return false }

}

We then copy and paste template html into our code. Then use the previous functionality for
1) signing out
2) filtering menu items
3) coloring the active link

// use destructuring to get history property from props

const Menu = ({history}) => (

<div>

{!isAuthenticated() && (

</li>

</li>

</li>

</>)}

{isAuthenticated() && (

</li>

<a className="nav-link"

style={

(isActive(history, "/signout"), {cursor: "pointer" })

}

onClick={() => signout( () => history.push('/') )}

Sign Out

</a>

</li>

<a className="nav-link">{isAuthenticated().user.name}</a>

</li>

</>)}

</ul>

</div>

)

export default withRouter(Menu);

DNY client (4 – Signing in)

January 30, 2020javascript, Node JS, Reactadmin

We first create a sign in page routing in our MainRouter. It routes to component Signin

src/MainRouter.js

import React from 'react'

import {Route, Switch} from 'react-router-dom'

import Home from './core/Home'

import Signup from './user/Signup'

import Signin from './user/Signin'

const MainRouter = () => (

<div>

</Switch>

</div>

)

export default MainRouter;

We then create component Signin. It has email and password for the user to sign in with. The error is required for erroneous situations and the redirect to a specific referer page.

src/user/Signin.js

import React, { Component } from 'react';

import {Redirect} from 'react-router-dom';

export class Signin extends Component {

constructor() {

super()

this.state = {

email: "",

password: "",

error: "",

redirectToReferer: false,

}

handleChange = (name) => (event) => {

this.setState({ error : "" })

this.setState({ [name] : event.target.value })

}

We have an authenticate function that gets the jwt token and stores it into local storage. We store the token value on key ‘jwt’.

But before we do so, we need to make sure the window object exists.
Once the token is set, we set the referer to yes.

authenticate(jwt, next) {

if (typeof window !== 'undefined') {

localStorage.setItem("jwt", JSON.stringify(jwt))

next()

}

Once the user clicks submit, we sign by passing in the email and password. We stringify that data and put it in the body of our POST request to http://localhost:8080/signin.

When successful, we should then get the response with token and some data. We then put this token into the localstorage and set the our redirect to yes so that we redirect to the homepage.

clickSubmit = event => {

event.preventDefault()

const { email, password } = this.state

const user = { email, password }

this.signin(user)

.then(data => {

if (data.error) {

this.setState({ error: data.error })

} else {

// 1) authenticate

this.authenticate(data.token, () => {

// 2) redirect to profile page

this.setState({ redirectToReferer: true})

})

}

})

}

signin = user => {

return fetch('http://localhost:8080/signin', {

method: "POST",

mode: "cors",

headers: {

Accept : "application/json",

"Content-Type": "application/json",

'Access-Control-Allow-Origin':'*'

body: JSON.stringify(user),

})

.then(response => {

return response.json()

})

.catch(err => {

return err

})

}

renderSignInForm = (email, password) => {

return (<form>

<label className="text-muted">Email</label>

<input

onChange={this.handleChange("email")}

type="email"

className="form-control"

value={email}

</div>

<label className="text-muted">Password</label>

<input

onChange={this.handleChange("password")}

type="password "

className="form-control"

value={password}

</div>

<button onClick={this.clickSubmit} className="btn btn-raised btn-primary">submit</button>

</form>);

}

render() {

const { email, password, error, redirectToReferer} = this.state

if (redirectToReferer) {

return <Redirect to="/" />

}

if (email) console.log('email', email)

if (password) console.log('password', password)

if (error) console.log('error', error)

if (redirectToReferer) console.log('redirectToReferer', redirectToReferer)

return (

{error}

</div>

{this.renderSignInForm(email, password)}

</div>

);

}

export default Signin

Before you sign in, clear your localStorage first by opening up Inspect Element, then click on the Application tab. On the left-hand side, you’ll see a clearStorage. Click on it to clear any key/values stores previously.

Now, on the left-hand side, make sure you’re still on the Application tab click on the localhost URL. On your browser navigate to localhost:3000/signin. Then sign in using correct credentials. You’ll see that the key/value will be updated with the token given by the server. This is so that whenever you make future requests, you’ll be using this token with each request. The server will verify it and thus authenticate your requests.

After the successful sign in, you’ll be redirected to the home page.

DNY client (3 – Creating a User)

January 29, 2020javascript, Node JS, Reactadmin

On the client side, make sure we create the event handler for the submit button:

src/user/Signup.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

import React, { Component } from 'react';

export class Signup extends Component {

constructor() {

super()

this.state = {

email: "",

password: "",

error: ""

}

// https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function?r=SearchResults

// 1) we use arrow function, so that 'this' is already bound to the component

// 2) if you were to use this.handleChange, you'll have to bind it to the component in

// constructor like this:

// this.handleChange = this.handleChange.bind(this);

// 3) Or do it on the onClick: onClick={this.handleChange.bind(this)}.

// onChange gives event object.

// by definition of curry function, we first give 'name'. Then it return s a function where:

// event => {...}

// onChange gives event obj

// thus, this function will fun.

handleChange = (name) => (event) => {

this.setState({ [name] : event.target.value })

}

// in our Node API

// auth.js - router.post('/signup', userSignupValidator, signup)

clickSubmit = event => {

event.preventDefault()

const { name, email, password } = this.state

const user = { name, email, password }

console.log(JSON.stringify(user))

fetch('http://localhost:8080/signup', {

method: "POST",

mode: "cors",

headers: {

Accept : "application/json",

"Content-Type": "application/json",

'Access-Control-Allow-Origin':'*'

body: JSON.stringify(user),

})

.then(response => {

return response.json()

})

.catch(err => console.log(err ))

}

// when given a curry function

// test = (first) => (second) => {

// console.log('test result: ', first + ', ' + second);

// }

render() {

const { name, email, password } = this.state

if (name) console.log('name', name)

if (email) console.log('email', email)

if (password) console.log('password', password)

// the curry function takes in one parameter

// it returns function:

// second => {

// console.log('test result: ', first + ', ' + second);

// }

//let result = this.test("haha");

// it doesn't run the function without this second parameter, let's give it a parameter:

// result("hehe");

// now, test will run.

return (

<h2 className="mt-5 mb-5">Signup</h2>

<form>

<input

onChange={this.handleChange("name")}

type="text"

className="form-control"

value={this.state.name} />

</div>

<label className="text-muted">Email</label>

<input

onChange={this.handleChange("email")}

type="email"

className="form-control"

value={this.state.email}

</div>

<label className="text-muted">Password</label>

<input

onChange={this.handleChange("password")}

type="password "

className="form-control"

value={this.state.password}

</div>

<button onClick={this.clickSubmit} className="btn btn-raised btn-primary">submit</button>

</form>

</div>

);

}

export default Signup

On the server side, make sure use cors.

To set up: npm i -S cors

app.js:

// @ /routes/index.js

var cors = require('cors');

var app = require('express')();

// Allow all

app.use(cors());

// GET home page

app.get('/', function(req, res, next) {

res.render('index', { title: 'tol-node-public' });

});

module.exports = router;

Now when you fill in the username, password, email, (like I did in the screenshot) you’ll see that the password is ‘compaq’ and does not have a number. Thus, you’ll get a bad request:

Click on the Network tab to see what this bad request is about. You’ll see the request, which is called signup. Click on signup.

In the response from the server, we see that the text tells us that we need a number in our password:

So change our password so that it has a number. This time, when you submit, you’ll see that the response to our request will be successful. When you analyze the response to our request, you’ll see that the json response will have a success message:

Go into your mLab account and you’ll see that our users have the information we just used to create a user:

Now, if you try to submit the same data for registration, the response from the server will tell you that the email you’re using to register already exists:

DNY Node API (4 – sign in using JWT )

January 16, 2020javascript, Node JS, Projectsadmin

npm i jsonwebtoken

npm i cookie-parser

dnyNodeAPI-authentication

Creating a User

After creating a user correctly, we get a message saying that a user has been created.

Ensuring user creation correctness

In validator/index.js, we have function userSignupValidator function that ensures we check for the format of the data for when user is created.

We use this function as a middleware in
routes/auth.js

1	router.post('/signup', userSignupValidator, signup)

This means that userSignupValidator is used to validate the incoming JSON’s properties. Only when it passes do we continue on to signup function.

validator/index.js

exports.userSignupValidator = (req, res, next) => {

console.log(`validator/index.js - userSignupValidator`);

req.check("name", "Name is required").notEmpty()

console.log(`name is not null and between 4-10 char √`);

req.check("email", "Email must be between 3 to 32 characters")

.matches(/.+\@.+..+/)

.withMessage("email must contain @")

.isLength({

min: 4,

max: 50

})

console.log(`check for email √`);

req.check("password", "Password is required").notEmpty();

req.check('password')

.isLength({min: 6})

.withMessage("Password must contain at least 6 characters")

.matches(/\d/)

.withMessage("Password must contain a number")

console.log(`check for password √`);

const errors = req.validationErrors()

if (errors) {

const firstError = errors.map(error => error.msg)[0];

return res.status(400).json({error: firstError});

}

console.log(`validator/index.js - no errors, moving on √`)

next();

}

Be sure that you include a number inside your password:

Make sure you include a name when you register for an account:

For your email, ensure to have it in an email format:

Successful Signin

In order to sign in, use /signin, then click on tab Body, choose raw and then JSON format.
Type in a JSON object with key/value “email” and “password”. Then click send. If your credentials are correct, you’ll get an object back with a token key/value.

Copy and paste the value into Headers. In Headers, create a key called “Authorization”.
In the value, type “Bearer ” with a space at the end. Then copy the token behind it.

You are not set up to create/update/delete posts, get/update/delete your own user data.

DNY node api (1 – setup)

January 13, 2020javascript, Node JSadmin

download source
unzip the source code
go into directory and type npm install to install the modules
Once the packages are installed, run it npm run dev
Go to localhost:8080, then check terminal for logs

Set up

Open terminal, navigate to ‘Desktop’

mkdir dnyNodeAPI

cd dnyNodeAPI

npm init

press enter for all selections

npm install express

Then check your node_modules folder and you’ll see whole of packages being installed.

In our package.json file, change ‘main’: ‘index.js’ to ‘main’: ‘app.js’

Create file ‘app.js’:

const express = require('express')

const app = express()

app.get("/", (req, res) => {

console.log(this)

res.send("Hello world from DNY tourism app")

})

const port = 8080

app.listen(port, () => {

console.log(`DNY tourism app listening on port ${port}`)

})

in your terminal, if you went node app.js, it will run the server on port 8080.

But whenever we make a code change, we have to restart the server and this becomes cumbersome. So let’s install nodemon.

npm i nodemon

Then in your package.json:

"scripts": {

"dev": "nodemon app.js"

Now, in your terminal, Ctrl+C to get out of whatever is running.
Then npm run dev.
It will run the command as specified in our package.json and we get the server running with constant updates.

Putting in Routes

routes/posts.js

exports.getPosts = (req, res) => {

res.send("Hello world from DNY tourism app")

}

app.js

const express = require('express')

const app = express()

// bring in routes

const { getPosts } = require('./routes/post')

app.get("/", getPosts)

const port = 8080;

app.listen(port, () => {

console.log(`DNY tourism app listening on port ${port}`)

})

Install Middleware

npm i morgan

Installing Database

Create account in mLab, and create a database. Select default for everything, i.e AWS, server at Europe, and create submit. Then ‘create db user’, and create a username and pwd for the db’s user.

Then, in your project, create a file .env:

.env

1 2	MONGO_URI=mongodb://<username>:<password>@ds263368.mlab.com:63368/dny-tours-api PORT=8080

npm i dotenv

npm i mongoose

app.js

const express = require('express')

const app = express()

const mongoose = require('mongoose')

const morgan = require("morgan");

const dotenv = require('dotenv')

dotenv.config()

// db

mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })

.then(() => console.log('DB Connected'))

mongoose.connection.on('error', err => {

console.log(`DB connection error ${err.message}`)

});

// bring in routes

const postRoutes = require('./routes/post')

app.use(morgan('dev'))

app.use("/", postRoutes)

const port = process.env.PORT || 8080;

app.listen(port, () => {

console.log(`DNY tourism app listening on port ${port}`)

})

post.js

const express = require('express')

const postController = require('../controllers/post')

// have access to router

const router = express.Router()

router.get('/', postController.getPosts)

module.exports = router;

post.js

exports.getPosts = (req, res) => {

//res.send("controllers/post.js - hello wordl from node js");

res.json({

posts: [{title: 'First post'}, {title: 'Second post'}]

})

}