Skip to content

Commit 33b43dd

Browse files
timea-solidbourgeoaTallTed
authored
New index.html design & added docu links (#1636)
* new index.html page design and added docu links * small css change * Update common/js/index-buttons.js Co-authored-by: Alain Bourgeois <[email protected]> * removed some text and improved code * Update common/js/index-buttons.js Co-authored-by: Ted Thibodeau Jr <[email protected]> * small css chnages to dd and dt elements Co-authored-by: Alain Bourgeois <[email protected]> Co-authored-by: Ted Thibodeau Jr <[email protected]>
1 parent 0d4264b commit 33b43dd

File tree

4 files changed

+186
-103
lines changed

4 files changed

+186
-103
lines changed

‎common/css/solid.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,90 @@
1+
.index-page {
2+
background-color: #f8f8f8;
3+
font-size: 1em;
4+
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
5+
}
6+
7+
.index-page dt {
8+
font-weight: bold;
9+
}
10+
11+
.index-page dd {
12+
margin: 0;
13+
}
14+
15+
.header {
16+
box-shadow: 0px 1px 4px rgba(0,0.0,0.2) !important;
17+
-webkit-box-shadow: 0px 1px 4px rgba(0,0.0,0.2) !important;
18+
text-align: center !important;
19+
color: #7C4DFF;
20+
padding: 10px;
21+
display: inline-flex;
22+
width: 99%;
23+
}
24+
25+
.header-left {
26+
text-align: left;
27+
margin-top: 0.67em;
28+
width: 19%;
29+
}
30+
31+
.header-center {
32+
margin: auto;
33+
}
34+
35+
@media screen and (max-width: 1000px) {
36+
.header-right {
37+
display: block !important;
38+
}
39+
}
40+
41+
.header-right {
42+
display: inline-flex;
43+
margin-top: 0.67em;
44+
min-width: 19%;
45+
}
46+
47+
.logo-img {
48+
width: 50px;
49+
}
50+
51+
.title {
52+
color: #7C4DFF;
53+
font-size: 2em;
54+
line-height: 1em;
55+
}
56+
57+
.container {
58+
position: relative;
59+
display: flex;
60+
flex-direction: column;
61+
flex-wrap: row wrap;
62+
margin: auto;
63+
width: 50%;
64+
line-height: 1.6;
65+
}
66+
67+
.content {
68+
display: block;
69+
}
70+
71+
.webId {
72+
text-align: center;
73+
-webkit-box-shadow: 0px 1px 4px #7C4DFF !important;
74+
}
75+
76+
.logo {
77+
color: #f8f8f8;
78+
}
79+
80+
.register-button {
81+
padding: 1em;
82+
border-radius:0.5em;
83+
font-size: 100%;
84+
background-color: #efe;
85+
margin-right: 1em;
86+
}
87+
188
.panel-login-tls,
289
.panel-already-registered{
390
text-align: center;

‎common/img/solid-emblem.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎common/js/index-buttons.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
'use strict'
2+
var keyname = 'SolidServerRootRedirectLink';
3+
function register() {
4+
alert(2); window.location.href = "/register";
5+
}
6+
document.addEventListener('DOMContentLoaded', async function() {
7+
if (!UI.authn.currentUser()) await UI.authn.checkUser();
8+
let user = UI.authn.currentUser();
9+
10+
// IF LOGGED IN: SET SolidServerRootRedirectLink. LOGOUT
11+
if( user ) {
12+
window.localStorage.setItem(keyname, user.uri);
13+
await UI.authn.authSession.logout();
14+
}
15+
else {
16+
let webId = window.localStorage.getItem(keyname);
17+
18+
// IF NOT LOGGED IN AND COOKIE EXISTS: REMOVE COOKIE, HIDE WELCOME, SHOW LINK TO PROFILE
19+
if( webId ) {
20+
window.localStorage.removeItem(keyname);
21+
document.getElementById('loggedIn').style.display = "block";
22+
document.getElementById('loggedIn').innerHTML = `<p>Your WebID is : <a href="${webId}">${webId}</a>.</p> <p>Visit your profile to log into your Pod.</p>`;
23+
}
24+
25+
// IF NOT LOGGED IN AND COOKIE DOES NOT EXIST
26+
// SHOW WELCOME, SHOW LOGIN BUTTON
27+
// HIDE LOGIN BUTTON, ADD REGISTER BUTTON
28+
else {
29+
let loginArea = document.getElementById('loginStatusArea');
30+
let html = `<input type="button" onclick="window.location.href='/register'" value="Register to get a Pod" class="register-button">`
31+
let span = document.createElement("span")
32+
span.innerHTML = html
33+
loginArea.appendChild(span);
34+
loginArea.appendChild(UI.authn.loginStatusBox(document, null, {}))
35+
const logInButton = loginArea.querySelectorAll('input')[1];
36+
logInButton.value = "Log in to see your WebID";
37+
const signUpButton = loginArea.querySelectorAll('input')[2];
38+
signUpButton.style.display = "none";
39+
}
40+
}
41+
})

‎default-templates/server/index.html‎

Lines changed: 49 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,54 @@
1-
<!doctype html><html><head>
1+
<!doctype html>
2+
<html>
3+
<head>
24
<meta charset="utf-8"/>
3-
<link rel="stylesheet" href="/common/css/bootstrap.min.css">
45
<link rel="stylesheet" href="/common/css/solid.css">
5-
<script>
6-
var keyname = 'SolidServerRootRedirectLink';
7-
function register(){ alert(2); window.location.href="/register"; }
8-
document.addEventListener('DOMContentLoaded', async function() {
9-
if (!UI.authn.currentUser()) await UI.authn.checkUser();
10-
let user = UI.authn.currentUser();
11-
12-
// IF LOGGED IN: SET COOKIE. LOGOUT
13-
//
14-
if( user ) {
15-
window.localStorage.setItem(keyname,user.uri);
16-
await UI.authn.authSession.logout();
17-
}
18-
else {
19-
let webId = window.localStorage.getItem(keyname);
20-
21-
// IF NOT LOGGED IN AND COOKIE EXISTS: REMOVE COOKIE, HIDE WELCOME, SHOW LINK TO PROFILE
22-
//
23-
if( webId ) {
24-
window.localStorage.removeItem(keyname);
25-
document.getElementById('prototype').style.display = "none";
26-
document.getElementById('loggedIn').style.display = "block";
27-
document.getElementById('loggedIn').innerHTML = `<p>Your WebID and profile address are</p> <p> &lt;${webId}&gt.</p><a href="${webId}">Visit your profile to log in.</a></div>`;
28-
}
29-
30-
// IF NOT LOGGED IN AND COOKIE DOES NOT EXIST
31-
// SHOW WELCOME, SHOW LOGIN BUTTON
32-
// HIDE LOGIN BUTTON, ADD REGISTER BUTTON
33-
//
34-
else {
35-
let loginArea = document.getElementById('loginStatusArea');
36-
document.getElementById('prototype').style.display = "block";
37-
let html = `<input type="button" onclick="window.location.href='/register'" value="register" style="padding: 1em; border-radius:0.5em; font-size: 100%;background-color: #efe;">`
38-
let span = document.createElement("SPAN")
39-
span.innerHTML=html
40-
loginArea.appendChild(span);
41-
loginArea.appendChild(UI.authn.loginStatusBox(document, null, {}))
42-
const signUpButton = loginArea.querySelectorAll('input')[2];
43-
signUpButton.style.display="none";
44-
}
45-
}
46-
})
47-
</script>
48-
<link href="/mash.css" rel="stylesheet">
49-
</head><body class="db-layout">
50-
51-
<h3 style="padding:2em; border:8px solid #7C4DFF; display:none" id="loggedIn" class="container"></h3>
52-
53-
<div id="prototype" class="container">
54-
55-
<div class="page-header" style="display: inline-flex;">
56-
<h1>Welcome to the Solid Prototype</h1>
57-
<div id="loginStatusArea" class="pull-right" style="display: inline-flex;float: right;margin: 10px;"></div>
58-
59-
</div>
60-
61-
<p class="lead">
62-
This is a prototype implementation of a Solid server.
63-
64-
It is a fully functional server, but there are no security or stability guarantees.
65-
66-
If you have not already done so, please create an account.
67-
</p>
68-
69-
<section>
70-
{{#if serverLogo}}
71-
<img src="{{serverLogo}}" />
72-
{{/if}}
73-
<h2>Server info</h2>
74-
<dl>
75-
<dt>Name</dt>
76-
<dd>{{serverName}}</dd>
77-
{{#if serverDescription}}
78-
<dt>Description</dt>
79-
<dd>{{serverDescription}}</dd>
6+
</head>
7+
<body class="index-page">
8+
<div class="header">
9+
<div class="header-left">
10+
{{#if serverLogo}}
11+
<img class="logo-img" src="{{serverLogo}}" />
8012
{{/if}}
81-
<dt>Details</dt>
82-
<dd>Running on <a href="https://github.com/solid/node-solid-server/releases/tag/v{{serverVersion}}">Solid {{serverVersion}}</a></dd>
83-
</dl>
84-
</section>
85-
</div>
86-
<header class="db-layout__header header" id="PageHeader"></header>
87-
<div class="TabulatorOutline db-layout__content" id="DummyUUID" role="main">
88-
<table id="outline"></table>
89-
<div id="GlobalDashboard"></div>
90-
</div><footer class="db-layout__footer" id="PageFooter"></footer>
91-
<style>
92-
#prototype {
93-
margin : 2em;
94-
padding : 1em;
95-
}
96-
#prototype input {
97-
margin : 1em;
98-
padding : 0.5em !important;
99-
}
100-
#loginStatusArea {
101-
float:right;
102-
clear:right;
103-
margin-top:-5em;
104-
}
105-
</style>
13+
</div>
14+
<div class="header-center">
15+
<h1 class="title">Welcome to Solid prototype</h1>
16+
</div>
17+
<div class="header-right" id="loginStatusArea"></div>
18+
</div>
19+
20+
<div class="container" id="prototype">
21+
22+
<h3 style="display:none" id="loggedIn" class="webId"></h3>
23+
24+
<div class="content">
25+
26+
<p class="lead">
27+
This is a prototype implementation of a Solid server.
28+
It is a fully functional server, but there are no security or stability guarantees.
29+
If you have not already done so, please register.
30+
</p>
31+
32+
<section>
33+
<h2>Server info</h2>
34+
<dl>
35+
<dt>Name</dt>
36+
<dd>{{serverName}}</dd>
37+
{{#if serverDescription}}
38+
<dt>Description</dt>
39+
<dd>{{serverDescription}}</dd>
40+
{{/if}}
41+
<dt>Details</dt>
42+
<dd>Running on <a href="https://github.com/solid/node-solid-server/releases/tag/v{{serverVersion}}">Node Solid Server {{serverVersion}}</a></dd>
43+
</dl>
44+
</section>
45+
46+
</div> <!-- end content-->
47+
48+
</div> <!-- end container-->
10649

10750
<script src="/mashlib.js"></script>
108-
</body></html>
51+
<script src="/common/js/index-buttons.js"></script>
52+
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)