basic styles, login, ...

src/App.vue

@@ -1,6 +1,15 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/Welcome.vue'
+import { store } from './store.js'
+
+/**
+ * Logout the user.
+ */
+function logOut() {
+  store.loggedIn = false;
+}
+
 </script>
 
 <template>
@@ -8,11 +17,12 @@ import HelloWorld from './components/Welcome.vue'
     <img alt="basebox logo" class="logo" src="@/assets/img/basebox_logo.svg" />
 
     <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+      <HelloWorld />
 
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>
+        <a v-if="store.loggedIn" href="" @click="logOut">Log Out</a>
       </nav>
     </div>
   </header>
@@ -20,7 +30,7 @@ import HelloWorld from './components/Welcome.vue'
   <RouterView />
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 header {
   line-height: 1.5;
   max-height: 100vh;
@@ -30,6 +40,7 @@ header {
 .logo {
   display: block;
   margin: 0 auto 2rem;
+  max-width: 100%;
 }
 
 nav {
@@ -37,6 +48,9 @@ nav {
   font-size: 12px;
   text-align: center;
   margin-top: 2rem;
+  @media(max-width: 1024px) {
+    margin-bottom: 2rem;
+  }
 }
 
 nav a.router-link-exact-active {

src/assets/base.css

@@ -34,6 +34,11 @@
   --color-text: var(--vt-c-text-light-1);
 
   --section-gap: 160px;
+
+  --color-input-background: #fff;
+  --color-input: rgba(0,0,0,.85);
+  --color-input-border-focus: rgba(0,0,0,.2);
+  --color-error-text: darkred;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -47,6 +52,10 @@
 
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
+    --color-input-background: rgba(255,255,255,.05);
+    --color-input: rgba(255,255,255,.8);
+    --color-input-border-focus: rgba(0,0,0,.4);
+    --color-error-text: red;
   }
 }
 

src/assets/main.scss

@@ -8,6 +8,10 @@
   font-weight: normal;
 }
 
+ul{
+  padding-left: 18px;
+}
+
 a,
 .primary {
   text-decoration: none;
@@ -33,3 +37,54 @@ a,
     padding: 0 4rem 0 2rem;
   }
 }
+
+
+.form-group {
+  margin: 25px 0;
+  label {
+    text-transform: uppercase;
+    font-size: .8rem;
+    font-weight: 700;
+    display: block;
+    margin-bottom: 5px;
+  }
+  input {
+    border: 1px solid var(--color-border);
+    padding: 6px 8px;
+    display: block;
+    border-radius: 2px;
+    width: 100%;
+    background-color: var(--color-input-background);
+    color: var(--color-input);
+    appearance: none;
+    &:focus {
+      border-color: var(--color-input-border-focus);
+    }
+  }
+}
+
+.form-buttons {
+  margin-top: 25px;
+  padding-top: 20px;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  gap: 1rem;
+}
+
+.btn {
+  padding: 5px 20px;
+  border: 1px solid var(--color-border);
+  border-radius: 2px;
+  cursor: pointer;
+  &.btn-primary {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+  }
+}
+
+form .error {
+  color: var(--color-error-text);
+  margin: 25px 0 0 0;
+}
+

src/components/Login.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { ref } from "vue";
+
+let username = ref("");
+let password = ref("");
+let errorTxt = ref("");
+/**
+ * Perform login.
+ */
+function login() {
+  if (!username.value || !password.value) {
+    errorTxt.value = "Please fill in both fields.";
+    return;
+  }
+}
+</script>
+
+<template>
+<div id="login-form">
+  <form>
+    <h3>Please log in:</h3>
+    <div class="form-group">
+      <label>Username</label>
+      <input type="text" name="username" v-bind="username">
+    </div>
+    <div class="form-group">
+      <label>Password</label>
+      <input type="password" name="password" v-bind="password">
+    </div>
+
+    <div v-if="errorTxt" class="error">{{ errorTxt }}</div>
+
+    <div class="form-buttons">
+      <button class="btn btn-primary" @click="login" type="button">Login</button>
+    </div>
+
+  </form>
+</div>
+
+</template>
+
+<style lang="scss" scoped>
+
+#login-form {
+  padding: 2rem;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+}
+
+</style>

src/components/TheAbout.vue

@@ -4,7 +4,6 @@ import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'
 import EcosystemIcon from './icons/IconEcosystem.vue'
 import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
 </script>
 
 <template>
@@ -26,23 +25,16 @@ import SupportIcon from './icons/IconSupport.vue'
 
     <p>We built basebox in 100% <a href="https://rust-lang.org">Rust</a>, but you can use about
     any tool, language or framework to use basebox as your backend. As long as it can send
-      <a href="https://graphql.org">GraphQL</a> requests, it can build on basebox!</p>
+      <a href="https://graphql.org">GraphQL</a> requests and understands JSON, it can build on basebox!</p>
   </AboutItem>
 
   <AboutItem>
     <template #icon>
       <EcosystemIcon />
     </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
+    <template #heading>Client Framework</template>
+      This demo todo app is based on <a href="https://vuejs.org">Vue 3</a>. We will (or already have)
+    provide more samples based on other frameworks, e.g. React - although the basic idea stays the same. 
   </AboutItem>
 
   <AboutItem>
@@ -51,24 +43,14 @@ import SupportIcon from './icons/IconSupport.vue'
     </template>
     <template #heading>Support</template>
 
-    If you need help, check out the support options on our <a href="https://basebox.tech">website</a>.<br>
-    Some options:
+    If you need help, check out our <a href="https://basebox.tech">website</a>.<br>
+    Some support options:
     <ul>
-      <li>Check the <a href="https://basebox.tech/faq">FAQs</a></li>
+      <li>See our <a href="https://basebox.tech/faq">FAQs</a></li>
+      <li>Read the <a href="https://docs.basebox.tech">documentation</a></li>
       <li>Open a <a href="https://basebox.tech/open-a-ticket">ticket</a></li>
-      <li>Read the <a href="https://docs.basebox.tech">documenation</a></li>
     </ul>
 
   </AboutItem>
 
-  <AboutItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </AboutItem>
 </template>

src/components/Welcome.vue

@@ -1,6 +1,12 @@
+<script setup>
+
+import { store} from "../store";
+
+</script>
+
 <template>
   <div class="greetings">
-    <h1 class="primary">Welcome</h1>
+    <h1 class="primary">Welcome, {{ store.userName }}!</h1>
     <h3>
       To basebox' ToDo Sample app.
     </h3>

src/store.js

@@ -0,0 +1,20 @@
+/**
+ * Store.js - global app state.
+ *
+ * Part of the basebox sample TODO app.
+ * https://basebox.tech
+ */
+import { reactive } from 'vue'
+import { ref } from "vue";
+
+export const store = reactive({
+
+  /** true if a user is currently logged in */
+  loggedIn: ref(false),
+
+  /** Username of the currently logged in user */
+  userName: ref("stranger"),
+
+  /** The host that runs basebox and waits for GraphQL requests */
+  baseboxHost: "http://127.0.0.1:8000",
+})

src/views/HomeView.vue

@@ -1,9 +1,13 @@
 <script setup>
 import TheWelcome from '../components/TheAbout.vue'
+import { store } from "../store";
+import Login from "../components/Login.vue";
+
 </script>
 
 <template>
   <main>
-    <TheWelcome />
+    <!-- Force user to log in before he/she can see tasks. -->
+    <Login v-if="!store.loggedIn"/>
   </main>
 </template>