Rework the public views to work better on mobile

This commit is contained in:
Johannes Zellner
2025-04-09 22:49:41 +02:00
parent e2dcc3c0ea
commit 7238b89437
5 changed files with 62 additions and 57 deletions
+3 -4
View File
@@ -2,7 +2,6 @@
import { ref, onMounted } from 'vue';
import { Button, PasswordInput, TextInput, fetcher, FormGroup } from 'pankow';
import { API_ORIGIN } from '../constants.js';
import PublicPageLayout from '../components/PublicPageLayout.vue';
const ready = ref(false);
@@ -87,7 +86,7 @@ onMounted(async () => {
<template>
<PublicPageLayout :footerHtml="footer">
<div v-if="ready" style="max-width: 300px;">
<div v-if="ready">
<small>{{ $t('login.loginTo') }}</small>
<h1>{{ name }}</h1>
<br/>
@@ -110,8 +109,8 @@ onMounted(async () => {
<div class="has-error" v-if="passwordError">{{ $t('login.errorIncorrectCredentials') }}</div>
<div class="has-error" v-if="internalError">{{ $t('login.errorInternal') }}</div>
<div class="public-page-layout-button-bar">
<Button id="loginSubmitButton" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
<div style="margin-top: 20px">
<Button style="margin-right: 6px" id="loginSubmitButton" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
<a href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
</div>
</fieldset>
+3 -3
View File
@@ -109,7 +109,7 @@ onMounted(async () => {
<template>
<PublicPageLayout :footerHtml="footer">
<div v-if="ready" style="max-width: 300px;">
<div v-if="ready">
<div v-if="mode === MODE.RESET_PASSWORD">
<small>{{ $t('passwordReset.title') }}</small>
@@ -123,8 +123,8 @@ onMounted(async () => {
<TextInput id="inputPasswordResetIdentifier" name="passwordResetIdentifier" v-model="passwordResetIdentifier" :disabled="busy" autofocus required />
</FormGroup>
<div class="public-page-layout-button-bar">
<Button @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
<div style="margin-top: 20px">
<Button style="margin-right: 6px" @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
<a href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
</div>
</form>