password -> unlock for better communication of intent

src/lib/components/Security/SetPasswordContainer.svelte

@@ -3,14 +3,14 @@
 	import Container from '../Utils/Container.svelte';
 </script>
 
-<Container heading="Set A Password">
+<Container heading="Set An Unlock Code">
 	<p class="mt-3">
 		In order to secure your identity and other sensitive data that is stored in your browser, we
-		need you to set a password.
+		need you to set an unlock code.
 	</p>
 	<p class="my-3">
-		This password is only used locally, there is no username and password for your account, so don't
-		forget to <a
+		This unlock code is only used locally, there is no username and password for your account, so
+		don't forget to <a
 			class="link"
 			href="/settings/identity/backup"
 			title="Backup Identity">backup your identity</a

src/routes/Footer.svelte

@@ -45,7 +45,7 @@
 		const modal: ModalSettings = {
 			type: 'prompt',
 			title: 'Unlock',
-			body: 'Enter your password to unlock your keystores',
+			body: 'Enter your code to unlock your keystores',
 			value: '',
 			valueAttr: { type: 'password', minlength: 4, required: true },
 			response: async (r: string) => {
@@ -70,8 +70,7 @@
 
 <div
 	class="card p-4 w-72 shadow-xl"
-	data-popup="popupMenu"
->
+	data-popup="popupMenu">
 	<nav class="list-nav">
 		<ul>
 			<li id="will-close">
@@ -118,16 +117,14 @@
 			<TabAnchor
 				href="/chat"
 				selected={$page.url.pathname === '/chat'}
-				title="Chat"
-			>
+				title="Chat">
 				<svelte:fragment slot="lead"><Chat class="rail-icon" /></svelte:fragment>
 				<span>Chat</span>
 			</TabAnchor>
 		{:else}
 			<TabAnchor
 				on:click={drawerOpen}
-				title="Select Room"
-			>
+				title="Select Room">
 				<svelte:fragment slot="lead"><Door class="rail-icon" /></svelte:fragment>
 				<span>Select Room</span>
 			</TabAnchor>
@@ -137,8 +134,7 @@
 				{#if $keyStore instanceof CryptoKey}
 					<TabAnchor
 						on:click={lock}
-						title="Unlocked, click to lock"
-					>
+						title="Unlocked, click to lock">
 						<svelte:fragment slot="lead">
 							<LockOpen class="rail-icon text-warning-300-600-token" />
 						</svelte:fragment>
@@ -147,8 +143,7 @@
 				{:else}
 					<TabAnchor
 						on:click={unlock}
-						title="Locked"
-					>
+						title="Locked">
 						<svelte:fragment slot="lead">
 							<Lock class="rail-icon text-success-500" />
 						</svelte:fragment>
@@ -161,8 +156,7 @@
 		<TabAnchor
 			href="/signup"
 			selected={$page.url.pathname === '/signup'}
-			title="SignUp"
-		>
+			title="SignUp">
 			<svelte:fragment slot="lead"><Mask class="rail-icon" /></svelte:fragment>
 			<span>SignUp</span>
 		</TabAnchor>
@@ -170,8 +164,7 @@
 	<a
 		class="tab-anchor text-center cursor-pointer transition-colors duration-100 flex-1 lg:flex-none px-4 py-2 rounded-tl-container-token rounded-tr-container-token hover:variant-soft-primary"
 		title="Menu"
-		use:popup={popupMenu}
-	>
+		use:popup={popupMenu}>
 		<Menu class="rail-icon" />
 		<span>Menu</span>
 	</a>

src/routes/Sidebar.svelte

@@ -25,7 +25,7 @@
 		const modal: ModalSettings = {
 			type: 'prompt',
 			title: 'Unlock',
-			body: 'Enter your password to unlock your keystores',
+			body: 'Enter your code to unlock your keystores',
 			value: '',
 			valueAttr: { type: 'password', minlength: 4, required: true },
 			response: async (r: string) => {
@@ -46,8 +46,7 @@
 	<AppRailAnchor
 		href="/about"
 		selected={$page.url.pathname === '/about'}
-		title="About"
-	>
+		title="About">
 		<svelte:fragment slot="lead"><Information class="rail-icon" /></svelte:fragment>
 		<span>About</span>
 	</AppRailAnchor>
@@ -56,8 +55,7 @@
 		<AppRailAnchor
 			href="/chat"
 			selected={$page.url.pathname === '/chat'}
-			title="Chat"
-		>
+			title="Chat">
 			<svelte:fragment slot="lead"><Chat class="rail-icon" /></svelte:fragment>
 			<span>Chat</span>
 		</AppRailAnchor>
@@ -65,8 +63,7 @@
 		<AppRailAnchor
 			href="/gateways"
 			selected={$page.url.pathname === '/gateways'}
-			title="About"
-		>
+			title="About">
 			<svelte:fragment slot="lead"><Plus class="rail-icon" /></svelte:fragment>
 			<span>Join More</span>
 		</AppRailAnchor>
@@ -75,8 +72,7 @@
 			<AppRailAnchor
 				href="/console"
 				selected={$page.url.pathname === '/console'}
-				title="About"
-			>
+				title="About">
 				<svelte:fragment slot="lead"><Console class="rail-icon" /></svelte:fragment>
 				<span>Console</span>
 			</AppRailAnchor>
@@ -85,8 +81,7 @@
 			<AppRailAnchor
 				href="/admin"
 				selected={$page.url.pathname === '/admin'}
-				title="About"
-			>
+				title="About">
 				<svelte:fragment slot="lead"><ShieldCrown class="rail-icon" /></svelte:fragment>
 				<span>Admin</span>
 			</AppRailAnchor>
@@ -95,8 +90,7 @@
 		<AppRailAnchor
 			href="/signup"
 			selected={$page.url.pathname === '/signup'}
-			title="Sign Up"
-		>
+			title="Sign Up">
 			<svelte:fragment slot="lead"><Mask class="rail-icon" /></svelte:fragment>
 			<span>Sign Up</span>
 		</AppRailAnchor>
@@ -109,8 +103,7 @@
 				{#if $keyStore instanceof CryptoKey}
 					<AppRailAnchor
 						on:click={lock}
-						title="Unlocked, click to lock"
-					>
+						title="Unlocked, click to lock">
 						<svelte:fragment slot="lead">
 							<LockOpen class="rail-icon text-warning-300-600-token" />
 						</svelte:fragment>
@@ -119,8 +112,7 @@
 				{:else}
 					<AppRailAnchor
 						on:click={unlock}
-						title="Locked"
-					>
+						title="Locked">
 						<svelte:fragment slot="lead">
 							<Lock class="rail-icon text-success-500" />
 						</svelte:fragment>
@@ -133,8 +125,7 @@
 				<AppRailAnchor
 					href="/settings"
 					selected={$page.url.pathname === '/settings'}
-					title="Settings"
-				>
+					title="Settings">
 					<svelte:fragment slot="lead"><Settings class="rail-icon" /></svelte:fragment>
 					<span>Settings</span>
 				</AppRailAnchor>

src/routes/chat/ChatRoom.svelte

@@ -37,6 +37,7 @@
 	let onlineMembers = '?';
 	let epochUpdater: NodeJS.Timeout;
 	let currentEpoch = 0;
+	let key: CryptoKey | undefined = undefined;
 	$: timeLeftInEpoch = '0';
 	$: roomId = $currentSelectedRoom?.roomId!.toString();
 	$: userMessageLimit = $currentSelectedRoom?.userMessageLimit ?? 1;
@@ -50,6 +51,9 @@
 
 	let unsubscribeStore = currentSelectedRoom.subscribe((currentValue) => {
 		updateMessages($selectedServer, roomId);
+		getKey().then((k) => {
+			key = k;
+		});
 	});
 
 	$: try {
@@ -160,6 +164,9 @@
 		epochUpdater = setInterval(() => {
 			updateEpoch();
 		}, 100);
+		getKey().then((k) => {
+			key = k;
+		});
 	});
 
 	onDestroy(() => {

src/routes/signup/+page.svelte

@@ -36,7 +36,7 @@
 		const modal: ModalSettings = {
 			type: 'prompt',
 			title: 'Unlock',
-			body: 'Enter your password to unlock your keystores',
+			body: 'Enter your code to unlock your keystores',
 			value: '',
 			valueAttr: { type: 'password', minlength: 4, required: true },
 			response: async (r: string) => {