yourpart3/frontend/src/views/home/NoLoginView.vue

<template>
    <div class="no-login-view">
        <div class="beta-banner" role="status" aria-live="polite">
            <strong>{{ $t('home.betaNoticeLabel') }}</strong> {{ $t('home.betaNoticeText') }}
        </div>
        <div class="home-structure">
            <div class="mascot">
                <Character3D gender="male" />
            </div>
            <div class="actions">
                <div>
                    <h2>{{ $t('home.nologin.welcome') }}</h2>
                    <p>{{ $t('home.nologin.description') }}</p>

                    <p>
                        YourPart ist eine wachsende Online‑Plattform, die Community‑Funktionen, Echtzeit‑Chat, Foren,
                        ein soziales Netzwerk mit Bildergalerie sowie das Aufbauspiel <em>Falukant</em> vereint.
                        Aktuell befindet sich die Seite in der Beta‑Phase – wir erweitern Funktionen, Inhalte und
                        Stabilität
                        kontinuierlich.
                    </p>

                    <h3>{{ $t('home.nologin.expected.title') }}</h3>
                    <ul>
                        <li v-html="$t('home.nologin.expected.items.chat')"></li>
                        <li v-html="$t('home.nologin.expected.items.social')"></li>
                        <li v-html="$t('home.nologin.expected.items.forum')"></li>
                        <li v-html="$t('home.nologin.expected.items.falukant')"></li>
                        <li v-html="$t('home.nologin.expected.items.minigames')"></li>
                        <li v-html="$t('home.nologin.expected.items.multilingual')"></li>
                    </ul>

                    <h3>{{ $t('home.nologin.falukantShort.title') }}</h3>
                    <p>{{ $t('home.nologin.falukantShort.text') }}</p>

                    <h3>{{ $t('home.nologin.privacyBeta.title') }}</h3>
                    <p>{{ $t('home.nologin.privacyBeta.text') }}</p>

                    <h3>{{ $t('home.nologin.getStarted.title') }}</h3>
                    <p>{{ $t('home.nologin.getStarted.text', { register: $t('home.nologin.login.register') }) }}</p>
                </div>
                <div>
                    <div>
                        <div>
                            <input v-model="username" size="20" type="text" :placeholder="$t('home.nologin.login.name')"
                                :title="$t('home.nologin.login.namedescription')" @keydown.enter="focusPassword">
                        </div>
                        <div>
                            <input v-model="password" size="20" type="password"
                                :placeholder="$t('home.nologin.login.password')"
                                :title="$t('home.nologin.login.passworddescription')" @keydown.enter="doLogin"
                                ref="passwordInput">
                        </div>
                        <div>
                            <label><input type="checkbox"><span>{{ $t('home.nologin.login.stayLoggedIn') }}</span></label>
                        </div>
                    </div>
                    <div>
                        <button type="button" @click="doLogin">{{ $t('home.nologin.login.submit') }}</button>
                    </div>
                    <div>
                        <h2>{{ $t('home.nologin.randomchat') }}</h2>
                        <button @click="openRandomChat">{{ $t('home.nologin.startrandomchat') }}</button>
                    </div>
                    <div>
                        <span @click="openPasswordResetDialog" class="link">{{
                            $t('home.nologin.login.lostpassword') }}</span> | <span id="o1p5iry1"
                            @click="openRegisterDialog" class="link">{{ $t('home.nologin.login.register') }}</span>
                    </div>
                </div>
            </div>
            <div class="mascot">
                <Character3D gender="female" />
            </div>
            <RandomChatDialog ref="randomChatDialog" />
            <RegisterDialog ref="registerDialog" />
            <PasswordResetDialog ref="passwordResetDialog" />
        </div>


    </div>
</template>

<script>
import RandomChatDialog from '@/dialogues/chat/RandomChatDialog.vue';
import RegisterDialog from '@/dialogues/auth/RegisterDialog.vue';
import PasswordResetDialog from '@/dialogues/auth/PasswordResetDialog.vue';
import Character3D from '@/components/Character3D.vue';
import apiClient from '@/utils/axios.js';
import { mapActions } from 'vuex';

export default {
    name: 'HomeNoLoginView',
    data() {
        return {
            username: '',
            password: '',
        };
    },
    components: {
        RandomChatDialog,
        RegisterDialog,
        PasswordResetDialog,
        Character3D,
    },
    methods: {
        ...mapActions(['login']),
        openRandomChat() {
            const dlg = this.$refs.randomChatDialog;
            if (dlg && typeof dlg.open === 'function') dlg.open();
        },
        openRegisterDialog() {
            const dlg = this.$refs.registerDialog;
            if (dlg && typeof dlg.open === 'function') dlg.open();
        },
        openPasswordResetDialog() {
            const dlg = this.$refs.passwordResetDialog;
            if (dlg && typeof dlg.open === 'function') dlg.open();
        },
        focusPassword() {
            this.$refs.passwordInput.focus();
        },
        async doLogin() {
            try {
                const response = await apiClient.post('/api/auth/login', { username: this.username, password: this.password });
                this.login(response.data);
            } catch (error) {
                this.$root.$refs.errorDialog.open(`tr:error.${error.response.data.error}`);
            }
        }
    }
};
</script>

<style scoped>
.beta-banner {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    text-align: center;
}

.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;
    width: 80%;
    height: 80%;
    min-height: 400px;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.actions>div {
    flex: 1;
    background-color: #fdf1db;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    color: #7E471B;
    flex-direction: column;
    overflow: auto;
    padding: 0.5rem;
}

.actions>div>h2 {
    color: #F9A22C;
}

.seo-content {
    max-width: 1000px;
    margin: 24px auto 0 auto;
    padding: 0 16px 40px 16px;
    color: #7E471B;
    background-color: #fdf1db;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 4px;
}

.seo-content h1 {
    font-size: 28px;
    margin: 0 0 8px 0;
}

.seo-content h2 {
    font-size: 20px;
    margin: 18px 0 6px 0;
    color: #444;
}

.seo-content p {
    line-height: 1.6;
    margin: 0 0 8px 0;
}

.seo-content ul {
    margin: 0 0 8px 20px;
}

/* Scrollbarer Bereich für "Was dich erwartet" */
.seo-content .expected {
    max-height: 200px;
    overflow: auto;
    padding-right: 8px;
    background-color: #fdf1db;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin: 12px 0;
}

.no-login-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>