Update App.vue and Home.vue
This commit is contained in:
parent
d28ab582fa
commit
09edf2b7c7
|
@ -1,19 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<v-main>
|
<v-main>
|
||||||
{{ data }}
|
<router-view />
|
||||||
|
<v-footer app class="text-grey">
|
||||||
|
<span class="mr-2">v{{ version }}</span>
|
||||||
|
<v-spacer />
|
||||||
|
<span class="mr-2">SERTI-PP</span>
|
||||||
|
</v-footer>
|
||||||
</v-main>
|
</v-main>
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from "vue";
|
import packageInfo from '../../package.json'
|
||||||
|
|
||||||
import { trpc } from "./trpc";
|
const version = packageInfo.version
|
||||||
|
|
||||||
const data = ref<string>("");
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
data.value = await trpc.hello.query();
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 221 KiB |
3
src/web/components/Logo.vue
Normal file
3
src/web/components/Logo.vue
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<v-img src="@/assets/logo.png" contain />
|
||||||
|
</template>
|
90
src/web/components/MainForm.vue
Normal file
90
src/web/components/MainForm.vue
Normal file
|
@ -0,0 +1,90 @@
|
||||||
|
<template>
|
||||||
|
<v-form @submit.prevent="submit">
|
||||||
|
<v-card :elevation="12">
|
||||||
|
<v-card-title class="mb-6 pa-6 text-center">
|
||||||
|
<span class="headline font-weight-light text-h4">Trocar senha</span>
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
class="mb-8"
|
||||||
|
v-model="username"
|
||||||
|
label="Usuário"
|
||||||
|
:variant="'outlined'"
|
||||||
|
autocomplete="username"
|
||||||
|
hint="SIAPE para servidores, CPF para alunos."
|
||||||
|
prepend-inner-icon="mdi-account"
|
||||||
|
:rules="[v => !!v || 'Campo obrigatório']"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<v-text-field
|
||||||
|
class="mb-8"
|
||||||
|
v-model="password"
|
||||||
|
label="Senha atual"
|
||||||
|
:type="showCurrent ? 'text' : 'password'"
|
||||||
|
hint="Sua senha atual"
|
||||||
|
:variant="'outlined'"
|
||||||
|
prepend-inner-icon="mdi-form-textbox-password"
|
||||||
|
:append-inner-icon="showCurrent ? 'mdi-eye' : 'mdi-eye-off'"
|
||||||
|
@click:append-inner="showCurrent = !showCurrent"
|
||||||
|
:rules="[v => !!v || 'Campo obrigatório']"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
<v-text-field
|
||||||
|
class="mb-4"
|
||||||
|
v-model="newPassword"
|
||||||
|
label="Nova senha"
|
||||||
|
:type="showNew ? 'text' : 'password'"
|
||||||
|
hint="A nova senha que você deseja usar"
|
||||||
|
:variant="'outlined'"
|
||||||
|
prepend-inner-icon="mdi-lock-check"
|
||||||
|
:append-inner-icon="showNew ? 'mdi-eye' : 'mdi-eye-off'"
|
||||||
|
@click:append-inner="showNew = !showNew"
|
||||||
|
:rules="[v => !!v || 'Campo obrigatório']"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<v-text-field
|
||||||
|
class="mb-8"
|
||||||
|
v-model="confirmPassword"
|
||||||
|
label="Confirme a nova senha"
|
||||||
|
:type="showConfirm ? 'text' : 'password'"
|
||||||
|
hint="Digite a nova senha mais uma vez"
|
||||||
|
:variant="'outlined'"
|
||||||
|
prepend-inner-icon="mdi-lock-check"
|
||||||
|
:append-inner-icon="showConfirm ? 'mdi-eye' : 'mdi-eye-off'"
|
||||||
|
@click:append-inner="showConfirm = !showConfirm"
|
||||||
|
:rules="[v => !!v || 'Campo obrigatório']"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn type="submit" color="primary">Trocar senha</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-form>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
submit: [{ username: string; currentPassword: string; newPassword: string }]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const username = ref('')
|
||||||
|
const password = ref('')
|
||||||
|
const newPassword = ref('')
|
||||||
|
const confirmPassword = ref('')
|
||||||
|
|
||||||
|
const showCurrent = ref(false)
|
||||||
|
const showNew = ref(false)
|
||||||
|
const showConfirm = ref(false)
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
emit('submit', {
|
||||||
|
username: username.value,
|
||||||
|
currentPassword: password.value,
|
||||||
|
newPassword: newPassword.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -1,7 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<HelloWorld />
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="8" offset="2">
|
||||||
|
<logo class="mx-auto mb-12" :style="{ maxWidth: '256px' }" />
|
||||||
|
|
||||||
|
<main-form @submit="submit" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import HelloWorld from '@/components/HelloWorld.vue'
|
import Logo from '../components/Logo.vue'
|
||||||
|
import MainForm from '../components/MainForm.vue'
|
||||||
|
|
||||||
|
function submit({
|
||||||
|
username,
|
||||||
|
currentPassword,
|
||||||
|
newPassword
|
||||||
|
}: {
|
||||||
|
username: string
|
||||||
|
currentPassword: string
|
||||||
|
newPassword: string
|
||||||
|
}) {
|
||||||
|
console.log('submit', { username, currentPassword, newPassword })
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user