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

<head>
  <!-- TEMPLATE_HEADER - Used by Every UI Page -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sunshine</title>
<link rel="icon" type="image/x-icon" href="./images/sunshine.ico">
<link href="./assets/css/sunshine.css" rel="stylesheet" />

  <script type="module" crossorigin src="./assets/password-CHVIwd7n.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/createLucideIcon-mjjtyxlm.js">
  <link rel="modulepreload" crossorigin href="./assets/Notification-E6BjStlk.js">
  <link rel="modulepreload" crossorigin href="./assets/Navbar-e42_J4ze.js">
  <link rel="modulepreload" crossorigin href="./assets/fetch_utils-9iXjNOiI.js">
  <link rel="modulepreload" crossorigin href="./assets/save-DWz7vErV.js">
  <link rel="stylesheet" crossorigin href="./assets/createLucideIcon-BL5QWnkG.css">
  <link rel="stylesheet" crossorigin href="./assets/Notification-CVXXWQML.css">
  <link rel="stylesheet" crossorigin href="./assets/Navbar-vHSgVmbh.css">
</head>

<body id="app" v-cloak>
  <Navbar></Navbar>
  <div class="container">
    <h1 class="my-4">{{ $t('password.password_change') }}</h1>
    <form @submit.prevent="save">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <h4>{{ $t('password.current_creds') }}</h4>
              <div class="mb-3">
                <label for="currentUsername" class="form-label">{{ $t('_common.username') }}</label>
                <input required type="text" class="form-control" id="currentUsername"
                  v-model="passwordData.currentUsername" />
              </div>
              <div class="mb-3">
                <label for="currentPassword" class="form-label">{{ $t('_common.password') }}</label>
                <input autocomplete="current-password" type="password" class="form-control" id="currentPassword"
                  v-model="passwordData.currentPassword" />
              </div>
            </div>
            <div class="col-md-6">
              <h4>{{ $t('password.new_creds') }}</h4>
              <div class="mb-3">
                <label for="newUsername" class="form-label">{{ $t('_common.username') }}</label>
                <input type="text" class="form-control" id="newUsername" v-model="passwordData.newUsername" />
                <div class="form-text">{{ $t('password.new_username_desc') }}</div>
              </div>
              <div class="mb-3">
                <label for="newPassword" class="form-label">{{ $t('_common.password') }}</label>
                <input autocomplete="new-password" required type="password" class="form-control" id="newPassword"
                  v-model="passwordData.newPassword" />
              </div>
              <div class="mb-3">
                <label for="confirmNewPassword" class="form-label">{{ $t('password.confirm_password') }}</label>
                <input autocomplete="new-password" required type="password" class="form-control" id="confirmNewPassword"
                  v-model="passwordData.confirmNewPassword" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="alert alert-danger my-3" v-if="error"><b>Error: </b>{{error}}</div>
      <div class="alert alert-success my-3" v-if="success">
        <b>{{ $t('_common.success') }}</b> {{ $t('password.success_msg') }}
      </div>
      <div class="mb-3 mt-4">
        <button class="btn btn-primary">
          <save :size="18" class="icon"></save>
          {{ $t('_common.save') }}
        </button>
      </div>
    </form>
  </div>
</body>
