Fix: flip show/hide icons for input type password & change password old svelte code

src/lib/clients/saferwall.ts

@@ -67,9 +67,12 @@ export class SaferwallClient {
 				"Content-Type": "application/json"
 			};
 		}
+		const _init = this.setAuthHeaders(init);
 		const _fetch = this.fetch ?? fetch;
+		// console.log(": " + urlString);
+		// console.log(JSON.stringify(_init, undefined, 4));
 		const response: any = await _fetch(urlString, 
-			this.setAuthHeaders(init)
+			_init
 		);
 
 		if (!response.ok) {

src/lib/components/LatestActivities.svelte

@@ -20,7 +20,7 @@
 <section class="latest__ space-y-4">
 	<h4 class="font-medium text-xl">Latest activities</h4>
 	{#if !activities || activities.length === 0}
-		<p>No activities available currently</p>
+		<p class="text-tertiary-text">No activities available currently</p>
 	{:else}
 		<div class="activities__ space-y-8 pt-6">
 			{#each activities as activity}

src/lib/components/cards/profile/FollowCard.svelte

@@ -3,9 +3,12 @@
 	import DateTime from '$lib/components/DateTime.svelte';
 	import ButtonFollow from '$lib/components/form/ButtonFollow.svelte';
 	import type { Saferwall } from '$lib/types';
+	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
 
 	export let loggedIn = false;
 	export let item: Saferwall.Activities.Follow;
+	let userStore: Writable<Saferwall.User | undefined> = getContext("user");
 </script>
 
 <article
@@ -20,7 +23,9 @@
 			</div>
 		</div>
 		<div class="z-30">
-			<ButtonFollow username={item.username} {loggedIn} followed={item.follow} />
+			{#if item.username !== $userStore?.username}
+				<ButtonFollow username={item.username} {loggedIn} followed={item.follow} />
+			{/if}
 		</div>
 	</div>
 	<a class="absolute opacity-0 z-10 inset-0" href="/users/{item.username}">

src/lib/components/form/ButtonFollow.svelte

@@ -12,16 +12,17 @@
 <form
 	action="/actions?/follow"
 	method="post"
-	use:enhance={({ data }) => {
+	use:enhance={({ formData }) => {
 		loading = true;
 
-		data.append('username', username);
-		data.append('follow', followed ? 'unfollow' : 'follow');
+		formData.append('username', username);
+		formData.append('follow', followed ? 'unfollow' : 'follow');
 
 		return async ({ result }) => {
 			loading = false;
 
 			if (result.type === 'success') {
+				// @ts-ignore
 				followed = result.data?.follow;
 			}
 		};

src/lib/components/form/Input.svelte

@@ -40,8 +40,8 @@
 	{#if isPassword}
 		<button class="password-icon outline-none border-none text-primary-icn flex items-center justify-center" type="button" on:click={onClick}>
 			<svg class="size-7">
-				<use href="/images/icons.svg#icon-password-visible" class:hidden={passwordVisible}/>
-				<use href="/images/icons.svg#icon-password-invisible" class:hidden={!passwordVisible}/>
+				<use href="/images/icons.svg#icon-password-visible" class:hidden={!passwordVisible}/>
+				<use href="/images/icons.svg#icon-password-invisible" class:hidden={passwordVisible}/>
 			</svg>
 		</button>
 	{/if}

src/lib/styles/vars.css

@@ -1,33 +1,10 @@
 :root {
 	/* old vars kept to not break old stuff */
 
-	--gray-100: light-dark(#27252c, #d3cfcf);
-	--gray-200: light-dark(#5f4cd9, #d3cfcf);
-	--gray-300: light-dark(#6f7077, #6a6b71);
-	--gray-400: light-dark(#bbbbbb, #6f7077);
-	--gray-500: light-dark(#9f9f9f, #66686f);
 	--gray-600: light-dark(#bababd, #53565e);
 	--gray-700: light-dark(#ededf6, #2c2c30);
-	--gray-800: light-dark(#f3f3f6, #2c2c30);
 
-	--neutral-100: light-dark(#1f1b1b, #ffffff);
-	/* - */
-	--neutral-500: light-dark(#d9d9d9, #373638);
-	--neutral-600: light-dark(#ffffff, #1a1a1a);
-	--neutral-700: light-dark(#e6e6e6, #292929);
-	--neutral-800: light-dark(#f2f1f3, #0d0d0d);
-	--neutral-900: light-dark(#ffffff, #0d0d0d);
-
-	--brand-500: light-dark(#5340ce, #5340ce);
-	--brand-400: light-dark(#5f4cd9, #5f4cd9);
 	--brand-200: light-dark(#f3f3f9, #242434);
-	--brand-300: light-dark(#f3f3f9, #f3f3f9);
-
-	--green-500: #49af30;
-
-	--orange-500: #ed8c1a;
-
-	--red-500: #ed4060;
 
 	--background: var(--neutral-800);
 

src/lib/types/saferwall.ts

@@ -60,7 +60,7 @@ export namespace Saferwall {
 		submissions_count: number;
 		likes: string[];
 		following: string[];
-		followers: string[];
+		followers: { username: string, ts: number }[];
 		last_seen: number;
 		member_since: number;
 	}

src/routes/(profile)/account/settings/tabs/ChangePasswordTab.svelte

@@ -15,29 +15,30 @@
 	method="post"
 	action="?/password"
 	class="space-y-4"
-	use:enhance={({ data, cancel }) => {
+	use:enhance={({ formData, cancel }) => {
 		errors = {};
 		error = '';
 		success = false;
 		loading = true;
 
-		if (data.get('confirm_password') !== data.get('new_password')) {
+		if (formData.get('confirm_password') !== formData.get('new_password')) {
 			errors.confirm_password = true;
 			error = "New password and confirm password don't match";
 
 			loading = false;
 			return cancel();
 		}
 
-		return async ({ result, form }) => {
+		return async ({ result, formElement }) => {
 			loading = false;
 			if (result.type == 'failure') {
+				// @ts-ignore
 				error = result.data?.message;
 			}
 
 			if (result.type == 'success') {
 				success = true;
-				form.reset();
+				formElement.reset();
 			}
 		};
 	}}

src/routes/(profile)/users/+layout.svelte

@@ -11,7 +11,7 @@
 	$: profile = data.profile;
 	$: loggedIn = data.user !== undefined;
 	$: selfProfile = data.user?.username === data.username;
-	$: followed = data.profile.followers?.includes(data.user?.username!);
+	$: followed = data.profile.followers?.filter((el) => el.username == data.user?.username).length !== 0;
 </script>
 
 <svelte:head>

src/routes/+layout.svelte

@@ -3,10 +3,19 @@
 	import "$lib/styles/vars.css";
 	import NProgress from "nprogress";
 	import { navigating } from "$app/stores";
-	import { onMount } from "svelte";
+	import { onMount, setContext } from "svelte";
 	import { browser } from "$app/environment";
 	import { isLight, parseTheme, Theme, theme } from "$lib/stores/theme";
 	import { THEME_KEY } from "$lib/config";
+	import type { LayoutServerData } from "./$types";
+	import { writable } from "svelte/store";
+	import type { Saferwall } from "$lib/types";
+
+	export let data: LayoutServerData;
+
+	const userStore = writable<Saferwall.User | undefined>(data?.user);
+	setContext("user", userStore)
+	$: $userStore = data.user;
 
 	NProgress.configure({
 		minimum: 0.16