izackp/Apollo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web UI migration to Vite and Vue3 and improvements to the UX (#1673)

Browse Source 
Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
This commit is contained in:
TheElixZammuto
2023-12-28 01:25:49 +01:00
committed by GitHub
parent 6b7b5996cc
commit 5bdbda90b5
57 changed files with 1868 additions and 2177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src_assets/common/assets/web/welcome.html
View File

@@ -1,67 +1,67 @@
<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>
<!DOCTYPE html>
<html lang="en">
<script>
new Vue({
el: "#app",
<head>
<%- header %>
</head>
<body id="app">
<main role="main" style="max-width: 1200px; margin: 1em auto">
<div class="d-flex gap-4">
<div class="card p-2">
<header>
<h1 class="mb-0">
<img src="/images/logo-sunshine-45.png" height="45" alt="">
Welcome to Sunshine!
</h1>
</header>
<p class="my-2 align-self-start">
Before Getting Started, we need you to make a new username and password for accessing the Web UI.
</p>
<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>
</div>
<div>
<Resource-Card></Resource-Card>
</div>
</div>
</main>
</body>
<script type="module">
import { createApp } from "vue"
import ResourceCard from './ResourceCard.vue'
let app = createApp({
components: {
ResourceCard
},
data() {
return {
error: null,
@@ -101,4 +101,5 @@
},
},
});
app.mount("#app");
</script>