Center forms

client/src/components/Login.vue

@@ -46,7 +46,7 @@ onMounted(async () => {
 </script>
 
 <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();">
       <IconLogo />
       <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>
 
-      <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>
   </main>
 </template>

client/src/components/Signup.vue

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