Add random chat button to NoLoginView: Introduce a new button for starting random chats, enhancing user engagement options. Update layout for improved accessibility and visual consistency.

This commit is contained in:
Torsten Schulz (local)
2026-03-22 13:19:22 +01:00
parent f98352088e
commit 2055c11fd9

View File

@@ -59,6 +59,7 @@
<div class="quick-access-actions">
<button type="button" class="primary-action" @click="doLogin">{{ $t('home.nologin.login.submit') }}</button>
<button type="button" class="secondary-action" @click="openRegisterDialog">{{ $t('home.nologin.login.register') }}</button>
<button type="button" class="secondary-action" @click="openRandomChat">{{ $t('home.nologin.startrandomchat') }}</button>
</div>
<div class="login-fields">
<input ref="usernameInput" v-model="username" size="20" type="text" :placeholder="$t('home.nologin.login.name')"
@@ -74,23 +75,14 @@
<span>{{ $t('home.nologin.login.stayLoggedIn') }}</span>
</label>
</div>
</div>
<div class="access-split">
<article class="access-card">
<h3>{{ $t('home.nologin.randomchat') }}</h3>
<p>Ohne lange Vorbereitung direkt in spontane Begegnungen und offene Gespraeche starten.</p>
<button type="button" class="secondary-action" @click="openRandomChat">{{ $t('home.nologin.startrandomchat') }}</button>
</article>
<article class="access-card">
<h3>Konto und Zugang</h3>
<p>Neu hier oder Passwort vergessen? Von hier aus gelangst du direkt in Registrierung und Wiederherstellung.</p>
<div class="access-links">
<span @click="openPasswordResetDialog" class="link">{{
$t('home.nologin.login.lostpassword') }}</span>
<span @click="openRegisterDialog" class="link">{{ $t('home.nologin.login.register') }}</span>
</div>
</article>
<div class="access-links">
<span @click="openPasswordResetDialog" class="link">{{
$t('home.nologin.login.lostpassword') }}</span>
<span @click="openRegisterDialog" class="link">{{ $t('home.nologin.login.register') }}</span>
</div>
<p class="login-panel__footnote">
Oder ohne Konto direkt in spontane Begegnungen und offene Gespräche starten.
</p>
</div>
</section>
</div>
@@ -352,9 +344,17 @@ export default {
.access-links {
display: flex;
flex-wrap: wrap;
margin-top: 0.1rem;
gap: 0.9rem;
}
.login-panel__footnote {
margin: 0;
color: var(--color-text-secondary);
font-size: 0.92rem;
line-height: 1.35;
}
.stay-logged-in-row {
width: 100%;
display: flex;