sign-up front-end

[ryanwk]

So I've set up the back end, user authentication, my entities all work properly with CRUD. Testing out the front end, by signing up and clicking 'submit', I get this error:

one saying it failed and one saying it passed.

Request URL:http://localhost:7165//sign-up Request Method:POST Status Code:404 Not Found

16:31:42.738 jquery.js:9566 XHR finished loading: POST "http://localhost:7165//sign-up".

So I opened up my backend terminal and did this curl request to see all users {"users":[{"id":2,"email":"ryan@email.com"},{"id":1,"email":"fc@cf"}]}

the user I created was not there.

Here's my front end api logic: (everything is required properly, linter is happy, etc)

$(() => {
  $('#sign-up-form').on('submit', function (e) {
    const data = getFormFields(this)
    e.preventDefault()
    signUp.onSignUp(data)
  })
  $('#sign-in-form').on('submit', function (e) {
    const data = getFormFields(this)
    e.preventDefault()
    signIn.onSignIn(data)
  })
  $('#sign-out').on('click', function (e) {
    e.preventDefault()
    signOut.onSignOut()
  })

'use strict'
const ui = require('./ui')
const config = require('./config')

const onSignUp = (data) => {
  return $.ajax({
    url: config.apiOrigin + '/sign-up',
    method: 'POST',
    data
  })
  .done(ui.signUpSuccess)
  .fail(ui.signUpFailure)
}
module.exports = {
  onSignUp
}

How can I sign up, what's not working properly here?

[Jcornmanhomonoff]

What does your config file look like?

[ryanwk]

const config = {
  apiOrigins: {
    production: 'https://stronger.herokuapp.com/',
    development: 'http://localhost:7165/'
  }
}

module.exports = config

[Jcornmanhomonoff]

Look at the url that it's trying to make a post to. What looks wrong with it? Request URL:http://localhost:7165//sign-up

[ryanwk]

too many /'s ?

[Jcornmanhomonoff]

So in your config file you end your paths with a / but you're also adding a / in your ajax requests. I would choose one way or the other. Whichever will be easier for you to make sense of.

[ryanwk]

I took em out, stil no luck.

const config = {
  apiOrigins: {
    production: 'https://stronger.herokuapp.com',
    development: 'http://localhost:7165'
  }
}

module.exports = config

[payne-chris-r]

Good catch with the / What does the req look like on the rails side? You should have a server log for the req.

[payne-chris-r]

Is it hitting your deployed api or your local API?

[payne-chris-r]

What is the URL for your local API? What port does it run on?

[ryanwk]

it's hitting the local api

API="${API_ORIGIN:-http://localhost:4741}"
URL_PATH="/sign-up"
curl "${API}${URL_PATH}" \
  --include \
  --request POST \
  --header "Content-Type: application/json" \
  --data '{
    "credentials": {
      "email": "'"${EMAIL}"'",
      "password": "'"${PASSWORD}"'"
    }
  }'

[ryanwk]

'use strict'
const ui = require('./ui')
const config = require('./config')

const onSignUp = (data) => {
  console.log('sign up ajax request invoked')
  return $.ajax({
    url: config.apiOrigin + 'sign-up',
    method: 'POST',
    data
  })
  .done(ui.signUpSuccess)
  .fail(ui.signUpFailure)
}

module.exports = {
  onSignUp
}

@Jcornmanhomonoff @payne-chris-r @jordanallain @sdavidson140 @MicFin @BenGitsCode @tvlangley @benjimelito

[ryanwk]

had to change front end config file to this!

const config = {
  apiOrigins: {
    production: 'https://stronger.herokuapp.com/',
    development: 'http://localhost:4741/'
  }
}

module.exports = config