@@ -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,11 +29,13 @@
  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,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>

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

@@ -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>

@@ -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') }}
        </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') }}
  <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>
          <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>
      </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>