🚀RELEASE 0.3.2

closes #1

CHANGELOG.md

@@ -2,9 +2,91 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.3.2](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.3.1...0.3.2)
+
+- Added code to createurl component [`59a411b`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/59a411bab5462710109767dfccb90a0f0459b2dd)
+- More basics for the shorturl creation module [`515370e`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/515370eac7ff5f018cae5ec790ccc8e90c025718)
+- added display logic for the basic elements [`cc5cb27`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/cc5cb2782f20c4a7ab480132217463a0f4a9a956)
+- Added basics for error handling on url creation [`c5c8514`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/c5c8514bab9615c90de8b5fb1f9a5925f752b28b)
+- Basics for the new url creation component [`5329c4e`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/5329c4e1219a1cd3c8f1b5c0bdf02cb22330fd72)
+- Added adding url functionality to apiclient [`0c629e2`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/0c629e241668e1809d9616e9f7cb6ba804ad4c53)
+- Tmp removed the createurl component from index until it works [`ea6bd07`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/ea6bd074a12ed4a43d30b1e9bacbe12bc6f97356)
+- Now only using odit registry hosted images to speed up the build [`3a82caa`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/3a82caad95eb99dac71e01dc02e3fdafe17ef6da)
+- Switched to our own brotli nginx build [`19e08bc`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/19e08bc52cc6a9c73e4b2d42d612d3ea7401f108)
+- Added url creation component to dashboard [`a50a286`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/a50a28622ac4904e611a0bdaa3f2997192bf75ca)
+
+#### [0.3.1](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.3.0...0.3.1)
+
+> 21 August 2021
+
+- 🚀RELEASE 0.3.1 [`912e0b7`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/912e0b70a2bcf5100901d3d6faf9806238ed317f)
+- Removed length check [`7da2228`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/7da22287ff00b9403d2458b486c5289e7b389415)
+
+#### [0.3.0](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.2.4...0.3.0)
+
+> 21 August 2021
+
+- Added new "visits" page [`b655ff2`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/b655ff2372655d1fb7fa6cea8a10b193805f315c)
+- Added visits overview to sidebar [`36de0a3`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/36de0a3eb305317c829bace18a9661308c8cf0f3)
+- 🚀RELEASE 0.3.0 [`5f81f55`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/5f81f559876328f57b947e7c19d236e45fbf25c0)
+- Added apiclient method [`839c658`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/839c65807524646c1c6a677f10042988fb2bccdf)
+- Added safeguard for random updates [`8bcab46`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/8bcab4661bec3c748cc65078e5187d936be9cdf9)
+- Fixed link to details [`f2ec827`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/f2ec82762e9bc107f29952709555bc3d893def49)
+- Enabled y scrolling (whyever that was disabled...) [`0327bdc`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/0327bdc7a0cefda343168c911faa51cd42271673)
+- Fixed typo in visits query [`b3b6731`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/b3b6731c09d47fff9df96903c75914e7042e28c5)
+- Missing copy-paste :D [`12aa8ee`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/12aa8eeb3e345ccee10bdb6abca93c5fd84a071a)
+
+#### [0.2.4](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.2.3...0.2.4)
+
+> 21 August 2021
+
+- 🚀RELEASE 0.2.4 [`58adc65`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/58adc6511aa1ee573abcf21a176131bf10354747)
+- Fixed logout redirect [`29c4b00`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/29c4b0013abb0466f59239ae3717f60216cecc1f)
+- Fixed details link [`8ed16ad`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/8ed16adeffed9e1368615caf6022d8a376337b8a)
+
+#### [0.2.3](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.2.2...0.2.3)
+
+> 21 August 2021
+
+- 🚀RELEASE 0.2.3 [`09219ff`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/09219ff7987e6088245d8a871e3a5aaca3f855fd)
+- Updated login text color [`d9cd552`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/d9cd552c89415625c22c1adcb892c5a789823ce9)
+- Fixed login replace [`2b82f87`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/2b82f8798cd23f15dc48a5375dc1f5ad1a3abbfd)
+
+#### [0.2.2](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.2.1...0.2.2)
+
+> 21 August 2021
+
+- 🚀RELEASE 0.2.2 [`d971513`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/d9715139cf0c5583cb1db43953c34e3293345f68)
+- Fixxed routing links [`c731323`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/c731323b0bd1b757297b601e7bbc3f5034c04e9c)
+
+#### [0.2.1](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.2.0...0.2.1)
+
+> 21 August 2021
+
+- 🚀RELEASE 0.2.1 [`0d8db9f`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/0d8db9f41f84ccaba3211d61e6521d57f43e1b88)
+- Static links (yay) [`6706c9b`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/6706c9b0d1e396b0c6df6bb9b05d2d25c2a45cba)
+
+#### [0.2.0](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.1.3...0.2.0)
+
+> 21 August 2021
+
+- Added comments to fix [`#1`](https://git.odit.services/kauft.es/linkylinky-dashboard/issues/1)
+- More userstore fixes [`84ab757`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/84ab757e1159eac3cd160aac158873deaf51bb3f)
+- Added comments to apiclient [`47f7583`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/47f75836597ff13a32660e03d61629ddd173f86c)
+- No longer showing logged out users the profile pic thingy [`2010cc3`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/2010cc326019085ca37fcdc8b8dab8445006b6fa)
+- Weired fucking fix for the userstore data not being instantly loaded.... [`cd3508d`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/cd3508dcb61f165a7c83d6f0f9332f799677cb9f)
+- 🚀RELEASE 0.2.0 [`0dc6fe6`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/0dc6fe670498b6d1022a1ef6c4e5c4b3fcd7e352)
+- First mitigations for localforage error stuff [`4f5b7f3`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/4f5b7f38fb625e4da0ea3f432df958029ee8d25c)
+- Now ignoring status on logout [`8c1a2d3`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/8c1a2d319b9fb6e63c3e27163392bad1becba8dd)
+- Removed unused function [`b57aa53`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/b57aa535de94e22f19754b729cc6b63166a07a9d)
+- Removed useless console log [`5f82c5b`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/5f82c5bef8011bd7cee853bde76433585d93b88b)
+
 #### [0.1.3](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.1.2...0.1.3)
 
+> 18 August 2021
+
 - Tmp fix for the build fail, for more info see: https://github.com/sveltejs/kit/issues/2230 [`b160ab0`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/b160ab04b8324daa6389c947356bc58c865059aa)
+- 🚀RELEASE 0.1.3 [`c34f45c`](https://git.odit.services/kauft.es/linkylinky-dashboard/commit/c34f45ca6f8a7fe955e8d82f0f2c10b3cdfd54ce)
 
 #### [0.1.2](https://git.odit.services/kauft.es/linkylinky-dashboard/compare/0.1.1...0.1.2)
 

Dockerfile

@@ -1,10 +1,10 @@
-FROM library/node:16-alpine
+FROM registry.odit.services/hub/library/node:16-alpine
 WORKDIR /app
 COPY package.json ./
 RUN yarn
 COPY ./ ./
 RUN yarn build
 
-FROM fholzer/nginx-brotli:v1.19.1
+FROM registry.odit.services/library/nginx-brotli:3.13
 COPY --from=0 /app/build /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/nginx.conf

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/linkylinky-dashboard",
-	"version": "0.1.3",
+	"version": "0.3.2",
 	"scripts": {
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",

src/lib/Apiclient.js

@@ -1,3 +1,4 @@
+import { data } from 'autoprefixer';
 import axios from 'axios';
 import UserStore from './UserStore';
 
@@ -11,12 +12,21 @@ axios.interceptors.response.use(response => {
 });
 
 export default class Apiclient {
+
+	/**
+	 * API-Getter for the linkylinky api stats endpoint
+	 * @returns Current linkylinky stats (url count, total visits)
+	 */
 	static async getStats() {
 		return (
 			await axios.get('https://kauft.es/api/stats')
 		).data;
 	}
 
+	/**
+	 * API-Getter for the linkylinky api all urls endpoint (needs auth)
+	 * @returns All urls with shortcode, target, full url and visits in an array of objects
+	 */
 	static async getUrls() {
 		return (
 			await axios.get('https://kauft.es/api?showVisits=true', {
@@ -25,7 +35,13 @@ export default class Apiclient {
 		).data;
 	}
 
+	/**
+	 * API-Getter for the linkylinky api url details endpoint (needs auth)
+	 * @param {*} shortcode The shortcode of your favourite url
+	 * @returns Url shortcode, target, full url and visit count in an object
+	 */
 	static async getUrlDetails(shortcode) {
+		//TODO: Handle 404
 		return (
 			await axios.get(`https://kauft.es/api/${shortcode}`, {
 				headers: { Authorization: `Bearer ${UserStore.state.token}` }
@@ -33,7 +49,13 @@ export default class Apiclient {
 		).data;
 	}
 
+	/**
+	 * API-Getter for the linkylinky api url vists endpoint (needs auth)
+	 * @param {*} shortcode The shortcode of your favourite url
+	 * @returns Url visit details as an object for each visits (r/n they only contain timestamps)
+	 */
 	static async getUrlVisits(shortcode) {
+		//TODO: Handle 404
 		return (
 			await axios.get(`https://kauft.es/api/${shortcode}/visits`, {
 				headers: { Authorization: `Bearer ${UserStore.state.token}` }
@@ -41,6 +63,44 @@ export default class Apiclient {
 		).data;
 	}
 
+	/**
+	 * API-Getter for the linkylinky api all vists endpoint (needs auth)
+	 * @returns Url visit details for each visit in an array of objects.
+	 */
+	static async getVisits() {
+		return (
+			await axios.get(`https://kauft.es/api/visits`, {
+				headers: { Authorization: `Bearer ${UserStore.state.token}` }
+			})
+		).data;
+	}
+
+	/**
+	 * Create a new shorturl via the api
+	 * @param {*} target The target (rediction) url for the new shorturl.
+	 * @param {*} shortcode A custom shortcode (if needed)
+	 * @returns The response data/error
+	 */
+	 static async createUrl(target, shortcode) {
+		const res = (
+			await axios.post(`https://kauft.es/api`, {
+				target,
+				shortcode
+			}, {
+				validateStatus: null
+			})
+		);
+		return {
+			status: res.status,
+			data: res.data
+		}
+	}
+
+	/**
+	 * API-Delet for the linkylinky api url deletion endpoint (needs auth)
+	 * @param {*} shortcode The shortcode of your most hated url
+	 * @returns Just a 204 (no matter if the url got deleted or didn't exist in the first place)
+	 */
 	static async deleteUrl(shortcode) {
 		return (
 			await axios.delete(`https://kauft.es/api/${shortcode}`, {
@@ -49,6 +109,12 @@ export default class Apiclient {
 		).status;
 	}
 
+	/**
+	 * Login and receive a JWT for future auth.
+	 * @param {*} username Your username (cleartext)
+	 * @param {*} password Your password (cleartext)
+	 * @returns A user login object containing your jwt
+	 */
 	static async login(username, password) {
 		return (
 			await axios.post(`https://kauft.es/api/auth/login`, {}, {
@@ -59,10 +125,16 @@ export default class Apiclient {
 		).data;
 	}
 
+	/**
+	 * Log yourself out -> Invalidates your current (and past) JWTs
+	 * @returns Done!
+	 */
 	static async logout() {
 		return (
 			await axios.post(`https://kauft.es/api/auth/logout`, {}, {
-				headers: { Authorization: `Bearer ${UserStore.state.token}` }
+				headers: { Authorization: `Bearer ${UserStore.state.token}`,
+				validateStatus: null
+			}
 			})
 		).data;
 	}

src/lib/CreateUrl.svelte

@@ -0,0 +1,123 @@
+<script>
+	import Apiclient from './Apiclient';
+
+	$: targetUrl = '';
+	$: customShortcode = '';
+	$: shortcode = '';
+	$: error = '';
+
+	function createUrl() {
+		console.log('here');
+		Apiclient.createUrl(targetUrl, shortcode).then((res) => {
+			console.log(res);
+			if (res.status != 200) {
+				error = res.data;
+			} else {
+				shortcode = res.data.shortcode;
+			}
+		});
+	}
+
+	function resetInput() {
+		error = '';
+		shortcode = '';
+		customShortcode = '';
+		targetUrl = '';
+	}
+</script>
+
+<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-100 pb-3">Create new url</h2>
+{#if error != ''}
+	<div class="rounded-md bg-red-100 p-4 hidden" id="error_container">
+		<div class="flex">
+			<div class="flex-shrink-0">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5 text-red-600"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</div>
+			<div class="ml-3">
+				<p class="text-sm font-medium text-red-800" id="error_text">
+					{error}
+				</p>
+			</div>
+			<div class="ml-auto pl-3">
+				<div class="-mx-1.5 -my-1.5">
+					<button
+						on:click={() => {
+							error = '';
+						}}
+						class="inline-flex bg-red-100 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600"
+					>
+						<span class="sr-only">Dismiss</span>
+						<svg
+							class="h-5 w-5"
+							x-description="Heroicon name: x"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							aria-hidden="true"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+{#if shortcode == ''}
+	<div>
+		<div class="mx-auto lg:w-1/3 w-full mt-1 flex rounded-md shadow-sm">
+			<input
+				type="url"
+				required
+				class="flex-1 min-w-0 block border rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
+				placeholder="https://target.url"
+			/>
+		</div>
+		<div class="mt-1 flex rounded-md shadow-sm mx-auto lg:w-1/3 w-full">
+			<span
+				class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 dark:bg-gray-900 dark:text-gray-300 text-gray-500 sm:text-sm dark:border-gray-600"
+			>
+				https://kauf.es/
+			</span>
+			<input
+				type="text"
+				class="flex-1 min-w-0 block w-full px-3 py-2 border-t border-b border-r rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
+				placeholder="custom_code"
+			/>
+		</div>
+	</div>
+{:else}
+	<!-- TODO: -->
+{/if}
+<div class="mt-3 mx-auto text-center lg:w-1/3 w-full">
+	{#if shortcode == ''}
+		<button
+			on:click={createUrl}
+			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
+		>
+			Create shorturl
+		</button>
+	{:else}
+		<button
+			on:click={resetInput}
+			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
+		>
+			Add another url
+		</button>
+	{/if}
+</div>

src/lib/Sidebar.svelte

@@ -1,22 +1,10 @@
 <script>
 	import UserStore from '$lib/UserStore';
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
-	import * as localForage from 'localforage';
 	import Apiclient from './Apiclient';
 
 	$: logged_in = false;
 
-	UserStore.init();
-	onMount(() => {
-		localForage.getItem('userdata', (err, value) => {
-			if (value) {
-				if (value.token) {
-					UserStore.login(value);
-				}
-			}
-		});
-	});
-
 	const unsubscribe = UserStore.subscribe((value) => {
 		logged_in = value.isLoggedIn;
 	});
@@ -58,7 +46,7 @@
 		<nav>
 			<a
 				class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200"
-				href="/"
+				href="./"
 			>
 				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path
@@ -78,7 +66,7 @@
 			{#if logged_in}
 				<a
 					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
-					href="/links"
+					href="./links"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -97,6 +85,33 @@
 
 					<span class="mx-4 font-medium">Manage Links</span>
 				</a>
+				<a
+					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
+					href="./visits"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+						/>
+					</svg>
+
+					<span class="mx-4 font-medium">All Visits</span>
+				</a>
 
 				<!-- <a
 					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
@@ -145,7 +160,7 @@
 			{:else}
 				<a
 					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
-					href="/login"
+					href="./login"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -167,13 +182,17 @@
 			{/if}
 		</nav>
 
+		{#if logged_in}
 			<div class="flex items-center px-4 -mx-2">
 				<img
 					class="object-cover mx-2 rounded-full h-9 w-9"
 					src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
 					alt="avatar"
 				/>
-			<h4 class="mx-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">John Doe</h4>
+				<h4 class="mx-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">
-		</div>
+					Username here
+				</h4>
+			</div>
+		{/if}
 	</div>
 </div>

src/lib/UserStore.js

@@ -46,7 +46,7 @@ const userStore = () => {
                 //
                 return state;
             });
-            location.replace("/");
+            location.replace("./");
         }
     };
 

src/routes/__layout.svelte

@@ -1,12 +1,31 @@
 <script>
 	import '../app.postcss';
 	import Sidebar from '$lib/Sidebar.svelte';
+	import UserStore from '$lib/UserStore';
+	import { onMount } from 'svelte';
+	import * as localForage from 'localforage';
+
+	/**
+	 * Master init for all things userstore, b/c async stuff somethimes does weired shit.
+	 * Yes i know this isn't the best way to implement this, but linkylinky dashboard is just a oneshot sideproject r/n.
+	*/	
+	onMount(() => {
+		UserStore.init();
+		localForage.getItem('userdata', (err, value) => {
+			if (value) {
+				if (value.token) {
+					UserStore.login(value);
+				}
+			}
+		});
+	});
+
 </script>
 
 <div style="min-height: 640px;" class="bg-white dark:bg-gray-800">
 	<div class="h-screen flex overflow-hidden">
 		<Sidebar />
-		<div class="px-4 py-8 flex flex-col w-0 flex-1 overflow-hidden">
+		<div class="px-4 py-8 flex flex-col w-0 flex-1 overflow-y-scroll">
 			<slot />
 		</div>
 	</div>

src/routes/details.svelte

@@ -1,8 +1,11 @@
 <script>
 	import { page } from '$app/stores';
 	import Apiclient from '$lib/Apiclient';
+	import UserStore from '$lib/UserStore';
+	import { onDestroy } from 'svelte';
 
 	let shortcode = $page.query.get('shortcode');
+
 	$: urlDetails = {
 		shortcode: 'Loading...',
 		url: 'Loading...',
@@ -10,13 +13,21 @@
 		visits: 'Loading...'
 	};
 	$: urlVisists = [];
+	let visitQuery;
 
+	// Yes i know this isn't the best way to implement this, but linkylinky dashboard is just a oneshot sideproject r/n.
+	const unsubscribe = UserStore.subscribe((value) => {
+		if (value.isLoggedIn) {
 			Apiclient.getUrlDetails(shortcode).then((res) => {
 				urlDetails = res;
 			});
-	let visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
+			visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
 				urlVisists = res;
 			});
+		}
+	});
+
+	onDestroy(unsubscribe);
 </script>
 
 <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Details: {shortcode}</h2>

src/routes/links.svelte

@@ -1,9 +1,21 @@
 <script>
 	import Apiclient from '$lib/Apiclient';
+	import UserStore from '$lib/UserStore';
+	import { onDestroy } from 'svelte';
+
 	$: urls = [];
-	let urlQuery = Apiclient.getUrls().then((res) => {
+	let urlQuery;
+
+	// Yes i know this isn't the best way to implement this, but linkylinky dashboard is just a oneshot sideproject r/n.
+	const unsubscribe = UserStore.subscribe((value) => {
+		if (value.isLoggedIn) {
+			urlQuery = Apiclient.getUrls().then((res) => {
 				urls = res;
 			});
+		}
+	});
+
+	onDestroy(unsubscribe);
 
 	function deleteUrl(shortcode) {
 		Apiclient.deleteUrl(shortcode).then(() => {
@@ -70,7 +82,7 @@
 								Delete
 							</button>
 							<a
-								href={`/details?shortcode=${url.shortcode}`}
+								href={`./details?shortcode=${url.shortcode}`}
 								class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:bg-blue-700"
 							>
 								Details

src/routes/login.svelte

@@ -7,12 +7,11 @@ import Apiclient from '$lib/Apiclient';
 	$: password = "";
 	$: error = "";
 
-	UserStore.init();
 	async function login() {
 		try {
 			const login = await Apiclient.login(username, password);
 			UserStore.login(login);
-			location.replace("/");
+			location.replace("./");
 		} catch (error) {
 			
 		}
@@ -31,7 +30,7 @@ import Apiclient from '$lib/Apiclient';
 
 			<div class="w-full mt-4">
 				<input
-					class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+					class="block w-full px-4 py-2 mt-2 text-gray-700 dark:text-gray-400 placeholder-gray-500 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
 					type="text"
 					placeholder="Username"
 					aria-label="Username"
@@ -41,7 +40,7 @@ import Apiclient from '$lib/Apiclient';
 
 			<div class="w-full mt-4">
 				<input
-					class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+					class="block w-full px-4 py-2 mt-2 text-gray-700 dark:text-gray-400 placeholder-gray-500 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
 					type="password"
 					placeholder="Password"
 					aria-label="Password"

src/routes/visits.svelte

@@ -0,0 +1,69 @@
+<script>
+	import Apiclient from '$lib/Apiclient';
+	import UserStore from '$lib/UserStore';
+	import { onDestroy } from 'svelte';
+
+	$: visits = [];
+	let visitQuery;
+
+	// Yes i know this isn't the best way to implement this, but linkylinky dashboard is just a oneshot sideproject r/n.
+	const unsubscribe = UserStore.subscribe((value) => {
+		if (value.isLoggedIn) {
+			visitQuery = Apiclient.getVisits().then((res) => {
+				visits = res;
+			});
+		}
+	});
+
+	onDestroy(unsubscribe);
+</script>
+
+<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">View all visits</h2>
+<div class="rounded-xl">
+	<table class="min-w-full divide-y divide-gray-200">
+		<thead class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
+			<tr>
+				<th scope="col" class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">
+					Shortcode
+				</th>
+				<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
+					Provider
+				</th>
+				<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
+					Timestamp
+				</th>
+			</tr>
+		</thead>
+		<tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:text-gray-100" x-max="1">
+			{#await visitQuery}
+				<tr>
+					<td
+						class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
+					>
+						Loading data...
+					</td>
+					<td class="px-6 py-4 whitespace-nowrap text-sm"> Loading data... </td>
+					<td class="px-6 py-4 whitespace-nowrap text-sm"> Loading data... </td>
+				</tr>
+			{:then}
+				{#each visits as visit}
+					<tr>
+						<td
+							class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
+						>
+                            {#if visit.provider == "native"}
+							<a href={`./details?shortcode=${visit.shortcode}`}>{visit.shortcode}</a>
+                            {:else}
+                                {visit.shortcode}
+                            {/if}
+						</td>
+						<td class="px-6 py-4 whitespace-nowrap text-sm">
+							{visit.provider}
+						</td>
+						<td class="px-6 py-4 whitespace-nowrap text-sm"> {visit.timestamp} </td>
+					</tr>
+				{/each}
+			{/await}
+		</tbody>
+	</table>
+</div>