Skip to content

Commit 5b39d75

Browse files
PothercaPotherca
committed
Add nicer UI for homepage, profile, and login screens
1 parent 60a9a53 commit 5b39d75

File tree

5 files changed

+93
-51
lines changed

5 files changed

+93
-51
lines changed

‎src/Controller/HelloWorldController.php

+60-3
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,67 @@ class HelloWorldController extends AbstractController
99
{
1010
final public function __invoke(ServerRequestInterface $request, array $args): ResponseInterface
1111
{
12-
$response = $this->getResponse();
1312

14-
$response->getBody()->write('<h1>Hello, World!</h1>');
13+
$body = <<<'HTML'
14+
<h1 class="title">Hello, World!</h1>
15+
<p>The following main URL are available on this server:</p>
16+
<ul>
17+
<li>
18+
<a href="/.well-known/openid-configuration"><code>/.well-known/openid-configuration</code></a>
19+
<span>Openid</span>
20+
</li>
21+
<li>
22+
<a href="/authorize"><code>/authorize</code></a>
23+
<span>Authorize</span>
24+
</li>
25+
<li>
26+
<a href="/jwks"><code>/jwks</code></a>
27+
<span>Jwks</span>
28+
</li>
29+
<li>
30+
<a href="/login/"><code>/login/</code></a><sup>1, 3</sup>
31+
<span>Login</span>
32+
</li>
33+
<li>
34+
<a href="/profile/"><code>/profile/</code></a><sup>1</sup>
35+
<span>Profile</span>
36+
</li>
37+
<li>
38+
<a href="/profile/card"><code>/profile/card</code></a><sup>2</sup>
39+
<span>Card</span>
40+
</li>
41+
<li>
42+
<code>/register</code><sup>4</sup>
43+
<span>Register</span>
44+
</li>
45+
<li>
46+
<code>/sharing/{clientId}</code><sup>3</sup>
47+
<span>Approval</span>
48+
</li>
49+
<li>
50+
<a href="/storage/"><code>/storage/{path}</code></a><sup>3</sup>
51+
<span>Resource</span>
52+
</li>
53+
<li>
54+
<code>/token/</code><sup>1, 4</sup>
55+
<span>Token</span>
56+
</li>
57+
</ul>
1558
16-
return $response;
59+
<section class="is-info is-light is-size-7 notification">
60+
<h2>Footnotes</h2>
61+
<ol>
62+
<li>Also available without trailing slash <code>/</code></li>
63+
<li>A file extension can be added to force a specific format. For instance <code>/profile/card</code> can be
64+
requested as <code>/profile/card.ttl</code> to request a Turtle file, or <code>/profile/card.json</code> to
65+
request a JSON-LD file
66+
</li>
67+
<li>This URL also accepts POST requests</li>
68+
<li>This URL <em>only</em> accepts POST requests</li>
69+
</ol>
70+
</section>
71+
HTML;
72+
73+
return $this->createTemplateResponse($body);
1774
}
1875
}

‎src/Template/card.html

+16-31
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
1-
<!DOCTYPE html>
2-
<html
3-
lang="en"
4-
metal:use-macro="default.html/default"
5-
xmlns:metal="http://xml.zope.org/namespaces/metal"
6-
xmlns:tal="http://xml.zope.org/namespaces/tal"
7-
>
8-
<head>
9-
<style class="section" metal:fill-slot="page-style">
1+
<tal:block metal:use-macro="default.html/default">
2+
<style metal:fill-slot="page-style">
103
.tabs.is-toggle a:active:hover,
114
a:active {
125
background-color: #f2e205;
@@ -28,15 +21,9 @@
2821
display: initial;
2922
}
3023
</style>
31-
</head>
32-
<body>
33-
<section class="section" metal:fill-slot="content">
34-
<div class="container">
35-
<h1 class="title">
36-
<title>Profile in various RDF formats</title>
37-
</h1>
38-
39-
<div class="tabs is-centered is-toggle">
24+
<main class="section block" metal:fill-slot="content">
25+
<h1 class="title">Profile in various RDF formats</h1>
26+
<div class="container box is-half tabs is-centered is-toggle mb-0">
4027
<ul>
4128
<li tal:repeat="format formats">
4229
<label for="tab-${repeat/format/key}">
@@ -45,18 +32,16 @@ <h1 class="title">
4532
</li>
4633
</ul>
4734
</div>
48-
</div>
4935

50-
<div class="container section">
51-
<tal:block tal:repeat="contents files">
52-
<input id="tab-${repeat/contents/key}" name="tabs" type="radio" class="tab-selector is-hidden"/>
53-
<div class="content">
54-
<h3 tal:content="repeat/contents/key">RDF Format</h3>
55-
<pre><code tal:content="contents"></code></pre>
56-
</div>
57-
</tal:block>
58-
</div>
59-
</section>
60-
</body>
61-
</html>
36+
<div class="container box section">
37+
<tal:block tal:repeat="contents files">
38+
<input id="tab-${repeat/contents/key}" name="tabs" type="radio" class="tab-selector is-hidden" />
39+
<div class="content">
40+
<h3 tal:content="repeat/contents/key">RDF Format</h3>
41+
<pre><code tal:content="contents"></code></pre>
42+
</div>
43+
</tal:block>
44+
</div>
45+
</main>
46+
</tal:block>
6247

‎src/Template/default.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@
77
<head>
88
<meta charset="utf-8"/>
99
<meta name="viewport" content="width=device-width, initial-scale=1"/>
10-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
11-
integrity="sha256-aPeK/N8IHpHsvPBCf49iVKMdusfobKo2oxF8lRruWJg=" crossorigin="anonymous"
12-
/>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
11+
<style>html, body {height: 100%;}</style>
1312
<style metal:define-slot="page-style">
1413
/* Page specific styles will replace this */
1514
</style>
1615
</head>
17-
<body>
16+
<body class="has-background-white-ter">
1817
<p metal:define-slot="content">This will be replaced with content from other templates</p>
1918
</body>
2019
</html>

‎src/Template/login.html

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
<!doctype html>
2-
<html>
3-
<body>
4-
<h1>Please login</h1>
5-
<form method="post" action="">
6-
<label>Username: <input type="text" name="username" /></label>
7-
<label>Password: <input type="password" name="password" /></label>
8-
<input type="submit" value="Login" />
9-
</form>
10-
</body>
11-
</html>
1+
<tal:block metal:use-macro="default.html/default">
2+
<main class="section block columns" metal:fill-slot="content">
3+
<form method="post" action="" class="container column field box is-half">
4+
<h1 class="p-1 title has-background-primary has-text-white">Please login</h1>
5+
<label class="label">Username: <input class="input" type="text" name="username" /></label>
6+
<label class="label">Password: <input class="input" type="password" name="password" /></label>
7+
8+
<input class="button" type="submit" value="Login" />
9+
</form>
10+
</main>
11+
</tal:block>
12+

‎src/Traits/HasTemplateTrait.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@ private function createTemplateFromString(string $template) : string
4848
{
4949
return <<<"TAL"
5050
<tal:block metal:use-macro="default.html/default">
51-
<section class="section" metal:fill-slot="content">
51+
<main class="container section content box" metal:fill-slot="content">
5252
{$template}
53-
</section>
53+
</main>
5454
</tal:block>
5555
TAL;
5656
}

0 commit comments

Comments
 (0)