Sunshine/assets/assets_common/web/welcome.html

<main role="main" id="app" style="max-width: 600px; margin: 0 auto">
  <header>
    <h1 class="mb-0">Welcome to Sunshine!</h1>
    <p class="mb-0 align-self-start">
      Before Getting Started, we need you to make a new username and password for accessing the Web UI.
    </p>
  </header>
  <div class="alert alert-warning">
    The credentials below are needed to access Sunshine's Web UI.<br />
    Keep them safe, since <b>you will never see them again!</b>
  </div>
  <form @submit.prevent="save">
    <div class="mb-2">
      <label for="usernameInput" class="form-label">Username:</label>
      <input
        type="text"
        class="form-control"
        id="usernameInput"
        autocomplete="username"
        v-model="passwordData.newUsername"
      />
    </div>
    <div class="mb-2">
      <label for="passwordInput" class="form-label">Password:</label>
      <input
        type="password"
        class="form-control"
        id="passwordInput"
        autocomplete="new-password"
        v-model="passwordData.newPassword"
        required
      />
    </div>
    <div class="mb-2">
      <label for="confirmPasswordInput" class="form-label"
        >Password (confirm):</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 w-100 mb-2"
      v-bind:disabled="loading"
    >
      Login
    </button>
    <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>
  </form>
</main>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        error: null,
        success: false,
        loading: false,
        passwordData: {
          newUsername: "sunshine",
          newPassword: "",
          confirmNewPassword: "",
        },
      };
    },
    methods: {
      save() {
        this.error = null;
        this.loading = true;
        fetch("/api/password", {
          method: "POST",
          body: JSON.stringify(this.passwordData),
        }).then((r) => {
          this.loading = false;
          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>