Mirroristas/CommunitySolidServer
2
0
Fork 0
mirror of https://github.com/CommunitySolidServer/CommunitySolidServer.git synced 2024-10-03 14:55:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Match IDP templates to main template.

Browse Source
This commit is contained in:
Ruben Verborgh 2021-07-15 17:41:57 +01:00 committed by Joachim Van Herwegen
parent ad7f4ed134
commit 6897784a92
4 changed files with 251 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
templates/idp/email-password-interaction/login.ejs
View File

@ -1,54 +1,49 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8"/>
<title>Sign-in</title> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/idp/style.css"> <title>Log in</title>
</head> <link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
<body> </head>
<div class="main-content"> <body>
<section class="main-content-section"> <header>
<div class="wrapper"> <img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
<h1 class="title--white">Sign In</h1> <h1>Community Solid Server</h1>
<div class="login-panel"> </header>
<div class="panel-body"> <main>
<form autocomplete="off" action="/idp/login" method="post"> <h1>Log in</h1>
<form action="/idp/login" method="post">
<%if (errorMessage) { %>
<p class="error"><%= errorMessage %></p>
<% } %>
<%if (errorMessage) { %> <fieldset>
<div class="input-wrap"> <ol>
<label style="color: #D0021B"> <li>
<%= errorMessage %> <label for="email">Email</label>
</label> <input id="email" type="email" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %>>
</div> </li>
<% } %> <li>
<label for="password">Password</label>
<input id="password" type="password" name="password">
</li>
<li class="checkbox">
<label><input type="checkbox" name="remember" value="yes" checked>Stay signed in</label>
</li>
</ol>
</fieldset>
<div class="input-wrap"> <p class="actions"><button type="submit" name="submit">Log in</button></p>
<label for="email">Email:</label>
<input id="email" type="email" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %>>
</div>
<div class="input-wrap"> <ul class="actions">
<label for="password">Password:</label> <li><a href="/idp/register" class="link">Sign up</a></li>
<input id="password" type="password" name="password"> <li><a href="/idp/forgotpassword" class="link">Forgot password</a></li>
</div> </ul>
</form>
<div class="input-wrap"> </main>
<label class="checkbox"><input type="checkbox" name="remember" value="yes" checked>Stay signed in</label> <footer>
</div> <p>©2019–2021 Inrupt Inc. and imec</p>
</footer>
<button type="submit" name="submit" class="ids-link-filled">Sign In</button> </body>
<hr />
<div class="space-between">
<a href="/idp/register" class="link">Register</a>
<a href="/idp/forgotpassword" class="link">Forgot Password</a>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
</body>
</html> </html>

128
templates/idp/email-password-interaction/register.ejs
View File

@ -1,70 +1,72 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8"/>
<title>Register</title> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/idp/style.css"> <title>Register</title>
</head> <link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
<body> </head>
<div class="main-content"> <body>
<section class="main-content-section"> <header>
<div class="wrapper"> <img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
<h1 class="title--white">Register</h1> <h1>Community Solid Server</h1>
<div class="login-panel"> </header>
<div class="panel-body"> <main>
<form autocomplete="off" action="/idp/register" method="post"> <h1>Sign up for an account</h1>
<form action="/idp/register" method="post">
<%if (errorMessage) { %> <%if (errorMessage) { %>
<div class="input-wrap"> <p class="error">Error: <%= errorMessage %></p>
<label style="color: #D0021B"> <% } %>
<%= errorMessage %>
</label>
</div>
<% } %>
<div class="input-wrap"> <fieldset>
<label for="email">Email:</label> <ol>
<input id="email" type="text" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %> /> <li>
</div> <label for="email">Email</label>
<input id="email" type="text" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %> />
</li>
<li>
<label for="password">Password</label>
<input id="password" type="password" name="password" />
</li>
<li>
<label for="confirmPassword">Confirm password</label>
<input id="confirmPassword" type="password" name="confirmPassword" />
</li>
</ol>
</fieldset>
<div class="input-wrap"> <fieldset>
<label for="password">Password (when registering with the IDP):</label> <ol>
<input id="password" type="password" name="password" /> <li class="checkbox">
</div> <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 %>" <% } %> />
</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"> <p class="actions"><button type="submit" name="submit">Sign up</button></p>
<label for="confirmPassword">Confirm Password:</label> </form>
<input id="confirmPassword" type="password" name="confirmPassword" /> </main>
</div> <footer>
<p>©2019–2021 Inrupt Inc. and imec</p>
<div class="input-wrap"> </footer>
<label for="podName">Pod name (when creating a pod):</label> </body>
<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>
<input id="webId" type="text" name="webId" <% if (prefilled.webId) { %> value="<%= prefilled.webId %>" <% } %> />
</div>
<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>
</form>
</div>
</div>
</div>
</section>
</div>
</body>
</html> </html>

