<template>
  <div class="login-box-bg">
    <div class="login-box">
      <div class="login-box-content">
        <div class="login-box-logo">
          <div class="login-box-word">
            <div class="login-box-border">
              <p>{{ logo }}</p>
            </div>
          </div>
        </div>
        <div class="login-box-form">
          <slot></slot>
          <div @click="validate" class="login-button" v-if="loginText">{{ loginText }}</div>
        </div>
      </div>
    </div>
    <div style="position: absolute;top: 0;left: 0;width: 100%;height: 580px;z-index: -1;" v-if="star">
      <star-animation style="width: 100%; height: 100%;"></star-animation>
    </div>
  </div>
</template>

<script>
  import StarAnimation from './StarAnimation';
  export default {
    name: "LoginPage",
    components: {StarAnimation},
    props: {
      logo: {
        type: String,
        required: true
      },
      loginText: {
        type: String,
        required: true
      },
      star: {
        type: Boolean,
        defaulut: false
      }
    },
    methods:{
      validate(){
        this.$emit('validate');
      }
    }
  }
</script>

<style scoped>
</style>
