<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">

<head>
  <%- header %>
</head>

<body id="app" v-cloak>
  <Navbar-Simple></Navbar-Simple>
  <Notification></Notification>
  <main id="content" class="container" role="main">
    <h1 class="my-4">{{ $t('welcome.greeting') }}</h1>
    <p>{{ $t('welcome.create_creds') }}</p>
    <div class="d-flex gap-4 align-items-start">
      <div class="card">
        <div class="card-body">
          <div class="alert alert-warning">
            {{ $t('welcome.create_creds_alert') }}
          </div>
          <form @submit.prevent="save">
            <div class="mb-3">
              <label for="usernameInput" class="form-label">{{ $t('_common.username') }}</label>
              <input type="text" class="form-control" id="usernameInput" autocomplete="username"
                v-model="passwordData.newUsername" />
            </div>
            <div class="mb-3">
              <label for="passwordInput" class="form-label">{{ $t('_common.password') }}</label>
              <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
                v-model="passwordData.newPassword" required />
            </div>
            <div class="mb-3">
              <label for="confirmPasswordInput" class="form-label">{{ $t('welcome.confirm_password') }}</label>
              <input type="password" class="form-control" id="confirmPasswordInput" autocomplete="new-password"
                v-model="passwordData.confirmNewPassword" required />
            </div>
            <button type="submit" class="btn btn-primary" v-bind:disabled="loading">
              <log-in :size="18" class="icon"></log-in>
              {{ $t('welcome.login') }}
            </button>
            <div class="alert alert-danger mt-3 mb-0" v-if="error"><b>{{ $t('_common.error') }}</b> {{error}}</div>
            <div class="alert alert-success mt-3 mb-0" v-if="success">
              <b>{{ $t('_common.success') }}</b> {{ $t('welcome.welcome_success') }}
            </div>
          </form>
        </div>
      </div>
      <div>
        <Resource-Card></Resource-Card>
      </div>
    </div>
  </main>
</body>

<script type="module">
  import { createApp } from "vue"
  import ResourceCard from './ResourceCard.vue'
  import { initApp } from './init'
  import { apiFetch } from './fetch_utils'
  import Notification from './Notification.vue'
  import NavbarSimple from './NavbarSimple.vue'
  import { loadAutoTheme } from './theme'
  import { LogIn } from '@lucide/vue'

  loadAutoTheme();

  let app = createApp({
    components: {
      ResourceCard,
      Notification,
      NavbarSimple,
      LogIn,
    },
    data() {
      return {
        error: null,
        success: false,
        loading: false,
        passwordData: {
          newUsername: "sunshine",
          newPassword: "",
          confirmNewPassword: "",
        },
      };
    },
    methods: {
      save() {
        this.error = null;
        this.loading = true;
        apiFetch("./api/password", {
          method: "POST",
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.passwordData),
        }).then((r) => {
          this.loading = false;
          if (r.status === 200) {
            r.json().then((rj) => {
              this.success = rj.status;
              if (this.success === true) {
                setTimeout(() => {
                  document.location.reload();
                }, 5000);
              } else {
                this.error = rj.error;
              }
            });
          } else {
            this.error = "Internal Server Error";
          }
        });
      },
    },
  });

  initApp(app);
</script>

</html>
