jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Improve mobile login and password reset view

Browse Source
This commit is contained in:
Johannes Zellner
2025-04-02 17:07:44 +02:00
parent f89c0bb07c
commit 05705be7c3
3 changed files with 37 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/PublicPageLayout.vue
+25 -43
View File
@@ -12,10 +12,9 @@ const props = defineProps({
</script>
<template>
<!-- TODO mobile layout -->
<div class="public-page-layout">
<div class="public-page-layout-root">
<div class="public-page-layout-left" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
<div class="public-page-layout-left pankow-no-mobile" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
<img width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
</div>
@@ -24,18 +23,28 @@ const props = defineProps({
</div>
</div>
<div class="public-page-layout-root-mobile" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
<img width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
<div class="public-page-layout-content">
<slot></slot>
</div>
</div>
<footer v-show="footerHtml" v-html="footerHtml"></footer>
</div>
</template>
<style>
.public-page-layout-button-bar {
margin-top: 12px;
display: flex;
flex-direction: row;
gap: 6px;
align-items: center;
}
@media (max-width: 576px) {
.public-page-layout-button-bar {
flex-direction: column;
}
}
</style>
<style scoped>
.public-page-layout {
@@ -75,47 +84,20 @@ const props = defineProps({
justify-content: center;
}
.public-page-layout-root-mobile {
display: none;
}
@media (max-width: 576px) {
.public-page-layout-root {
display: none;
}
.public-page-layout-root-mobile {
.public-page-layout-right {
text-align: center;
display: flex;
background-color: rgba(0,0,0,0.1);
background-size: cover;
background-position: center;
flex-direction: column;
height: 100%;
width: 100%;
padding-left: 10px;
padding-right: 10px;
flex-basis: unset;
align-items: center;
justify-content: center;
gap: 20px;
}
.public-page-layout-root-mobile > img {
border-radius: 10px;
}
.public-page-layout-content {
display: flex;
text-align: center;
padding: 20px;
background-color: rgba(255,255,255,0.3);
filter: drop-shadow(0px 0px 14px white);
border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
.public-page-layout-content {
background-color: rgba(0,0,0,0.3);
filter: drop-shadow(0px 0px 14px black);
border-radius: 10px;
}
}
}
</style>
dashboard/src/views/LoginView.vue
+4 -2
View File
@@ -109,8 +109,10 @@ onMounted(async () => {
<PasswordInput id="inputPassword" v-model="password" required/>
</FormGroup>
<Button id="loginSubmitButton" style="margin-top: 12px" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
<a href="/passwordreset.html" style="margin-left: 10px;">{{ $t('login.resetPasswordAction') }}</a>
<div class="public-page-layout-button-bar">
<Button id="loginSubmitButton" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
<a href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
</div>
</form>
<form @submit.prevent="onSubmit" v-if="totpTokenRequired" autocomplete="off">
dashboard/src/views/PasswordResetView.vue
+8 -4
View File
@@ -123,8 +123,10 @@ onMounted(async () => {
<TextInput id="inputPasswordResetIdentifier" name="passwordResetIdentifier" v-model="passwordResetIdentifier" :disabled="busy" autofocus required />
</FormGroup>
<Button style="margin-top: 12px" @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
<a href="/" style="margin-left: 10px;">{{ $t('passwordReset.backToLoginAction') }}</a>
<div class="public-page-layout-button-bar">
<Button @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
<a href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
</div>
</form>
</div>
@@ -161,8 +163,10 @@ onMounted(async () => {
<p class="has-error" v-if="error.totpToken">{{ error.totpToken }}</p>
</FormGroup>
<Button style="margin-top: 12px" @click="onNewPassword()" :disabled="busy || !newPassword || newPassword !== newPasswordRepeat" :loading="busy">{{ $t('passwordReset.passwordChanged.submitAction') }}</Button>
<a href="/" style="margin-left: 10px;">{{ $t('passwordReset.backToLoginAction') }}</a>
<div class="public-page-layout-button-bar">
<Button @click="onNewPassword()" :disabled="busy || !newPassword || newPassword !== newPasswordRepeat" :loading="busy">{{ $t('passwordReset.passwordChanged.submitAction') }}</Button>
<a href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
</div>
</form>
</div>