React

by oktaviardi pratama

HTML

<div id="app"></div>

React

class TestApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      data: null,
      error: null,
      loading: false,
    };
  }

  handleInputChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    const { username, password } = this.state;

    this.setState({ loading: true, error: null });

    fetch('https://api-genfiit.yanginibeda.web.id/api/auth/local', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ identifier: username, password: password }),
    })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        this.setState({ data, loading: false });
      })
      .catch(error => {
        this.setState({ error: error.message, loading: false });
      });
  };

  render() {
    const { username, password, data, error, loading } = this.state;

    return (
      <div>
        <h1>Login</h1>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="username"
            value={username}
            onChange={this.handleInputChange}
            placeholder="Username"
            required
          />
          <input
            type="password"
            name="password"
            value={password}
            onChange={this.handleInputChange}
            placeholder="Password"
            required
          />
          <button type="submit">Login</button>
        </form>

        {loading && <div>Loading...</div>}
        {error && <div>Error: {error}</div>}
        {data && <div>Success! Token: {data.jwt}</div>}
      </div>
    );
  }
}

// Render the TestApp component to the DOM
ReactDOM.render(<TestApp />,...