Initial commit

.gitignore

@@ -0,0 +1,151 @@
+# Created by https://www.toptal.com/developers/gitignore/api/node
+# Edit at https://www.toptal.com/developers/gitignore?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+# End of https://www.toptal.com/developers/gitignore/api/node
+
+# Prisma
+dev.db
+db/
+
+# Frontend build
+public/

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "ifms-healthtracker",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "build": "npm run clean && tsc",
+    "start": "node dist",
+    "dev": "nodemon --ext js,ts,mts,mjs,json,prisma ./src/index.ts --exec ts-node-esm"
+  },
+  "keywords": [],
+  "author": "Douglas Barone",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/express": "^4.17.17",
+    "@types/jsonwebtoken": "^9.0.2",
+    "@types/node": "^20.2.5",
+    "nodemon": "^2.0.22",
+    "prisma": "^4.15.0",
+    "rimraf": "^5.0.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.3"
+  },
+  "dependencies": {
+    "@prisma/client": "^4.15.0",
+    "body-parser": "^1.20.2",
+    "dotenv": "^16.1.4",
+    "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.0",
+    "ldapts": "^4.2.6"
+  }
+}

prisma/migrations/20230614192351_init/migration.sql

@@ -0,0 +1,19 @@
+-- CreateEnum
+CREATE TYPE "Role" AS ENUM ('ADMIN', 'INSPECTOR', 'USER');
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" SERIAL NOT NULL,
+    "username" TEXT,
+    "mail" TEXT,
+    "displayName" TEXT,
+    "thumbnailPhoto" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "roles" "Role"[] DEFAULT ARRAY['USER']::"Role"[],
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_username_key" ON "User"("username");

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -0,0 +1,31 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+enum Role {
+  ADMIN // SERTI
+  INSPECTOR // Fiscal de contrato
+  USER // Usuário
+}
+
+model User {
+  id       Int     @id @default(autoincrement())
+  username String? @unique
+
+  mail           String?
+  displayName    String?
+  thumbnailPhoto String?
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @default(now()) @updatedAt
+
+  roles Role[] @default([USER])
+}

src/authentication.ts

@@ -0,0 +1,34 @@
+import jwt from 'jsonwebtoken'
+import { prisma } from './prisma.js'
+import { ldapClient } from './ldapClient.js'
+import { UserController } from './controllers/UserController.js'
+
+const JWT_SECRET = process.env.JWT_SECRET || 'secret'
+
+export async function login(username: string, password: string) {
+  await ldapClient.authenticate(username, password)
+
+  await UserController.importUser(username)
+
+  const token = jwt.sign({ username }, JWT_SECRET, {
+    expiresIn: '2 days'
+  })
+
+  return `Bearer ${token}`
+}
+
+export async function authenticate(token: string) {
+  try {
+    const { username } = jwt.verify(token, JWT_SECRET) as { username: string }
+
+    const user = await prisma.user.findUnique({
+      where: { username }
+    })
+
+    if (!user) return null
+
+    return user
+  } catch (error: any) {
+    throw new Error('Invalid token')
+  }
+}

src/controllers/UserController.ts

@@ -0,0 +1,29 @@
+import { ldapClient } from '../ldapClient.js'
+import { prisma } from '../prisma.js'
+
+export class UserController {
+  static async importUser(username: string) {
+    const user = await ldapClient.getUser(username)
+
+    return await prisma.user.upsert({
+      where: { username: user.username },
+      update: user,
+      create: user
+    })
+  }
+
+  static async getUser(username: string) {
+    const user = await prisma.user.findUnique({
+      where: { username }
+    })
+
+    try {
+      if (!user) return await UserController.importUser(username)
+      else UserController.importUser(username)
+
+      return user
+    } catch (error: any) {
+      throw new Error('User not found!' + error.message)
+    }
+  }
+}

src/index.ts

