Sunshine/assets/web/welcome.html

<main role="main" id="app"  style="max-width: 600px;margin: 0 auto;">
    <div class="container-parent">
      <div class="container py-3">
        <h1 class="mb-0">Welcome to Sunshine!</h1>
        <p class="mb-0 align-self-start">Before Getting Started, write down below these credentials</p>
      </div>
    </div>
    <div class="alert alert-warning">These Credentials down below are needed to access the rest of the application.<br> Keep them safe, since <b>you will never see them again!</b></div>
    <form @submit.prevent="save" class="card p-4" style="width: 100%;">
        <div class="mb-2">
          <label for="" class="form-label">Username: </label>
          <input type="text" class="form-control" v-model="passwordData.newUsername">
        </div>
        <div class="mb-2">
          <label for="" class="form-label">Password: </label>
          <input type="password" class="form-control" v-model="passwordData.newPassword">
        </div>
        <div class="mb-2">
          <label for="" class="form-label">Password: </label>
          <input type="password" class="form-control" v-model="passwordData.confirmNewPassword">
        </div>
        <button class="mb-2 btn btn-primary" style="margin: 1em auto;">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>
</div>
</main>

<script>
  new Vue({
      el: '#app',
      data() {
          return {
              error: null,
              success: false,
              passwordData: {
                  newUsername: 'sunshine',
                  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>