Add basic styling
This commit is contained in:
parent
eb60e6dcc6
commit
7b4b5810bc
|
@ -54,6 +54,7 @@ sub startup($self) {
|
|||
|
||||
# Normal route to controller
|
||||
$r->get('/login')->to('Login#login');
|
||||
$r->get('/my/logout')->to('Login#logout');
|
||||
$r->post('/auth')->to('Login#auth');
|
||||
$r->get('/my')->to('Interface#landing');
|
||||
$r->get('/my/tokens')->to('Interface#token_list');
|
||||
|
|
|
@ -49,6 +49,7 @@ sub token_list($c) {
|
|||
if (!defined $uid) {
|
||||
return $c->redirect_to("/login");
|
||||
}
|
||||
$c->stash(uid => $c->session->{uid});
|
||||
|
||||
return $c->users->list_tokens($uid)->then(sub ($tokens) {
|
||||
$c->stash(tokens => $tokens);
|
||||
|
@ -62,6 +63,7 @@ sub gen_token_post($c) {
|
|||
if (!defined $uid) {
|
||||
return $c->redirect_to("/login");
|
||||
}
|
||||
$c->stash(uid => $c->session->{uid});
|
||||
|
||||
my $v = $c->validation;
|
||||
return $c->render('interface/generateToken') unless $v->has_data;
|
||||
|
@ -83,6 +85,7 @@ sub gen_token_get($c) {
|
|||
if (!defined $uid) {
|
||||
return $c->redirect_to("/login");
|
||||
}
|
||||
$c->stash(uid => $c->session->{uid});
|
||||
|
||||
return $c->render('interface/generateToken');
|
||||
}
|
||||
|
@ -93,6 +96,7 @@ sub del_token($c) {
|
|||
if (!defined $uid) {
|
||||
return $c->redirect_to("/login");
|
||||
}
|
||||
$c->stash(uid => $c->session->{uid});
|
||||
|
||||
return $c->users->del_token($uid, $c->param('id'))->then(sub {
|
||||
$c->flash(msg => 'Token deleted.');
|
||||
|
@ -303,4 +307,5 @@ sub import_post ($c) {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
1;
|
||||
|
|
|
@ -45,4 +45,9 @@ sub login($c) {
|
|||
return $c->render();
|
||||
}
|
||||
|
||||
sub logout($c) {
|
||||
delete $c->session->{uid};
|
||||
return $c->redirect_to('/login');
|
||||
}
|
||||
|
||||
1;
|
||||
|
|
|
@ -0,0 +1,117 @@
|
|||
/* Main content */
|
||||
body {
|
||||
font-family: monospace;
|
||||
margin: 0;
|
||||
background: #080e08;
|
||||
color: #f6f6f6;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #4af626;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background: #3a7920;
|
||||
color: #f6f6f6;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#header-content {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
align-content: center;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#header-content h1 {
|
||||
color: #f6f6f6;
|
||||
margin: auto auto auto 1rem;
|
||||
}
|
||||
|
||||
/* Header nav */
|
||||
|
||||
nav {
|
||||
margin: auto 0 auto auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 10px;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
background: #3a7920;
|
||||
color: #f6f6f6;
|
||||
|
||||
margin: auto auto 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Misc styling */
|
||||
a:link {
|
||||
color: #2cacb0;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #b4778f;
|
||||
}
|
||||
|
||||
footer a:link, footer a:visited, header a:link, header a:visited {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
footer a:hover, header a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
label.field-with-error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* Light mode */
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
background: #fcfffc;
|
||||
color: #211c1b;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #4c982a;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #1f7b7e;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #7c5263;
|
||||
}
|
||||
}
|
|
@ -1,5 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title><%= title %></title></head>
|
||||
<body><%= content %></body>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title><%= title %></title>
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div id="header-content">
|
||||
<h1>IPFS Upload</h1>
|
||||
<nav>
|
||||
% if (!defined stash('uid')) {
|
||||
<a href="/login">Login</a>
|
||||
% } else {
|
||||
<a href="/my">My Pins</a>
|
||||
<a href="/">Upload</a>
|
||||
% }
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<%= content %>
|
||||
</main>
|
||||
<footer>
|
||||
<span class="copyleft">©</span> Licensed under AGPL: <a href="https://git.unix.dog/nullobsi/ipfs-upload">Source Code</a>
|
||||
<br>
|
||||
% if (defined stash('uid')) {
|
||||
<a href="/my/logout">Log out</a>
|
||||
% }
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue