torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor backend CORS settings to include default origins and improve error handling in chat services: Introduce dynamic CORS origin handling, enhance RabbitMQ message sending with fallback mechanisms, and update WebSocket service to manage pending messages. Update UI components for better accessibility and responsiveness, including adjustments to dialog and navigation elements. Enhance styling for improved user experience across various components.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-03-19 14:44:04 +01:00
parent 4442937ebd
commit 9d44a265ca
67 changed files with 5426 additions and 1099 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
frontend/src/views/home/NoLoginView.vue
View File

@@ -8,44 +8,56 @@
<Character3D gender="male" />
</div>
<div class="actions">
<div>
<h2>{{ $t('home.nologin.welcome') }}</h2>
<p>{{ $t('home.nologin.description') }}</p>
<section class="actions-panel actions-panel--story surface-card">
<div class="panel-intro">
<span class="panel-kicker">Dein Einstieg</span>
<h2>{{ $t('home.nologin.welcome') }}</h2>
<p>{{ $t('home.nologin.description') }}</p>
</div>
<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>
<div class="story-highlight">
<p>
YourPart verbindet Community, Echtzeit-Chat, Foren, Bildergalerie und das Aufbauspiel
<em>Falukant</em> in einer Plattform. Der Fokus liegt auf Austausch, spielerischer Tiefe und
einer wachsenden Produktwelt.
</p>
</div>
<h3>{{ $t('home.nologin.expected.title') }}</h3>
<ul>
<div class="story-block">
<h3>{{ $t('home.nologin.expected.title') }}</h3>
<ul class="feature-list">
<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>
</ul>
</div>
<h3>{{ $t('home.nologin.falukantShort.title') }}</h3>
<p>{{ $t('home.nologin.falukantShort.text') }}</p>
<div class="story-columns">
<article>
<h3>{{ $t('home.nologin.falukantShort.title') }}</h3>
<p>{{ $t('home.nologin.falukantShort.text') }}</p>
</article>
<article>
<h3>{{ $t('home.nologin.privacyBeta.title') }}</h3>
<p>{{ $t('home.nologin.privacyBeta.text') }}</p>
</article>
</div>
<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>
<div class="story-cta">
<h3>{{ $t('home.nologin.getStarted.title') }}</h3>
<p>{{ $t('home.nologin.getStarted.text', { register: $t('home.nologin.login.register') }) }}</p>
</div>
</section>
<section class="actions-panel actions-panel--access surface-card">
<div class="login-panel">
<span class="panel-kicker">Direkt starten</span>
<h2>{{ $t('home.nologin.login.submit') }}</h2>
<div class="login-fields">
<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"
@@ -57,20 +69,26 @@
<span>{{ $t('home.nologin.login.stayLoggedIn') }}</span>
</label>
</div>
<button type="button" class="primary-action" @click="doLogin">{{ $t('home.nologin.login.submit') }}</button>
</div>
<div>
<button type="button" @click="doLogin">{{ $t('home.nologin.login.submit') }}</button>
<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>
<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>
</section>
</div>
<div class="mascot">
<Character3D gender="female" />
@@ -138,19 +156,22 @@ export default {
<style scoped>
.beta-banner {
background: #fff3cd;
border: 1px solid #ffeeba;
color: #856404;
width: min(100%, var(--content-max-width));
background: linear-gradient(180deg, #fff2cf 0%, #fde7b2 100%);
border: 1px solid rgba(201, 130, 31, 0.24);
color: #8a5a12;
padding: 10px 14px;
margin: 0 0 12px 0;
margin: 0 0 14px 0;
text-align: center;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.home-structure {
display: flex;
align-items: stretch;
justify-content: center;
gap: 2em;
gap: 1.4rem;
width: 100%;
height: 100%;
flex: 1;
@@ -169,7 +190,7 @@ export default {
align-items: stretch;
background: linear-gradient(180deg, #fff5e8 0%, #fce7ca 100%);
border: 1px solid rgba(248, 162, 43, 0.16);
border-radius: 20px;
border-radius: var(--radius-lg);
box-shadow: 0 10px 24px rgba(93, 64, 55, 0.08);
overflow: hidden;
align-self: center;
@@ -181,26 +202,124 @@ export default {
.actions {
display: flex;
flex-direction: column;
gap: 2em;
gap: 1rem;
flex: 1 1 auto;
min-height: 0;
}
.actions>div {
.actions-panel {
flex: 1;
min-height: 0;
background-color: #FFF4F0;
align-items: center;
justify-content: flex-start;
display: flex;
background:
linear-gradient(180deg, rgba(255, 251, 246, 0.96) 0%, rgba(248, 240, 231, 0.96) 100%);
color: #5D4037;
display: flex;
flex-direction: column;
overflow: auto;
padding: 0.5rem;
padding: 1.2rem 1.25rem;
text-align: left;
}
.actions>div>h2 {
color: var(--color-primary-orange);
.actions-panel h2,
.actions-panel h3 {
width: 100%;
}
.panel-kicker {
display: inline-block;
margin-bottom: 0.7rem;
padding: 0.3rem 0.65rem;
border-radius: 999px;
background: rgba(248, 162, 43, 0.12);
color: #8a5411;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.panel-intro,
.story-highlight,
.story-block,
.story-columns,
.story-cta,
.login-panel,
.access-split {
width: 100%;
}
.story-highlight {
padding: 1rem 1.1rem;
margin: 0.8rem 0 1rem;
border-radius: var(--radius-lg);
background: rgba(248, 162, 43, 0.08);
border: 1px solid rgba(248, 162, 43, 0.12);
}
.story-block {
margin-bottom: 1rem;
}
.feature-list {
padding-left: 1.1rem;
}
.feature-list li + li {
margin-top: 0.55rem;
}
.story-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
margin-bottom: 1rem;
}
.story-columns article,
.story-cta,
.access-card {
padding: 1rem 1.05rem;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.68);
border: 1px solid var(--color-border);
}
.login-panel {
padding: 1rem 1.05rem;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--color-border);
margin-bottom: 1rem;
}
.login-fields {
display: grid;
gap: 0.8rem;
}
.primary-action,
.secondary-action {
align-self: flex-start;
}
.primary-action {
margin-top: 0.8rem;
}
.access-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
.access-card p {
margin-bottom: 0.9rem;
}
.access-links {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
}
.stay-logged-in-row {
@@ -299,8 +418,13 @@ export default {
min-height: auto;
}
.actions>div {
.actions-panel {
min-height: 260px;
}
.story-columns,
.access-split {
grid-template-columns: 1fr;
}
}
</style>