Login form OK
This commit is contained in:
parent
d3de6afa50
commit
3d2e6b5e06
|
@ -6,7 +6,7 @@ import { login } from './lib/login'
|
||||||
|
|
||||||
// Created for each request
|
// Created for each request
|
||||||
function createContext({ req, res }: trpcExpress.CreateExpressContextOptions) {
|
function createContext({ req, res }: trpcExpress.CreateExpressContextOptions) {
|
||||||
return { ip: req.ip, hostname: req.hostname }
|
return { ip: req.ip }
|
||||||
}
|
}
|
||||||
|
|
||||||
type Context = inferAsyncReturnType<typeof createContext>
|
type Context = inferAsyncReturnType<typeof createContext>
|
||||||
|
@ -16,9 +16,9 @@ export const t = initTRPC.context<Context>().create()
|
||||||
export const appRouter = t.router({
|
export const appRouter = t.router({
|
||||||
myIp: t.procedure.query(({ ctx }) => {
|
myIp: t.procedure.query(({ ctx }) => {
|
||||||
const ip = ctx.ip.split(':').slice(-1)[0]
|
const ip = ctx.ip.split(':').slice(-1)[0]
|
||||||
console.log(`IP: ${ip}, Hostname: ${ctx.hostname}`)
|
console.log(`IP: ${ip}`)
|
||||||
|
|
||||||
return { ip, hostname: ctx.hostname }
|
return ip
|
||||||
}),
|
}),
|
||||||
login: t.procedure
|
login: t.procedure
|
||||||
.input(z.object({ username: z.string(), password: z.string() }))
|
.input(z.object({ username: z.string(), password: z.string() }))
|
||||||
|
|
BIN
src/web/assets/logo.png
Normal file
BIN
src/web/assets/logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 221 KiB |
25
src/web/components/IpAlert.vue
Normal file
25
src/web/components/IpAlert.vue
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<v-alert class="text-center" variant="outlined" color="info">
|
||||||
|
<span v-if="!loadingIpAddress">
|
||||||
|
Seu endereço IP: <code> {{ ipAddress }} </code>
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
<v-progress-circular indeterminate class="mr-2" /> Obtendo seu endereço
|
||||||
|
IP...
|
||||||
|
</span>
|
||||||
|
</v-alert>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { trpc } from '../trpc'
|
||||||
|
|
||||||
|
const ipAddress = ref('')
|
||||||
|
const loadingIpAddress = ref(false)
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
loadingIpAddress.value = true
|
||||||
|
ipAddress.value = await trpc.myIp.query()
|
||||||
|
|
||||||
|
loadingIpAddress.value = false
|
||||||
|
})
|
||||||
|
</script>
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<v-form @submit.prevent="doLogin">
|
<v-form @submit.prevent="doLogin">
|
||||||
<v-card class="pa-5" title="Fazer login na rede">
|
<v-card class="pa-2" title="Fazer login na rede">
|
||||||
<v-card-text class="mt-3">
|
<v-card-text class="mt-3">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
class="mb-3"
|
class="mb-3"
|
||||||
|
@ -28,6 +28,7 @@
|
||||||
v-model="autoLogin"
|
v-model="autoLogin"
|
||||||
color="primary"
|
color="primary"
|
||||||
label="Logar automaticamente neste dispositivo"
|
label="Logar automaticamente neste dispositivo"
|
||||||
|
hide-details
|
||||||
/>
|
/>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
|
@ -37,19 +38,12 @@
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-alert class="mt-3 text-center" color="info">
|
|
||||||
Seu endereço IP:
|
|
||||||
<code>
|
|
||||||
{{ ipAddress }}
|
|
||||||
</code>
|
|
||||||
</v-alert>
|
|
||||||
</v-form>
|
</v-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { trpc } from '../trpc'
|
import { trpc } from '../trpc'
|
||||||
import { hostname } from 'os'
|
|
||||||
|
|
||||||
const username = ref('')
|
const username = ref('')
|
||||||
const password = ref('')
|
const password = ref('')
|
||||||
|
@ -57,19 +51,6 @@ const password = ref('')
|
||||||
const autoLogin = ref(false)
|
const autoLogin = ref(false)
|
||||||
const showPassword = ref(false)
|
const showPassword = ref(false)
|
||||||
|
|
||||||
const ipAddress = ref('')
|
|
||||||
|
|
||||||
const loadingIpAddress = ref(false)
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
loadingIpAddress.value = true
|
|
||||||
const { ip, hostname } = await trpc.myIp.query()
|
|
||||||
|
|
||||||
ipAddress.value = ip == '127.0.0.1' ? hostname : ip
|
|
||||||
|
|
||||||
loadingIpAddress.value = false
|
|
||||||
})
|
|
||||||
|
|
||||||
function doLogin() {
|
function doLogin() {
|
||||||
trpc.login.mutate({ username: username.value, password: password.value })
|
trpc.login.mutate({ username: username.value, password: password.value })
|
||||||
}
|
}
|
||||||
|
|
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>
|
|
@ -14,9 +14,6 @@ import { createVuetify } from 'vuetify'
|
||||||
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||||
export default createVuetify({
|
export default createVuetify({
|
||||||
defaults: {
|
defaults: {
|
||||||
VCard: {
|
|
||||||
elevation: 20
|
|
||||||
}
|
|
||||||
// VBtn: {
|
// VBtn: {
|
||||||
// color: 'primary'
|
// color: 'primary'
|
||||||
// }
|
// }
|
||||||
|
|
|
@ -1,9 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container class="align-center justify-center fill-height">
|
<v-container class="justify-center fill-height" fluid>
|
||||||
|
<div>
|
||||||
|
<logo class="mx-auto mb-4" :style="{ maxWidth: '256px' }" />
|
||||||
<login-form />
|
<login-form />
|
||||||
|
<ip-alert class="mt-5" />
|
||||||
|
</div>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import LoginForm from '../components/LoginForm.vue'
|
import LoginForm from '../components/LoginForm.vue'
|
||||||
|
import IpAlert from '../components/IpAlert.vue'
|
||||||
|
import Logo from '../components/Logo.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user