autoflow-web-console/src/pages/LoginView.vue

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { storage } from "@/utils/storage";
import logo from "@/assets/wordmark.png";

import logo2 from "@/assets/workflow.png";

const router = useRouter();

const data = ref({
  form: false,
  userId: "",
  userPw: "",
  loading: false,
  snackbar: false,
  snackbarText: "",
  snackbarColor: "",
});

const resetForm = () => {
  data.value.userId = "";
  data.value.userPw = "";
  data.value.loading = false;
};

const signIn = () => {
  // if (!data.value.form) return;
  // data.value.loading = true;
  // setTimeout(() => (data.value.loading = false), 2000);

  // const params = {
  //   userId: data.value.userId,
  //   password: data.value.userPw,
  // };
  //
  // UserManagerService.signIn(params).then((d) => {
  //   if (d.data.success === true) {
  //     storage.setAuth(d.data.data);
      router.push("/main");
  //   } else {
  //     resetForm();
  //     data.value.snackbar = true;
  //   }
  // });
};
</script>

<template>
  <v-container :fluid="true" class="pa-0">
    <v-sheet
      class="background-image w-100 h-screen d-flex align-center justify-center flex-column"
    >
      <v-card flat class="bg-transparent d-flex align-center flex-column">
        <v-card
          class="mx-auto pa-10 mb-4 login-box rounded-lg d-flex flex-column"
          style="min-width: 450px !important;"
          density="comfortable"
        >
          <div class="mb-4 w-100 d-flex justify-center">
            <div
              class="bg-transparent rounded-circle pa-2"
              style="border: 1.5px solid #f7f7f8"
            >
              <v-icon>mdi-shield-key-outline</v-icon>
            </div>

          </div>
          <div class="text-h5 pb-2 text-center font-weight-bold">
            Autoflow Web Console
          </div>

          <v-form v-model="data.form" @submit.prevent="signIn" class="mt-3">
            <v-text-field
              v-model="data.userId"
              :readonly="data.loading"
              class="mb-2"
              variant="outlined"
              color="secondary"
              placeholder="아이디를 입력해주세요."
            ></v-text-field>

            <v-text-field
              v-model="data.userPw"
              :readonly="data.loading"
              type="password"
              variant="outlined"
              color="secondary"
              class="mb-2"
              placeholder="비밀번호를 입력해주세요."
            ></v-text-field>

            <v-btn
              :disabled="!data.form"
              :loading="data.loading"
              block
              color="primary"
              size="large"
              type="submit"
              variant="flat"
            >
              login
            </v-btn>
          </v-form>
        </v-card>
      </v-card>

      <v-sheet
        class="position-absolute w-100 bg-transparent pa-4"
        style="bottom: 0; left: 0"
      >
        <v-sheet class="bg-shades-transparent d-flex align-end"
        >Copyright © 2025 Autoflow Web Console
        </v-sheet>
      </v-sheet>
      <v-sheet
        class="position-absolute w-100 bg-transparent pa-4"
        style="bottom: 0; right: 0"
      >
        <v-sheet class="bg-shades-transparent d-flex justify-end">
          <img :src="logo" style="width: 5%" />
        </v-sheet>
      </v-sheet>
    </v-sheet>
  </v-container>

  <v-snackbar
    v-model="data.snackbar"
    timeout="2000"
    location="button"
    :color="data.snackbarColor"
  >
    {{ data.snackbarText }}
    <template #actions>
      <v-btn variant="text" @click="data.snackbar = false"> 닫기 </v-btn>
    </template>
  </v-snackbar>
</template>

<style scoped>
.login-box {
  background-color: rgba(18, 18, 18, 0.4); /* 흰색 배경에 30% 불투명도 */
  backdrop-filter: blur(10px); /* 배경 블러 효과 */
}

.background-image {
  background-image: linear-gradient(
    90deg,
    rgba(19, 18, 18, 0.5),
    rgba(19, 18, 18, 0.3),
    rgba(19, 18, 18, 0.3),
    rgba(19, 18, 18, 0.5)
  ),url("@/assets/4117551.jpg"); /* 배경 이미지 경로 */
  background-size: cover; /* 이미지가 화면을 꽉 채우도록 설정 */
  background-position: center; /* 이미지 중앙 정렬 */
  background-repeat: no-repeat; /* 이미지 반복 방지 */
  min-height: 100vh; /* 화면 전체 높이 설정 */
}
</style>