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

<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 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>Eingeloggt bleiben</span></label>
                    </div>
                </div>
                <div>
                    <button type="button" @click="doLogin">Einloggen</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"><img src="/images/mascot/mascot_female.png" /></div>
        <RandomChatDialog ref="randomChatDialog" />
        <RegisterDialog ref="registerDialog" />
        <PasswordResetDialog ref="passwordResetDialog" />
    </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 apiClient from '@/utils/axios.js';
import { mapActions } from 'vuex';

export default {
    name: 'HomeNoLoginView',
    data() {
        return {
            username: '',
            password: '',
        };
    },
    components: {
        RandomChatDialog,
        RegisterDialog,
        PasswordResetDialog,
    },
    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>
.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>