Skip to content

Commit 479142b

Browse files
jona799tjona799t
committed
Begyndt på scanning
1 parent 0135d8c commit 479142b

File tree

2 files changed

+100
-57
lines changed

2 files changed

+100
-57
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"eslint": "^8.47.0",
2020
"eslint-config-raven": "^1.0.3",
2121
"eslint-plugin-svelte": "^2.26.0",
22+
"html5-qrcode": "^2.3.8",
2223
"postcss": "^8.4.23",
2324
"svelte": "^3.54.0",
2425
"svelte-eslint-parser": "^0.32.2",
@@ -38,4 +39,4 @@
3839
"svelte-intersection-observer": "^0.10.0",
3940
"theme-change": "^2.5.0"
4041
}
41-
}
42+
}

‎src/routes/auth/+page.svelte

+98-56
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
import { AES } from 'crypto-es/lib/aes';
44
import { Utf8 } from 'crypto-es/lib/core';
55
import { cookieInfo } from '$lib/js/LectioCookieHandler.js';
6+
import { Html5Qrcode } from 'html5-qrcode';
67
import { fade } from 'svelte/transition';
78
import { onMount } from 'svelte';
9+
810
const key
911
= 'Ting som encrypter login data meget simplet så det ikke er vildt nemt at få fat i fra et andet program. BTW du kan kun gemme login hvis du kører appen, det virker altså ikke på hjemmesiden.';
1012
@@ -163,6 +165,30 @@
163165
function handleEnterLogin(evt) {
164166
if (evt?.key === 'Enter') login();
165167
}
168+
169+
let qrAuth = false;
170+
function changeLoginType() {
171+
qrAuth = !qrAuth;
172+
}
173+
174+
let qrUrl;
175+
function qrCodeDropped(element) {
176+
element.preventDefault();
177+
const html5QrCode = new Html5Qrcode('reader');
178+
179+
html5QrCode.scanFile(element.dataTransfer.files[0], false)
180+
.then(qrCodeMessage => {
181+
qrUrl = qrCodeMessage;
182+
})
183+
.catch(err => {
184+
console.log(`Error scanning file. Reason: ${err}`);
185+
});
186+
}
187+
function qrCodeUploaded(e) {
188+
e.preventDefault();
189+
e.stopPropagation();
190+
console.log(e);
191+
}
166192
</script>
167193
168194
<input type="checkbox" id="CantLogInAlert" class="modal-toggle" />
@@ -187,73 +213,89 @@
187213
<div class="h-fit rounded-2xl bg-base-200 p-4 shadow-lg">
188214
<h1 class="text-xl font-bold">Log ind med din Lectio konto</h1>
189215
<div class="divider mt-1 mb-2" />
216+
<div class="tabs tabs-boxed">
217+
<button on:click={changeLoginType} class="tab {qrAuth ? '' : 'tab-active'}">Brugernavn/Adgangskode</button>
218+
<button on:click={changeLoginType} class="tab {qrAuth ? 'tab-active' : ''}">QR kode</button>
219+
</div>
220+
<div class="divider mt-1 mb-2" />
190221
<form action="javascript:void(0);" autocomplete="on" method="post">
191222
<div class="form-control w-full max-w-xl">
192-
<input
193-
type="text"
194-
name="username"
195-
id="username-field"
196-
placeholder="Brugernavn"
197-
tabindex="0"
198-
autocomplete="username"
199-
class="input input-sm w-full max-w-wl mb-2.5 autofill:border-0 autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--b1))]"
200-
bind:value={brugernavn}
201-
/>
202-
<input
203-
type="password"
204-
name="current-password"
205-
id="current-password-field"
206-
autocomplete="current-password"
207-
tabindex="0"
208-
placeholder="Adgangskode"
209-
class="input input-sm w-full max-w-wl mb-2.5 autofill:border-0 autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--b1))]"
210-
bind:value={adgangskode}
211-
on:keypress={handleEnterLogin}
212-
/>
213-
<select
214-
name="skole"
215-
id="skole"
216-
placeholder="Vælg din skole"
217-
tabindex="0"
218-
class="select select-sm w-full max-w-wl py-0 mb-2.5"
219-
bind:value={schoolId}
220-
>
221-
<option value="" disabled selected> Vælg din skole </option>
222-
{#each Object.entries(options) as [, value]}
223-
<option value={value.id}>{value.skole}</option>
224-
{/each}
225-
</select>
226-
<div class="join p-1.5 bg-base-100">
227-
<div class="flex join-item">
228-
<input
229-
type="checkbox"
230-
checked="checked"
231-
id="saveSchoolIdCheck"
232-
tabindex="0"
233-
class="checkbox checkbox-sm"
234-
on:click={setSkole()}
235-
name="setSkole"
236-
/>
237-
<label class="block text-sm pr-0 font-medium px-3 select-none" for="saveSchoolIdCheck">Husk skole</label>
223+
{#if qrAuth}
224+
<div on:drop={qrCodeDropped} on:dragover={event => event.preventDefault()}>
225+
<label class="flex justify-center element w-3/5 aspect-square hover:cursor-pointer">
226+
Træk eller upload din QR kode her
227+
<input type="file" name="file_upload" class="hidden" on:change={qrCodeUploaded}>
228+
</label>
238229
</div>
239-
{#if api === 'http://localhost:5000'}
240-
<div class="divider divider-horizontal"></div>
230+
<p>{qrUrl}</p>
231+
<span id="reader"></span>
232+
{:else}
233+
<input
234+
type="text"
235+
name="username"
236+
id="username-field"
237+
placeholder="Brugernavn"
238+
tabindex="0"
239+
autocomplete="username"
240+
class="input input-sm w-full max-w-wl mb-2.5 autofill:border-0 autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--b1))]"
241+
bind:value={brugernavn}
242+
/>
243+
<input
244+
type="password"
245+
name="current-password"
246+
id="current-password-field"
247+
autocomplete="current-password"
248+
tabindex="0"
249+
placeholder="Adgangskode"
250+
class="input input-sm w-full max-w-wl mb-2.5 autofill:border-0 autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--b1))]"
251+
bind:value={adgangskode}
252+
on:keypress={handleEnterLogin}
253+
/>
254+
<select
255+
name="skole"
256+
id="skole"
257+
placeholder="Vælg din skole"
258+
tabindex="0"
259+
class="select select-sm w-full max-w-wl py-0 mb-2.5"
260+
bind:value={schoolId}
261+
>
262+
<option value="" disabled selected> Vælg din skole </option>
263+
{#each Object.entries(options) as [, value]}
264+
<option value={value.id}>{value.skole}</option>
265+
{/each}
266+
</select>
267+
<div class="join p-1.5 bg-base-100">
241268
<div class="flex join-item">
242269
<input
243270
type="checkbox"
244271
checked="checked"
245-
id="saveLogin"
272+
id="saveSchoolIdCheck"
246273
tabindex="0"
247274
class="checkbox checkbox-sm"
248-
on:click={() => {
249-
saveLogin = !saveLogin;
250-
}}
251-
name="saveLogin"
275+
on:click={setSkole()}
276+
name="setSkole"
252277
/>
253-
<label class="block text-sm pr-0 font-medium px-3 select-none" for="saveLogin">Forbliv logget ind</label>
278+
<label class="block text-sm pr-0 font-medium px-3 select-none" for="saveSchoolIdCheck">Husk skole</label>
254279
</div>
255-
{/if}
256-
</div>
280+
{#if api === 'http://localhost:5000'}
281+
<div class="divider divider-horizontal"></div>
282+
<div class="flex join-item">
283+
<input
284+
type="checkbox"
285+
checked="checked"
286+
id="saveLogin"
287+
tabindex="0"
288+
class="checkbox checkbox-sm"
289+
on:click={() => {
290+
saveLogin = !saveLogin;
291+
}}
292+
name="saveLogin"
293+
/>
294+
<label class="block text-sm pr-0 font-medium px-3 select-none" for="saveLogin">Forbliv logget ind</label>
295+
</div>
296+
{/if}
297+
</div>
298+
{/if}
257299
<p class="text-xs mt-4">
258300
Denne side bruger cookies til at huske dine oplysninger til næste gang, du logger ind. Når du logger ind, accepterer du, at din
259301
browser gemmer dine oplysninger. De gemmes kun på din browser og bliver ikke sendt til nogen server udover Lectio og

0 commit comments

Comments
 (0)