Skip to content

Commit 6897784

Browse files
RubenVerborghjoachimvh
RubenVerborgh
authored and
joachimvh
committedJul 16, 2021
refactor: Match IDP templates to main template.
·
v7.1.6v1.0.0-beta.1
1 parent ad7f4ed commit 6897784

File tree

4 files changed

+251
-151
lines changed

4 files changed

+251
-151
lines changed
 

‎templates/idp/email-password-interaction/login.ejs

+43-48
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,49 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Sign-in</title>
6-
<link rel="stylesheet" href="/idp/style.css">
7-
</head>
8-
<body>
9-
<div class="main-content">
10-
<section class="main-content-section">
11-
<div class="wrapper">
12-
<h1 class="title--white">Sign In</h1>
13-
<div class="login-panel">
14-
<div class="panel-body">
15-
<form autocomplete="off" action="/idp/login" method="post">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
6+
<title>Log in</title>
7+
<link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
8+
</head>
9+
<body>
10+
<header>
11+
<img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
12+
<h1>Community Solid Server</h1>
13+
</header>
14+
<main>
15+
<h1>Log in</h1>
16+
<form action="/idp/login" method="post">
17+
<%if (errorMessage) { %>
18+
<p class="error"><%= errorMessage %></p>
19+
<% } %>
1620

17-
<%if (errorMessage) { %>
18-
<div class="input-wrap">
19-
<label style="color: #D0021B">
20-
<%= errorMessage %>
21-
</label>
22-
</div>
23-
<% } %>
21+
<fieldset>
22+
<ol>
23+
<li>
24+
<label for="email">Email</label>
25+
<input id="email" type="email" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %>>
26+
</li>
27+
<li>
28+
<label for="password">Password</label>
29+
<input id="password" type="password" name="password">
30+
</li>
31+
<li class="checkbox">
32+
<label><input type="checkbox" name="remember" value="yes" checked>Stay signed in</label>
33+
</li>
34+
</ol>
35+
</fieldset>
2436

25-
<div class="input-wrap">
26-
<label for="email">Email:</label>
27-
<input id="email" type="email" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %>>
28-
</div>
37+
<p class="actions"><button type="submit" name="submit">Log in</button></p>
2938

30-
<div class="input-wrap">
31-
<label for="password">Password:</label>
32-
<input id="password" type="password" name="password">
33-
</div>
34-
35-
<div class="input-wrap">
36-
<label class="checkbox"><input type="checkbox" name="remember" value="yes" checked>Stay signed in</label>
37-
</div>
38-
39-
<button type="submit" name="submit" class="ids-link-filled">Sign In</button>
40-
41-
<hr />
42-
<div class="space-between">
43-
44-
<a href="/idp/register" class="link">Register</a>
45-
<a href="/idp/forgotpassword" class="link">Forgot Password</a>
46-
</div>
47-
</form>
48-
</div>
49-
</div>
50-
</div>
51-
</section>
52-
</div>
53-
</body>
39+
<ul class="actions">
40+
<li><a href="/idp/register" class="link">Sign up</a></li>
41+
<li><a href="/idp/forgotpassword" class="link">Forgot password</a></li>
42+
</ul>
43+
</form>
44+
</main>
45+
<footer>
46+
<p>©2019–2021 Inrupt Inc. and imec</p>
47+
</footer>
48+
</body>
5449
</html>

‎templates/idp/email-password-interaction/register.ejs

+65-63
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,72 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Register</title>
6-
<link rel="stylesheet" href="/idp/style.css">
7-
</head>
8-
<body>
9-
<div class="main-content">
10-
<section class="main-content-section">
11-
<div class="wrapper">
12-
<h1 class="title--white">Register</h1>
13-
<div class="login-panel">
14-
<div class="panel-body">
15-
<form autocomplete="off" action="/idp/register" method="post">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
6+
<title>Register</title>
7+
<link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
8+
</head>
9+
<body>
10+
<header>
11+
<img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
12+
<h1>Community Solid Server</h1>
13+
</header>
14+
<main>
15+
<h1>Sign up for an account</h1>
16+
<form action="/idp/register" method="post">
1617

17-
<%if (errorMessage) { %>
18-
<div class="input-wrap">
19-
<label style="color: #D0021B">
20-
<%= errorMessage %>
21-
</label>
22-
</div>
23-
<% } %>
18+
<%if (errorMessage) { %>
19+
<p class="error">Error: <%= errorMessage %></p>
20+
<% } %>
2421

25-
<div class="input-wrap">
26-
<label for="email">Email:</label>
27-
<input id="email" type="text" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %> />
28-
</div>
22+
<fieldset>
23+
<ol>
24+
<li>
25+
<label for="email">Email</label>
26+
<input id="email" type="text" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %> />
27+
</li>
28+
<li>
29+
<label for="password">Password</label>
30+
<input id="password" type="password" name="password" />
31+
</li>
32+
<li>
33+
<label for="confirmPassword">Confirm password</label>
34+
<input id="confirmPassword" type="password" name="confirmPassword" />
35+
</li>
36+
</ol>
37+
</fieldset>
2938

