jyapayne/Sunshine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(web-ui): modernize UI (#4631)

Browse source
This commit is contained in:
David Lane 2026-01-29 10:16:37 -05:00 • committed by GitHub
commit 3ce39b36d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 3529 additions and 456 deletions
Download patch file Download diff file Expand all files Collapse all files

91
src_assets/common/assets/web/password.html
View file

@ -3,17 +3,6 @@
<head>
<%- header %>
<style>
.config-page {
padding: 1em;
border: 1px solid #dee2e6;
border-top: none;
}
.buttons {
padding: 1em 0;
}
</style>
</head>
<body id="app" v-cloak>
@ -21,46 +10,52 @@
<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 class="card">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<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>
<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">
<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>
</div>
<div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
<div class="alert alert-success" v-if="success">
<div class="alert alert-danger my-3" v-if="error"><b>Error: </b>{{error}}</div>
<div class="alert alert-success my-3" 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 class="mb-3 mt-4">
<button class="btn btn-primary">
<save :size="18" class="icon"></save>
{{ $t('_common.save') }}
</button>
</div>
</form>
</div>
@ -69,10 +64,12 @@
import { createApp } from 'vue'
import { initApp } from './init'
import Navbar from './Navbar.vue'
import { Save } from 'lucide-vue-next'
const app = createApp({
components: {
Navbar
Navbar,
Save,
},
data() {
return {