Step 3: Building the login form

Now that you have added packages and an .env file, you can start building the login form.

1. Create files in src directory

Create two new files in the src directory and name them Login.js and Login.css. Since the React starter project uses Webpack, you can express that a JavaScript file depends on a CSS file. To create a relationship between the two files, you have to import the CSS file in your JavaScript file. Add the following to the two files:

src/Login:

import React, { Component } from 'react';
import { Header, Button, Segment } from 'semantic-ui-react';
import './Login.css';

class Login extends Component {
  render() {
    return (
      <div className="login">
        <Header as="h4" attached="top" inverted>Anywhere Recognition</Header>
        <Segment attached>
          <div className="login-content">
            <Header as="h5">Authenticate with your Achievers account</Header>
            <Button>
              Authenticate
            </Button>
          </div>
        </Segment>
      </div>
    )
  }
}
  
export default Login;

src/Login.css

.login-content {
  width: 100%;
  height: 390px;
  text-align: center;
  padding-top: 125px;
}

.ui.attached.segment {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

Make the following changes to App.js:

Near the top of App.js file, make the following changes to the import statement section:

-import logo from './logo.svg';
+import Login from './Login';

and update the render() function to the following:

  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    )
+    return <Login />
  }

In your browser, you will now see something like the following:

Right now, clicking on the button will not do anything. The next step is to get the button working.

2. Adding the button click

At the top of Login.js add the following import statement:

+import buildUrl from 'build-url';

In the render() function, change the following:

-            <Button>
+            <Button onClick={this.onLoginClick}>

Finally, add a constructor and a method named onLoginClick:

+  constructor(props) {
+    super(props);

+    this.onLoginClick = this.onLoginClick.bind(this);
+  }
  
+  onLoginClick() {
+    const loginDomain = process.env.REACT_APP_API_DOMAIN;
+    const clientID = process.env.REACT_APP_CLIENT_ID;

+    const authParams = {
+      response_type: 'token',
+      client_id: clientID,
+      scope: ['read write'],
+      state: Math.random(),
+      nonce: 'test',
+    }

+    const loginUrl = buildUrl(loginDomain, {
+      path: '/oauth/v2/openIDConnectClient/authorize',
+      queryParams: authParams,
+    });

+    console.log('loginUrl: ' + loginUrl);

+    window.open(loginUrl, 'Login to Achievers', 'width=900,height=700');
+  }

At this point, clicking on the "Authenticate" button will open a login window, so you can restart your development server. Instead of using yarn start you will use HTTPS=true yarn start to establish a secure connection over HTTPS. After logging in to your Achievers account, you will be prompted to authorize your App. After authorizing, the URL in your login window will have additional information in it. It will look something like the following:

https://localhost:3000/#access_token=bba6732a3861f168775f3a7adc28e775d4bb9fbb&expires_in=1209600&token_type=bearer&scope=read&state=0.5060996102602306

You will need to save this access token for your other requests.