From 5fa906270bdf00ba2ff6cfef4dbce2e1b134c3df Mon Sep 17 00:00:00 2001 From: Niko Date: Mon, 14 Mar 2022 22:00:21 +0100 Subject: [PATCH] WIP: added settings/profile page with basic information load --- api/src/api/me.js | 12 ++++++ api/src/server.js | 2 + web/src/app/css/app.css | 31 ++++++++++----- web/src/app/js/app.js | 1 + web/src/app/js/pages/settings.js | 39 +++++++++++++++++++ web/src/app/js/templates/home/quiz_item.html | 2 +- .../app/js/templates/settings/profile.html | 36 +++++++++++++++++ 7 files changed, 112 insertions(+), 11 deletions(-) create mode 100644 web/src/app/js/pages/settings.js create mode 100644 web/src/app/js/templates/settings/profile.html diff --git a/api/src/api/me.js b/api/src/api/me.js index d46aaff..2c8479c 100644 --- a/api/src/api/me.js +++ b/api/src/api/me.js @@ -206,6 +206,18 @@ module.exports = { return res.json({ result: 1 }) }], }, + profile: { + get: [auth.enforceSession, async (req, res) => { + const account = await api.accounts.getAccount(apID(res.locals.user.username)) + if (account === undefined) + return res.json({ error: 'unknown_error' }) + + var data = { user: res.locals.user, account } + delete data.user.password + delete data.account.username + return res.json(data) + }], + }, pending_follows: { get: [auth.enforceSession, async (req, res) => { let follows diff --git a/api/src/server.js b/api/src/server.js index faf4638..4fb9e26 100644 --- a/api/src/server.js +++ b/api/src/server.js @@ -71,6 +71,8 @@ app.on('apex-inbox', activity.federation.inbox) /* ALL */ app.route(api.v1('/me/quizs')) .get(api.me.quizs.get) .post(api.me.quizs.post) +/* ALL */ app.route(api.v1('/me/profile')) + .get(api.me.profile.get) /* POST */ app.route(api.v1('/accounts/follow')).post(api.accounts.follow.post) /* POST */ app.route(api.v1('/accounts/unfollow')).post(api.accounts.unfollow.post) /* POST */ app.route(api.v1('/accounts/block')).post(api.accounts.block.post) diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css index 0977698..e2e8114 100644 --- a/web/src/app/css/app.css +++ b/web/src/app/css/app.css @@ -90,6 +90,19 @@ img.avatar { top: -2px; margin-right: 3px; } +.person .prop { + margin-bottom: .8em; +} +.person .prop .fa { + font-size: 1.3em; + margin-right: .5em; + vertical-align: middle; + position: relative; + top: -2px; +} +.person .prop > span { + opacity: .6; +} .button.disabled { @@ -235,25 +248,21 @@ main { #quizs .name { font-size: 1.2em; } -#quizs .avatar.round, -#quiz .avatar.round { +.panel .person .avatar.round { padding: 3px; background: linear-gradient(30deg, #df00ff, pink, pink, #7c4cff); box-shadow: -6px 4px 0px #0000004f; } -#quizs .avatar.round.big, -#quiz .avatar.round.big { +.panel .person .avatar.round.big { width: 5em; height: 5em; } -#quizs .avatar img, -#quiz .avatar img { +.panel .person .avatar img { width: 3em; height: 3em; filter: brightness(120%); } -#quizs .avatar.big img, -#quiz .avatar.big img { +.panel .person .avatar.big img { width: 5em; height: 5em; } @@ -503,11 +512,13 @@ main { line-height: 2em; } -.item .acct { +.item .acct, +.person .acct { font-size: .8em; opacity: .7; } -.item .bigname { +.item .bigname, +.person .bigname { font-size: 1.5em; } diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js index 161d835..c5633d1 100644 --- a/web/src/app/js/app.js +++ b/web/src/app/js/app.js @@ -563,6 +563,7 @@ window.onload = function(e) { handle('pages.meet', 'meet'); handle('pages.crushes', /^crushes(\/you)?$/); handle('pages.quiz', /^quiz\/[^\/]+?$/); + handle('pages.settings', /^settings(\/.+)?/); } app.script('api'); diff --git a/web/src/app/js/pages/settings.js b/web/src/app/js/pages/settings.js new file mode 100644 index 0000000..61e3618 --- /dev/null +++ b/web/src/app/js/pages/settings.js @@ -0,0 +1,39 @@ +app.pages.settings = { + data: {}, + load: function(args) { + if (args.length > 1 && page().loaders[args[1]] !== undefined) + page().loaders[args[1]](args); + app.preload.home(); + }, + loaders: { + profile: function(args) { + const container = document.getElementById('app-container'); + container.innerHTML = ''; + app.template.loadMany(['settings.profile']); + http.get('/api/v1/me/profile',{}, async function(json) { + if (app.template.get('settings.profile') === undefined) + await waitUntil(function() { + return app.template.get('settings.profile') + !== undefined }, 10000, 50); + page().data.profile = json; + page().paint.profile(json); + }); + }, + }, + paint: { + profile: function(json) { + json = json || page().data.profile; + if (json.user === undefined) + return hashredir(); + if (app.template.get('settings.profile') === undefined) return; + + const container = document.getElementById('app-container'); + container.innerHTML = app.template.fill(json, app.template.get('settings.profile'), + function(k,v) { + if (k === 'account.name') return app.emoji.expand(capitalize(v)); + }); + }, + }, + actions: { + }, +} diff --git a/web/src/app/js/templates/home/quiz_item.html b/web/src/app/js/templates/home/quiz_item.html index 78f1d42..eac537e 100644 --- a/web/src/app/js/templates/home/quiz_item.html +++ b/web/src/app/js/templates/home/quiz_item.html @@ -2,7 +2,7 @@ onclick="app.pages.home.loadQuiz('{.id}')" onEnter="app.pages.home.loadQuiz('{.id}')" tabindex="0"> -
+
diff --git a/web/src/app/js/templates/settings/profile.html b/web/src/app/js/templates/settings/profile.html new file mode 100644 index 0000000..31e1a5a --- /dev/null +++ b/web/src/app/js/templates/settings/profile.html @@ -0,0 +1,36 @@ +
+
+
+
+
+ {.account.name} +
+ @{.account.acct} +


+
+
+ + + {.account.props.place} +
+
+ + + {.account.props.age} {s:app.years_old} +
+
+
+ +
+ +
+ +
+
+
+