Skip to content

Commit 9336b25

Browse files
committed
ui enhance
1 parent 1b7427d commit 9336b25

29 files changed

+513
-77
lines changed

handlers/base.js

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ module.exports = class HANDLER_BASE {
1313
ctx.session.uid = ctx.session.uid || constants.UID_GUEST;
1414
Object.assign(ctx.state, constants);
1515
ctx.state.user = new this.lib.user.user(await this.lib.user.getByUID(ctx.session.uid));
16+
ctx.state._ = str => str; // TODO(masnn): locale switching
1617
await next();
1718
if (ctx.session._id) await this.db.collection('session').save(ctx.session);
1819
else {

handlers/user.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ module.exports = class HANDLER_USER {
1717
let udoc = await this.lib.user.check(ctx.request.body.username, ctx.request.body.password);
1818
if (!udoc) await ctx.render('login', { message: 'Incorrent login detail.' });
1919
else {
20-
console.log(udoc._id);
2120
ctx.session.uid = udoc._id;
2221
ctx.redirect(ctx.query.redirect || '/');
2322
}
@@ -43,9 +42,18 @@ module.exports = class HANDLER_USER {
4342
ctx.redirect(ctx.query.redirect || '/');
4443
}
4544
})
46-
.all('/logout', async ctx => {
45+
.get('/logout', async ctx => {
4746
ctx.session.uid = UID_GUEST;
4847
ctx.redirect(ctx.query.redirect || '/');
48+
})
49+
.post('/logout', async ctx => {
50+
ctx.session.uid = UID_GUEST;
51+
ctx.body = {};
52+
})
53+
.get('/user', async ctx => {
54+
if (ctx.session.uid == UID_GUEST) throw new Error('You are not logged in!');
55+
let user = new this.lib.user.user(await this.lib.user.getByUID(ctx.session.uid));
56+
await ctx.render('user', { user });
4957
});
5058
return this.router;
5159
}

package.json

-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
},
2323
"homepage": "https://github.com/sayobot-dev/bbs#readme",
2424
"dependencies": {
25-
"axios": "^0.19.0",
2625
"bson": "^4.0.2",
2726
"core-util-is": "^1.0.2",
2827
"gridfs": "^1.0.0",

public/4.chunk.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/9.chunk.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/manifest.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/ui/iconfont/vj4icon.woff2

8.72 KB
Binary file not shown.

public/vendors.css

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/vendors.js

+70
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/vj4.css

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/vj4.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

templates/components/nothing.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{% macro render(text, compact = false) %}
2+
<div class="nothing-placeholder{% if compact %} compact{% endif %}">
3+
<div class="nothing-icon"></div>
4+
{{ _(text) }}
5+
</div>
6+
{% endmacro %}

templates/components/paginator.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{% macro render(page, num_pages, add_qs = '') %}
2+
{% if num_pages > 0 %}
3+
<ul class="pager">
4+
{% for type, page0 in paginate(page, num_pages) %}
5+
<li>
6+
{% if type == 'first' %}
7+
<a class="pager__item first link" href="?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}">{{ _('pager_first') }}</a>
8+
{% elif type == 'previous' %}
9+
<a class="pager__item previous link" href="?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}">{{ _('pager_previous') }}</a>
10+
{% elif type == 'ellipsis' %}
11+
<span class="pager__item ellipsis">...</span>
12+
{% elif type == 'page' %}
13+
<a class="pager__item page link" href="?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}">{{ page0 }}</a>
14+
{% elif type == 'current' %}
15+
<span class="pager__item current">{{ page0 }}</span>
16+
{% elif type == 'next' %}
17+
<a class="pager__item next link" href="?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}">{{ _('pager_next') }}</a>
18+
{% elif type == 'last' %}
19+
<a class="pager__item last link" href="?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}">{{ _('pager_last') }}</a>
20+
{% endif %}
21+
</li>
22+
{% endfor %}
23+
</ul>
24+
{% endif %}
25+
{% endmacro %}

templates/components/path.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{% macro render(title, path_components = []) %}
2+
<div class="location" data-fragment-id="path">
3+
<div class="row">
4+
<div class="columns">
5+
<div class="media">
6+
<div class="media__body">
7+
<div class="location-path">
8+
{% for c in path_components %}
9+
/<a href="{{ c.url | default('#') }}">{{ c.name }}</a>
10+
{%- endfor %}
11+
</div>
12+
<h1 class="location-current" data-emoji-enabled>{{ title }}</h1>
13+
</div>
14+
<div class="media__right">
15+
{% include "partials/hamburger.html" %}
16+
</div>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
{% endmacro %}

templates/components/user.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{% macro render_inline(udoc, avatar = true, badge = true, modbadge = true) %}
2+
<span class="user-profile-link">
3+
{% if avatar %}
4+
<img class="small user-profile-avatar v-center" src="{{ udoc.gravatar }}" width="20" height="20">
5+
{% endif %}
6+
<a class="user-profile-name" href="/user/{{ udoc._id.toHexString() }}">
7+
{{ udoc.uname }}
8+
</a>
9+
{% if modbadge and user.hasPerm(PERM_ADMIN) %}
10+
<span class="user-profile-badge v-center badge--mod" title="Moderator">MOD</span>
11+
{% endif %}
12+
</span>
13+
{% endmacro %}

templates/create.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1+
{% set title = _("Create new thread") %}
12
{% extends "layout/basic.html" %}
2-
{% block body %}
3+
{% block content %}
34
{% if user.hasPerm(PERM_THREAD_CREATE) %}
4-
<h1>Create New Thread</h1>
55
<form method="POST">
6-
Title:<input type="text" name="title"/>
7-
Content:<input type="text" name="content"></input>
6+
Title:<input type="text" name="title"/>
7+
Content:<input type="text" name="content"></input>
88
<button type="submit">Create</button>
99
</form>
1010
{% else %}

templates/index.html

+22-13
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
1+
{% set title = "Sayobot BBS" %}
2+
{% set path_components = [
3+
{
4+
url: '/',
5+
name: 'Home'
6+
}
7+
] %}
18
{% extends "layout/basic.html" %}
2-
{% block body %}
3-
<h1>Sayobot BBS</h1>
4-
<br/>
5-
{% if user._id.toString() == UID_GUEST.toString() %}
6-
<a href="/login">Login</a>
7-
<a href="/register">Register</a>
8-
{% else %}
9-
Logged in as {{ user.uname }} <a href="/logout">Logout</a>
10-
{% endif %}
11-
<br/>
12-
{% for category in categories %}
13-
<a href="/{{ category.id }}">{{ category.name }}</a>
14-
{% endfor %}
9+
{% block content %}
10+
<div class="row">
11+
<div class="medium-9 columns">
12+
<div class="section">
13+
<div class="section__header">
14+
<h1 class="section__title">{{ _('Categories') }}</h1>
15+
</div>
16+
<div class="section__body">
17+
{% for category in categories %}
18+
<a href="/{{ category.id }}">{{ category.name }}</a>
19+
{% endfor %}
20+
</div>
21+
</div>
22+
</div>
23+
</div>
1524
{% endblock %}

templates/layout/basic.html

+175-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,175 @@
1-
<html>
2-
3-
<head>
4-
<meta charset="utf8">
5-
</meta>
6-
<title>{{title}}</title>
7-
</head>
8-
9-
<body>
10-
{% block body %}{% endblock %}
11-
</body>
12-
13-
</html>
1+
{% set layout_name = "basic" %}
2+
{% import "components/path.html" as path %}
3+
{% extends "layout/html5.html" %}
4+
{% block body %}
5+
<nav class="nav slideout-menu" id="menu">
6+
<div class="row">
7+
<div class="columns clearfix">
8+
<ol class="nav__list nav__list--main clearfix">
9+
<li class="nav__list-item">
10+
<a href="/" class="nav__logo">&nbsp;</a>
11+
</li>
12+
</ol>
13+
<ol class="nav__list nav__list--secondary clearfix">
14+
{% if user
15+
._id
16+
.toHexString() == '000000000000000000000000' %}
17+
<li class="nav__list-item">
18+
<a href="/login" class="nav__item" name="nav_login">{{ _('Login') }}</a>
19+
</li>
20+
<li class="nav__list-item">
21+
<a href="/register" class="nav__item--round">{{ _('Sign Up') }}</a>
22+
</li>
23+
{% else %}
24+
<li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-user" data-dropdown-trigger-desktop-only>
25+
<a href="/user/{{ user._id.toHexString() }}" class="nav__item">{{ user.uname }}
26+
<span class="icon icon-expand_more nojs--hide"></span></a>
27+
<ol class="dropdown-target menu" id="menu-nav-user">
28+
<li class="menu__item">
29+
<a href="/user/{{ user._id.toHexString() }}" class="menu__link">
30+
<span class="icon icon-account--circle"></span>
31+
{{ _('My Profile') }}
32+
</a>
33+
</li>
34+
<li class="menu__item">
35+
<a href="/_/messages" class="menu__link">
36+
<span class="icon icon-comment--multiple"></span>
37+
{{ _('home_messages') }}
38+
</a>
39+
</li>
40+
<li class="menu__seperator"></li>
41+
<li class="menu__item">
42+
<a href="/_/account" class="menu__link">
43+
<span class="icon icon-wrench"></span>
44+
{{ _('home_account') }}
45+
</a>
46+
</li>
47+
<li class="menu__seperator"></li>
48+
<li class="menu__item">
49+
<a href="/logout" class="menu__link" name="nav_logout">
50+
<span class="icon icon-logout"></span>
51+
{{ _('Logout') }}
52+
</a>
53+
</li>
54+
</ol>
55+
</li>
56+
{% endif %}
57+
</ol>
58+
</div>
59+
</div>
60+
</nav>
61+
<nav class="nav--shadow"></nav>
62+
<div class="slideout-panel" id="panel">
63+
<div class="slideout-overlay"></div>
64+
<div class="header{% if no_path_section %} mini{% endif %}">
65+
<div class="header__content">
66+
<div class="row">
67+
<div class="columns">
68+
<a class="header__logo" href="/" target="_self"></a>
69+
</div>
70+
</div>
71+
</div>
72+
{{ path.render(title,path_components) }}
73+
</div>
74+
<div class="main">
75+
{% block content %}{% endblock %}
76+
</div>
77+
<div class="footer">
78+
<div class="row">
79+
<div class="columns">
80+
{% if show_topics | default(true) %}
81+
<div class="row footer__links">
82+
<div class="medium-3 large-2 columns footer__category expandable">
83+
<h1>
84+
{{ _('Status') }}
85+
<span class="expand-icon">
86+
<span class="icon icon-expand_more"></span>
87+
</span>
88+
</h1>
89+
<div class="footer__category__expander">
90+
<ul class="footer__category__list">
91+
<li class="footer__category__item">
92+
<a href="#">{{ _('Service Status') }}</a>
93+
</li>
94+
</ul>
95+
</div>
96+
</div>
97+
<div class="medium-3 large-2 columns footer__category expandable">
98+
<h1>
99+
{{ _('Development') }}
100+
<span class="expand-icon">
101+
<span class="icon icon-expand_more"></span>
102+
</span>
103+
</h1>
104+
<div class="footer__category__expander">
105+
<ul class="footer__category__list">
106+
<li class="footer__category__item">
107+
<a href="https://github.com/sayobot-dev/bbs" target="_blank">{{ _('Open Source') }}</a>
108+
</li>
109+
</ul>
110+
</div>
111+
</div>
112+
</div>
113+
{% endif %}
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
<div class="dialog dialog--signin" style="display:none">
119+
<div class="dialog__content">
120+
<div class="dialog--signin__bg">
121+
<div class="dialog--signin__side">
122+
<h1>{{ _("Don't have an account?") }}</h1>
123+
<p>{{ _('By signing up a Sayobot universal account, you can (???).') }}</p>
124+
<div>
125+
<a href="/register" class="inverse rounded button">{{ _('Sign Up Now') }}</a>
126+
</div>
127+
</div>
128+
</div>
129+
<div class="dialog--signin__main">
130+
<form action="/login" method="post">
131+
<div class="dialog--signin__close-container supplementary">
132+
<a name="dialog--signin__close" href="javascript:;">{{ _('CLOSE') }}</a>
133+
</div>
134+
<h1 class="dialog--signin__title">{{ _('SIGN IN') }}</h1>
135+
<p class="dialog--signin__note">{{ _('Using your Sayobot universal account') }}</p>
136+
<div class="row">
137+
<div class="columns">
138+
<label class="material textbox">
139+
{{ _('Username') }}
140+
<input name="username" type="text" data-autofocus>
141+
</label>
142+
</div>
143+
</div>
144+
<div class="row">
145+
<div class="columns">
146+
<label class="material textbox">
147+
{{ _('Password') }}
148+
<input name="password" type="password">
149+
</label>
150+
</div>
151+
</div>
152+
<div class="row">
153+
<div class="columns">
154+
<label class="checkbox">
155+
<input type="checkbox" name="rememberme">{{ _('Remember me') }}
156+
</label>
157+
</div>
158+
</div>
159+
<div class="row">
160+
<div class="columns">
161+
<input type="submit" value="{{ _('Sign In') }}" class="expanded rounded primary button">
162+
</div>
163+
</div>
164+
<div class="row">
165+
<div class="columns">
166+
<div class="supplementary text-center">
167+
<a href="/lostpass">{{ _('Forgot password or username?') }}</a>
168+
</div>
169+
</div>
170+
</div>
171+
</form>
172+
</div>
173+
</div>
174+
</div>
175+
{% endblock %}

0 commit comments

Comments
 (0)