auth stuff

site/src/components/inline-svg.html

@@ -102,4 +102,39 @@
 		<polyline points='17 21 17 13 7 13 7 21' />
 		<polyline points='7 3 7 8 15 8' />
 	</symbol>
+
+	<symbol id="link" class="icon" viewBox="0 0 24 24">
+		<!-- <path d="
+			M10.5,13.5
+			C8.5,11.5 9.5,11.5 9.5,10.5
+			C8,9 13,3.5, 16,3
+			C19,3 21,6 21,8
+			C21,9,20,9,19,11"/>
+
+		<path d="
+			M13.5,10.5
+			C15.5,13.5 14.5,13.5 14.5,13.5
+			C16,15 11,21.5, 8,21
+			C5,21 3,18 3,16
+			C3,15,4,15,5,13"/> -->
+
+		<path d="
+			M9,7
+			L6,7
+			A2 2 0 0 0 6,17
+			L9,17
+		"/>
+
+		<path d="
+			M15,7
+			L18,7
+			A2 2 0 0 1 18,17
+			L15,17
+		"/>
+
+		<path d="
+			M7,12
+			L17,12
+		"/>
+	</symbol>
 </svg>

site/src/routes/auth/me.json.js

@@ -0,0 +1,9 @@
+export function get(req, res) {
+	if (!req.session.passport || !req.session.passport.user) {
+		res.send(null);
+		return;
+	}
+
+	const { id, username, displayName, photo } = req.session.passport && req.session.passport.user;
+	res.send({ id, username, displayName, photo });
+}

site/src/routes/gist/[id].js

