T-Gander/Sunshine
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(web-ui): Welcome page styling (#5466)

Browse Source
This commit is contained in:
Noklef
2026-08-07 23:45:59 +10:00
committed by GitHub
parent 0784774fec
commit e9ed5188f5
5 changed files with 67 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,44 +6,43 @@
</head>
<body id="app" v-cloak>
<Navbar-Simple></Navbar-Simple>
<Notification></Notification>
<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="">
{{ $t('welcome.greeting') }}
</h1>
</header>
<p class="my-2 align-self-start">{{ $t('welcome.create_creds') }}</p>
<div class="alert alert-warning">
{{ $t('welcome.create_creds_alert') }}
<main id="content" class="container" role="main">
<h1 class="my-4">{{ $t('welcome.greeting') }}</h1>
<p>{{ $t('welcome.create_creds') }}</p>
<div class="d-flex gap-4 align-items-start">
<div class="card">
<div class="card-body">
<div class="alert alert-warning">
{{ $t('welcome.create_creds_alert') }}
</div>
<form @submit.prevent="save">
<div class="mb-3">
<label for="usernameInput" class="form-label">{{ $t('_common.username') }}</label>
<input type="text" class="form-control" id="usernameInput" autocomplete="username"
v-model="passwordData.newUsername" />
</div>
<div class="mb-3">
<label for="passwordInput" class="form-label">{{ $t('_common.password') }}</label>
<input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
v-model="passwordData.newPassword" required />
</div>
<div class="mb-3">
<label for="confirmPasswordInput" class="form-label">{{ $t('welcome.confirm_password') }}</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" v-bind:disabled="loading">
<log-in :size="18" class="icon"></log-in>
{{ $t('welcome.login') }}
</button>
<div class="alert alert-danger mt-3 mb-0" v-if="error"><b>{{ $t('_common.error') }}</b> {{error}}</div>
<div class="alert alert-success mt-3 mb-0" v-if="success">
<b>{{ $t('_common.success') }}</b> {{ $t('welcome.welcome_success') }}
</div>
</form>
</div>
<form @submit.prevent="save">
<div class="mb-2">
<label for="usernameInput" class="form-label">{{ $t('_common.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">{{ $t('_common.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">{{ $t('welcome.confirm_password') }}</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">
{{ $t('welcome.login') }}
</button>
<div class="alert alert-danger" v-if="error"><b>{{ $t('_common.error') }}</b> {{error}}</div>
<div class="alert alert-success" v-if="success">
<b>{{ $t('_common.success') }}</b> {{ $t('welcome.welcome_success') }}
</div>
</form>
</div>
<div>
<Resource-Card></Resource-Card>
@@ -58,11 +57,18 @@
import { initApp } from './init'
import { apiFetch } from './fetch_utils'
import Notification from './Notification.vue'
import NavbarSimple from './NavbarSimple.vue'
import { loadAutoTheme } from './theme'
import { LogIn } from '@lucide/vue'
loadAutoTheme();
let app = createApp({
components: {
ResourceCard,
Notification,
NavbarSimple,
LogIn,
},
data() {
return {
@@ -109,3 +115,5 @@
initApp(app);
</script>
</html>