Initial commit

frontend/src/views/HomeView.vue

@@ -0,0 +1,23 @@
+<template>
+  <component :is="currentView"></component>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import HomeNoLoginView from './home/NoLoginView.vue';
+import HomeLoggedInView from './home/LoggedInView.vue';
+
+export default {
+  name: 'HomeView',
+  components: {
+    HomeNoLoginView,
+    HomeLoggedInView
+  },
+  computed: {
+    ...mapGetters(['isLoggedIn']),
+    currentView() {
+      return this.isLoggedIn ? 'HomeLoggedInView' : 'HomeNoLoginView';
+    }
+  }
+};
+</script>

frontend/src/views/home/LoggedInView.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <h1>Welcome to Home (Logged In)</h1>
+        <p>Here are your exclusive features.</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'HomeLoggedInView',
+};
+</script>
+
+<style scoped>
+</style>

frontend/src/views/home/NoLoginView.vue

@@ -0,0 +1,100 @@
+<template>
+    <div class="home-structure">
+        <div class="mascot"><img src="/images/mascot/mascot_male.png" /></div>
+        <div class="actions">
+            <div>
+                <h2>{{ $t('home.nologin.welcome') }}</h2>
+                <p>{{ $t('home.nologin.description') }}</p>
+                <h2>{{ $t('home.nologin.randomchat') }}</h2>
+                <button @click="openRandomChat">{{ $t('home.nologin.startrandomchat') }}</button>
+            </div>
+            <div>
+                <div>
+                    <div>
+                        <input data-object-name="user-name" size="20" type="text"
+                            :placeholder="$t('home.nologin.login.name')" :title="$t('home.nologin.login.namedescription')">
+                    </div>
+                    <div>
+                        <input data-object-name="password" size="20" type="password"
+                            :placeholder="$t('home.nologin.login.password')" :title="$t('home.nologin.login.passworddescription')">
+                    </div>
+                    <div>
+                        <label id="o1p5irxv" name="o1p5irxv" class="Wt-valid" title=""><input id="ino1p5irxv"
+                                data-object-name="remember-me" name="ino1p5irxv" type="checkbox"
+                                onchange="var e=event||window.event,o=this;Wt._p_.update(o,'s53',e,true);"><span
+                                id="to1p5irxv" name="to1p5irxv" style="white-space:normal;">Eingeloggt bleiben
+                                (ACHTUNG!!! Dafür wird ein Cookie gesetzt!)</span></label>
+                    </div>
+                </div>
+                <div class="Wt-buttons">
+                    <button id="o1p5irxz" data-object-name="login" type="button"
+                        onclick="var e=event||window.event,o=this;if(o.classList.contains('Wt-disabled')){Wt4_9_1.cancelEvent(e);return;}Wt._p_.update(o,'s56',e,true);"
+                        class="Wt-btn with-label">Einloggen</button>
+                </div>
+                <div class="Wt-buttons">
+                    <span id="o1p5iry0" data-object-name="lost-password"
+                        onclick="var e=event||window.event,o=this;if(o.classList.contains('Wt-disabled')){Wt4_9_1.cancelEvent(e);return;}Wt._p_.update(o,'s57',e,true);">Ich
+                        habe mein Paßwort vergessen</span> | <span id="o1p5iry1" data-object-name="register"
+                        onclick="var e=event||window.event,o=this;if(o.classList.contains('Wt-disabled')){Wt4_9_1.cancelEvent(e);return;}Wt._p_.update(o,'s58',e,true);">Ich
+                        möchte mich neu anmelden</span>
+                </div>
+            </div>
+        </div>
+        <div class="mascot"><img src="/images/mascot/mascot_female.png" /></div>
+        <RandomChatDialog ref="randomChatDialog" />
+    </div>
+</template>
+
+<script>
+import RandomChatDialog from '@/dialogues/chat/RandomChatDialog.vue';
+
+export default { 
+    name: 'HomeNoLoginView',
+    components: {
+        RandomChatDialog,
+    },
+    methods: {
+        openRandomChat() {
+            this.$refs.randomChatDialog.open();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.home-structure {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    overflow: hidden;
+    gap: 2em;
+    height:100%;
+}
+.home-structure > div {
+    flex: 1;
+    text-align: center;
+    display: flex;
+}
+.mascot {
+    justify-content: center;
+    align-items: center;
+    background-color: #fdf1db;
+}
+.actions {
+    display: flex;
+    flex-direction: column;
+    gap: 2em;
+}
+.actions > div {
+    flex: 1;
+    background-color: #fdf1db;
+    align-items: center;
+    justify-content:center;
+    display: flex;
+    color: #7E471B;
+    flex-direction: column;
+}
+.actions > div > h2 {
+    color: #F9A22C;
+}
+</style>