Add firewall form

src/web/views/AddFirewall.vue

@@ -1 +1,117 @@
-<template>test</template>
+<template>
+  <v-container class="justify-center">
+    <v-row justify="center">
+      <v-col xl="5" lg="6" md="7" sm="10">
+        <v-alert type="info" class="mb-6">
+          É necessário um usuário local com permissões de escrita na API XML
+          para que o sistema possa logar os usuários. É possível usar o mesmo
+          usuário usado no sistema Portal de TI.
+        </v-alert>
+        <v-form ref="form" @submit.prevent="submit" lazy-validation>
+          <v-card title="Adicionar PA">
+            <v-card-text>
+              <v-text-field
+                class="mb-5"
+                v-model="ip"
+                label="Endereço IP"
+                :variant="'outlined'"
+                hint="Endereço de gestão do firewall"
+                prepend-inner-icon="mdi-ip"
+                required
+                validate-on="blur"
+                :rules="[v => validIP(v) || 'Endereço IP inválido']"
+              />
+              <v-text-field
+                class="mb-5"
+                v-model="username"
+                label="Usuário local do firewall"
+                :variant="'outlined'"
+                hint="Usuário do firewall. Não usar usuário do Panorama"
+                prepend-inner-icon="mdi-account"
+                :rules="[v => !!v || 'Campo obrigatório']"
+                required
+              />
+              <v-text-field
+                v-model="password"
+                label="Senha"
+                :type="showPassword ? 'text' : 'password'"
+                hint="Senha do usuário local do firewall"
+                :variant="'outlined'"
+                autocomplete="current-password"
+                prepend-inner-icon="mdi-key"
+                :append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+                @click:append-inner="showPassword = !showPassword"
+                :rules="[v => !!v || 'Campo obrigatório']"
+                required
+              />
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                class="px-6"
+                prepend-icon="mdi-plus"
+                :disabled="!valid"
+                size="x-large"
+                color="primary"
+                :variant="'flat'"
+                type="submit"
+                :loading="loading"
+              >
+                Adicionar
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-form>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { VForm } from 'vuetify/lib/components/index.mjs'
+import { z } from 'zod'
+import { trpc } from '../trpc'
+
+const form = ref<VForm>()
+
+const valid = computed(() => {
+  return form.value?.isValid || false
+})
+
+const validIP = (v: string) => {
+  return z.string().ip().safeParse(v).success
+}
+
+const username = ref('')
+const password = ref('')
+const ip = ref('')
+
+const showPassword = ref(false)
+const loading = ref(false)
+
+const router = useRouter()
+
+async function submit() {
+  console.log('submit')
+
+  try {
+    loading.value = true
+
+    await trpc.addFirewall.mutate({
+      ip: ip.value,
+      username: username.value,
+      password: password.value
+    })
+
+    alert('Firewall adicionado com sucesso!')
+
+    router.push('/')
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loading.value = false
+  }
+}
+</script>