feat: restyle unauthenticated screens
This commit is contained in:
parent
f3324c6aaf
commit
0a89421189
BIN
src/assets/no-auth-image.jpg
Normal file
BIN
src/assets/no-auth-image.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 907 KiB |
|
@ -1,11 +1,20 @@
|
|||
<template>
|
||||
<div class="no-auth-wrapper">
|
||||
<Logo class="logo" width="200" height="58"/>
|
||||
<div class="noauth-container">
|
||||
<Logo class="logo" width="400" height="117" />
|
||||
<message v-if="motd !== ''" class="my-2">
|
||||
<section class="image">
|
||||
<div class="overlay">
|
||||
<message v-if="motd !== ''">
|
||||
{{ motd }}
|
||||
</message>
|
||||
<h2 class="title">
|
||||
{{ $t('misc.welcomeBack') }}
|
||||
</h2>
|
||||
</div>
|
||||
</section>
|
||||
<section class="content">
|
||||
<slot/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -24,17 +33,60 @@ const motd = computed(() => store.state.config.motd)
|
|||
.no-auth-wrapper {
|
||||
background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--site-background);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.noauth-container {
|
||||
max-width: 450px;
|
||||
max-width: $desktop;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
background: var(--white);
|
||||
border-radius: $radius;
|
||||
box-shadow: var(--shadow-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 60%;
|
||||
background: url('@/assets/no-auth-image.jpg') no-repeat bottom;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 50%;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: var(--logo-text-color);
|
||||
max-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--white);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -471,7 +471,8 @@
|
|||
"close": "Close",
|
||||
"download": "Download",
|
||||
"showMenu": "Show the menu",
|
||||
"hideMenu": "Hide the menu"
|
||||
"hideMenu": "Hide the menu",
|
||||
"welcomeBack": "Welcome Back!"
|
||||
},
|
||||
"input": {
|
||||
"resetColor": "Reset Color",
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2 class="title has-text-centered">Login</h2>
|
||||
<div class="box">
|
||||
<h2 class="title">Login</h2>
|
||||
<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
|
||||
{{ $t('user.auth.confirmEmailSuccess') }}
|
||||
</message>
|
||||
|
@ -99,7 +98,6 @@
|
|||
|
||||
<legal/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2 class="title has-text-centered">{{ $t('user.auth.resetPassword') }}</h2>
|
||||
<div class="box">
|
||||
<h2 class="title">{{ $t('user.auth.resetPassword') }}</h2>
|
||||
<form @submit.prevent="submit" id="form" v-if="!successMessage">
|
||||
<div class="field">
|
||||
<label class="label" for="password1">{{ $t('user.auth.password') }}</label>
|
||||
|
@ -62,7 +61,6 @@
|
|||
</div>
|
||||
<Legal/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2 class="title has-text-centered">{{ $t('user.auth.register') }}</h2>
|
||||
<div class="box">
|
||||
<h2 class="title">{{ $t('user.auth.register') }}</h2>
|
||||
<form @submit.prevent="submit" id="registerform">
|
||||
<div class="field">
|
||||
<label class="label" for="username">{{ $t('user.auth.username') }}</label>
|
||||
|
@ -92,7 +91,6 @@
|
|||
</form>
|
||||
<legal/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2 class="title has-text-centered">{{ $t('user.auth.resetPassword') }}</h2>
|
||||
<div class="box">
|
||||
<h2 class="title">{{ $t('user.auth.resetPassword') }}</h2>
|
||||
<form @submit.prevent="submit" v-if="!isSuccess">
|
||||
<div class="field">
|
||||
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
|
||||
|
@ -45,7 +44,6 @@
|
|||
</div>
|
||||
<Legal/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
Reference in New Issue
Block a user