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

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

Browse Source 
6 add remember me functionality for names
This commit is contained in:
Josh Creek
2023-07-27 22:42:20 +01:00
committed by GitHub
parent e7ad9d776f 831e75a633
commit 0179179733
3 changed files with 129 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.html
+19 -4
View File
@@ -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="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">
<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."
/>
<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
+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>
static/service-worker.js
+7 -3
View File
@@ -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);
return self.clients.claim();
console.log('[Service Worker] Activating Service Worker ...', event);
return self.clients.claim();
});
self.addEventListener('fetch', function (event) {
event.respondWith(fetch(event.request));
});