NodeJS-JWT-Authentication-Test/index.html at main · AshutoshZawar/NodeJS-JWT-Authentication-Test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js" integrity="sha512-quHCp3WbBNkwLfYUMd+KwBAgpVukJu5MncuQaWXgCrfgcxCJAq/fo+oqrRKOj+UKEmyMCG3tb8RB63W+EmrOBg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="container-fluid">

    <h1 class="row">Login</h1>

    <main>
        <div class="row">
            <label for="username">Username</label>
            <input type="text" name="username" id="username">
    </div>
    <div class="row">
        <label for="password">password</label>
        <input type="password" name="password" id="password">
    </div>
    <div>
        <button onclick="login()">Login</button>
        <button onclick="getDashboard()">Get Dashboard</button>
        <button onclick="settings()">Settings</button>
    </div>
    </main>
</div>


<script>
    let endpoint ="ASHU";
    function login() {
        const data = {
            username: document.getElementById('username').value,
            password: document.getElementById('password').value,
        };
        axios.post('/api/login', data)
            .then(res => {
                console.log(res);
                document.getElementById('username').value = '';
                document.getElementById('password').value = '';
                if (res && res.data && res.data.success) {
                    const token = res.data.token;
                    localStorage.setItem('jwt', token);
                    //changeRoute('dashboard');
                    getDashboard();
            }
        });
    }

    function getDashboard() {
        const token = localStorage.getItem('jwt');
        axios.get('/api/dashboard', {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        }).then(res => {
            if (res && res.data && res.data.success) {
                document.querySelector('h1.row').innerHTML = 'Dashboard';
                document.querySelector('main').innerHTML = res.data.myContent;
                history.pushState(null,null, endpoint);
            }
        }).catch(err => {
                console.error(err); //token expiry
                if (err.response.status === 401) {
                    localStorage.removeItem('jwt');
                    window.location.href = '/';
                }
        });
    }

    function settings() {
        const token = localStorage.getItem('jwt');
        axios.get('/api/settings', {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        }).then(res => {
            if (res && res.data && res.data.success) {
                history.pushState(token, null, endpoint);
                document.querySelector('h1.row').innerHTML = 'Settings';
                document.querySelector('main').innerHTML = res.data.Content;
            }
        });
    }

    function onLoad() {const token = localStorage.getItem("jwt");
        if (token) {
          getDashboard();
        }}setInterval(() => {
        if (document.location.href.endsWith(endpoint)) {
          const token = localStorage.getItem("jwt");
          axios.get(endpoint, {
              headers: {
                Authorization: `Bearer ${token}`
              }
            }).then((res) => {
              if (res && res.data && !res.data.success) {
                location.replace(document.location.origin);
              }
            });
        }}, 3000);
</script>
</body>
</html>