From d3de6afa50ed21d0ed035e6e8c784781a351e543 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Tue, 17 Oct 2023 13:53:40 -0400
Subject: [PATCH] Organize

---
 package.json                      |   2 +-
 src/server/lib/hello.ts           |   7 ---
 src/server/lib/login.ts           |   4 ++
 src/server/trpc.ts                |  19 ++++----
 src/web/App.vue                   |  26 +---------
 src/web/assets/logo.png           | Bin 11955 -> 0 bytes
 src/web/assets/logo.svg           |   6 ---
 src/web/components/HelloWorld.vue |  75 -----------------------------
 src/web/components/LoginForm.vue  |  76 ++++++++++++++++++++++++++++++
 src/web/plugins/vuetify.ts        |  18 +++++--
 src/web/router/index.ts           |  13 ++---
 src/web/views/Home.vue            |   7 ---
 src/web/views/Login.vue           |   9 ++++
 13 files changed, 123 insertions(+), 139 deletions(-)
 delete mode 100644 src/server/lib/hello.ts
 create mode 100644 src/server/lib/login.ts
 delete mode 100644 src/web/assets/logo.png
 delete mode 100644 src/web/assets/logo.svg
 delete mode 100644 src/web/components/HelloWorld.vue
 create mode 100644 src/web/components/LoginForm.vue
 delete mode 100644 src/web/views/Home.vue
 create mode 100644 src/web/views/Login.vue

diff --git a/package.json b/package.json
index 6b6c419..3971776 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "clean": "rimraf ./dist",
-    "dev:web": "vite",
+    "dev:web": "vite --host",
     "dev:server": "tsx --watch ./src/server/index.ts",
     "dev": "concurrently --kill-others -n Server,Web -c bgGreen,bgBlue \"npm run dev:server\" \"npm run dev:web\"",
     "build:web": "vue-tsc --noEmit && vite build",
diff --git a/src/server/lib/hello.ts b/src/server/lib/hello.ts
deleted file mode 100644
index 3a93859..0000000
--- a/src/server/lib/hello.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function hello(name: string) {
-  if (name === 'test') throw new Error('Test error')
-
-  console.log(`Hello ${name}!`)
-
-  return { message: `Hello ${name}!` }
-}
diff --git a/src/server/lib/login.ts b/src/server/lib/login.ts
new file mode 100644
index 0000000..fb5561a
--- /dev/null
+++ b/src/server/lib/login.ts
@@ -0,0 +1,4 @@
+export function login(username: string, password: string) {
+  console.log('Login', username, password)
+  return 'ok'
+}
diff --git a/src/server/trpc.ts b/src/server/trpc.ts
index f230f6c..08cca63 100644
--- a/src/server/trpc.ts
+++ b/src/server/trpc.ts
@@ -2,11 +2,11 @@ import { initTRPC, inferAsyncReturnType } from '@trpc/server'
 import * as trpcExpress from '@trpc/server/adapters/express'
 
 import { z } from 'zod'
-import { hello } from './lib/hello'
+import { login } from './lib/login'
 
 // Created for each request
 function createContext({ req, res }: trpcExpress.CreateExpressContextOptions) {
-  return { ip: req.ip }
+  return { ip: req.ip, hostname: req.hostname }
 }
 
 type Context = inferAsyncReturnType<typeof createContext>
@@ -14,14 +14,17 @@ type Context = inferAsyncReturnType<typeof createContext>
 export const t = initTRPC.context<Context>().create()
 
 export const appRouter = t.router({
-  hello: t.procedure.input(z.string()).query(({ input }) => {
-    return hello(input)
-  }),
-
   myIp: t.procedure.query(({ ctx }) => {
     const ip = ctx.ip.split(':').slice(-1)[0]
-    return ip
-  })
+    console.log(`IP: ${ip}, Hostname: ${ctx.hostname}`)
+
+    return { ip, hostname: ctx.hostname }
+  }),
+  login: t.procedure
+    .input(z.object({ username: z.string(), password: z.string() }))
+    .mutation(async ({ input }) => {
+      return login(input.username, input.password)
+    })
 })
 
 // export type definition of API
diff --git a/src/web/App.vue b/src/web/App.vue
index 946f642..e34bd3c 100644
--- a/src/web/App.vue
+++ b/src/web/App.vue
@@ -1,29 +1,7 @@
 <template>
   <v-app>
-    <v-main>
-      {{ message }}
-      <v-btn @click="fetchHello('Doug')">Doug</v-btn>
-      <v-btn @click="fetchHello('test')">test</v-btn>
-    </v-main>
+    <v-main> <router-view /></v-main>
   </v-app>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
-import { trpc } from './trpc'
-
-import { TRPCClientError } from '@trpc/client'
-
-const message = ref('Hello World!')
-
-async function fetchHello(name: string) {
-  try {
-    message.value = (await trpc.hello.query(name)).message
-  } catch (error: any) {
-    if (error instanceof TRPCClientError) {
-      console.dir(error)
-      message.value = error.message
-    }
-  }
-}
-</script>
+<script setup lang="ts"></script>
diff --git a/src/web/assets/logo.png b/src/web/assets/logo.png
deleted file mode 100644
index a5f23ae7bff64954cf3537377a9f99306baf083d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 11955
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

