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

Convert other pages to composition API

Browse Source
This commit is contained in:
Jan Bader
2022-02-14 22:24:42 +00:00
parent d11c0036b5
commit 0a030eaee1
9 changed files with 196 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,31 +1,20 @@
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { useSessionStore } from '../stores/session';
export default defineComponent({
data() {
return {
showPassword: false,
error: "",
login: {
email: "",
password: "",
name: "",
}
}
},
methods: {
formSubmit (e : FormDataEvent) {
e.preventDefault();
useSessionStore().register(this.$data.login)
.then(() => this.$data.error = "")
.catch(() => this.$data.error = "Something went wrong!");
const error = ref("");
const login = ref({ email: "", password: "", name: "" });
const showPassword = ref(false);
// TODO display invalidCredentials
// TODO redirect to dashboard on success
}
}
})
function formSubmit(e: FormDataEvent) {
e.preventDefault();
useSessionStore().register(login)
.then(() => error.value = "")
.catch(() => error.value = "Something went wrong!");
// TODO display invalidCredentials
// TODO redirect to dashboard on success
}
</script>
<template>
@ -38,30 +27,35 @@ export default defineComponent({
<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'"
<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 />
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'"
<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 />
error
/>
</v-col>
</v-row>
<div class="form-group">
{{ error }}
</div>
<div class="form-group">{{ error }}</div>
<v-btn type="submit" @click="formSubmit">Register</v-btn>
<p>
Existing user? <router-link to="/login">Login</router-link> instead!
</p>
<p>
Existing user?
<router-link to="/login">Login</router-link>instead!
</p>
</v-container>
</template>