MainPage.vue

<template>
  <div class="content">
    <div class="leftPart">
      <div class="overlay">
        <h1>Switch Room</h1>
        <h3>Reasons for Choosing US</h3>
        <p>
          Wanna to pay for hotel for traveling? Switch Room provide the local
          rooms for you. No need to pay rental. You can switch your living home
          with other people who want to travel to your place.
        </p>

        <br />
        <router-link to="/login">
          <button>READ MORE</button>
        </router-link>
      </div>
    </div>
    <div id="card">
      <div id="card-content">
        <div id="card-title">
          <h2>LOGIN</h2>
          <div class="underline-title"></div>
        </div>
        <form method="post" class="form">
          <label for="user-name" style="padding-top: 13px; text-align: left">
            &nbsp;Username
          </label>
          <input
            id="user-name"
            v-model="userInformation.username"
            class="form-content"
            type="text"
            name="username"
            autocomplete="on"
            required
          />
          <div class="form-border"></div>
          <label for="user-password" style="padding-top: 22px; text-align: left"
            >&nbsp;Password
          </label>
          <input
            id="user-password"
            v-model="userInformation.password"
            class="form-content"
            type="password"
            name="password"
            required
          />
          <div class="form-border"></div>
          <a href="#">
            <legend id="forgot-pass">Forgot password?</legend>
          </a>
          <input
            id="submit-btn"
            type="submit"
            name="submit"
            value="LOGIN"
            @click.prevent="onSubmit"
          />
          <router-link to="/register">
            <div id="signup">Don't have account yet?</div>
          </router-link>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import * as UserService from "../services/UserService";
import { useRouter } from "vue-router";
import { UserModel } from "@/models/UserModel";
import { result } from "lodash";
const router = useRouter();
const user = ref(new UserModel());
const userInformation = reactive({
  username: "",
  password: "",
});

const onSubmit = async () => {
  await UserService.loginUser(JSON.stringify(userInformation))
    .then((result) => {
      if (result.status == "OK") {
        user.value = result.data;
        router.push("/login-main-page");
      } else {
        alert(result.message);
      }
    })
    .catch((error) => {
      alert(error);
    });
};
</script>

<style scoped>
.content {
  display: flex;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 900px;
}
.leftPart {
  background: url("@/assets/mainPage/headerPhoto.jpeg");
  text-align: center;
  width: 70%;
  height: 800px;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 85% 85% / 30%;
  display: flex;
}
.leftPart .overlay {
  width: 100%;
  height: 100%;
  padding: 50px;
  color: #fff;
  text-shadow: 1px 1px 1px #333;
  background-image: linear-gradient(135deg, #b3d1ff 10%, #fd5e086b 100%);
}

h1 {
  font-family: "Dancing Script", cursive;
  font-size: 80px;
  margin-bottom: 30px;
}

h3,
p {
  font-family: "Open Sans", sans-serif;
  margin-bottom: 30px;
}

button {
  border: none;
  outline: none;
  padding: 10px 20px;
  border-radius: 50px;
  color: #333;
  background: #fff;
  margin-bottom: 50px;
  box-shadow: 0 3px 20px 0 #0000003b;
}
button:hover {
  cursor: pointer;
}
a {
  text-decoration: none;
}
label {
  font-family: "Raleway", sans-serif;
  font-size: 11pt;
}
#forgot-pass {
  color: #2dbd6e;
  font-family: "Raleway", sans-serif;
  font-size: 10pt;
  margin-top: 3px;
  text-align: right;
}
#card {
  background: #fbfbfb;
  border-radius: 8px;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
  height: 450px;
  width: 30%;
}
#card-content {
  padding: 12px 44px;
}
#card-title {
  font-family: "Raleway Thin", sans-serif;
  letter-spacing: 4px;
  padding-bottom: 23px;
  padding-top: 13px;
  text-align: center;
}
#signup {
  color: #2dbd6e;
  font-family: "Raleway", sans-serif;
  font-size: 10pt;
  margin-top: 16px;
  text-align: center;
}
#submit-btn {
  background: -webkit-linear-gradient(right, #a6f77b, #2dbd6e);
  border: none;
  border-radius: 21px;
  box-shadow: 0px 1px 8px #24c64f;
  cursor: pointer;
  color: white;
  font-family: "Raleway SemiBold", sans-serif;
  height: 42.3px;
  margin: 0 auto;
  margin-top: 50px;
  transition: 0.25s;
  width: 153px;
}
#submit-btn:hover {
  box-shadow: 0px 1px 18px #24c64f;
}
.form {
  align-items: left;
  display: flex;
  flex-direction: column;
}
.form-border {
  background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
  height: 1px;
  width: 100%;
}
.form-content {
  background: #fbfbfb;
  border: none;
  outline: none;
  padding-top: 14px;
}
.underline-title {
  background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
  height: 2px;
  margin: 0rem auto 0 auto;
  width: 89px;
}
</style>