Skip to content

Commit 41a7c96

Browse files
kjetilkkjetilk
authored
Merge pull request #842 from fullfrontend/master
Nicer UI and corrections on markup
2 parents b53cb85 + a7f118d commit 41a7c96

20 files changed

+329
-342
lines changed

‎common/css/server.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.panel-login-tls,
2+
.panel-already-registered{
3+
text-align: center;
4+
}

‎data/.gitkeep‎

Whitespace-only changes.

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

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>{{#if name}}{{name}} &ndash; {{/if}}Solid Home</title>
77
<link rel="stylesheet" href="/common/css/bootstrap.min.css">
8-
<style>
9-
.session-action {
10-
margin-right: 15px;
11-
}
12-
</style>
8+
<link rel="stylesheet" href="/common/css/server.css">
139
</head>
1410
<body>
1511
<div class="container">
@@ -18,65 +14,66 @@
1814
<div class="navbar-header">
1915
<a href="/" class="navbar-brand">{{#if name}}{{name}} &ndash; {{/if}}Solid Home</a>
2016
</div>
21-
<div class="navbar-right">
17+
<div class="nav navbar-right navbar-form">
2218
<button id="session-action" type="button" class="session-action btn btn-default navbar-btn">Loading...</button>
2319
</div>
2420
</div>
2521
</nav>
26-
</div>
27-
<div class="container">
28-
<div class="row">
29-
<div class="col-md-12">
30-
<p class="lead">
31-
<span>
32-
This is a public homepage of {{#if name}}{{name}}, whose WebID is{{else}}a user with WebID{{/if}}
33-
</span>
34-
<a href="{{webId}}"><mark>{{webId}}</mark></a>.
35-
</p>
36-
</div>
37-
</div>
38-
<section class="row">
39-
<div class="col-md-12">
40-
<h1>Data</h1>
41-
<div class="list-group">
42-
<a href="/profile/card" target="_blank" class="list-group-item">
43-
<span class="lead">Profile</span>
44-
<span class="badge">public</span>
45-
</a>
46-
<a href="/inbox/" target="_blank" class="list-group-item">
47-
<span class="lead">Inbox</span>
48-
<span class="badge">private</span>
49-
</a>
50-
<a href="/public/" target="_blank" class="list-group-item">
51-
<span class="lead">Public Folder</span>
52-
<span class="badge">public</span>
53-
</a>
54-
</div>
22+
23+
24+
<p class="lead">
25+
<span>
26+
This is a public homepage of {{#if name}}{{name}}, whose WebID is{{else}}a user with WebID{{/if}}
27+
</span>
28+
<a href="{{webId}}"><mark>{{webId}}</mark></a>.
29+
</p>
30+
31+
<section>
32+
<h1>Data</h1>
33+
<div class="list-group">
34+
<a href="/profile/card" target="_blank" class="list-group-item">
35+
<span class="lead">Profile</span>
36+
<span class="badge">public</span>
37+
</a>
38+
<a href="/inbox/" target="_blank" class="list-group-item">
39+
<span class="lead">Inbox</span>
40+
<span class="badge">private</span>
41+
</a>
42+
<a href="/public/" target="_blank" class="list-group-item">
43+
<span class="lead">Public Folder</span>
44+
<span class="badge">public</span>
45+
</a>
5546
</div>
5647
</section>
57-
<section class="row">
58-
<div class="col-md-12">
59-
<h1>Apps</h1>
60-
<div class="list-group">
61-
<a href="https://github.com/solid/userguide" target="_blank" class="list-group-item">
62-
<span class="lead">Getting started with Solid and Data Browser</span>
63-
</a>
64-
</div>
48+
49+
<section>
50+
<h1>Apps</h1>
51+
<div class="list-group">
52+
<a href="https://github.com/solid/userguide" target="_blank" class="list-group-item">
53+
<span class="lead">Getting started with Solid and Data Browser</span>
54+
</a>
6555
</div>
6656
</section>
6757
</div>
58+
6859
<script src="/common/js/solid-auth-client.bundle.js"></script>
6960
<script type="text/javascript">
70-
const button = document.getElementById('session-action')
71-
let loggedIn = false
61+
(function () {
62+
'use strict'
63+
var button = document.getElementById('session-action')
64+
var loggedIn = false
7265

73-
solid.auth.trackSession(session => {
74-
loggedIn = !!session
75-
button.innerText = loggedIn ? 'Log out' : 'Log in'
76-
})
66+
solid.auth.trackSession(session => {
67+
loggedIn = !!session
68+
button.innerText = loggedIn ? 'Log out' : 'Log in'
69+
button.classList.remove('btn-default');
70+
button.classList.add(loggedIn ? 'btn-danger' : 'btn-primary')
71+
})
7772

78-
button.addEventListener('click', () =>
79-
loggedIn ? solid.auth.logout() : solid.auth.popupLogin())
73+
button.addEventListener('click', function () {
74+
loggedIn ? solid.auth.logout() : solid.auth.popupLogin()
75+
})
76+
})()
8077
</script>
8178
</body>
8279
</html>

‎default-templates/server/index.html‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,31 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Welcome to Solid</title>
77
<link rel="stylesheet" href="/common/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="/common/css/server.css">
89
</head>
910
<body>
1011
<div class="container">
11-
<h3>Welcome to the Solid Prototype</h3>
12-
</div>
13-
<div class="container">
14-
<div class="row">
15-
<div class="col-md-12">
16-
<p style="margin-top: 3em; margin-bottom: 3em;">
17-
This is a prototype implementation of a Solid server.
18-
19-
It is a fully functional server, but there are no security or stability guarantees.
12+
<div class="page-header">
13+
<div class="pull-right">
14+
<a href="/register" class="btn btn-primary">
15+
Register
16+
</a>
2017

21-
If you have not already done so, please create an account.
22-
</p>
23-
</div>
24-
</div>
25-
<div class="row">
26-
<div class="col-md-2">
27-
<form method="get" action="/register">
28-
<button type="submit" class="btn btn-primary" id="register">Register</button>
29-
</form>
30-
</div>
31-
<div class="col-md-10">
32-
<form method="get" action="/login">
33-
<button type="submit" class="btn btn-primary" id="login">Login</button>
34-
</form>
18+
<a href="/login" class="btn btn-success">
19+
Login
20+
</a>
3521
</div>
22+
23+
<h1>Welcome to the Solid Prototype</h1>
3624
</div>
25+
26+
<p class="lead">
27+
This is a prototype implementation of a Solid server.
28+
29+
It is a fully functional server, but there are no security or stability guarantees.
30+
31+
If you have not already done so, please create an account.
32+
</p>
3733
</div>
3834
</body>
3935
</html>

‎default-views/account/register-disabled.hbs‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<p>
2-
Registering a new account is disabled for the WebID-TLS authentication method.
3-
Please restart the server using another mode.
4-
</p>
1+
<div class="alert alert-danger">
2+
<p>
3+
Registering a new account is disabled for the WebID-TLS authentication method.
4+
Please restart the server using another mode.
5+
</p>
6+
</div>

‎default-views/account/register-form.hbs‎

Lines changed: 70 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,78 @@
1-
<form method="post" action="/api/accounts/new">
2-
<div class="form-group">
3-
{{#if error}}
4-
<div class="row">
5-
<div class="col-md-12">
6-
<p class="text-danger"><strong>{{error}}</strong></p>
7-
</div>
8-
</div>
9-
{{/if}}
10-
<div class="row">
11-
<div class="col-md-6">
12-
<label for="username">Username:</label>
13-
<input type="text" class="form-control" name="username" id="username" placeholder="alice" required/>
14-
</div>
15-
<div class="col-md-6">&nbsp;</div>
16-
</div>
17-
<div class="row">
18-
<div class="col-md-6">
19-
<label for="password">Password:</label>
20-
<input type="password" class="form-control" name="password" id="password" required />
21-
<input type="checkbox" onclick="showPasswd()">Show Password</input>
22-
</div>
23-
<div class="col-md-6">&nbsp;</div>
24-
</div>
25-
<div class="row">
26-
<div class="col-md-6">
27-
<label for="name">Name:</label>
28-
<input type="text" class="form-control" name="name" id="name" required />
29-
</div>
30-
<div class="col-md-6">&nbsp;</div>
31-
</div>
32-
<div class="row">
33-
<div class="col-md-6">
34-
<label for="email">Email:</label>
35-
<p>Your email will only used for account recovery</p>
36-
<input type="email" class="form-control" name="email" id="email" />
37-
</div>
38-
<div class="col-md-6">&nbsp;</div>
39-
</div>
40-
<div class="row">
41-
<div class="col-md-6">
42-
<label for="externalWebId">(Optional) External WebID:</label>
43-
<p>We will generate a Web ID when you register, but if you
44-
already have a Web ID hosted elsewhere that you'd prefer to
45-
use to log in, enter it here</p>
46-
<input type="text" class="form-control" name="externalWebId" id="externalWebId" />
47-
</div>
48-
<div class="col-md-6">&nbsp;</div>
49-
</div>
50-
<input type="hidden" name="returnToUrl" value="{{returnToUrl}}" />
51-
</div>
1+
<div class="row">
2+
<div class="col-md-6">
3+
<div class="panel panel-default">
4+
<div class="panel-body">
5+
<form method="post" action="/api/accounts/new">
6+
{{> shared/error}}
527

53-
<div class="form-group">
54-
<div class="row">
55-
<div class="col-md-2">
56-
<button type="submit" class="btn btn-primary" id="register">Register</button>
8+
<div class="form-group">
9+
<label class="control-label" for="username">Username*</label>
10+
<input type="text" class="form-control" name="username" id="username" placeholder="alice"
11+
required/>
12+
</div>
5713

58-
{{> auth/auth-hidden-fields}}
14+
<div class="form-group">
15+
<label class="control-label" for="password">Password*</label>
16+
<input type="password" class="form-control" name="password" id="password" required/>
17+
<div class="checkbox">
18+
<label>
19+
<input type="checkbox" id="showPassword"/> Show Password
20+
</label>
21+
</div>
22+
</div>
23+
24+
<div class="form-group">
25+
<label class="control-label" for="name">Name*</label>
26+
<input type="text" class="form-control" name="name" id="name" required/>
27+
</div>
28+
29+
<div class="form-group">
30+
<label class="control-label" for="email">Email*</label>
31+
<input type="email" class="form-control" name="email" id="email"/>
32+
<span class="help-block">Your email will only used for account recovery</span>
33+
</div>
34+
35+
<div class="form-group">
36+
<label class="control-label" for="externalWebId">External WebID:</label>
37+
<input type="text" class="form-control" name="externalWebId" id="externalWebId"/>
38+
<span class="help-block">
39+
We will generate a Web ID when you register, but if you already have a Web ID hosted elsewhere that you'd prefer to use to log in, enter it here
40+
</span>
41+
</div>
42+
43+
44+
<button type="submit" class="btn btn-primary" id="register">Register</button>
45+
46+
<input type="hidden" name="returnToUrl" value="{{returnToUrl}}"/>
47+
{{> auth/auth-hidden-fields}}
48+
49+
</form>
5950
</div>
51+
</div>
52+
</div>
6053

61-
<div class="col-md-10">
62-
<div>Already have an account?
63-
<a class="btn btn-xs btn-default"
64-
href="{{{loginUrl}}}">
65-
Log In
54+
<div class="col-md-6">
55+
<div class="panel panel-default panel-already-registered">
56+
<div class="panel-body">
57+
<h2>Already have an account?</h2>
58+
<p>
59+
<a class="btn btn-lg btn-success" href="{{{loginUrl}}}">
60+
Please Log In
6661
</a>
67-
</div>
62+
</p>
6863
</div>
6964
</div>
7065
</div>
71-
</form>
66+
</div>
67+
68+
69+
<script>
70+
(function () {
71+
'use strict'
72+
var showPasswordToggle = document.getElementById('showPassword')
73+
var password = document.getElementById('password')
74+
showPasswordToggle.addEventListener('change', function () {
75+
password.type = password.type === 'password' ? 'text' : 'password'
76+
})
77+
})()
78+
</script>

‎default-views/account/register.hbs‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,16 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Register</title>
77
<link rel="stylesheet" href="/common/css/bootstrap.min.css">
8-
<script>
9-
function showPasswd() {
10-
var x = document.getElementById("password");
11-
if (x.type === "password") {
12-
x.type = "text";
13-
} else {
14-
x.type = "password";
15-
}
16-
}
17-
</script>
8+
<link rel="stylesheet" href="/common/css/server.css">
9+
1810
</head>
1911
<body>
2012
<div class="container">
21-
<h4>Register</h4>
22-
</div>
23-
<div class="container">
13+
14+
<div class="page-header">
15+
<h1>Register</h1>
16+
</div>
17+
2418
{{#if registerDisabled}}
2519
{{> account/register-disabled}}
2620
{{else}}

0 commit comments

Comments
 (0)