Sunshine/src_assets/common/assets/web/password.html

<div id="app" class="container">
  <h1 class="my-4">Password Change</h1>
  <form @submit.prevent="save">
    <div class="card d-flex p-4 flex-row">
      <div class="col-md-6 px-4">
        <h4>Current Credentials</h4>
        <div class="mb-3">
          <label for="currentUsername" class="form-label">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">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>New Credentials</h4>
        <div class="mb-3">
          <label for="newUsername" class="form-label">New Username</label>
          <input
            type="text"
            class="form-control"
            id="newUsername"
            v-model="passwordData.newUsername"
          />
          <div class="form-text">
            If not specified, the username will not change
          </div>
        </div>
        <div class="mb-3">
          <label for="newPassword" class="form-label">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"
            >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>Success! </b>This page will reload soon, your browser will ask you for
      the new credentials
    </div>
    <div class="mb-3 buttons">
      <button class="btn btn-primary">Save</button>
    </div>
  </form>
</div>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        error: null,
        success: false,
        passwordData: {
          currentUsername: "",
          currentPassword: "",
          newUsername: "",
          newPassword: "",
          confirmNewPassword: "",
        },
      };
    },
    methods: {
      save() {
        this.error = null;
        fetch("/api/password", {
          method: "POST",
          body: JSON.stringify(this.passwordData),
        }).then((r) => {
          if (r.status == 200) {
            r.json().then((rj) => {
              if (rj.status.toString() === "true") {
                this.success = true;
                setTimeout(() => {
                  document.location.reload();
                }, 5000);
              } else {
                this.error = rj.error;
              }
            });
          } else {
            this.error = "Internal Server Error";
          }
        });
      },
    },
  });
</script>

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

  .buttons {
    padding: 1em 0;
  }
</style>