Merge pull request #14 from jcreek/6-add-remember-me-functionality-for-names

6 add remember me functionality for names

src/app.html

@@ -4,9 +4,12 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon-32x32.png" />
 		<link rel="manifest" href="/site.webmanifest" />
-		<meta name="theme-color" content="#8D6A9F">
+		<meta name="theme-color" content="#8D6A9F" />
-		<meta name="description" content="A web app designed to assist scrum teams in performing estimations quickly and with minimal effort.">
+		<meta
-		<link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png">
+			name="description"
+			content="A web app designed to assist scrum teams in performing estimations quickly and with minimal effort."
+		/>
+		<link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
@@ -57,7 +60,19 @@
 			}
 
 			window.addEventListener('load', () => {
-				navigator.serviceWorker.register('%sveltekit.assets%/service-worker.js');
+				if ('serviceWorker' in navigator) {
+					navigator.serviceWorker.register('%sveltekit.assets%/service-worker.js').then(
+						function (registration) {
+							console.log(
+								'ServiceWorker registration successful with scope: ',
+								registration.scope
+							);
+						},
+						function (err) {
+							console.log('ServiceWorker registration failed: ', err);
+						}
+					);
+				}
 			});
 		</script>
 	</body>

src/components/Modal.svelte

@@ -3,6 +3,7 @@
 	export let joinRoom;
 
 	let userName = '';
+	let rememberName = false;
 
 	function handleNameChange(event) {
 		userName = event.target.value;
@@ -11,39 +12,60 @@
 	function handleSubmit() {
 		if (userName.trim() !== '') {
 			joinRoom(userName);
+			if (rememberName && typeof localStorage !== 'undefined') {
+				localStorage.setItem('userName', userName);
+			} else if (typeof localStorage !== 'undefined') {
+				localStorage.removeItem('userName');
+			}
 			closeModal();
 		}
 	}
+
+	function handleRememberChange(event) {
+		rememberName = event.target.checked;
+	}
+
+	$: userName = typeof localStorage !== 'undefined' ? localStorage.getItem('userName') || '' : '';
 </script>
 
-<div class="modal-overlay">
+<div class="modal-container">
-	<div class="modal">
+	<div class="modal-overlay">
-		<h2>Enter Your Name</h2>
+		<div class="modal">
-		<p>Try clicking on someone's card...</p>
+			<h2>Enter Your Name</h2>
-		<input
+			<p>Try clicking on someone's card...</p>
-			type="text"
+			<div class="input-container">
-			placeholder="Your name"
+				<input
-			bind:value={userName}
+					type="text"
-			on:input={handleNameChange}
+					placeholder="Your name"
-			on:keydown={(event) => {
+					bind:value={userName}
-				if (event.key === 'Enter') {
+					on:input={handleNameChange}
-					event.preventDefault();
+					on:keydown={(event) => {
-					handleSubmit();
+						if (event.key === 'Enter') {
-				}
+							event.preventDefault();
-			}}
+							handleSubmit();
-		/>
+						}
-		<button on:click={handleSubmit}>Save</button>
+					}}
+				/>
+				<label class="rememberme">
+					<input type="checkbox" bind:checked={rememberName} on:change={handleRememberChange} />
+					Remember my name
+				</label>
+			</div>
+			<div class="button-container">
+				<button on:click={handleSubmit}>Save</button>
+			</div>
+		</div>
 	</div>
 </div>
 
 <style>
-	p {
+	.modal-container {
-		font-size: 12px;
+		display: flex;
-		font-style: italic;
+		justify-content: center;
-		color: gray;
+		align-items: center;
+		height: 100%;
 	}
 
-	/* Styles for the modal overlay */
 	.modal-overlay {
 		position: fixed;
 		top: 0;
@@ -52,15 +74,68 @@
 		height: 100%;
 		background-color: rgba(0, 0, 0, 0.5);
 		display: flex;
-		align-items: center;
 		justify-content: center;
+		align-items: center;
 	}
 
-	/* Styles for the modal content */
 	.modal {
-		background-color: #fff;
+		background-color: white;
-		padding: 20px;
+		padding: 1rem;
-		max-width: 400px;
+		border-radius: 0.5rem;
-		border-radius: 4px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+	}
+
+	.input-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 1rem;
+	}
+
+	input[type='text'] {
+		font-size: 1.2rem;
+		padding: 0.5rem;
+		border-radius: 0.25rem;
+		border: 1px solid gray;
+		margin-bottom: 0.5rem;
+		width: 100%;
+		max-width: 20rem;
+	}
+
+	label {
+		font-size: 1rem;
+		margin-bottom: 0.5rem;
+		text-align: center;
+	}
+
+	button {
+		font-size: 1.2rem;
+		padding: 0.5rem 1rem;
+		border-radius: 0.25rem;
+		background-color: #007acc;
+		color: white;
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.2s ease-in-out;
+		width: 100%;
+		max-width: 20rem;
+	}
+
+	button:hover {
+		background-color: #005f8a;
+	}
+
+	p {
+		font-size: 1rem;
+		font-style: italic;
+		color: gray;
+		margin-top: 0.5rem;
+	}
+
+	h2 {
+		margin-bottom: 0px;
 	}
 </style>

static/service-worker.js

@@ -1,8 +1,12 @@
 self.addEventListener('install', (event) => {
-  console.log('[Service Worker] Installing Service Worker ...', event);
+	console.log('[Service Worker] Installing Service Worker ...', event);
 });
 
 self.addEventListener('activate', (event) => {
-  console.log('[Service Worker] Activating Service Worker ...', event);
+	console.log('[Service Worker] Activating Service Worker ...', event);
-  return self.clients.claim();
+	return self.clients.claim();
+});
+
+self.addEventListener('fetch', function (event) {
+	event.respondWith(fetch(event.request));
 });