Skip to content

Commit dc095d7

Browse files
RubenVerborghRubenVerborgh
committed
Share login and logout code across views.
Ensures consistency of login status.
1 parent 00bb297 commit dc095d7

File tree

5 files changed

+60
-101
lines changed

5 files changed

+60
-101
lines changed

‎common/js/auth-buttons.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* Provide functionality for authentication buttons */
2+
3+
(({ auth }) => {
4+
// Wire up DOM elements
5+
const [loginButton, logoutButton, registerButton, accountSettings] =
6+
['login', 'logout', 'register', 'accountSettings'].map(id =>
7+
document.getElementById(id) || document.createElement('a'))
8+
loginButton.addEventListener('click', login)
9+
logoutButton.addEventListener('click', logout)
10+
registerButton.addEventListener('click', register)
11+
12+
// Track authentication status and update UI
13+
auth.trackSession(session => {
14+
const loggedIn = !!session
15+
const isOwner = loggedIn && new URL(session.webId).origin === location.origin
16+
loginButton.classList.toggle('hidden', loggedIn)
17+
logoutButton.classList.toggle('hidden', !loggedIn)
18+
accountSettings.classList.toggle('hidden', !isOwner)
19+
})
20+
21+
// Log the user in on the client and the server
22+
async function login () {
23+
const session = await auth.popupLogin()
24+
if (session) {
25+
// Make authenticated request to the server to establish a session cookie
26+
const {status} = await auth.fetch(location, { method: 'HEAD' })
27+
if (status === 401) {
28+
alert(`Invalid login.\n\nDid you set ${session.idp} as your OIDC provider in your profile ${session.webId}?`)
29+
await auth.logout()
30+
}
31+
// Now that we have a cookie, reload to display the authenticated page
32+
location.reload()
33+
}
34+
}
35+
36+
// Log the user out from the client and the server
37+
async function logout () {
38+
await auth.logout()
39+
location.reload()
40+
}
41+
42+
// Redirect to the registration page
43+
function register () {
44+
const registration = new URL('/register', location)
45+
registration.searchParams.set('returnToUrl', location)
46+
location.href = registration
47+
}
48+
})(solid)

‎default-templates/new-account/index.html‎

