app/views/login.ejs
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Chat IO</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<a href="https://github.com/OmarElGabry/chat.io" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div class="login-page">
<div class="form">
<div style="background-color: gainsboro;margin-bottom: 10px;">
👋 Check out other cool stuff
<a href="https://github.com/OmarElGabry/gunaydin" target="_blank" style="background-color: dodgerblue;">Gunaydin</a>
</div>
<div class="social-buttons">
<div><span>Login</span> via</div>
<a href="/auth/facebook">
<img class="loginBtn" src="img/facebookLoginBtn.png" alt="Sign-In with Facebook">
</a>
<a href="/auth/twitter">
<img class="loginBtn" src="img/twitterLoginBtn.png" alt="Sign-In with Twitter">
</a>
</div>
<div class="form-line"></div>
<div style="margin-top: 18px;">
<form action="/register" class="register-form" method="post" >
<input type="text" name="username" placeholder="username"/>
<input type="password" name="password" placeholder="password"/>
<button type="submit">create</button>
<p class="message">Already registered? <a href="#">Sign In</a></p>
<% if (errors != null && showRegisterForm != null && showRegisterForm === true) { %>
<% errors.forEach(function(err){ %>
<p class="message error"><%= err %></p>
<% }); %>
<% } %>
</form>
<form action="/login" class="login-form" method="post">
<input type="text" name="username" placeholder="username"/>
<input type="password" name="password" placeholder="password"/>
<button type="submit">login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
<% if (errors != null && showRegisterForm == null) { %>
<% errors.forEach(function(err){ %>
<p class="message error"><%= err %></p>
<% }); %>
<% } if (success != null && showRegisterForm == null) { %>
<p class="message success"><%= success %></p>
<% } %>
</form>
</div>
</div> <!-- end form -->
</div> <!-- end login container -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<% if(showRegisterForm != null && showRegisterForm === true) { %>
<script>
$('.register-form').show(); $('.login-form, .social-buttons, .form-line').hide();
</script>
<% } %>
<script>
$('.message a').click(function(){
$('form, .social-buttons, .form-line').animate({height: "toggle", opacity: "toggle"}, "slow");
});
</script>
</body>
</html>