feat: restyle unauthenticated screens

Reviewed-on: #1102
Co-authored-by: renovate <renovatebot@kolaente.de>
Co-committed-by: renovate <renovatebot@kolaente.de>

@@ -0,0 +1,12 @@
+export function isValidEmail(email: string): Boolean {

@@ -0,0 +2,4 @@
+	const format = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
+	const match = email.match(format)
+
+	console.log(match)

@@ -45,3 +45,3 @@
       "totpPlaceholder": "e.g. 123456",
       "login": "Login",
-      "register": "Register",
+      "createAccount": "Create account",

@@ -51,2 +51,3 @@
       "openIdGeneralError": "An error occured while authenticating against the third party.",
-      "logout": "Logout"
+      "logout": "Logout",
+      "emailInvalid": "Please enter a valid email address.",

@@ -23,2 +3,2 @@
-						/>
-					</div>
+		<h2 class="title">Login</h2>
+		<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">

@@ -25,0 +19,4 @@
+						autocomplete="username"
+						v-focus
+						@keyup.enter="submit"
+						tabindex="1"

@@ -56,1 +41,3 @@
-					</div>
+				<div class="control">
+					<input
+						class="input is-relative"

@@ -57,0 +52,4 @@
+						tabindex="2"
+						@focusout="validateField('password')"
+					/>
+					<a @click="togglePasswordFieldType" class="password-field-type-toggle">

@@ -99,2 +104,3 @@
 
-			<legal/>
+		<div
+			v-if="hasOpenIdProviders"

@@ -210,3 +238,3 @@
 				this.$store.commit('auth/needsTotpPasscode', false)
 			} catch (e) {
-				if (e.response && e.response.data.code === 1017 && !credentials.totpPasscode) {
+				if (e.response && e.response.data.code === 1017 && !this.credentials.totpPasscode) {

@@ -246,0 +284,4 @@
+
+.password-field-type-toggle {
+	position: absolute;
+	top: .5rem;

@@ -115,3 +113,3 @@
 
 const {t} = useI18n()
-useTitle(() => t('user.auth.register'))
+useTitle(() => t('user.auth.createAccount'))

@@ -127,2 +124,4 @@
 const errorMessage = ref('')
 
+const emailValid = ref(true)
+const validateEmail = useDebounceFn(() => { // debouncing to prevent error messages when clicking on the log in button

@@ -129,0 +139,4 @@
+}, 100)
+const passwordFieldType = ref('password')
+const togglePasswordFieldType = () => {
+	if (passwordFieldType.value === 'password') {

@@ -129,0 +146,4 @@
+	}
+}
+
+const everythingValid = computed(() => {

@@ -131,3 +160,2 @@
 
-	if (credentials.password !== passwordValidation.value) {
-		errorMessage.value = t('user.auth.passwordsDontMatch')
+	if (!everythingValid) {

@@ -145,0 +173,4 @@
+<style scoped>
+.password-field-type-toggle {
+	position: absolute;
+	top: .5rem;

@@ -61,3 +56,3 @@
 
-const { t } = useI18n()
+const {t} = useI18n()
 useTitle(() => t('user.auth.resetPassword'))

@@ -7,2 +5,2 @@
-			</Message>
-			<slot/>
+			<section class="image" :class="{'has-message': motd !== ''}">
+				<Message v-if="motd !== ''">

@@ -29,3 +31,4 @@
+import Legal from '@/components/misc/legal.vue'
 import ApiConfig from '@/components/misc/api-config.vue'
 import {useStore} from 'vuex'
 import {computed} from 'vue'

@@ -0,0 +34,4 @@
+	tabindex: String,
+	modelValue: String,
+	// This prop is a workaround to trigger validation from the outside when the user never had focus in the input.
+	validateInitially: Boolean,