Create a Login Page

From @jayair on Mon Apr 10 2017 01:03:11 GMT+0000 (UTC)

Link to chapter - http://serverless-stack.com/chapters/create-a-login-page.html

Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/37

Is it safe to store password in state?

It is only there temporarily and I think it should be okay?

It would have been really nice if there was dependencies and imports are listed accordingly. It took 3 hours to figure out which exports goes where.

Hmm can you expand on that a little? Which imports did you have a hard time figuring out?

Hello,
So I had a problem in this chapter…

import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";

ControlLabel is not supported anymore. I had to change it to FormLabel to make it work.
Remembering to change in the code too… I also added the render function:

import React, { useState } from "react";
import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
import "./Login.css";
import { render } from "@testing-library/react";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function validateForm() {
    return email.length > 0 && password.length > 0;
  }

  function handleSubmit(event) {
    event.preventDefault();
  }

  render(); {
    return (
    <div className="Login">
      <form onSubmit={handleSubmit}>
        <FormGroup controlId="email" bsSize="large">
          <FormLabel>Email</FormLabel>
          <FormControl
            autoFocus
            type="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
          />
        </FormGroup>
        <FormGroup controlId="password" bsSize="large">
          <FormLabel>Password</FormLabel>
          <FormControl
            value={password}
            onChange={e => setPassword(e.target.value)}
            type="password"
          />
        </FormGroup>
        <Button block bsSize="large" disabled={!validateForm()} type="submit">
          Login
        </Button>
      </form>
    </div>
  );
 }
}

Can you post which version of react-bootstrap you are using in your package.json?

I am new to React so am probably making a silly error. I have completed the previous chapters without issue. However at the end of the Create a Login Page chapter, when I run npm start, I get the following error in the browser:

Failed to compile.

Error in ./~/@aws-sdk/credential-provider-cognito-identity/dist/cjs/fromCognitoIdentity.js
Module parse failed: /home/sidney/Documents/code/tuts/notes-app/notes-app-client/node_modules/@aws-sdk/credential-provider-cognito-identity/dist/cjs/fromCognitoIdentity.js Unexpected token (13:20)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:20)
 @ ./~/@aws-sdk/credential-provider-cognito-identity/dist/cjs/index.js 4:21-53

I checked that all of the values in config.js are correct, but the error persists. Is there something I am overlooking?

That’s strange. Can you remove your node_modules, run npm install and try again?

Thank you, that seemed to work.

1 Like