Text : Next JS Login Page Code

 Here is the text version of the Login Page as discussed in the video:

"use client";

import { useState } from "react";

import axios from 'axios';

const Login = () => {

  const [username, setUsername] = useState("");

  const [password, setPassword] = useState("");

  const login = async() => {

    const url = "http://localhost/contacts-api/users.php";

    const jsonData = {username:username, password:password}

    var response = await axios.get(url, {

      params:{json: JSON.stringify(jsonData), operation: "login"}

    });

    //check if valid user

    if(response.data.length > 0){

      alert("Welcome to my Page!");

    }else{

      alert("Invlid username or password.");

    }

  }

  return (

    <>

      <h1>Login to MySQL Database</h1>

      <input

        type="text"

        placeholder="Username"

        value={username}

        onChange={(e) => {

          setUsername(e.target.value);

        }}

      />

      <br/>

      <input

        type="password"

        placeholder="Password"

        value={password}

        onChange={(e) => {

          setPassword(e.target.value);

        }}

      />

      <br/>

      <button onClick={login}>Login</button>

    </>

  );

};

export default Login;