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

20
src_assets/common/assets/web/NavbarSimple.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<nav class="navbar navbar-sunshine">
<div class="container-fluid">
<span class="navbar-brand" title="Sunshine">
<img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
</span>
<ThemeToggle/>
</div>
</nav>
</template>
<script>
import ThemeToggle from './ThemeToggle.vue'
export default {
components: {
ThemeToggle,
},
}
</script>

1
src_assets/common/assets/web/ResourceCard.vue
View File

@@ -2,7 +2,6 @@
<div class="card">
<div class="card-body">
<h2>{{ $t('resource_card.resources') }}</h2>
<p>{{ $t('resource_card.resources_desc') }}</p>
<div class="d-flex flex-wrap gap-2 mt-4">
<a class="btn btn-success" href="https://app.lizardbyte.dev" target="_blank">
<Globe :size="18" class="icon"></Globe>

4
src_assets/common/assets/web/logout.html
View File

@@ -6,12 +6,12 @@
</head>
<body id="app" v-cloak>
<Navbar-Simple></Navbar-Simple>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<div class="card">
<div class="card-body text-center">
<img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine" class="mb-3">
<h1 class="h3 mb-3">{{ $t('logout.logged_out') }}</h1>
<p class="text-muted mb-4">{{ $t('logout.logged_out_desc') }}</p>
<a class="btn btn-primary" href="./">
@@ -29,12 +29,14 @@
import { initApp } from './init'
import { loadAutoTheme } from './theme'
import { LogIn } from '@lucide/vue'
import NavbarSimple from './NavbarSimple.vue'
loadAutoTheme();
const app = createApp({
components: {
LogIn,
NavbarSimple,
},
});

1
src_assets/common/assets/web/public/assets/locale/en.json
View File

@@ -523,7 +523,6 @@
"license": "License",
"lizardbyte_website": "LizardByte Website",
"resources": "Resources",
"resources_desc": "Resources for Sunshine!",
"third_party_notice": "Third Party Notice"
},
"troubleshooting": {

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

@@ -6,45 +6,44 @@
</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>
<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-2">
<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-2">
<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-2">
<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 w-100 mb-2" v-bind:disabled="loading">
<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" v-if="error"><b>{{ $t('_common.error') }}</b> {{error}}</div>
<div class="alert alert-success" v-if="success">
<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>
</div>
<div>
<Resource-Card></Resource-Card>
</div>
@@ -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>