mirror of
https://github.com/CommunitySolidServer/CommunitySolidServer.git
synced 2024-10-03 14:55:10 +00:00
refactor: Match IDP templates to main template.
This commit is contained in:
Ruben Verborgh
Joachim Van Herwegen
parent
ad7f4ed134
commit
6897784a92
@ -1,54 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Sign-in</title>
|
||||
<link rel="stylesheet" href="/idp/style.css">
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>Log in</title>
|
||||
<link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-content">
|
||||
<section class="main-content-section">
|
||||
<div class="wrapper">
|
||||
<h1 class="title--white">Sign In</h1>
|
||||
<div class="login-panel">
|
||||
<div class="panel-body">
|
||||
<form autocomplete="off" action="/idp/login" method="post">
|
||||
|
||||
<header>
|
||||
<img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
|
||||
<h1>Community Solid Server</h1>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Log in</h1>
|
||||
<form action="/idp/login" method="post">
|
||||
<%if (errorMessage) { %>
|
||||
<div class="input-wrap">
|
||||
<label style="color: #D0021B">
|
||||
<%= errorMessage %>
|
||||
</label>
|
||||
</div>
|
||||
<p class="error"><%= errorMessage %></p>
|
||||
<% } %>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label for="email">Email:</label>
|
||||
<fieldset>
|
||||
<ol>
|
||||
<li>
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %>>
|
||||
</div>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label for="password">Password:</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="password">Password</label>
|
||||
<input id="password" type="password" name="password">
|
||||
</div>
|
||||
</li>
|
||||
<li class="checkbox">
|
||||
<label><input type="checkbox" name="remember" value="yes" checked>Stay signed in</label>
|
||||
</li>
|
||||
</ol>
|
||||
</fieldset>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label class="checkbox"><input type="checkbox" name="remember" value="yes" checked>Stay signed in</label>
|
||||
</div>
|
||||
<p class="actions"><button type="submit" name="submit">Log in</button></p>
|
||||
|
||||
<button type="submit" name="submit" class="ids-link-filled">Sign In</button>
|
||||
|
||||
<hr />
|
||||
<div class="space-between">
|
||||
|
||||
<a href="/idp/register" class="link">Register</a>
|
||||
<a href="/idp/forgotpassword" class="link">Forgot Password</a>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><a href="/idp/register" class="link">Sign up</a></li>
|
||||
<li><a href="/idp/forgotpassword" class="link">Forgot password</a></li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<p>©2019–2021 Inrupt Inc. and imec</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,70 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>Register</title>
|
||||
<link rel="stylesheet" href="/idp/style.css">
|
||||
<link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-content">
|
||||
<section class="main-content-section">
|
||||
<div class="wrapper">
|
||||
<h1 class="title--white">Register</h1>
|
||||
<div class="login-panel">
|
||||
<div class="panel-body">
|
||||
<form autocomplete="off" action="/idp/register" method="post">
|
||||
<header>
|
||||
<img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
|
||||
<h1>Community Solid Server</h1>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Sign up for an account</h1>
|
||||
<form action="/idp/register" method="post">
|
||||
|
||||
<%if (errorMessage) { %>
|
||||
<div class="input-wrap">
|
||||
<label style="color: #D0021B">
|
||||
<%= errorMessage %>
|
||||
</label>
|
||||
</div>
|
||||
<p class="error">Error: <%= errorMessage %></p>
|
||||
<% } %>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label for="email">Email:</label>
|
||||
<fieldset>
|
||||
<ol>
|
||||
<li>
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="text" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %> />
|
||||
</div>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label for="password">Password (when registering with the IDP):</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="password">Password</label>
|
||||
<input id="password" type="password" name="password" />
|
||||
</div>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label for="confirmPassword">Confirm Password:</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="confirmPassword">Confirm password</label>
|
||||
<input id="confirmPassword" type="password" name="confirmPassword" />
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</fieldset>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label for="podName">Pod name (when creating a pod):</label>
|
||||
<input id="podName" type="text" name="podName" <% if (prefilled.podName) { %> value="<%= prefilled.podName %>" <% } %> />
|
||||
</div>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label for="webId">WebID (when not creating a WebID):</label>
|
||||
<fieldset>
|
||||
<ol>
|
||||
<li class="checkbox">
|
||||
<label><input type="checkbox" name="createWebId" checked>Create a new WebID <em>(requires the other two options)</em></label>
|
||||
</li>
|
||||
<li class="checkbox">
|
||||
<label><input type="checkbox" name="register" checked>Register your WebID with the IDP</label>
|
||||
<ol>
|
||||
<li>
|
||||
<label for="webId">Alternatively, existing WebID</label>
|
||||
<input id="webId" type="text" name="webId" <% if (prefilled.webId) { %> value="<%= prefilled.webId %>" <% } %> />
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li class="checkbox">
|
||||
<label><input type="checkbox" name="createPod" checked>Create a new pod</label>
|
||||
<ol>
|
||||
<li>
|
||||
<label for="podName">Pod name</label>
|
||||
<input id="podName" type="text" name="podName" <% if (prefilled.podName) { %> value="<%= prefilled.podName %>" <% } %> />
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</fieldset>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label class="checkbox"><input type="checkbox" name="createWebId" checked>Create new WebID (also requires the other two options)</label>
|
||||
</div>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label class="checkbox"><input type="checkbox" name="register" checked>Register your WebID with the IDP</label>
|
||||
</div>
|
||||
|
||||
<div class="input-wrap">
|
||||
<label class="checkbox"><input type="checkbox" name="createPod" checked>Create a new pod</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" name="submit" class="ids-link-filled">Submit</button>
|
||||
<p class="actions"><button type="submit" name="submit">Sign up</button></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<p>©2019–2021 Inrupt Inc. and imec</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,43 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Succesful</title>
|
||||
<link rel="stylesheet" href="/idp/style.css">
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>You are signed up</title>
|
||||
<link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-content">
|
||||
<section class="main-content-section">
|
||||
<div class="wrapper">
|
||||
<h1 class="title--white">Registration Successful</h1>
|
||||
<div class="login-panel">
|
||||
<div class="panel-body">
|
||||
<header>
|
||||
<img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
|
||||
<h1>Community Solid Server</h1>
|
||||
</header>
|
||||
<main>
|
||||
<h1>You are signed up</h1>
|
||||
<% if (createWebId) { %>
|
||||
<p class="content__message">
|
||||
Your new WebID is <a href="<%= webId %>" class="link"><%= webId %></a>
|
||||
<p>
|
||||
Your new WebID is <a href="<%= webId %>" class="link"><%= webId %></a>.
|
||||
</p>
|
||||
<% } %>
|
||||
<% if (register) { %>
|
||||
<p class="content__message">
|
||||
You can now identify as <a href="<%= webId %>" class="link"><%= webId %></a> with our IDP using <%= email %>
|
||||
<p>
|
||||
You can now identify as <a href="<%= webId %>" class="link"><%= webId %></a>
|
||||
on this server using <em><%= email %></em>.
|
||||
</p>
|
||||
<% if (!createWebId) { %>
|
||||
<p class="content__message">
|
||||
<p>
|
||||
Make sure you add the triple
|
||||
<%= `<${webId}> <http://www.w3.org/ns/solid/terms#oidcIssuer> <${oidcIssuer}>.`%>
|
||||
<code><%= `<${webId}> <http://www.w3.org/ns/solid/terms#oidcIssuer> <${oidcIssuer}>.`%></code>
|
||||
to your WebID profile.
|
||||
</p>
|
||||
<% } %>
|
||||
<% } %>
|
||||
<% if (createPod) { %>
|
||||
<p class="content__message">
|
||||
Your new pod has been created and can be found at <a href="<%= podBaseUrl %>" class="link"><%= podBaseUrl %></a>
|
||||
<p>
|
||||
Your new pod has been created
|
||||
and can be found at <a href="<%= podBaseUrl %>" class="link"><%= podBaseUrl %></a>.
|
||||
</p>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<p>©2019–2021 Inrupt Inc. and imec</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -18,6 +18,11 @@ html {
|
||||
background-color: var(--solid-purple);
|
||||
background-image: linear-gradient(135deg, var(--solid-purple) 10%, var(--solid-blue) 90%);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body, input, button {
|
||||
font: 12pt/1.3 Raleway, sans-serif;
|
||||
font-weight: 300;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
@ -25,25 +30,29 @@ body {
|
||||
max-width: 750px;
|
||||
margin: 2em auto;
|
||||
padding: 1em 2em;
|
||||
font: 12pt/1.3 Raleway, sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
background: white;
|
||||
box-shadow: 5px 5px 2px rgba(0, 0, 0, .1);
|
||||
border-radius: 3px;
|
||||
|
||||
font: 12pt/1.3 Raleway, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 1em 0 2em;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: [logo] 5em [title] auto;
|
||||
grid-gap: 1.5em;
|
||||
align-items: center;
|
||||
}
|
||||
header h1 {
|
||||
margin: 0;
|
||||
|
||||
font-size: 3.33em;
|
||||
letter-spacing: .25px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
header img {
|
||||
width: 100%;
|
||||
@ -59,8 +68,100 @@ main h2 {
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 90%;
|
||||
margin-top: 1em;
|
||||
text-align: right;
|
||||
font-size: 90%;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--solid-purple);
|
||||
font-weight: 500;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--solid-blue);
|
||||
}
|
||||
|
||||
li {
|
||||
margin: .5em 0;
|
||||
}
|
||||
ul > li {
|
||||
list-style-type: square;
|
||||
}
|
||||
ul > li::marker {
|
||||
color: var(--solid-purple);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0 0 0 1em;
|
||||
max-width: 600px;
|
||||
}
|
||||
fieldset ol {
|
||||
list-style: none;
|
||||
margin; 0;
|
||||
padding: 0;
|
||||
}
|
||||
fieldset ol ol {
|
||||
margin: 0 0 1em 2em;
|
||||
}
|
||||
fieldset ol li:not(.checkbox) {
|
||||
display: grid;
|
||||
grid-template-columns: 10em auto;
|
||||
grid-gap: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
fieldset ol ol li:not(.checkbox) {
|
||||
grid-template-columns: 8em auto;
|
||||
}
|
||||
fieldset li label {
|
||||
font-weight: 600;
|
||||
}
|
||||
fieldset li:not(.checkbox) > label:after {
|
||||
content: ": ";
|
||||
}
|
||||
fieldset li.checkbox > label > input {
|
||||
margin: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid var(--solid-purple);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: .5em 2em;
|
||||
|
||||
border: 0px;
|
||||
background-color: var(--solid-purple);
|
||||
color: white;
|
||||
|
||||
font-weight: 600;
|
||||
}
|
||||
button:hover {
|
||||
background-color: var(--solid-blue);
|
||||
}
|
||||
|
||||
form p.actions {
|
||||
margin: 0 0 1em 12em;
|
||||
}
|
||||
|
||||
form p.error {
|
||||
color: #ad0f0f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
form ul.actions {
|
||||
padding: 0;
|
||||
margin: 0 0 1em 12em;
|
||||
}
|
||||
form ul.actions > li {
|
||||
list-style-type: none;
|
||||
display: inline;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user