NodeJS JWT User Authentication
Here in this blogpost I will share only html and css which is require for this project. If you want to learn then watch this tutorial series.
views/layout.hbs
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel='stylesheet' href='/css/style.css' />
</head>
<body>
<div class="wrapper">
{{!-- NAVBAR START --}}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">Auth</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
{{#if user}}
<li class="nav-item">
<a class="nav-link" href="/users/dashboard">dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/users/logout">Logout</a>
</li>
{{/if}}
{{#unless user}}
<li class="nav-item">
<a class="nav-link" href="/users/register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/users/login">Login</a>
</li>
{{/unless}}
</ul>
</div>
</nav>
{{!-- NAVBAR ENDS --}}
{{{body}}}
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
views/register.hbs
<div class="container">
<br>
<br>
<br>
<br>
<br>
<div class="h2 text-center">Registration</div>
<div class="row justify-content-center">
<div class="col-md-6">
{{#if errorMessage}}
{{#each errorMessage}}
<div class="alert alert-danger">{{@index}}: {{this.msg}}</div>
{{/each}}
{{/if}}
<form action="/users/register" method="POST">
<div class="form-group">
<label for="exampleInputEmail1">Full Name</label>
<input type="text" name="name" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Confirm Password</label>
<input type="password" name="password2" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
views/login.hbs
<div class="container">
<br>
<br>
<br>
<br>
<br>
<h2 class="h2 text-center">Login</h2>
<div class="row justify-content-center">
<div class="col-md-6">
{{#if errorMessage}}
{{#each errorMessage}}
<div class="alert alert-danger">{{@index}}: {{this.msg}}</div>
{{/each}}
{{/if}}
<form action="/users/login" method="POST">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
views/dashboard.hbs
<div class="ui container">
<br>
<br>
<br>
<br>
<br>
<div class="alert alert-success">Welcome {{user}}</div>
</div>
No comments: