Skip to content

Commit 834506b

Browse files
SrushtikaSrushtika
committed
Step 3 - Setup the client
1 parent affad7f commit 834506b

File tree

2 files changed

+226
-0
lines changed

2 files changed

+226
-0
lines changed

‎css/style.css‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
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 {
31+
display: block;
32+
}
33+
34+
body {
35+
line-height: 1;
36+
}
37+
38+
ol, ul {
39+
list-style: none;
40+
}
41+
42+
blockquote, q {
43+
quotes: none;
44+
}
45+
46+
blockquote:before, blockquote:after,
47+
q:before, q:after {
48+
content: '';
49+
content: none;
50+
}
51+
52+
table {
53+
border-collapse: collapse;
54+
border-spacing: 0;
55+
}
56+
57+
body {
58+
font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
59+
color: #404040;
60+
background:#F7BD42;
61+
}
62+
63+
.container {
64+
margin: 80px auto;
65+
width: 640px;
66+
}
67+
68+
.login {
69+
position: relative;
70+
margin: 0 auto;
71+
padding: 20px 20px 20px;
72+
width: 310px;
73+
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;
88+
}
89+
.login h1 {
90+
margin: -20px -20px 21px;
91+
line-height: 40px;
92+
font-size: 15px;
93+
font-weight: bold;
94+
color: #555;
95+
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;
127+
}
128+
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);
182+
}
183+
184+
.lt-ie9 input[type=text], .lt-ie9 input[type=password] {
185+
line-height: 34px;
186+
}
187+

‎index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<html>
2+
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">
6+
<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+
}
18+
</script>
19+
</head>
20+
21+
<body>
22+
<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>
36+
</section>
37+
</body>
38+
39+
</html>

0 commit comments

Comments
 (0)