lelong-web-pembida/src/components/Login.vue

<template>
  <!-- <div class="row justify-content-md-center">
    <h1>Login</h1>
    <div class="col-6" style="border: 1px solid">
      <form @submit.prevent="submit">
        <div class="p-20">
          <div class="mb-6">
            <label
              for="username"
              class="
                block
                mb-2
                text-sm
                font-medium
                text-gray-900
                dark:text-gray-300
              "
              >Username</label
            >
            <input
              type="text"
              v-model="form.username"
              class="
                bg-gray-50
                border border-gray-300
                text-gray-900 text-sm
                rounded-lg
                focus:ring-blue-500 focus:border-blue-500
                block
                w-full
                p-2.5
                dark:bg-gray-700
                dark:border-gray-600
                dark:placeholder-gray-400
                dark:text-white
                dark:focus:ring-blue-500
                dark:focus:border-blue-500
              "
              placeholder="name@flowbite.com"
              required=""
            />
          </div>
          <div class="mb-6">
            <label
              for="password"
              class="
                block
                mb-2
                text-sm
                font-medium
                text-gray-900
                dark:text-gray-300
              "
              >Password</label
            >
            <input
              type="password"
              v-model="form.password"
              class="
                bg-gray-50
                border border-gray-300
                text-gray-900 text-sm
                rounded-lg
                focus:ring-blue-500 focus:border-blue-500
                block
                w-full
                p-2.5
                dark:bg-gray-700
                dark:border-gray-600
                dark:placeholder-gray-400
                dark:text-white
                dark:focus:ring-blue-500
                dark:focus:border-blue-500
              "
              required=""
            />
          </div>
          <div class="flex items-start mb-6">
            <div class="flex items-center h-5">
              <input
                id="remember"
                aria-describedby="remember"
                type="checkbox"
                class="
                  w-4
                  h-4
                  bg-gray-50
                  rounded
                  border border-gray-300
                  focus:ring-3 focus:ring-blue-300
                  dark:bg-gray-700
                  dark:border-gray-600
                  dark:focus:ring-blue-600
                  dark:ring-offset-gray-800
                "
              />
            </div>
            <div class="ml-3 text-sm">
              <label
                for="remember"
                class="font-medium text-gray-900 dark:text-gray-300"
                >Remember me</label
              >
            </div>
          </div>
          <button
            @click="doLogin"
            type="submit"
            class="
              text-white
              bg-blue-700
              hover:bg-blue-800
              focus:ring-4 focus:outline-none focus:ring-blue-300
              font-medium
              rounded-lg
              text-sm
              w-full
              sm:w-auto
              px-5
              py-2.5
              text-center
              dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
            "
          >
            Submit
          </button>
        </div>
      </form>
      <router-link to="/register">Register</router-link><br />
    </div>
  </div> -->
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-5 text-center m-5 p-5 border rounded">
        <form @submit.prevent="submit">
          <h1 class="mb-5 text-primary">Sistem Lelong</h1>
          <h4>Log Masuk</h4>

          <div class="form-floating">
            <input
              type="text"
              class="form-control"
              v-model="form.username"
              placeholder="username sini"
              required
            />
            <label for="floatingInput">Username</label>
          </div>
          <div class="form-floating">
            <input
              type="password"
              class="form-control"
              v-model="form.password"
              placeholder="Password"
              required
            />
            <label for="floatingPassword">Password</label>
          </div>
          <button
            @click="doLogin"
            class="w-100 mt-4 mb-5 btn btn-primary"
            type="submit"
          >
            Enter
          </button>
        </form>
        <router-link to="/register">Daftar Akaun</router-link><br />
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import axios from "axios";
export default {
  name: "Login",

  // ========api composition style===============
  // setup() {

  //     const router = useRouter();

  //     const submit = async e => {
  //         const form = new FormData(e.target);

  //         const inputs = Object.fromEntries(form.entries());

  //         const {data} = await axios.post('user/login', inputs, {
  //             withCredentials: false
  //         });

  //         axios.defaults.headers.common['Authorization'] = 'Bearer ${data.token}';

  //         console.log(data);
  //         await router.push('/');
  //     }

  //     return {
  //         submit
  //     }
  // }

  //=========api option style===================
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    doLogin() {
      axios.post("/user/login", this.form).then((response) => {
        localStorage.setItem("token", response.data.token);
        localStorage.setItem("id", response.data.user.id);
        localStorage.setItem("nokp", response.data.user.nokp);
        localStorage.setItem("name", response.data.user.name);
        localStorage.setItem("email", response.data.user.email);
        localStorage.setItem("notelbimbit", response.data.user.notelbimbit);
        this.$router.push("/");
        console.log(response);
      })
      .catch((response) => {
          alert(response.message);
          console.log(response);
        });
    },
  },
};
</script>