lks/websocket-chat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: lks:3d4d56f616cb26075ff691b42f5ad6173b43126e
Branches Tags
lks:main
...
compare: lks:753863585d23b2e6ffce9cf4e3fe9564ef60d6cf
Branches Tags
lks:main

2 Commits
3d4d56f616 ... 753863585d

Author SHA1 Message Date
Lucas Schumacher
753863585d Center forms 2023-10-30 23:06:56 -04:00
Lucas Schumacher
e37926be57 Clean up Signup page 2023-10-30 22:49:16 -04:00
2 changed files with 17 additions and 24 deletions
Show Stats Expand all files Collapse all files

4
client/src/components/Login.vue
View File

@ -46,7 +46,7 @@ onMounted(async () => {
</script> </script>
<template> <template>
<main class="form-signin w-100 m-auto"> <main class="form-signin w-100 m-auto position-absolute top-50 start-50 translate-middle">
<form onsubmit="event.preventDefault();"> <form onsubmit="event.preventDefault();">
<IconLogo /> <IconLogo />
<h1 class="h3 mb-3 fw-normal">Please sign in</h1> <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
@ -65,7 +65,7 @@ onMounted(async () => {
<button type="submit" @click="login" class="btn btn-primary w-100 py-2">Sign in</button> <button type="submit" @click="login" class="btn btn-primary w-100 py-2">Sign in</button>
<p class="mt-5 mb-3 text-body-secondary">&copy; 2023</p> <p class="mt-5 mb-3 text-body-secondary">&copy; 2023 Lucas Schumacher</p>
</form> </form>
</main> </main>
</template> </template>

37
client/src/components/Signup.vue
View File

@ -10,6 +10,7 @@ const err = ref('')
async function signup(ev) { async function signup(ev) {
ev.preventDefault() ev.preventDefault()
console.log(ev)
const api_url = '/api/user' const api_url = '/api/user'
const payload = { username: user.value, password: pass.value, referral: refe.value } const payload = { username: user.value, password: pass.value, referral: refe.value }
const fetch_options = { const fetch_options = {
@ -29,6 +30,7 @@ async function signup(ev) {
let resp = await fetch(api_url, fetch_options) let resp = await fetch(api_url, fetch_options)
console.log(resp) console.log(resp)
if (resp.ok) { if (resp.ok) {
err.value = ''
let ans = await resp.json() let ans = await resp.json()
console.log(ans) console.log(ans)
@ -41,7 +43,7 @@ async function signup(ev) {
</script> </script>
<template> <template>
<main class="form-signin w-100 m-auto my-auto"> <main class="form-signin w-100 m-auto my-auto position-absolute top-50 start-50 translate-middle">
<form onsubmit="event.preventDefault();"> <form onsubmit="event.preventDefault();">
<IconLogo /> <IconLogo />
<h1 class="h3 mb-3 fw-normal">Sign up</h1> <h1 class="h3 mb-3 fw-normal">Sign up</h1>
@ -54,30 +56,29 @@ async function signup(ev) {
<input type="password" v-model="pass" class="form-control" id="floatingPassword" placeholder="Password"> <input type="password" v-model="pass" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label> <label for="floatingPassword">Password</label>
</div> </div>
<div class="form-floating"> <div class="form-floating mb-3">
<input type="text" v-model="refe" class="form-control" id="floatingCode" placeholder=""> <input type="text" v-model="refe" class="form-control" id="floatingCode" placeholder="">
<label for="floatingCode">Referral Code</label> <label for="floatingCode">Referral Code</label>
</div> </div>
<div class="form-floating">
<p> {{ err }} </p> <div v-if="err != ''" class="form-floating alert alert-danger" role="alert">
</div> <div class="me-3">{{ err }}</div>
<div class="form-floating mb-3"> <button @click="err = ''" type="button" class="btn-close me-2 position-absolute top-50 end-0 translate-middle-y"
Already have an account? aria-label="close"></button>
<a href="#/login">Log in</a>
</div> </div>
<button type="submit" @click="signup" class="btn btn-primary w-100 py-2">Sign up</button> <button type="submit" @click="signup" class="btn btn-primary w-100 py-2">Sign up</button>
<p class="mt-5 mb-3 text-body-secondary">&copy; 2023</p>
<div class="form-floating m-2">
Already have an account?
<a href="#/login">Log in</a>
</div>
<p class="mt-5 mb-3 text-body-secondary">&copy; 2023 Lucas Schumacher</p>
</form> </form>
</main> </main>
</template> </template>
<style scoped> <style scoped>
/* html,
body {
height: 100%;
} */
.form-signin { .form-signin {
max-width: 330px; max-width: 330px;
padding: 1rem; padding: 1rem;
@ -87,15 +88,7 @@ body {
z-index: 2; z-index: 2;
} }
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] { .form-signin input[type="password"] {
margin-bottom: 10px; margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
} }
</style> </style>