diff --git a/src/web/assets/logo.svg b/src/web/assets/logo.svg
deleted file mode 100644
index d57771c..0000000
--- a/src/web/assets/logo.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
-<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
-<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
-<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
-</svg>
diff --git a/src/web/components/HelloWorld.vue b/src/web/components/HelloWorld.vue
deleted file mode 100644
index 6775d4d..0000000
--- a/src/web/components/HelloWorld.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <v-container class="fill-height">
-    <v-responsive class="align-center text-center fill-height">
-      <v-img height="300" src="@/assets/logo.svg" />
-
-      <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-
-      <h1 class="text-h2 font-weight-bold">Vuetify</h1>
-
-      <div class="py-14" />
-
-      <v-row class="d-flex align-center justify-center">
-        <v-col cols="auto">
-          <v-btn
-            href="https://vuetifyjs.com/components/all/"
-            min-width="164"
-            rel="noopener noreferrer"
-            target="_blank"
-            variant="text"
-          >
-            <v-icon
-              icon="mdi-view-dashboard"
-              size="large"
-              start
-            />
-
-            Components
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn
-            color="primary"
-            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
-            min-width="228"
-            rel="noopener noreferrer"
-            size="x-large"
-            target="_blank"
-            variant="flat"
-          >
-            <v-icon
-              icon="mdi-speedometer"
-              size="large"
-              start
-            />
-
-            Get Started
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn
-            href="https://community.vuetifyjs.com/"
-            min-width="164"
-            rel="noopener noreferrer"
-            target="_blank"
-            variant="text"
-          >
-            <v-icon
-              icon="mdi-account-group"
-              size="large"
-              start
-            />
-
-            Community
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-responsive>
-  </v-container>
-</template>
-
-<script setup lang="ts">
-  //
-</script>
diff --git a/src/web/components/LoginForm.vue b/src/web/components/LoginForm.vue
new file mode 100644
index 0000000..0cc5067
--- /dev/null
+++ b/src/web/components/LoginForm.vue
@@ -0,0 +1,76 @@
+<template>
+  <v-form @submit.prevent="doLogin">
+    <v-card class="pa-5" title="Fazer login na rede">
+      <v-card-text class="mt-3">
+        <v-text-field
+          class="mb-3"
+          v-model="username"
+          label="Usuário"
+          :variant="'outlined'"
+          autocomplete="username"
+          hint="SIAPE ou CPF"
+          prepend-icon="mdi-account"
+          required
+        />
+        <v-text-field
+          v-model="password"
+          label="Senha"
+          :type="showPassword ? 'text' : 'password'"
+          hint="Sua senha"
+          :variant="'outlined'"
+          autocomplete="current-password"
+          prepend-icon="mdi-key"
+          :append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+          @click:append-inner="showPassword = !showPassword"
+          required
+        />
+        <v-switch
+          v-model="autoLogin"
+          color="primary"
+          label="Logar automaticamente neste dispositivo"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn size="x-large" color="primary" :variant="'flat'" type="submit">
+          Login
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-alert class="mt-3 text-center" color="info">
+      Seu endereço IP:
+      <code>
+        {{ ipAddress }}
+      </code>
+    </v-alert>
+  </v-form>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { trpc } from '../trpc'
+import { hostname } from 'os'
+
+const username = ref('')
+const password = ref('')
+
+const autoLogin = 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() {
+  trpc.login.mutate({ username: username.value, password: password.value })
+}
+</script>
diff --git a/src/web/plugins/vuetify.ts b/src/web/plugins/vuetify.ts
index c276519..dd7ebe7 100644
--- a/src/web/plugins/vuetify.ts
+++ b/src/web/plugins/vuetify.ts
@@ -13,14 +13,22 @@ import { createVuetify } from 'vuetify'
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
+  defaults: {
+    VCard: {
+      elevation: 20
+    }
+    // VBtn: {
+    //   color: 'primary'
+    // }
+  },
   theme: {
     themes: {
       light: {
         colors: {
           primary: '#1867C0',
-          secondary: '#5CBBF6',
-        },
-      },
-    },
-  },
+          secondary: '#5CBBF6'
+        }
+      }
+    }
+  }
 })
diff --git a/src/web/router/index.ts b/src/web/router/index.ts
index 65353da..62689d7 100644
--- a/src/web/router/index.ts
+++ b/src/web/router/index.ts
@@ -8,19 +8,20 @@ const routes = [
     children: [
       {
         path: '',
-        name: 'Home',
+        name: 'Login',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
-      },
-    ],
-  },
+        component: () =>
+          import(/* webpackChunkName: "home" */ '@/views/Login.vue')
+      }
+    ]
+  }
 ]
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes,
+  routes
 })
 
 export default router
diff --git a/src/web/views/Home.vue b/src/web/views/Home.vue
deleted file mode 100644
index 7646ab7..0000000
--- a/src/web/views/Home.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <HelloWorld />
-</template>
-
-<script lang="ts" setup>
-  import HelloWorld from '@/components/HelloWorld.vue'
-</script>
diff --git a/src/web/views/Login.vue b/src/web/views/Login.vue
new file mode 100644
index 0000000..b052757
--- /dev/null
+++ b/src/web/views/Login.vue
@@ -0,0 +1,9 @@
+<template>
+  <v-container class="align-center justify-center fill-height">
+    <login-form />
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+import LoginForm from '../components/LoginForm.vue'
+</script>