Skip to content

Commit ff7043e

Browse files
author
Bruce Thomas
committed
Fixes for the JWT tutorial
1 parent d7da718 commit ff7043e

File tree

6 files changed

+1405
-228
lines changed

6 files changed

+1405
-228
lines changed

‎README.md

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

33
---
44

‎css/style.css

+67-158
Original file line numberDiff line numberDiff line change
@@ -1,187 +1,96 @@
1-
html, body, div, span, applet, object, iframe,
2-
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3-
a, abbr, acronym, address, big, cite, code,
4-
del, dfn, em, img, ins, kbd, q, s, samp,
5-
small, strike, strong, sub, sup, tt, var,
6-
b, u, i, center,
7-
dl, dt, dd, ol, ul, li,
8-
fieldset, form, label, legend,
9-
table, caption, tbody, tfoot, thead, tr, th, td,
10-
article, aside, canvas, details, embed,
11-
figure, figcaption, footer, header, hgroup,
12-
menu, nav, output, ruby, section, summary,
13-
time, mark, audio, video {
14-
margin: 0;
15-
padding: 0;
16-
border: 0;
17-
font-size: 100%;
18-
font: inherit;
19-
vertical-align: baseline;
20-
}
21-
/*
22-
* Copyright (c) 2012-2013 Thibaut Courouble
23-
* http://www.cssflow.com
24-
*
25-
* Licensed under the MIT License:
26-
* http://www.opensource.org/licenses/mit-license.php
27-
*/
28-
29-
article, aside, details, figcaption, figure,
30-
footer, header, hgroup, menu, nav, section {
1+
section {
312
display: block;
323
}
334

5+
html,
346
body {
35-
line-height: 1;
7+
height: 100%;
368
}
379

38-
ol, ul {
39-
list-style: none;
10+
body {
11+
font: 16px/20px sans-serif;
12+
color: #404040;
13+
background: #ffffff;
14+
margin: 0;
15+
padding: 0;
4016
}
4117

42-
blockquote, q {
43-
quotes: none;
18+
form {
19+
padding: 1.1rem 1.6rem 1.6rem;
4420
}
4521

46-
blockquote:before, blockquote:after,
47-
q:before, q:after {
48-
content: '';
49-
content: none;
22+
input {
23+
display: block;
24+
margin: 10px 0;
25+
padding: 12px 16px;
26+
width: 200px;
27+
color: #222222;
28+
background: #ebebeb;
29+
border: 1px solid;
30+
border-color: #c9c9c9;
31+
border-radius: 2px;
32+
font-size: 14px;
5033
}
5134

52-
table {
53-
border-collapse: collapse;
54-
border-spacing: 0;
35+
button[type="submit"] {
36+
margin-top: 32px;
37+
background-color: #03020d;
38+
border-radius: 6px;
39+
font-size: 1rem;
40+
font-weight: 500;
41+
line-height: 1.125rem;
42+
color: #ffffff;
43+
padding: 0.9375rem 1.5rem;
44+
border: 0;
45+
font-weight: 700;
5546
}
5647

57-
body {
58-
font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
59-
color: #404040;
60-
background:#F7BD42;
48+
button[type="submit"]:hover {
49+
background: #ff5416;
6150
}
6251

63-
.container {
64-
margin: 80px auto;
65-
width: 640px;
52+
.container::after {
53+
content: "";
54+
position: fixed;
55+
z-index: 1;
56+
top: 0;
57+
left: 0;
58+
font-size: 30px;
59+
width: 100%;
60+
height: 100%;
61+
background-position: 10% 20%;
62+
background-repeat: no-repeat;
63+
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 ");
64+
transform: translate(1000px, 60px) scale(2);
6665
}
6766

6867
.login {
6968
position: relative;
70-
margin: 0 auto;
71-
padding: 20px 20px 20px;
72-
width: 310px;
69+
margin: auto;
70+
padding: 0;
7371
background: white;
74-
border-radius: 3px;
75-
-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
76-
box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
77-
}
78-
.login:before {
79-
content: '';
80-
position: absolute;
81-
top: -8px;
82-
right: -8px;
83-
bottom: -8px;
84-
left: -8px;
85-
z-index: -1;
86-
background: rgba(0, 0, 0, 0.08);
87-
border-radius: 4px;
72+
border-radius: 2px;
73+
box-shadow: 0 0 200px #72727255;
8874
}
75+
8976
.login h1 {
90-
margin: -20px -20px 21px;
91-
line-height: 40px;
92-
font-size: 15px;
93-
font-weight: bold;
94-
color: #555;
77+
margin: 0;
78+
padding: 1rem 0;
79+
font-size: 1rem;
80+
font-weight: 900;
81+
color: #fff;
9582
text-align: center;
96-
text-shadow: 0 1px white;
97-
background: #f3f3f3;
98-
border-bottom: 1px solid #cfcfcf;
99-
border-radius: 3px 3px 0 0;
100-
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
101-
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
102-
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
103-
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
104-
-webkit-box-shadow: 0 1px whitesmoke;
105-
box-shadow: 0 1px whitesmoke;
106-
}
107-
.login p {
108-
margin: 20px 0 0;
109-
}
110-
.login p:first-child {
111-
margin-top: 0;
112-
}
113-
.login input[type=text], .login input[type=password] {
114-
width: 278px;
115-
}
116-
.login p.submit {
117-
text-align: right;
118-
}
119-
:-moz-placeholder {
120-
color: #c9c9c9 !important;
121-
font-size: 13px;
122-
}
123-
124-
::-webkit-input-placeholder {
125-
color: #ccc;
126-
font-size: 13px;
83+
background: #000000;
84+
border-radius: 4px 4px 0 0;
12785
}
12886

129-
input {
130-
font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
131-
font-size: 14px;
132-
}
133-
134-
input[type=text], input[type=password] {
135-
margin: 5px;
136-
padding: 0 10px;
137-
width: 200px;
138-
height: 34px;
139-
color: #404040;
140-
background: white;
141-
border: 1px solid;
142-
border-color: #c4c4c4 #d1d1d1 #d4d4d4;
143-
border-radius: 2px;
144-
outline: 5px solid #eff4f7;
145-
-moz-outline-radius: 3px;
146-
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
147-
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
148-
}
149-
input[type=text]:focus, input[type=password]:focus {
150-
border-color: #7dc9e2;
151-
outline-color: #dceefc;
152-
outline-offset: 0;
153-
}
154-
155-
input[type=submit] {
156-
padding: 0 18px;
157-
height: 29px;
158-
font-size: 12px;
159-
font-weight: bold;
160-
color: #527881;
161-
text-shadow: 0 1px #e3f1f1;
162-
background: #cde5ef;
163-
border: 1px solid;
164-
border-color: #b4ccce #b3c0c8 #9eb9c2;
165-
border-radius: 16px;
166-
outline: 0;
167-
-webkit-box-sizing: content-box;
168-
-moz-box-sizing: content-box;
169-
box-sizing: content-box;
170-
background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
171-
background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
172-
background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
173-
background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
174-
-webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
175-
box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
176-
}
177-
input[type=submit]:active {
178-
background: #cde5ef;
179-
border-color: #9eb9c2 #b3c0c8 #b4ccce;
180-
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
181-
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
87+
.login {
88+
z-index: 2;
89+
margin: auto;
90+
width: unset;
18291
}
18392

184-
.lt-ie9 input[type=text], .lt-ie9 input[type=password] {
185-
line-height: 34px;
93+
.container {
94+
display: flex;
95+
height: 100%;
18696
}
187-

‎index.html

+39-33
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,45 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title></title>
6+
<script
7+
src="https://cdn.ably.io/lib/ably.min-1.js"
8+
type="text/javascript"
9+
></script>
10+
<link rel="stylesheet" href="css/style.css" />
211

3-
<head>
4-
<script src="https://cdn.ably.io/lib/ably.min-1.js" type="text/javascript"></script>
5-
<link rel="stylesheet" href="css/style.css">
612
<script type="text/javascript">
7-
/* Set up a Realtime client that authenticates with the local web server auth endpoint */
8-
console.log('On login page now')
9-
function login(e) {
10-
e.preventDefault();
11-
console.log('Fetching JWT token from auth server')
12-
var realtime = new Ably.Realtime({ authUrl: '/auth' });
13-
realtime.connection.once('connected', function () {
14-
console.log('Client connected to Ably using JWT')
15-
alert("Client successfully connected Ably using JWT auth");
16-
})
17-
}
13+
/*
14+
Set up a Realtime client that authenticates
15+
with the local web server auth endpoint
16+
and outputs the JWT to the console.log
17+
*/
18+
19+
function login(e) {
20+
e.preventDefault();
21+
console.log("Fetching JWT token from auth server");
22+
const realtime = new Ably.Realtime({ authUrl: "/auth" });
23+
24+
realtime.connection.once("connected", () => {
25+
const { tokenDetails } = realtime.auth;
26+
console.log("Client connected to Ably using JWT", tokenDetails);
27+
alert("Client successfully connected Ably using JWT auth");
28+
});
29+
}
1830
</script>
19-
</head>
31+
</head>
2032

21-
<body>
33+
<body>
2234
<section class="container">
23-
<div class="login">
24-
<h1>Ably JWT auth example</h1>
25-
26-
<form>
27-
<input type="text" placeholder="Enter Username" name="username">
28-
<br/>
29-
<input type="password" placeholder="Password" name="password">
30-
<br/>
31-
<p class="submit">
32-
<button type="submit" onclick="login(event)">Login</button>
33-
</p>
34-
</form>
35-
</div>
35+
<div class="login">
36+
<h1>Ably JWT auth example</h1>
37+
<form>
38+
<input type="text" placeholder="Enter Username" name="username" />
39+
<input type="password" placeholder="Password" name="password" />
40+
<button type="submit" onclick="login(event)">Login</button>
41+
</form>
42+
</div>
3643
</section>
37-
</body>
38-
39-
</html>
44+
</body>
45+
</html>

0 commit comments

Comments
 (0)