42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

double auth maintenant fonctionne correctement. Il y a un PoC avec svelte

Browse Source
This commit is contained in:
batche
2022-11-15 17:57:21 +01:00
parent ee8033e6d8
commit fd61ea56d2
8 changed files with 153 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
srcs/requirements/svelte/api_front/src/App.svelte
View File

@@ -1,17 +1,24 @@
<script>
import Login from "./pages/auth/login.svelte";
import Home from "./pages/home/home.svelte";
import Router, {link} from 'svelte-spa-router';
import Router, {link, push} from 'svelte-spa-router';
import Profil from "./pages/profil/profil.svelte";
import UpdateProfil from "./pages/profil/updateProfil.svelte";
import DoubleFa from "./pages/auth/DoubleFa.svelte";
const routes = {
"/": Home,
"/login": Login,
"/profil": Profil,
"/update-profil": UpdateProfil,
"/2fa": DoubleFa,
};
$: logout = async() => {
await fetch("http://transcendance:8080/api/v2/auth/logout",{
method : 'POST',
}).then(push('/login'));
}
</script>
<header class="p-3 text-bg-dark">
@@ -27,7 +34,11 @@
<a href="/profil" use:link type="button" class="btn btn-primary">Profil</a>
</li> -->
</ul>
<div>
<button on:click={logout} class="w-100 btn btn-lg btn-primary" type="submit">
Deconnexion
</button>
</div>
<div class="text-end">
<a href="/login" use:link type="button" class="btn btn-warning">Connexion</a>
</div>

89
srcs/requirements/svelte/api_front/src/pages/auth/DoubleFa.svelte Normal file
View File

@@ -0,0 +1,89 @@
<script>
import { push } from "svelte-spa-router";
let qrCodeImg;
let qrCode = "";
let wrongCode = "";
let maxTry = 3;
const fetchQrCodeImg = (async() => {
await fetch("http://transcendance:8080/api/v2/auth/2fa/generate",
{
method: 'POST',
})
.then(response => {return response.blob()})
.then(blob => {
const url = URL.createObjectURL(blob);
qrCodeImg = url;
});
})()
$: submit = async() => {
const response = await fetch("http://transcendance:8080/api/v2/auth/2fa/turn-on",
{
method : 'POST',
headers : {
"Content-Type": "application/json",
},
body : JSON.stringify({
"twoFaCode" : qrCode,
}),
});
if (response.status === 401)
{
qrCode = "";
wrongCode = `Wrong code, please try again. You have ${maxTry} before end session`;
maxTry--;
}
if (maxTry === 0)
{
await fetch("http://transcendance:8080/auth/logout",
{
method : 'POST',
})
.then(response => response.json())
.then(push("/login"));
}
if (response.status === 200)
{
push("/");
}
}
</script>
<body>
<main class="form-signin w-100 m-auto">
{#await fetchQrCodeImg}
<p>Please Wait...</p>
{:then data}
{#if wrongCode}
<div class="alert alert-danger" role="alert">
{wrongCode}
</div>
{/if}
<img src={qrCodeImg} alt="A QRCodeImg you must scan with google authenticator" id="qrcodeImg" />
<form on:submit|preventDefault={submit}>
<label for="code" class="block text-sm text-gray-600">Code</label>
<input id="code" bind:value={qrCode} type="text" class="block px-1 py-2 mt-2 border-2 border-gray-100 text-gray-800" />
<button type="submit" class="p-2 bg-blue-500 text-white mt-4 px-6">
Send
</button>
</form>
{:catch}
<p>Unable to get QrCodeImg</p>
{/await}
</main>
</body>
<style>
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
}
.form-signin {
max-width: 330px;
padding: 15px;
}
</style>