Search code examples
javascriptphphtmlhttp-authentication

How to design javascript prompt box with multiple fields

As far as I can tell from my research, you can't have a multiple-field prompt dialog with any built-in method you can call from JavaScript. So how do the homepages of most routers (192.168.0.1) develop the authentication prompt box, as shown below?

I did a little more research and found that you can setup a basic http authentication using php

$user = 'user';
$password = 'pass';
if (!($_SERVER['PHP_AUTH_USER'] == $user && $_SERVER['PHP_AUTH_PW'] == $password)) {
    header('WWW-Authenticate: Basic realm="Please enter username and password to access this website"');
    header('HTTP/1.0 401 Unauthorized');
    echo '<h1>Unauthorized Access</h1>';
    exit;
}
echo "normal website contents";

1

Solution

  • This is a browser feature when the server requires HTTP authentication but none was provided. It's the only exception to the "one field" rule, and you have no JS API to call upon it. (Not to mention it's ugly and the UX is as horrible as alert() or prompt()).