A mimic authentification
Tags: html, css, javascript, webdev
Published: 2020-02-24 12:25:43

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.

```html
<body>
  <h1 style="text-align: center; margin-top: 20%;">WELCOME!</h1>
</body>
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k71mu1a5grymdjgqu5ba.png)

Next, we add the login-page code to the body above.

```html
  <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>
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nquoyvctz1ef2i9imd1o.png)

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.

```javascript
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.

```javascript
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.
```html
<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!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yded3x7m416apque6s4v.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l4vzf4hhamvl0fbh1be5.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6kj91bmuaqvm4kbyji05.png)