<!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" />

  <style>
    .config-page {
      padding: 1em;
      border: 1px solid #dee2e6;
      border-top: none;
    }

    .buttons {
      padding: 1em 0;
    }
  </style>
  <script type="module" crossorigin src="./assets/password-Bi3re4GD.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/_plugin-vue_export-helper-Bah2QB50.js">
  <link rel="modulepreload" crossorigin href="./assets/Navbar-Fg1INzmv.js">
  <link rel="stylesheet" crossorigin href="./assets/_plugin-vue_export-helper-D_k9xtOw.css">
  <link rel="stylesheet" crossorigin href="./assets/Navbar-dej49bs7.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 d-flex p-4 flex-row">
        <div class="col-md-6 px-4">
          <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 class="form-text">&nbsp;</div>
          </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 px-4">
          <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 class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
      <div class="alert alert-success" v-if="success">
        <b>{{ $t('_common.success') }}</b> {{ $t('password.success_msg') }}
      </div>
      <div class="mb-3 buttons">
        <button class="btn btn-primary">{{ $t('_common.save') }}</button>
      </div>
    </form>
  </div>
</body>