30-
<div class="input-wrap">
31-
<label for="password">Password (when registering with the IDP):</label>
32-
<input id="password" type="password" name="password" />
33-
</div>
39+
<fieldset>
40+
<ol>
41+
<li class="checkbox">
42+
<label><input type="checkbox" name="createWebId" checked>Create a new WebID <em>(requires the other two options)</em></label>
43+
</li>
44+
<li class="checkbox">
45+
<label><input type="checkbox" name="register" checked>Register your WebID with the IDP</label>
46+
<ol>
47+
<li>
48+
<label for="webId">Alternatively, existing WebID</label>
49+
<input id="webId" type="text" name="webId" <% if (prefilled.webId) { %> value="<%= prefilled.webId %>" <% } %> />
50+
</li>
51+
</ol>
52+
</li>
53+
<li class="checkbox">
54+
<label><input type="checkbox" name="createPod" checked>Create a new pod</label>
55+
<ol>
56+
<li>
57+
<label for="podName">Pod name</label>
58+
<input id="podName" type="text" name="podName" <% if (prefilled.podName) { %> value="<%= prefilled.podName %>" <% } %> />
59+
</li>
60+
</ol>
61+
</li>
62+
</ol>
63+
</fieldset>
3464

35-
<div class="input-wrap">
36-
<label for="confirmPassword">Confirm Password:</label>
37-
<input id="confirmPassword" type="password" name="confirmPassword" />
38-
</div>
39-
40-
<div class="input-wrap">
41-
<label for="podName">Pod name (when creating a pod):</label>
42-
<input id="podName" type="text" name="podName" <% if (prefilled.podName) { %> value="<%= prefilled.podName %>" <% } %> />
43-
</div>
44-
45-
<div class="input-wrap">
46-
<label for="webId">WebID (when not creating a WebID):</label>
47-
<input id="webId" type="text" name="webId" <% if (prefilled.webId) { %> value="<%= prefilled.webId %>" <% } %> />
48-
</div>
49-
50-
<div class="input-wrap">
51-
<label class="checkbox"><input type="checkbox" name="createWebId" checked>Create new WebID (also requires the other two options)</label>
52-
</div>
53-
54-
<div class="input-wrap">
55-
<label class="checkbox"><input type="checkbox" name="register" checked>Register your WebID with the IDP</label>
56-
</div>
57-
58-
<div class="input-wrap">
59-
<label class="checkbox"><input type="checkbox" name="createPod" checked>Create a new pod</label>
60-
</div>
61-
62-
<button type="submit" name="submit" class="ids-link-filled">Submit</button>
63-
</form>
64-
</div>
65-
</div>
66-
</div>
67-
</section>
68-
</div>
69-
</body>
65+
<p class="actions"><button type="submit" name="submit">Sign up</button></p>
66+
</form>
67+
</main>
68+
<footer>
69+
<p>©2019–2021 Inrupt Inc. and imec</p>
70+
</footer>
71+
</body>
7072
</html>

‎templates/idp/email-password-interaction/registerResponse.ejs

+38-36
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,45 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<title>Registration Succesful</title>
6-
<link rel="stylesheet" href="/idp/style.css">
4+
<meta charset="utf-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
6+
<title>You are signed up</title>
7+
<link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
78
</head>
89
<body>
9-
<div class="main-content">
10-
<section class="main-content-section">
11-
<div class="wrapper">
12-
<h1 class="title--white">Registration Successful</h1>
13-
<div class="login-panel">
14-
<div class="panel-body">
15-
<% if (createWebId) { %>
16-
<p class="content__message">
17-
Your new WebID is <a href="<%= webId %>" class="link"><%= webId %></a>
18-
</p>
19-
<% } %>
20-
<% if (register) { %>
21-
<p class="content__message">
22-
You can now identify as <a href="<%= webId %>" class="link"><%= webId %></a> with our IDP using <%= email %>
23-
</p>
24-
<% if (!createWebId) { %>
25-
<p class="content__message">
26-
Make sure you add the triple
27-
<%= `<${webId}> <http://www.w3.org/ns/solid/terms#oidcIssuer> <${oidcIssuer}>.`%>
28-
to your WebID profile.
29-
</p>
30-
<% } %>
31-
<% } %>
32-
<% if (createPod) { %>
33-
<p class="content__message">
34-
Your new pod has been created and can be found at <a href="<%= podBaseUrl %>" class="link"><%= podBaseUrl %></a>
35-
</p>
36-
<% } %>
37-
</div>
38-
</div>
39-
</div>
40-
</section>
41-
</div>
10+
<header>
11+
<img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
12+
<h1>Community Solid Server</h1>
13+
</header>
14+
<main>
15+
<h1>You are signed up</h1>
16+
<% if (createWebId) { %>
17+
<p>
18+
Your new WebID is <a href="<%= webId %>" class="link"><%= webId %></a>.
19+
</p>
20+
<% } %>
21+
<% if (register) { %>
22+
<p>
23+
You can now identify as <a href="<%= webId %>" class="link"><%= webId %></a>
24+
on this server using <em><%= email %></em>.
25+
</p>
26+
<% if (!createWebId) { %>
27+
<p>
28+
Make sure you add the triple
29+
<code><%= `<${webId}> <http://www.w3.org/ns/solid/terms#oidcIssuer> <${oidcIssuer}>.`%></code>
30+
to your WebID profile.
31+
</p>
32+
<% } %>
33+
<% } %>
34+
<% if (createPod) { %>
35+
<p>
36+
Your new pod has been created
37+
and can be found at <a href="<%= podBaseUrl %>" class="link"><%= podBaseUrl %></a>.
38+
</p>
39+
<% } %>
40+
</main>
41+
<footer>
42+
<p>©2019–2021 Inrupt Inc. and imec</p>
43+
</footer>
4244
</body>
4345
</html>