@@ -0,0 +1,75 @@
+import 'dotenv/config'
+import express, { Request, Response } from 'express'
+import bodyParser from 'body-parser'
+import { login } from './authentication.js'
+import {
+  authenticatedMiddleware,
+  hasRolesMiddleware
+} from './middleware/authorization.js'
+import { RequestWithUser } from './types.js'
+import { UserController } from './controllers/UserController.js'
+
+const app = express()
+
+const PORT = process.env.PORT || 3000
+
+app.use('/', express.static('public'))
+
+app.use(bodyParser.json())
+
+// Test route
+app.get('/api/', async (req: Request, res: Response) => {
+  res.json({ message: 'Hello!' })
+})
+
+// Login route
+app.post('/api/login', async (req: Request, res: Response) => {
+  const { username, password } = req.body
+
+  if (!username || !password)
+    return res.status(400).json({ error: 'Missing username or password' })
+
+  try {
+    const token = await login(username, password)
+    res.json({ token })
+  } catch (error: any) {
+    res.status(401).json({ error: error.message })
+  }
+})
+
+app.get(
+  '/api/me',
+  authenticatedMiddleware,
+  async (req: RequestWithUser, res: Response) => res.json(req.user)
+)
+
+app.get(
+  '/api/protected',
+  authenticatedMiddleware,
+  async (req: RequestWithUser, res: Response) => {
+    res.send('Hello protected world! ' + req.user?.displayName)
+  }
+)
+
+app.get(
+  '/api/admin',
+  await hasRolesMiddleware(['ADMIN']),
+  async (req: RequestWithUser, res: Response) => {
+    res.send('Hello Admin!' + req.user?.username)
+  }
+)
+
+app.get(
+  '/api/user/:username',
+  await hasRolesMiddleware(['ADMIN']),
+  async (req: Request, res: Response) => {
+    const { username } = req.params
+
+    res.json(await UserController.getUser(username))
+  }
+)
+
+// Start server
+app.listen(PORT, () => {
+  console.log(`Server listening on port ${PORT}`)
+})

src/ldapClient.ts

@@ -0,0 +1,65 @@
+import { Client } from 'ldapts'
+
+const DOMAIN = process.env.AD_DOMAIN || 'IFMS'
+const DN = process.env.AD_DN || 'DC=ifms,DC=edu,DC=br'
+const BIND_USER = process.env.AD_BIND_USER || ''
+const BIND_PASSWD = process.env.AD_BIND_PASSWORD || ''
+
+interface LdapClient extends Client {
+  adminBind: () => Promise<void>
+  getUser(username: string): Promise<any>
+  authenticate(username: string, password: string): Promise<any>
+}
+
+export const ldapClient = new Client({
+  url: `ldap://${process.env.AD_HOST}`
+}) as LdapClient
+
+ldapClient.adminBind = async () => {
+  await ldapClient.bind(`${DOMAIN}\\${BIND_USER}`, BIND_PASSWD)
+}
+
+ldapClient.getUser = async (username: string) => {
+  await ldapClient.adminBind()
+
+  const { searchEntries } = await ldapClient.search(DN, {
+    scope: 'sub',
+    filter: `(sAMAccountName=${username})`,
+    attributes: [
+      'cn',
+      'mail',
+      'sAMAccountName',
+      'displayName',
+      'thumbnailPhoto'
+    ],
+    explicitBufferAttributes: ['thumbnailPhoto']
+  })
+
+  await ldapClient.unbind()
+
+  const { sAMAccountName, displayName, mail, thumbnailPhoto } = searchEntries[0]
+
+  const user = {
+    username: sAMAccountName.toString(),
+    displayName: displayName.toString(),
+    mail: mail.toString(),
+    thumbnailPhoto: `data:image/png;base64,${Buffer.from(
+      thumbnailPhoto as Buffer
+    ).toString('base64')}`
+  }
+
+  return user
+}
+
+ldapClient.authenticate = async (username: string, password: string) => {
+  try {
+    await ldapClient.bind(`${DOMAIN}\\${username}`, password)
+  } catch (error: any) {
+    if (error.code === 49) {
+      throw new Error('Invalid username or password')
+    }
+    throw error
+  } finally {
+    await ldapClient.unbind()
+  }
+}

src/middleware/authorization.ts

@@ -0,0 +1,67 @@
+import { Request, Response, NextFunction } from 'express'
+import { authenticate } from '../authentication.js'
+import { RequestWithUser } from '../types.js'
+import { Role } from '@prisma/client'
+
+function getToken(req: Request) {
+  const authHeader = req.headers.authorization as string
+
+  if (!authHeader) return null
+
+  const [type, token] = authHeader.split(' ')
+  if (type !== 'Bearer') throw new Error('Expected a Bearer token')
+
+  return token
+}
+
+async function injectUser(req: RequestWithUser) {
+  const token = getToken(req)
+
+  if (!token) return null
+
+  const user = await authenticate(token)
+
+  req.user = user
+}
+
+export async function authenticatedMiddleware(
+  req: RequestWithUser,
+  res: Response,
+  next: NextFunction
+) {
+  try {
+    await injectUser(req)
+
+    if (!req.user) {
+      res.status(401).json({ error: 'Must be logged in' })
+      return
+    }
+
+    next()
+  } catch (error: any) {
+    res.status(401).json({ error: error.message })
+  }
+}
+
+export async function hasRolesMiddleware(roles: Role[]) {
+  return async function (
+    req: RequestWithUser,
+    res: Response,
+    next: NextFunction
+  ) {
+    try {
+      await injectUser(req)
+
+      const userRoles = req.user?.roles
+
+      if (userRoles === undefined) {
+        throw new Error('User has no roles')
+      }
+
+      if (roles.some(role => userRoles.includes(role))) next()
+      else res.status(401).json({ error: 'Not authorized!' })
+    } catch (error: any) {
+      res.status(401).json({ error: error.message })
+    }
+  }
+}

