Hello!
Today, we consider a big problem for front-end engineers. It is an authentification or in other words a login page. Can we realise it with only HTML, CSS and JavaScript? This is one of long-standing problems for web programmers. Probably you know the answer, WE CAN'T! The reason is quite clear, the source code is opened.
So, we can't make a perfect login page using only HTML, CSS and JavaScript. However, in other words, we CAN make an imperfect login page!
For example, if you visit a website and it requires an authentification, do you check the source code? Most people say NO, I think! Sure that a mimic authentification is very useful!!
Now, let's start making a mimic login page!
The most important thing is the idea. For pedestrians, I'll walk you to the completion.
To start with, we make a top page which is opened after logged-in.
<body>
<h1 style="text-align: center; margin-top: 20%;">WELCOME!</h1>
</body>
Next, we add the login-page code to the body above.
<div style="background-color: black; width: 100%; height: 100%; z-index: 2; position: fixed; left: 0; top: 0;">
<p style="color: white; text-align: center; margin-top: 20%;">Please entre the password.</p>
<div style="text-align: center;"><input><button>Login</button></div>
</div>
The point is covering the top page with the login page. We fix the div element at the left 0 and the top 0, and spread it whole-widely. The z-index is normally one. The bigger is higher side. We used the p element and one more div element for fine-tuning (for example, the text-align is invalid if you directly write it in the input).
Okiedok, we made the login page! The final step we need is adding an authentification function. Our login page is just mimic but our mimicry is not only the picture but also the function! This is our main road.
The authentification function is that when a user clicks the button, if the password the user entred is correct, the top page is displayed (not move to the page), if incorrect, a message is displayed.
To do this, we firstly add IDs to the first div element, the p element, the input and the button: id="overlay", id="msg", id="pw" and id="btn" respectively.
JavaScript plays the role of the function.
const overlay = document.getElementById("overlay");
const msg = document.getElementById("msg");
const pw = document.getElementById("pw");
const btn = document.getElementById("btn");
login = () => {
if(pw.value === "safejourney"){
overlay.style.display = "none";
}else{
msg.innerHTML = "The password you entred is incorrect.<br>Please entre the password.";
}
}
Finally, we add onclick="login()" to the button element. All done!
The content of the magic is simple. If the password a user entred is safejourney, the first div element is hidden. If the password a user entred is not safejourney, the p element is rewritten by the innerHTML.
We have finished the work. Your website got the login page! If you need the non-mimicry, I'll talk about it elsewhere. Safe journey!
I almost forgot! There are three more things!
One, the above JavaScript code is, what we call, ES6 or ECMAScript2015. If you like the elder version, you should rewrite it as follows.
var overlay = document.getElementById("overlay");
var msg = document.getElementById("msg");
var pw = document.getElementById("pw");
var btn = document.getElementById("btn");
function login(){
if(pw.value == "safejourney"){
overlay.style.display = "none";
}else{
msg.innerHTML = "The password you entred is incorrect.<br>Please entre the password.";
}
}
Two, the complete source is here.
<body>
<h1 style="text-align: center; margin-top: 20%;">WELCOME!</h1>
<div style="background-color: black; width: 100%; height: 100%; z-index: 2; position: fixed; left: 0; top: 0;" id="overlay">
<p style="color: white; text-align: center; margin-top: 20%;" id="msg">Please entre the password.</p>
<div style="text-align: center;">
<input id="pw"><button id="btn" onclick="login()">Login</button>
</div>
</div>
<script>
const overlay = document.getElementById("overlay");
const msg = document.getElementById("msg");
const pw = document.getElementById("pw");
const btn = document.getElementById("btn");
login = () => {
if(pw.value === "safejourney"){
overlay.style.display = "none";
}else{
msg.innerHTML = "The password you entred is incorrect.<br>Please entre the password.";
}
}
</script>
</body>
Three, I have used this for my website. The login page of my website requires not a password but a user name. A user entres the user name and clicks the open button, then the dictionary Iff calls the user name. Please come if you're curious!
Top comments (0)