jcreek/EstimationPoker
1
0
Fork 0
mirror of https://github.com/jcreek/EstimationPoker.git synced 2026-07-12 18:43:47 +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;
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>