[EDU-765] CHORES Jwt authentication nodejs fix

.env-examlple

@@ -0,0 +1 @@
+ABLY_API_KEY={your-api-key}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.env

README.md

@@ -1,4 +1,4 @@
-[![Ably](https://s3.amazonaws.com/files.ably.io/logo-with-type.png)](https://www.ably.io)
+[![Ably](https://static.ably.dev/logo-h-black.svg?jwt-authentication-nodejs)](https://www.ably.com)
 
 ---
 

css/style.css

@@ -1,187 +1,96 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/*
- * Copyright (c) 2012-2013 Thibaut Courouble
- * http://www.cssflow.com
- *
- * Licensed under the MIT License:
- * http://www.opensource.org/licenses/mit-license.php
- */
-
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+section {
   display: block;
 }
 
+html,
 body {
-  line-height: 1;
+  height: 100%;
 }
 
-ol, ul {
-  list-style: none;
+body {
+  font: 16px/20px sans-serif;
+  color: #404040;
+  background: #ffffff;
+  margin: 0;
+  padding: 0;
 }
 
-blockquote, q {
-  quotes: none;
+form {
+  padding: 1.1rem 1.6rem 1.6rem;
 }
 
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
+input {
+  display: block;
+  margin: 10px 0;
+  padding: 12px 16px;
+  width: 200px;
+  color: #222222;
+  background: #ebebeb;
+  border: 1px solid;
+  border-color: #c9c9c9;
+  border-radius: 2px;
+  font-size: 14px;
 }
 
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
+button[type="submit"] {
+  margin-top: 32px;
+  background-color: #03020d;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.125rem;
+  color: #ffffff;
+  padding: 0.9375rem 1.5rem;
+  border: 0;
+  font-weight: 700;
 }
 
-body {
-  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
-  color: #404040;
-  background:#F7BD42;
+button[type="submit"]:hover {
+  background: #ff5416;
 }
 
-.container {
-  margin: 80px auto;
-  width: 640px;
+.container::after {
+  content: "";
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  font-size: 30px;
+  width: 100%;
+  height: 100%;
+  background-position: 10% 20%;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='552' height='552' viewBox='0 0 552 552' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='276' cy='276' r='55' stroke='%23FF0000' stroke-width='2'/%3e%3ccircle cx='276' cy='276' r='127' stroke='%23FF0000' stroke-width='2'/%3e%3ccircle cx='276' cy='276' r='194' stroke='%23FF0000' stroke-width='2'/%3e%3ccircle cx='276' cy='276' r='274' stroke='%23FF0000' stroke-width='2'/%3e%3c/svg%3e ");
+  transform: translate(1000px, 60px) scale(2);
 }
 
 .login {
   position: relative;
-  margin: 0 auto;
-  padding: 20px 20px 20px;
-  width: 310px;
+  margin: auto;
+  padding: 0;
   background: white;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-.login:before {
-  content: '';
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  bottom: -8px;
-  left: -8px;
-  z-index: -1;
-  background: rgba(0, 0, 0, 0.08);
-  border-radius: 4px;
+  border-radius: 2px;
+  box-shadow: 0 0 200px #72727255;
 }
+
 .login h1 {
-  margin: -20px -20px 21px;
-  line-height: 40px;
-  font-size: 15px;
-  font-weight: bold;
-  color: #555;
+  margin: 0;
+  padding: 1rem 0;
+  font-size: 1rem;
+  font-weight: 900;
+  color: #fff;
   text-align: center;
-  text-shadow: 0 1px white;
-  background: #f3f3f3;
-  border-bottom: 1px solid #cfcfcf;
-  border-radius: 3px 3px 0 0;
-  background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
-  background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
-  background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
-  background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
-  -webkit-box-shadow: 0 1px whitesmoke;
-  box-shadow: 0 1px whitesmoke;
-}
-.login p {
-  margin: 20px 0 0;
-}
-.login p:first-child {
-  margin-top: 0;
-}
-.login input[type=text], .login input[type=password] {
-  width: 278px;
-}
-.login p.submit {
-  text-align: right;
-}
-:-moz-placeholder {
-  color: #c9c9c9 !important;
-  font-size: 13px;
-}
-
-::-webkit-input-placeholder {
-  color: #ccc;
-  font-size: 13px;
+  background: #000000;
+  border-radius: 4px 4px 0 0;
 }
 
-input {
-  font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
-  font-size: 14px;
-}
-
-input[type=text], input[type=password] {
-  margin: 5px;
-  padding: 0 10px;
-  width: 200px;
-  height: 34px;
-  color: #404040;
-  background: white;
-  border: 1px solid;
-  border-color: #c4c4c4 #d1d1d1 #d4d4d4;
-  border-radius: 2px;
-  outline: 5px solid #eff4f7;
-  -moz-outline-radius: 3px;
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
-}
-input[type=text]:focus, input[type=password]:focus {
-  border-color: #7dc9e2;
-  outline-color: #dceefc;
-  outline-offset: 0;
-}
-
-input[type=submit] {
-  padding: 0 18px;
-  height: 29px;
-  font-size: 12px;
-  font-weight: bold;
-  color: #527881;
-  text-shadow: 0 1px #e3f1f1;
-  background: #cde5ef;
-  border: 1px solid;
-  border-color: #b4ccce #b3c0c8 #9eb9c2;
-  border-radius: 16px;
-  outline: 0;
-  -webkit-box-sizing: content-box;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
-  background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
-  background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
-  background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
-  -webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
-}
-input[type=submit]:active {
-  background: #cde5ef;
-  border-color: #9eb9c2 #b3c0c8 #b4ccce;
-  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+.login {
+  z-index: 2;
+  margin: auto;
+  width: unset;
 }
 
-.lt-ie9 input[type=text], .lt-ie9 input[type=password] {
-  line-height: 34px;
+.container {
+  display: flex;
+  height: 100%;
 }
-

index.html

@@ -1,39 +1,62 @@
-<html>
-
-<head>
-    <script src="https://cdn.ably.io/lib/ably.min-1.js" type="text/javascript"></script>
-    <link rel="stylesheet" href="css/style.css">
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>JWT authentication with Ably</title>
+    <link rel="stylesheet" href="css/style.css" />
+    <link
+      rel="icon"
+      href="https://static.ably.dev/motif-red.svg?jwt-authentication-nodejs"
+      type="image/svg+xml"
+    />
+    <script
+      src="https://cdn.ably.io/lib/ably.min-1.js"
+      type="text/javascript"
+    ></script>
     <script type="text/javascript">
-        /* Set up a Realtime client that authenticates with the local web server auth endpoint */
-        console.log('On login page now')
-        function login(e) {
-            e.preventDefault();
-            console.log('Fetching JWT token from auth server')
-            var realtime = new Ably.Realtime({ authUrl: '/auth' });
-            realtime.connection.once('connected', function () {
-                console.log('Client connected to Ably using JWT')
-                alert("Client successfully connected Ably using JWT auth");
-            })
+      /*
+        Set up a Realtime client that authenticates
+        with the local web server auth endpoint
+        and outputs the JWT to the console.log
+      */
+
+      function login(e) {
+        e.preventDefault();
+
+        const username = document.querySelector("#username").value;
+        const password = document.querySelector("#password").value;
+
+        if (!`${username}`.trim() || !`${password}`.trim()) {
+          return alert("Error! Require username and password");
         }
+
+        // Send user details to the auth server
+        const authUrl = `/auth?clientId=${username}:${password}`;
+        const realtime = new Ably.Realtime({ authUrl });
+
+        console.log("Fetching JWT token from auth server", username, password);
+
+        realtime.connection.once("connected", () => {
+          const { tokenDetails } = realtime.auth;
+          console.log("Client connected to Ably using JWT", tokenDetails);
+          alert("Client successfully connected to Ably using JWT auth");
+        });
+      }
     </script>
-</head>
+  </head>
 
-<body>
+  <body>
     <section class="container">
-        <div class="login">
-            <h1>Ably JWT auth example</h1>
-
-            <form>
-                <input type="text" placeholder="Enter Username" name="username">
-                <br/>
-                <input type="password" placeholder="Password" name="password">
-                <br/>
-                <p class="submit">
-                    <button type="submit" onclick="login(event)">Login</button>
-                </p>
-            </form>
-        </div>
+      <div class="login">
+        <h1>Ably JWT auth example</h1>
+        <form>
+          <label for="username">Username</label>
+          <input type="text" placeholder="Enter Username" id="username" />
+          <label for="password">Password</label>
+          <input type="password" placeholder="Password" id="password" />
+          <button type="submit" onclick="login(event)">Login</button>
+        </form>
+      </div>
     </section>
-</body>
-
-</html>
+  </body>
+</html>