jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Update register to tailwindcss
All checks were successful
continuous-integration/drone/push Build is passing
Details
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
Jan Bader 2022-02-21 21:26:12 +00:00
parent 4019656e4d
commit 4085868cd7
2 changed files with 36 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/pages/Login.vue
View File

@ -26,18 +26,12 @@ function formSubmit(e: MouseEvent) {
<template>
<div>
<input
type="text"
v-model="login.user"
<input type="text" v-model="login.user"
placeholder="Username"
class="border-2 border-black rounded-lg block px-2 my-2 w-48"
/>
<input
type="password"
v-model="login.password"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
<input type="password" v-model="login.password"
placeholder="Password"
class="border-2 border-black rounded-lg block px-2 my-2 w-48"
/>
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
</div>
<div>{{ error }}</div>
<button type="submit" @click="formSubmit" class="bg-blue-300 rounded-lg p-2 w-48">Login</button>

70
web/src/pages/Register.vue
View File

@ -1,16 +1,23 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useSessionStore } from '../stores/session';
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useSessionStore } from "../stores/session";
const error = ref("");
const login = ref({ email: "", password: "", name: "" });
const showPassword = ref(false);
function formSubmit(e: FormDataEvent) {
onMounted(() => {
useSessionStore().setTitle("Login");
});
function formSubmit(e: MouseEvent) {
e.preventDefault();
useSessionStore().register(login)
.then(() => error.value = "")
.catch(() => error.value = "Something went wrong!");
useSessionStore().register(login.value)
.then(x => {
error.value = "";
useRouter().replace("/dashboard");
})
.catch(x => error.value = "The entered credentials are invalid!");
// TODO display invalidCredentials
// TODO redirect to dashboard on success
@ -18,44 +25,21 @@ function formSubmit(e: FormDataEvent) {
</script>
<template>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field v-model="login.email" type="text" label="E-Mail" />
</v-col>
<v-col cols="12">
<v-text-field v-model="login.name" type="text" label="Name" />
</v-col>
<v-col cols="6">
<v-text-field
v-model="login.password"
label="Password"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
@click:append="showPassword = showPassword"
:error-message="error"
error-count="2"
error
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model="login.password"
label="Repeat password"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
@click:append="showPassword = showPassword"
:error-message="error"
error-count="2"
error
/>
</v-col>
</v-row>
<div class="form-group">{{ error }}</div>
<v-btn type="submit" @click="formSubmit">Register</v-btn>
<div>
<input type="text" v-model="login.name"
placeholder="Name"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
<input type="text" v-model="login.email"
placeholder="Email"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
<input type="password" v-model="login.password"
placeholder="Password"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
</div>
<div>{{ error }}</div>
<button type="submit" @click="formSubmit" class="bg-blue-300 rounded-lg p-2 w-48">Register</button>
<p>
Existing user?
<router-link to="/login">Login</router-link>instead!
</p>
</v-container>
</template>