fix layout in login page and password reset

This commit is contained in:
Girish Ramakrishnan
2025-09-09 16:55:24 +02:00
parent aaf2c7f58a
commit 6913fe1f08
2 changed files with 48 additions and 14 deletions
+25 -8
View File
@@ -93,7 +93,6 @@ onMounted(async () => {
<div>
<small>{{ $t('login.loginTo') }}</small>
<h1>{{ name }}</h1>
<br/>
<div v-html="note"></div>
<form @submit.prevent="onSubmit" v-if="!totpTokenRequired">
@@ -113,12 +112,12 @@ onMounted(async () => {
<div class="error-label" v-if="passwordError">{{ $t('login.errorIncorrectCredentials') }}</div>
<div class="error-label" v-if="internalError">{{ $t('login.errorInternal') }}</div>
<div class="error-label" v-if="oidcError">{{ oidcError }}</div>
<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>
<div class="actions">
<Button id="loginSubmitButton" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
<a class="forgot" href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
</div>
</form>
<form @submit.prevent="onSubmit" v-if="totpTokenRequired" autocomplete="off">
@@ -131,10 +130,28 @@ onMounted(async () => {
</FormGroup>
<div class="error-label" v-if="totpError">{{ $t('login.errorIncorrect2FAToken') }}</div>
<Button id="totpTokenSubmitButton" style="margin-top: 12px" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
</fieldset>
<div class="actions">
<Button id="totpTokenSubmitButton" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
</div>
</form>
</div>
</PublicPageLayout>
</template>
<style scoped>
.actions {
margin-top: 1.5em;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.actions .forgot {
margin-top: 1em;
font-size: 0.9em;
}
</style>
+23 -6
View File
@@ -116,9 +116,9 @@ onMounted(async () => {
<TextInput id="inputPasswordResetIdentifier" name="passwordResetIdentifier" v-model="passwordResetIdentifier" :disabled="busy" autofocus required />
</FormGroup>
<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 class="actions">
<Button @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
<a class="login" href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
</div>
</form>
</div>
@@ -156,9 +156,9 @@ onMounted(async () => {
<p class="has-error" v-if="error.totpToken">{{ error.totpToken }}</p>
</FormGroup>
<div style="margin-top: 20px">
<Button @click="onNewPassword()" style="margin-right: 6px" :disabled="busy || !newPassword || newPassword !== newPasswordRepeat" :loading="busy">{{ $t('passwordReset.passwordChanged.submitAction') }}</Button>
<a href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
<div class="actions">
<Button @click="onNewPassword()" :disabled="busy || !newPassword || newPassword !== newPasswordRepeat" :loading="busy">{{ $t('passwordReset.passwordChanged.submitAction') }}</Button>
<a class="login" href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
</div>
</form>
</div>
@@ -172,3 +172,20 @@ onMounted(async () => {
</div>
</PublicPageLayout>
</template>
<style scoped>
.actions {
margin-top: 1.5em;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.actions .login {
margin-top: 1em;
font-size: 0.9em;
}
</style>