src/prisma.ts

@@ -0,0 +1,3 @@
+import { PrismaClient } from '@prisma/client'
+
+export const prisma = new PrismaClient()

src/types.ts

@@ -0,0 +1,6 @@
+import { Request } from 'express'
+import { User } from '@prisma/client'
+
+export interface RequestWithUser extends Request {
+  user?: User | null
+}

tsconfig.json

@@ -0,0 +1,110 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "ES2020" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "NodeNext" /* Specify what module code is generated. */,
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "moduleResolution": "NodeNext" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  },
+  "include": ["src/**/*"]
+}

web/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

web/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

web/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+}

web/.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

web/README.md

@@ -0,0 +1,57 @@
+# essentials
+
+## Project setup
+
+```
+# yarn
+yarn
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+# yarn
+yarn dev
+
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+```
+
+### Compiles and minifies for production
+
+```
+# yarn
+yarn build
+
+# npm
+npm run build
+
+# pnpm
+pnpm build
+```
+
+### Lints and fixes files
+
+```
+# yarn
+yarn lint
+
+# npm
+npm run lint
+
+# pnpm
+pnpm lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://vitejs.dev/config/).

web/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome to Vuetify 3</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

web/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "web",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@mdi/font": "7.0.96",
+    "core-js": "^3.29.0",
+    "pinia": "^2.0.0",
+    "roboto-fontface": "*",
+    "vue": "^3.2.0",
+    "vue-router": "^4.0.0",
+    "vuetify": "^3.0.0",
+    "webfontloader": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.21.4",
+    "@types/node": "^18.15.0",
+    "@types/webfontloader": "^1.6.35",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "eslint": "^8.37.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "sass": "^1.60.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.2.0",
+    "vite-plugin-vuetify": "^1.0.0",
+    "vue-tsc": "^1.2.0"
+  }
+}

web/src/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-app id="inspire">
+    <v-navigation-drawer v-model="drawer"> </v-navigation-drawer>
+
+    <v-app-bar>
+      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+      <v-toolbar-title>Application</v-toolbar-title>
+    </v-app-bar>
+
+    <v-main> <router-view /> </v-main>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const drawer = ref(true);
+</script>

web/src/main.ts

@@ -0,0 +1,20 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

web/src/plugins/index.ts

@@ -0,0 +1,22 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import { loadFonts } from './webfontloader'
+import vuetify from './vuetify'
+import pinia from '../store'
+import router from '../router'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+  loadFonts()
+  app
+    .use(vuetify)
+    .use(router)
+    .use(pinia)
+}

web/src/plugins/vuetify.ts

@@ -0,0 +1,26 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: '#1867C0',
+          secondary: '#5CBBF6',
+        },
+      },
+    },
+  },
+})

web/src/plugins/webfontloader.ts

@@ -0,0 +1,15 @@
+/**
+ * plugins/webfontloader.ts
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+
+export async function loadFonts () {
+  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+
+  webFontLoader.load({
+    google: {
+      families: ['Roboto:100,300,400,500,700,900&display=swap'],
+    },
+  })
+}

web/src/router/index.ts

@@ -0,0 +1,16 @@
+// Composables
+import { createRouter, createWebHistory } from "vue-router";
+
+const routes = [
+  {
+    path: "/",
+    component: () => import(/* webpackChunkName: "home" */ "@/views/Home.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;

web/src/store/app.ts

@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})

web/src/store/index.ts

@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()

web/src/styles/settings.scss

@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );

web/src/views/Home.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1>test</h1>
+</template>
+
+<script lang="ts" setup></script>

web/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

web/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "allowSyntheticDefaultImports": true,
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": false,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": [
+      "node",
+      "vuetify"
+    ],
+    "paths": {
+      "@/*": ["src/*"]
+    },
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "vite.config.ts"
+  ]
+}

web/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

web/vite.config.ts

@@ -0,0 +1,37 @@
+// Plugins
+import vue from "@vitejs/plugin-vue";
+import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
+
+// Utilities
+import { defineConfig } from "vite";
+import { fileURLToPath, URL } from "node:url";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    outDir: "../public",
+    emptyOutDir: true,
+  },
+  plugins: [
+    vue({
+      template: { transformAssetUrls },
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    vuetify({
+      autoImport: true,
+      styles: {
+        configFile: "src/styles/settings.scss",
+      },
+    }),
+  ],
+  define: { "process.env": {} },
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+    extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
+  },
+  server: {
+    port: 3000,
+  },
+});