<template>
  <LoginView :login-url="loginUrl" @error="onError" @success="onSuccess"/>
</template>

<script>

import { LoginView } from 'pankow';

// can be exposed as env var, see develop.sh
const BASE_URL = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';

export default {
  components: {
    LoginView
  },
  data() {
    return {
      username: '',
      password: '',
      totpToken: '',
      error: '',
      busy: false,
      loginUrl: `${BASE_URL}/api/v1/cloudron/login`
    };
  },
  methods: {
    onError(error) {
      console.error('Error loggin in', error);
    },
    onSuccess(accessToken) {
      console.log('Success loggin in');

      localStorage.accessToken = accessToken;
      this.$router.push('/home');
    }
  }
};

</script>


<style scoped>

h1 {
  color: #777;
  font-weight: normal;
  font-size: 24px;
}

h1 b {
  color: black;
  font-size: 36px;
}

.container {
    max-width: 640px;
    margin: auto;
    margin-top: 100px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    text-align: center;
}

.field * {
    display: block;
    width: 100%;
    text-align: left;
}

.field label {
  margin-bottom: 5px;
}

.field {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.action-bar {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.action-bar * {
  align-self: baseline;
}

</style>