@@ -4,7 +4,15 @@ import { body } from './_utils.js';
 export async function get(req, res) {
 	const { id } = req.params;
 
-	const r = await fetch(`https://api.github.com/gists/${id}`);
+	const headers = {};
+	const user = req.session.passport && req.session.passport.user;
+	if (user) {
+		headers.Authorization = `token ${user.token}`;
+	}
+
+	const r = await fetch(`https://api.github.com/gists/${id}`, {
+		headers
+	});
 
 	res.writeHead(r.status, {
 		'Content-Type': 'application/json'

site/src/routes/index.html

@@ -131,7 +131,7 @@
 		</li>
 
 		<li class='box bg-flash white'>
-			<h2 style='padding:2.4rem 0 0 0'>No virtual DOM overhead</h2>
+			<h2 style='padding:2.4rem 0 0 0'>No virtual DOM</h2>
 			<p>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p>
 
 			<a href="TODO-blog-post-on-vdom-overhead">learn more</a>

site/src/routes/repl/_components/AppControls/UserMenu.html

@@ -1,7 +1,7 @@
 <script>
 	import { user, logout } from '../../../../user.js';
 
-	let showMenu = false;
+	let showMenu = true;
 	let name;
 
 	$: name = $user.displayName || $user.username;
@@ -13,7 +13,7 @@
 
 	{#if showMenu}
 		<div class="menu">
-			<button on:click={logout}>log out</button>
+			<button on:click={logout}>Log out</button>
 		</div>
 	{/if}
 </div>
@@ -21,46 +21,65 @@
 <style>
 	.user {
 		position: relative;
-		float: right;
-		display: block;
-		padding: .5em 2.2em 0 .8em;
+		display: inline-block;
+		padding: 0em 3.2rem 0 1.6rem;
 		line-height: 1;
 		z-index: 99;
-		height: 2.5em;
+	}
+
+	.user::after {
+		/* embiggen hit zone, so log out menu doesn't disappear */
+		position: absolute;
+		content: '';
+		width: 100%;
+		height: 3.2rem;
+		left: 0;
+		top: 0;
 	}
 
 	span {
 		/* position: relative; padding: 0 2em 0 0; */
 		line-height: 1;
 		display: inline-block;
-		padding: .05em 0;
-		font-family: Rajdhani;
-		font-weight: 400;
+		font-family: var(--font-ui);
+		font-size: 1.3rem;
+		opacity: 0.7;
+	}
+
+	.user:hover span {
+		opacity: 1;
 	}
 
 	img {
 		position: absolute;
-		top: .2em;
+		top: -0.05em;
 		right: 0;
-		width: 1.6em;
-		height: 1.6em;
-		border-radius: 50%;
+		width: 2.4rem;
+		height: 2.4rem;
+		border: 1px solid rgba(255,255,255,0.3);
+		border-radius: 0.2rem;
 	}
 
 	.menu {
 		position: absolute;
-		min-width: calc(100% + .1em);
-		background-color: #f4f4f4;
-		padding: .5em;
+		width: calc(100% - 0rem);
+		top: 3rem;
+		left: 0rem;
+		background-color: var(--second);
+		padding: 0.8rem 1.6rem;
 		z-index: 99;
-		top: calc(2.5em - 1px);
-		border-bottom: 1px solid #eee;
-		border-left: 1px solid #eee;
-		right: 0;
 		text-align: left;
+		border-radius: 0.4rem;
 	}
 
 	.menu button {
 		background-color: transparent;
+		font-family: var(--font-ui);
+		font-size: 1.3rem;
+		/* opacity: 0.7; */
+	}
+
+	.menu button:hover {
+		opacity: 1;
 	}
 </style>

site/src/routes/repl/_components/AppControls/index.html

@@ -29,8 +29,12 @@
 		return new Promise(f => setTimeout(f, ms));
 	}
 
+	$: {
+		console.log({ canSave });
+	}
+
 	let canSave;
-	$: canSave = !!$user && !!gist && $user.id == gist.owner.id; // comparing number and string
+	$: canSave = !!$user && !!gist && !!gist.owner && $user.id == gist.owner.id; // comparing number and string
 
 	function handleKeydown(event) {
 		if (event.which === 83 && (isMac ? event.metaKey : event.ctrlKey)) {
@@ -268,7 +272,7 @@ export default app;` });
 
 		{#if gist}
 			<a class="icon" href={gist.html_url} title="link to gist">
-				<Icon name="save" />
+				<Icon name="link" />
 			</a>
 		{/if}
 

site/src/routes/repl/index.html

@@ -10,7 +10,9 @@
 
 	let version = query.version;
 	let demo = query.demo || 'hello-world';
-	let gist = query.gist;
+	let gist_id = query.gist;
+
+	let gist;
 
 	let app = {
 		components: [],
@@ -25,7 +27,7 @@
 		const params = [];
 
 		if (version !== 'latest') params.push(`version=${version}`);
-		if (gist) params.push(`gist=${gist}`);
+		if (gist_id) params.push(`gist=${gist_id}`);
 		else if (demo) params.push(`demo=${demo}`);
 
 		const url = params.length > 0
@@ -49,11 +51,14 @@
 				version = pkg.version;
 			});
 
-		if (gist) {
-			fetch(`gist/${gist}`).then(r => r.json()).then(({ description, files }) => {
+		if (gist_id) {
+			fetch(`gist/${gist_id}`).then(r => r.json()).then(data => {
+				gist = data;
+				const { id, description, files } = data;
+
 				name = description;
 
-				const values = {};
+				let values = {};
 
 				const components = Object.keys(files)
 					.map(file => {
@@ -103,10 +108,19 @@
 					values: tryParseData(data.json5) || {}, // TODO make this more error-resistant
 					components: data.components
 				};
+
+				gist = null;
 			}
 		});
 	}
 
+	function handle_fork(event) {
+		console.log(event);
+		demo = null;
+		gist = event.detail.gist;
+		gist_id = gist.id;
+	}
+
 	function tryParseData(json5) {
 		try {
 			return fleece.evaluate(json5);
@@ -189,7 +203,7 @@
 		{repl}
 		bind:zen_mode
 		on:select="{e => (demo = e.detail.slug, gist = null)}"
-		on:forked="{e => (demo = null, gist = e.detail.gist)}"
+		on:forked={handle_fork}
 	/>
 
 	{#if process.browser}

site/src/user.js

@@ -2,6 +2,15 @@ import { writable } from 'svelte/store.js';
 
 export const user = writable(null);
 
-export function logout() {
-	user.set(null);
+if (process.browser) {
+	// TODO this is a workaround for the fact that there's currently
+	// no way to pass session data from server to client
+	fetch('/auth/me.json', { credentials: 'include' })
+		.then(r => r.json())
+		.then(user.set);
+}
+
+export async function logout() {
+	const r = await fetch(`/auth/logout`, { method: 'POST' });
+	if (r.ok) user.set(null);
 }

site/static/workers/bundler.js

@@ -22,9 +22,10 @@ self.addEventListener('message', async event => {
 			if (event.data.components.length === 0) return;
 
 			await ready;
-			postMessage(
-				await bundle(event.data.components)
-			);
+			const result = await bundle(event.data.components);
+			if (result) {
+				postMessage(result);
+			}
 
 			break;
 	}
@@ -143,7 +144,10 @@ async function bundle(components) {
 			throw dom.error;
 		}
 
-		if (token !== currentToken) return;
+		if (token !== currentToken) {
+			console.error(`aborted`);
+			return;
+		}
 
 		cached.dom = dom.bundle;