api: Use semantic-ui-css for api-rendered views (account pages)
This commit is contained in:
Paul Bienkowski
parent
817de8fae5
commit
9a7043ea71
11641
api/package-lock.json
generated
11641
api/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -55,6 +55,7 @@
|
|||
"pug": "^3.0.0",
|
||||
"request": "2.88.2",
|
||||
"sanitize-filename": "^1.6.3",
|
||||
"semantic-ui-css": "^2.4.1",
|
||||
"slug": "^3.5.2",
|
||||
"turf": "^3.0.14",
|
||||
"underscore": "^1.12.0"
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ app.use(bodyParser.urlencoded({ limit: '50mb', extended: false }));
|
|||
|
||||
app.use(require('method-override')());
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
app.use('/semantic-ui', express.static(path.join(__dirname, '..', 'node_modules', 'semantic-ui-css')));
|
||||
|
||||
app.use(session({ secret: config.cookieSecret, cookie: { maxAge: 10 * 60 * 1000 }, resave: false, saveUninitialized: false }));
|
||||
app.use(passport.initialize());
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ router.post(
|
|||
description = 'Your account is not yet verified, please check your email or start the password recovery.';
|
||||
}
|
||||
|
||||
return res.render('message', { type: 'error', title: 'Login failed', description });
|
||||
return res.render('message', { type: 'negative', title: 'Login failed', description });
|
||||
},
|
||||
wrapRoute((req, res, next) => {
|
||||
if (!req.user) {
|
||||
|
|
@ -86,7 +86,7 @@ router.post(
|
|||
req.session.next = null;
|
||||
return;
|
||||
}
|
||||
return res.render('message', { type: 'success', title: 'You are logged in.' });
|
||||
return res.render('message', { type: 'positive', title: 'You are logged in.', showFrontendLink: true });
|
||||
}),
|
||||
);
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ router.get(
|
|||
'/login',
|
||||
wrapRoute(async (req, res) => {
|
||||
if (req.user) {
|
||||
return res.render('message', { type: 'success', title: 'You are already logged in.' });
|
||||
return res.render('message', { type: 'positive', title: 'You are already logged in.' });
|
||||
}
|
||||
|
||||
return res.render('login');
|
||||
|
|
@ -267,7 +267,7 @@ router.post(
|
|||
|
||||
if (expiresAt < new Date().getTime()) {
|
||||
return res.status(400).render('message', {
|
||||
type: 'error',
|
||||
type: 'negative',
|
||||
title: 'Expired',
|
||||
description: 'Your authorization has expired. Please go back and retry the process.',
|
||||
});
|
||||
|
|
@ -450,7 +450,7 @@ router
|
|||
await accountService.register(req.body);
|
||||
|
||||
return res.render('message', {
|
||||
type: 'success',
|
||||
type: 'positive',
|
||||
title: 'Registration successful',
|
||||
description: 'Please check your email for verification instructions.',
|
||||
});
|
||||
|
|
@ -469,7 +469,7 @@ router.get(
|
|||
wrapRoute(async (req, res) => {
|
||||
await accountService.verifyEmail(req.query);
|
||||
return res.render('message', {
|
||||
type: 'success',
|
||||
type: 'positive',
|
||||
title: 'Verification successful',
|
||||
description: 'You can now log in.',
|
||||
showLoginButton: true,
|
||||
|
|
@ -488,7 +488,7 @@ router
|
|||
wrapRoute(async (req, res) => {
|
||||
await accountService.forgotPassword(req.body);
|
||||
res.render('message', {
|
||||
type: 'success',
|
||||
type: 'positive',
|
||||
title: 'Recovery mail sent',
|
||||
description: 'Please check your inbox for password recovery instructions.',
|
||||
});
|
||||
|
|
@ -509,7 +509,7 @@ router
|
|||
wrapRoute(async (req, res) => {
|
||||
await accountService.resetPassword(req.body);
|
||||
return res.render('message', {
|
||||
type: 'success',
|
||||
type: 'positive',
|
||||
title: 'Password reset successful',
|
||||
description: 'You can now log in.',
|
||||
showLoginButton: true,
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ block content
|
|||
You are about to confirm a login to client #[b= clientTitle]. You have 2
|
||||
minutes time for your decision.
|
||||
|
||||
.authorization
|
||||
form(method="post", action="authorize/decline")
|
||||
button(type="submit", class="red") Decline
|
||||
.ui.grid.two.columns
|
||||
form.column(method="post", action="authorize/decline")
|
||||
button.ui.button.fluid.red(type="submit", class="red") Decline
|
||||
|
||||
form(method="post", action="authorize/approve")
|
||||
button(type="submit", class="green") Approve
|
||||
form.column(method="post", action="authorize/approve")
|
||||
button.ui.button.fluid.green(type="submit", class="green") Approve
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ block title
|
|||
| Reset Password
|
||||
|
||||
block content
|
||||
form(method="post")
|
||||
fieldset
|
||||
form.ui.form(method="post")
|
||||
.field
|
||||
label(for="email") E-Mail Address
|
||||
input(id="email", name="email")
|
||||
|
||||
button(type="submit") Send recovery mail
|
||||
button.ui.button.primary(type="submit") Send recovery mail
|
||||
|
|
|
|||
|
|
@ -1,143 +1,32 @@
|
|||
html
|
||||
head
|
||||
base(href=baseUrl)
|
||||
title
|
||||
block title
|
||||
title block title
|
||||
| Authorization Server
|
||||
|
||||
link(rel="stylesheet", href="/semantic-ui/semantic.min.css")
|
||||
|
||||
style.
|
||||
html, body {
|
||||
font-family: "Roboto";
|
||||
font-size: 11pt;
|
||||
background: #FAFAFE;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 30rem;
|
||||
margin: 2rem auto;
|
||||
background: white;
|
||||
border: 1px solid #DDD;
|
||||
padding: 2rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input, button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
input {
|
||||
background: white;
|
||||
height: 2rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0.5rem 0;
|
||||
padding: 0 0.5rem;
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: 1px solid #000;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 1rem;
|
||||
height: 2.5rem;
|
||||
background: #dedede;
|
||||
font-size: inherit;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.message.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.authorization {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.authorization form {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
.authorization form:first-child {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.authorization form button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button.red {
|
||||
background: #b33f3f;
|
||||
color: white;
|
||||
}
|
||||
button.red:hover {
|
||||
background: #ff7878;
|
||||
}
|
||||
|
||||
button.green {
|
||||
background: #41b141;
|
||||
color: white;
|
||||
}
|
||||
button.green:hover {
|
||||
background: #83d283;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
nav ul li {
|
||||
flex: 1 1 0;
|
||||
text-align: center;
|
||||
}
|
||||
nav ul li a {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
}
|
||||
nav ul li a:hover {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
nav header {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
margin-bottom: 1rem;
|
||||
body > main > header {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
body
|
||||
main
|
||||
nav
|
||||
header OpenBikeSensor Account Pages
|
||||
ul
|
||||
main.ui.container
|
||||
header
|
||||
nav.ui.menu
|
||||
a.item(href=mainFrontendUrl, title="Back to Portal")
|
||||
i.icon.arrow.left
|
||||
.header.item OpenBikeSensor Account
|
||||
.right.menu
|
||||
if mainFrontendUrl
|
||||
li: a(href=mainFrontendUrl) Back to Portal
|
||||
if !user
|
||||
li: a(href="login") Login
|
||||
li: a(href="register") Register
|
||||
a.item(href="login") Login
|
||||
a.item(href="register") Register
|
||||
if user
|
||||
li: a(href="logout") Logout
|
||||
header: h1
|
||||
a.item(href="logout") Logout
|
||||
div.ui.grid.centered
|
||||
div.eight.wide.column
|
||||
h2.ui.header
|
||||
block title
|
||||
block content
|
||||
|
|
|
|||
|
|
@ -4,17 +4,17 @@ block title
|
|||
| Login
|
||||
|
||||
block content
|
||||
form(method="post")
|
||||
fieldset
|
||||
form.ui.form(method="post")
|
||||
.field
|
||||
label(for="email") E-Mail Address
|
||||
input(id="email", name="email")
|
||||
|
||||
fieldset
|
||||
.field
|
||||
label(for="password") Password
|
||||
input(name="password", type="password")
|
||||
|
||||
if badCredentials
|
||||
p.message.error Invalid login credentials, please try again.
|
||||
p.ui.negative.message Invalid login credentials, please try again.
|
||||
|
||||
button(type="submit", style="margin-right: 2rem") Login
|
||||
a(href="forgot-password") I forgot my password
|
||||
button.ui.button.primary(type="submit", style="margin-right: 2rem") Login
|
||||
a.ui(href="forgot-password") I forgot my password
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@ block title
|
|||
|
||||
block content
|
||||
form(method="post", action="logout")
|
||||
button(type="submit", class="red") Log out now
|
||||
button.ui.button(type="submit") Log out now
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ block title
|
|||
|
||||
block content
|
||||
if description
|
||||
div(class="message " + type)= description
|
||||
div(class="ui message " + type)= description
|
||||
|
||||
if showLoginButton
|
||||
p: a(href="login") Go to login
|
||||
|
||||
if showFrontendLink
|
||||
p: a(href=mainFrontendUrl) Back to Portal
|
||||
|
|
|
|||
|
|
@ -4,22 +4,22 @@ block title
|
|||
| Register
|
||||
|
||||
block content
|
||||
form(method="post")
|
||||
fieldset
|
||||
form.ui.form(method="post")
|
||||
.field
|
||||
label(for="username") Username
|
||||
input(id="username", name="username")
|
||||
p.form-hint At least 3 characters, alphanumerical, must be unique
|
||||
|
||||
fieldset
|
||||
.field
|
||||
label(for="email") E-Mail Address
|
||||
input(id="email", name="email", type="email")
|
||||
|
||||
fieldset
|
||||
.field
|
||||
label(for="password") Password
|
||||
input(id="password", name="password", type="password")
|
||||
|
||||
fieldset
|
||||
.field
|
||||
label(for="confirmPassword") Confirm Password
|
||||
input(id="confirmPassword", name="confirmPassword", type="password")
|
||||
|
||||
button(type="submit") Register
|
||||
button.ui.button.primary(type="submit") Register
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@ block title
|
|||
| Reset Password
|
||||
|
||||
block content
|
||||
form(method="post")
|
||||
form.ui.form(method="post")
|
||||
input(type="hidden", name="token", value=token)
|
||||
|
||||
fieldset
|
||||
.field
|
||||
label(for="password") New Password
|
||||
input(id="password", name="password", type="password")
|
||||
|
||||
fieldset
|
||||
.field
|
||||
label(for="confirmPassword") Confirm Password
|
||||
input(id="confirmPassword", name="confirmPassword", type="password")
|
||||
|
||||
button(type="submit") Set new password
|
||||
button.ui.button.primary(type="submit") Set new password
|
||||
|
|
|
|||
Loading…
Reference in a new issue