feat: update README and various components for improved formatting and error handling; enhance login functionality with password encryption

This commit is contained in:
yuanhau 2025-05-12 10:17:21 +08:00
parent ee13960f0b
commit fd2ba525f9
12 changed files with 304 additions and 168 deletions

View file

@ -62,4 +62,4 @@ const title = ref("Hot News");
</ul>
</div>
</div>
</template>
</template>

View file

@ -1,14 +1,50 @@
<script setup lamng="ts">
const userAccount = ref("");
const userPassword = ref("");
const crypto = Crypto;
const submitUserPassword = async () => {
// Encrypt password during transit
const sha512Passwordify = crypto.createHash("sha512");
sha512Passwordify.update(userPassword.value);
const sha512Password = sha512Passwordify.digest("hex");
// Log user & password
console.log(userAccount.value);
console.log(sha512Password);
// Send data.
const sendData = fetch("/api/user/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: userAccount.value,
password: sha512Password,
}),
})
}
</script>
<template>
<div class="flex flex-col items-center justify-center h-full">
<form class="flex flex-col items-center justify-center h-full">
<div class="text-xl mb-4 text-bold">Login / Register</div>
<div class="flex flex-col items-center justify-center h-full">
<div
class="flex flex-col items-center justify-center h-full"
>
<div class="text-xl mb-4 text-bold">Login / Register</div>
<input type="text" placeholder="Username" class="mb-2 p-2 border rounded" />
<input type="password" placeholder="Password" class="p-2 border rounded mb-2" />
<button class="bg-black text-white p-2 rounded transition duration-200">
Log In
</button>
</form>
</div>
</template>
<input
type="text"
placeholder="Username"
class="mb-2 p-2 border rounded"
/>
<input
type="password"
placeholder="Password"
class="p-2 border rounded mb-2"
/>
<button class="bg-black text-white p-2 rounded transition duration-200" @click="submitUserPassword">
Log In
</button>
</div>
</div>
</template>