jcreek/EstimationPoker
1
0
Fork 0
mirror of https://github.com/jcreek/EstimationPoker.git synced 2026-07-13 02:53: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
+103 -28
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,39 +12,60 @@
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"> <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>
</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>