WIP: added settings/profile page with basic information load

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

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)

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;
 }
 

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');

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: {
+	},
+}

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">
-	<div class="flex">
+	<div class="person flex">
 		<div><div class="avatar round">
 			<img class="round" src="{.from.avatar.url}"/>
 		</div></div>

web/src/app/js/templates/settings/profile.html

@@ -0,0 +1,36 @@
+<div id="settings-profile" class="panel center flex">
+	<div class="center content">
+		<div class="person flex">
+			<div class="width-max">
+				<div class="user-name">
+					<span class="bigname">{.account.name}</span>
+					<br>
+					<span class="acct" style="
+						position: relative;
+						top: 2px;
+						">@{.account.acct}</span>
+					<br><br><br>
+				</div>
+				<div class="prop" id="prop-place">
+					<i class="fa fa-map-marker fa-fw"
+						style="color: #e8864c">
+					</i>
+					<span>{.account.props.place}</span>
+				</div>
+				<div class="prop" id="prop-age">
+					<i class="fa fa-birthday-cake fa-fw"
+						style="color: #f46ac5">
+					</i>
+					<span><b>{.account.props.age}</b> {s:app.years_old}</span>
+				</div>
+			</div>
+			<div class="avatar-container">
+				<a href="#profile/{.account._id}">
+				<div class="big avatar round">
+					<img class="round" src="{.account.avatar.url}">
+				</div>
+				</a>
+			</div>
+		</div>
+	</div>
+</div>