‎templates/styles/main.css

+105-4
Original file line numberDiff line numberDiff line change
@@ -18,32 +18,41 @@ html {
1818
background-color: var(--solid-purple);
1919
background-image: linear-gradient(135deg, var(--solid-purple) 10%, var(--solid-blue) 90%);
2020
height: 100%;
21+
}
22+
23+
body, input, button {
24+
font: 12pt/1.3 Raleway, sans-serif;
25+
font-weight: 300;
2126
color: #222222;
2227
}
2328

2429
body {
2530
max-width: 750px;
2631
margin: 2em auto;
2732
padding: 1em 2em;
28-
font: 12pt/1.3 Raleway, sans-serif;
29-
font-weight: 300;
33+
3034
background: white;
3135
box-shadow: 5px 5px 2px rgba(0, 0, 0, .1);
3236
border-radius: 3px;
37+
38+
font: 12pt/1.3 Raleway, sans-serif;
39+
font-weight: 300;
3340
}
3441

3542
header {
3643
margin: 1em 0 2em;
44+
3745
display: grid;
3846
grid-template-columns: [logo] 5em [title] auto;
3947
grid-gap: 1.5em;
4048
align-items: center;
4149
}
4250
header h1 {
51+
margin: 0;
52+
4353
font-size: 3.33em;
4454
letter-spacing: .25px;
4555
font-weight: 600;
46-
margin: 0;
4756
}
4857
header img {
4958
width: 100%;
@@ -59,8 +68,100 @@ main h2 {
5968
}
6069

6170
footer {
62-
font-size: 90%;
6371
margin-top: 1em;
6472
text-align: right;
73+
font-size: 90%;
6574
color: #666666;
6675
}
76+
77+
strong {
78+
font-weight: 600;
79+
}
80+
81+
a {
82+
color: var(--solid-purple);
83+
font-weight: 500;
84+
}
85+
a:hover {
86+
color: var(--solid-blue);
87+
}
88+
89+
li {
90+
margin: .5em 0;
91+
}
92+
ul > li {
93+
list-style-type: square;
94+
}
95+
ul > li::marker {
96+
color: var(--solid-purple);
97+
}
98+
99+
fieldset {
100+
border: none;
101+
margin: 0;
102+
padding: 0 0 0 1em;
103+
max-width: 600px;
104+
}
105+
fieldset ol {
106+
list-style: none;
107+
margin; 0;
108+
padding: 0;
109+
}
110+
fieldset ol ol {
111+
margin: 0 0 1em 2em;
112+
}
113+
fieldset ol li:not(.checkbox) {
114+
display: grid;
115+
grid-template-columns: 10em auto;
116+
grid-gap: 1em;
117+
align-items: center;
118+
}
119+
fieldset ol ol li:not(.checkbox) {
120+
grid-template-columns: 8em auto;
121+
}
122+
fieldset li label {
123+
font-weight: 600;
124+
}
125+
fieldset li:not(.checkbox) > label:after {
126+
content: ": ";
127+
}
128+
fieldset li.checkbox > label > input {
129+
margin: 0 .5em 0 0;
130+
}
131+
132+
input {
133+
border: 1px solid var(--solid-purple);
134+
}
135+
136+
button {
137+
cursor: pointer;
138+
padding: .5em 2em;
139+
140+
border: 0px;
141+
background-color: var(--solid-purple);
142+
color: white;
143+
144+
font-weight: 600;
145+
}
146+
button:hover {
147+
background-color: var(--solid-blue);
148+
}
149+
150+
form p.actions {
151+
margin: 0 0 1em 12em;
152+
}
153+
154+
form p.error {
155+
color: #ad0f0f;
156+
font-weight: 600;
157+
}
158+
159+
form ul.actions {
160+
padding: 0;
161+
margin: 0 0 1em 12em;
162+
}
163+
form ul.actions > li {
164+
list-style-type: none;
165+
display: inline;
166+
margin-right: 1em;
167+
}

0 commit comments

Comments
 (0)
Please sign in to comment.