100 lines
2.9 KiB
HTML
100 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NIMING NewUser</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
</head>
|
|
|
|
<body class="m-0 grid place-center w-dvw h-dvh bg-zinc-800 text-zinc-900">
|
|
<script>
|
|
let key = ""
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
let username = document.getElementById("username")
|
|
let password = document.getElementById("password")
|
|
let gen_img = document.getElementById("gen")
|
|
let img = document.getElementById("totp_img")
|
|
let create = document.getElementById("create")
|
|
const get_img = () => {
|
|
console.log(username.value)
|
|
if (username.value.length == 0) {
|
|
alert("缺少名稱")
|
|
}
|
|
gen_img.disabled = true
|
|
fetch(`/api/admin/new_totp?name=${encodeURIComponent(username.value)}`).then(async resp => {
|
|
const resp_obj = await resp.json()
|
|
key = resp_obj["key"]
|
|
img.src = "data:image/png;base64, " + resp_obj["img"]
|
|
}).finally(() => {
|
|
gen_img.disabled = false
|
|
})
|
|
}
|
|
gen_img.onclick = get_img;
|
|
const create_func = () => {
|
|
if (username.value.length == 0) {
|
|
alert("username required")
|
|
return
|
|
}
|
|
if (password.value.length < 8) {
|
|
alert("password must contain over 8 characters")
|
|
return
|
|
}
|
|
if (key.length == 0) {
|
|
alert("Didn't set a totp code")
|
|
return
|
|
}
|
|
|
|
fetch("/api/admin/create", {
|
|
body: JSON.stringify(
|
|
{
|
|
"username": username.value
|
|
, "password": password.value
|
|
, "totp_secret": key
|
|
}),
|
|
headers: {"Content-Type": "application/json"},
|
|
method: "POST"
|
|
}).then(resp => {
|
|
if (resp.status == 201) {
|
|
alert("created")
|
|
username.value = ""
|
|
password.value = ""
|
|
key = ""
|
|
img.src = ""
|
|
} else {
|
|
alert(`Not succeeded, status: ${resp.statusText}`)
|
|
|
|
}
|
|
}).catch(err => {
|
|
alert(err)
|
|
|
|
})
|
|
}
|
|
create.onclick = create_func
|
|
})
|
|
|
|
</script>
|
|
<div
|
|
class="drop-shadow-lg flex flex-col box-border py-5 px-3 rounded-xl bg-zinc-400 m-auto h-fit w-10/12 md:w-5/12 lg:w-1/4 gap-5">
|
|
<div class="flex flex-col gap-1">
|
|
<label>使用者名稱</label>
|
|
<input type="text" name="username"
|
|
class="focus:border-zinc-600 outline-zinc-500 pl-2 border-2 rounded-lg border-zinc-800 caret-zinc-800 outline-none"
|
|
id="username" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label>密碼</label>
|
|
<input type="text" name="password"
|
|
class="focus:border-zinc-600 outline-zinc-500 pl-2 border-2 rounded-lg border-zinc-800 caret-zinc-800 outline-none"
|
|
id="password" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<button id="gen">產生TOTP QrCODE</button>
|
|
<img src="" id="totp_img" class="max-w-30 max-h-30 mx-auto" />
|
|
</div>
|
|
<button class="border-2 border-slate-700 w-50 rounded-xl mx-auto" id="create">確認</button>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|