From 4e16c963e13d22dbc679d310686b4a1d5706d955 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Thu, 27 Jul 2023 22:30:23 +0100
Subject: [PATCH] feat(#6): Add remember me functionality for names

---
 src/components/Modal.svelte | 131 ++++++++++++++++++++++++++++--------
 1 file changed, 103 insertions(+), 28 deletions(-)

diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index 279a580..97600c5 100644
--- a/src/components/Modal.svelte
+++ b/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">
-		<h2>Enter Your Name</h2>
-		<p>Try clicking on someone's card...</p>
-		<input
-			type="text"
-			placeholder="Your name"
-			bind:value={userName}
-			on:input={handleNameChange}
-			on:keydown={(event) => {
-				if (event.key === 'Enter') {
-					event.preventDefault();
-					handleSubmit();
-				}
-			}}
-		/>
-		<button on:click={handleSubmit}>Save</button>
+<div class="modal-container">
+	<div class="modal-overlay">
+		<div class="modal">
+			<h2>Enter Your Name</h2>
+			<p>Try clicking on someone's card...</p>
+			<div class="input-container">
+				<input
+					type="text"
+					placeholder="Your name"
+					bind:value={userName}
+					on:input={handleNameChange}
+					on:keydown={(event) => {
+						if (event.key === 'Enter') {
+							event.preventDefault();
+							handleSubmit();
+						}
+					}}
+				/>
+				<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 {
-		font-size: 12px;
-		font-style: italic;
-		color: gray;
+	.modal-container {
+		display: flex;
+		justify-content: center;
+		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;
-		padding: 20px;
-		max-width: 400px;
-		border-radius: 4px;
+		background-color: white;
+		padding: 1rem;
+		border-radius: 0.5rem;
+		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>