74
templates/idp/email-password-interaction/registerResponse.ejs
View File

@ -1,43 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8"/>
<title>Registration Succesful</title> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/idp/style.css"> <title>You are signed up</title>
<link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
</head> </head>
<body> <body>
<div class="main-content"> <header>
<section class="main-content-section"> <img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
<div class="wrapper"> <h1>Community Solid Server</h1>
<h1 class="title--white">Registration Successful</h1> </header>
<div class="login-panel"> <main>
<div class="panel-body"> <h1>You are signed up</h1>
<% if (createWebId) { %> <% if (createWebId) { %>
<p class="content__message"> <p>
Your new WebID is <a href="<%= webId %>" class="link"><%= webId %></a> Your new WebID is <a href="<%= webId %>" class="link"><%= webId %></a>.
</p> </p>
<% } %> <% } %>
<% if (register) { %> <% if (register) { %>
<p class="content__message"> <p>
You can now identify as <a href="<%= webId %>" class="link"><%= webId %></a> with our IDP using <%= email %> You can now identify as <a href="<%= webId %>" class="link"><%= webId %></a>
</p> on this server using <em><%= email %></em>.
<% if (!createWebId) { %> </p>
<p class="content__message"> <% if (!createWebId) { %>
Make sure you add the triple <p>
<%= `<${webId}> <http://www.w3.org/ns/solid/terms#oidcIssuer> <${oidcIssuer}>.`%> Make sure you add the triple
to your WebID profile. <code><%= `<${webId}> <http://www.w3.org/ns/solid/terms#oidcIssuer> <${oidcIssuer}>.`%></code>
</p> to your WebID profile.
<% } %> </p>
<% } %> <% } %>
<% if (createPod) { %> <% } %>
<p class="content__message"> <% if (createPod) { %>
Your new pod has been created and can be found at <a href="<%= podBaseUrl %>" class="link"><%= podBaseUrl %></a> <p>
</p> Your new pod has been created
<% } %> and can be found at <a href="<%= podBaseUrl %>" class="link"><%= podBaseUrl %></a>.
</div> </p>
</div> <% } %>
</div> </main>
</section> <footer>
</div> <p>©2019–2021 Inrupt Inc. and imec</p>
</footer>
</body> </body>
</html> </html>

109
templates/styles/main.css
View File

@ -18,6 +18,11 @@ html {
background-color: var(--solid-purple); background-color: var(--solid-purple);
background-image: linear-gradient(135deg, var(--solid-purple) 10%, var(--solid-blue) 90%); background-image: linear-gradient(135deg, var(--solid-purple) 10%, var(--solid-blue) 90%);
height: 100%; height: 100%;
}
body, input, button {
font: 12pt/1.3 Raleway, sans-serif;
font-weight: 300;
color: #222222; color: #222222;
} }
@ -25,25 +30,29 @@ body {
max-width: 750px; max-width: 750px;
margin: 2em auto; margin: 2em auto;
padding: 1em 2em; padding: 1em 2em;
font: 12pt/1.3 Raleway, sans-serif;
font-weight: 300;
background: white; background: white;
box-shadow: 5px 5px 2px rgba(0, 0, 0, .1); box-shadow: 5px 5px 2px rgba(0, 0, 0, .1);
border-radius: 3px; border-radius: 3px;
font: 12pt/1.3 Raleway, sans-serif;
font-weight: 300;
} }
header { header {
margin: 1em 0 2em; margin: 1em 0 2em;
display: grid; display: grid;
grid-template-columns: [logo] 5em [title] auto; grid-template-columns: [logo] 5em [title] auto;
grid-gap: 1.5em; grid-gap: 1.5em;
align-items: center; align-items: center;
} }
header h1 { header h1 {
margin: 0;
font-size: 3.33em; font-size: 3.33em;
letter-spacing: .25px; letter-spacing: .25px;
font-weight: 600; font-weight: 600;
margin: 0;
} }
header img { header img {
width: 100%; width: 100%;
@ -59,8 +68,100 @@ main h2 {
} }
footer { footer {
font-size: 90%;
margin-top: 1em; margin-top: 1em;
text-align: right; text-align: right;
font-size: 90%;
color: #666666; 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;
}