Lines changed: 3 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
<a href="/" class="navbar-brand">{{#if name}}{{name}} &ndash; {{/if}}Solid Home</a>
1616
</div>
1717
<div class="nav navbar-right navbar-form">
18-
<button id="session-action" type="button" class="session-action btn btn-default">Loading...</button>
18+
<button id="login" type="button" class="hidden btn btn-default btn-success">Log in</button>
19+
<button id="logout" type="button" class="hidden btn btn-danger">Log out</button>
1920
</div>
2021
</div>
2122
</nav>
@@ -69,41 +70,6 @@ <h1>Account settings</h1>
6970
</div>
7071

7172
<script src="/common/js/solid-auth-client.bundle.js"></script>
72-
<script type="text/javascript">
73-
(function () {
74-
'use strict';
75-
var button = document.getElementById('session-action');
76-
var loggedIn = false;
77-
var accountSettings = document.getElementById('account-settings');
78-
79-
solid.auth.trackSession(function(session) {
80-
loggedIn = !!session;
81-
button.innerText = loggedIn ? 'Log out' : 'Log in';
82-
button.classList.remove('btn-default');
83-
button.classList.remove('btn-danger');
84-
button.classList.remove('btn-primary');
85-
button.classList.add(loggedIn ? 'btn-danger' : 'btn-primary');
86-
if (loggedIn) {
87-
var sessionOrigin = getOriginFromWebId(session.webId);
88-
var isOwner = sessionOrigin === location.origin;
89-
accountSettings.classList.toggle('hidden', !isOwner);
90-
} else {
91-
accountSettings.classList.toggle('hidden', true);
92-
}
93-
});
94-
95-
button.addEventListener('click', function () {
96-
loggedIn ? solid.auth.logout() : solid.auth.popupLogin();
97-
});
98-
99-
function getOriginFromWebId(webId) {
100-
if (window.URL.prototype) {
101-
return new URL(webId).origin;
102-
}
103-
var uriParts = webId.split('/');
104-
return uriParts[0] + '//' + uriParts[2];
105-
}
106-
})();
107-
</script>
73+
<script src="/common/js/auth-buttons.js"></script>
10874
</body>
10975
</html>

‎default-templates/server/index.html‎

Lines changed: 4 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
<div class="container">
1212
<div class="page-header">
1313
<div class="pull-right">
14-
<a href="/register" class="btn btn-primary">Register</a>
15-
16-
<button id="session-action" type="button" class="session-action btn btn-default">Loading...</button>
14+
<button id="register" type="button" class="btn btn-primary">Register</button>
15+
<button id="login" type="button" class="hidden btn btn-default btn-success">Log in</button>
16+
<button id="logout" type="button" class="hidden btn btn-danger">Log out</button>
1717
</div>
1818

1919
<h1>Welcome to the Solid Prototype</h1>
@@ -50,36 +50,6 @@ <h2>Server info</h2>
5050
</section>
5151
</div>
5252
<script src="/common/js/solid-auth-client.bundle.js"></script>
53-
<script>
54-
(function () {
55-
const elements = {};
56-
['loggedIn', 'profileLink'].forEach(id => {
57-
elements[id] = document.getElementById(id)
58-
})
59-
var button = document.getElementById('session-action')
60-
var loggedIn = false
61-
62-
solid.auth.trackSession(async session => {
63-
loggedIn = !!session;
64-
button.innerText = loggedIn ? 'Log out' : 'Log in';
65-
button.classList.remove('btn-default');
66-
button.classList.remove('btn-danger');
67-
button.classList.remove('btn-success');
68-
button.classList.add(loggedIn ? 'btn-danger' : 'btn-success');
69-
if (!session) {
70-
elements.loggedIn.classList.add('hidden')
71-
}
72-
else {
73-
elements.loggedIn.classList.remove('hidden')
74-
elements.profileLink.innerText = session.webId
75-
elements.profileLink.href = session.webId
76-
}
77-
})
78-
79-
button.addEventListener('click', function () {
80-
loggedIn ? solid.auth.logout() : solid.auth.popupLogin()
81-
})
82-
})();
83-
</script>
53+
<script src="/common/js/auth-buttons.js"></script>
8454
</body>
8555
</html>

‎default-views/auth/login-required.hbs‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<div class="container">
1212
<div class="page-header">
1313
<div class="pull-right">
14-
<button class="btn btn-primary" onclick="register()">Register</button>
15-
<button class="btn btn-success" onclick="login()">Log in</button>
14+
<button id="register" type="button" class="btn btn-primary">Register</button>
15+
<button id="login" type="button" class="btn btn-success">Log in</button>
1616
</div>
1717
<h1>Log in to access this resource</h1>
1818
</div>
@@ -28,26 +28,6 @@
2828
</div>
2929
</div>
3030
<script src="/common/js/solid-auth-client.bundle.js"></script>
31-
<script>
32-
async function login () {
33-
const session = await solid.auth.popupLogin()
34-
if (session) {
35-
// Make authenticated request to the server to establish a session cookie
36-
const {status} = await solid.auth.fetch(location, { method: 'HEAD' })
37-
if (status === 401) {
38-
alert(`Invalid login.\n\nDid you set ${session.idp} as your OIDC provider in your profile ${session.webId}?`)
39-
await solid.auth.logout()
40-
}
41-
// Now that we have a cookie, reload to display the authenticated page
42-
location.reload()
43-
}
44-
}
45-
46-
function register () {
47-
const registration = new URL('/register', location)
48-
registration.searchParams.set('returnToUrl', location)
49-
location.href = registration
50-
}
51-
</script>
31+
<script src="/common/js/auth-buttons.js"></script>
5232
</body>
5333
</html>

‎default-views/auth/no-permission.hbs‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,12 @@
1818
but do not have permission to access <code>{{currentUrl}}</code>.
1919
</p>
2020
<p>
21-
<button class="btn btn-danger" onclick="logout()">Log out</button>
21+
<button id="logout" type="button" class="btn btn-danger">Log out</button>
2222
</p>
2323
</div>
2424
</div>
2525
</div>
2626
<script src="/common/js/solid-auth-client.bundle.js"></script>
27-
<script>
28-
async function logout () {
29-
await solid.auth.logout()
30-
location.reload()
31-
}
32-
</script>
27+
<script src="/common/js/auth-buttons.js"></script>
3328
</body>
3429
</html>

0 commit comments

Comments
 (0)