jcreek/EstimationPoker
1
0
Fork 0
mirror of https://github.com/jcreek/EstimationPoker.git synced 2026-07-13 11:03:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(#6): Add remember me functionality for names

Browse Source
This commit is contained in:
Josh Creek
2023-07-27 22:30:23 +01:00
parent e7ad9d776f
commit 4e16c963e1
1 changed files with 103 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Modal.svelte
+87 -12
View File
@@ -3,6 +3,7 @@
export let joinRoom; export let joinRoom;
let userName = ''; let userName = '';
let rememberName = false;
function handleNameChange(event) { function handleNameChange(event) {
userName = event.target.value; userName = event.target.value;
@@ -11,15 +12,28 @@
function handleSubmit() { function handleSubmit() {
if (userName.trim() !== '') { if (userName.trim() !== '') {
joinRoom(userName); joinRoom(userName);
if (rememberName && typeof localStorage !== 'undefined') {
localStorage.setItem('userName', userName);
} else if (typeof localStorage !== 'undefined') {
localStorage.removeItem('userName');
}
closeModal(); closeModal();
} }
} }
function handleRememberChange(event) {
rememberName = event.target.checked;
}
$: userName = typeof localStorage !== 'undefined' ? localStorage.getItem('userName') || '' : '';
</script> </script>
<div class="modal-overlay"> <div class="modal-container">
<div class="modal-overlay">
<div class="modal"> <div class="modal">
<h2>Enter Your Name</h2> <h2>Enter Your Name</h2>
<p>Try clicking on someone's card...</p> <p>Try clicking on someone's card...</p>
<div class="input-container">
<input <input
type="text" type="text"
placeholder="Your name" placeholder="Your name"
@@ -32,18 +46,26 @@
} }
}} }}
/> />
<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> <button on:click={handleSubmit}>Save</button>
</div> </div>
</div>
</div>
</div> </div>
<style> <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 { .modal-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -52,15 +74,68 @@
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
align-items: center;
} }
/* Styles for the modal content */
.modal { .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> </style>