Merge pull request #12 from Libertech-FR/authentication

Authentication

Author: tacxou

app/nuxt.config.ts

@@ -45,7 +45,8 @@ export default defineNuxtConfig({
         scheme: 'refresh',
         token: {
           property: 'access_token',
-          maxAge: 60 * 5,
+          maxAge: 1 * 5,
+          // maxAge: 60 * 5,
         },
         refreshToken: {
           property: 'refresh_token',

app/src/components/appbar/RightButtons.vue

@@ -1,18 +1,46 @@
-<template lang="pug">
-div 
-    q-btn(v-for="button in buttons" :key="button.icon" round flat :icon="`mdi-${button.icon}`" size="lg")
-        q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ button.name }}
+<template lang='pug'>
+div
+    q-btn(v-for="button in buttons" :key="button.icon" round flat :icon="button.icon" size="lg")
+      q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ button.name }}
     q-btn-dropdown(icon="mdi-account-circle-outline" round flat size="lg")
-        q-list 
-            q-item(v-for="button in buttons" :key="button.name")
-                q-btn(flat :icon="`mdi-${button.icon}`" :label="button.name" color="primary")
+      q-list
+        q-item.q-pa-none(v-for="button in buttons" :key="button.name")
+          q-btn.full-width.items-baseline.q-pa-sm(
+            :icon="button.icon"
+            :label="button.name"
+            :color="button?.color || 'primary'"
+            @click="button?.action"
+            :to='button?.to'
+            flat
+            dense
+          )
 </template>
 
-<script lang="ts" setup>
+<script lang='ts' setup>
 const buttons = [
-    { icon: 'cog', name: 'Paramètres', action: '' },
-    { icon: 'bell', name: 'Notifications', action: '' },
-    { icon: 'help', name: 'Aide', action: '' },
-
+  {
+    icon: 'mdi-cog',
+    name: 'Paramètres',
+    to: '/settings',
+  },
+  {
+    icon: 'mdi-bell',
+    name: 'Notifications',
+    to: '#',
+  },
+  {
+    icon: 'mdi-help',
+    name: 'Aide',
+    to: '#',
+  },
+  {
+    icon: 'mdi-logout',
+    name: 'Déconnexion',
+    color: 'negative',
+    action: async () => {
+      await useAuth().logout()
+      useRouter().go(0)
+    },
+  },
 ]
-</script>
+</script>

app/src/composables/useHttpApi.ts

@@ -89,7 +89,6 @@ export function useHttpApi<
   },
 ): AsyncData<OpenApiResponse<Paths[ResT][Lowercase<Method>]> | undefined, FetchError<OpenApiError<Paths[ResT][Lowercase<Method>]>>> {
 // ): Promise<AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null>> {
-
   return useHttp(path, {
     baseURL: 'http://localhost:7100',
     ...opts,

app/src/layouts/simple-centered.vue

@@ -0,0 +1,8 @@
+<template lang='pug'>
+q-layout(view="lHh Lpr fff")
+  q-page-container
+    q-page.window-height.window-width.row.justify-center.items-center(
+      :style='{background: "linear-gradient(#8274C5, #5A4A9F)"}'
+    )
+      nuxt-page
+</template>

app/src/pages/index.vue

@@ -1,14 +1,13 @@
-
 <template lang='pug'>
 div
   tk-hook(name="accueil" :data='{exemple: 1}' debug)
   span Accueil
   tk-hook(name="index.accueil.bottom")
-  q-btn(@click='logout') signOut
+  q-btn(@click="call") Call
 </template>
 
 <script lang='ts' setup>
-const logout = () => {
-  useAuth().logout()
+const call = () => {
+  const { data } = useHttpApi('/tickets/ticket')
 }
 </script>

app/src/pages/login.vue

@@ -1,37 +1,42 @@
-<template>
-  <div>
-    <h1>Login Page</h1>
-    <form @submit.prevent="submit">
-      <input v-model="formData.username" type="text" placeholder="Username">
-      <input v-model="formData.password" type="password" placeholder="Password">
-      <button @click='submit'>
-        sign in
-      </button>
-    </form>
-  </div>
+<template lang='pug'>
+q-card.column.shadow-24(:style='{width: "250px"}')
+  q-toolbar.bg-primary.text-white
+    q-toolbar-title Connexion
+  form(@submit.prevent='submit')
+    q-card.no-shadow
+      q-card-section.q-pt-sm.q-px-lg.q-pb-lg
+        q-input(v-model="formData.username" label="Username" type="text")
+        q-input(v-model="formData.password" label="Password" type="password" auto-complete='current-password')
+      q-inner-loading(:showing='pending')
+        q-spinner-grid(color='primary' size='50px')
+    q-card-actions
+      q-space
+      q-btn(@click.prevent='submit' type='submit' color='primary') Se connecter
+      q-space
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 
 definePageMeta({
+  layout: 'simple-centered',
   auth: {
     unauthenticatedOnly: true,
     navigateAuthenticatedTo: '/'
   }
 })
 
-// const { signIn, token, data, status, lastRefreshedAt } = useAuth()
-
+const pending = ref(false)
 const formData = ref({
   username: '',
   password: '',
 })
 
 const submit = async () => {
-  console.log("submitting", useAuth().getStrategy())
+  pending.value = true
   await useAuth().loginWith('local', {
     body: formData.value,
   })
+  pending.value = false
 }
 </script>

service/.gitignore

@@ -37,3 +37,4 @@ lerna-debug.log*
 .env
 .env.*
 !.env.example
+.dev-token.json

service/src/_common/abstracts/dto/metadata.dto.ts

@@ -1,4 +1,4 @@
-import { IsObject, ValidateNested, IsOptional } from 'class-validator'
+import { IsObject, IsOptional, ValidateNested } from 'class-validator'
 import { ApiProperty } from '@nestjs/swagger'
 import { Type } from 'class-transformer'
 import { MetadataPartDto } from './parts/metadata.part.dto'

service/src/_common/data/console-session.ts

@@ -0,0 +1,11 @@
+import { IdentityType } from '~/_common/types/identity.type'
+import { Types } from 'mongoose'
+
+export class ConsoleSession {
+  public readonly _id: string = '000000000000000000000000'
+  public readonly username: string = 'console'
+  public readonly entityId: Types.ObjectId = new Types.ObjectId('000000000000000000000000')
+  public readonly displayName: string = 'Console'
+  public constructor() {
+  }
+}

service/src/core/auth/auth.controller.ts

@@ -1,4 +1,4 @@
-import { Controller, Get, HttpStatus, Post, Res, UseGuards } from '@nestjs/common'
+import { Body, Controller, Get, Header, Headers, HttpStatus, Post, Res, UseGuards } from '@nestjs/common'
 import { AuthService } from './auth.service'
 import { AbstractController } from '~/_common/abstracts/abstract.controller'
 import { Response } from 'express'
@@ -23,7 +23,7 @@ export class AuthController extends AbstractController {
   @Post('local')
   @UseGuards(AuthGuard('local'))
   public async authenticateWithLocal(@Res() res: Response, @ReqIdentity() user: IdentityType): Promise<Response> {
-    const tokens = await this.service.createToken(user)
+    const tokens = await this.service.createTokens(user)
     return res.status(HttpStatus.OK).json({
       ...tokens,
       user,
@@ -32,16 +32,24 @@ export class AuthController extends AbstractController {
 
   @Get('session')
   @UseGuards(AuthGuard('jwt'))
-  public async session(@Res() res: Response, @ReqIdentity() user: IdentityType): Promise<Response> {
-    const tokens = await this.service.createToken(user)
+  public async session(@Res() res: Response, @ReqIdentity() identity: IdentityType): Promise<Response> {
+    const user = await this.service.getSessionData(identity)
     return res.status(HttpStatus.OK).json({
-      ...tokens,
       user,
     })
   }
 
+  @Post('refresh')
+  public async refresh(@Res() res: Response, @Body() body: any): Promise<Response> {
+    const tokens = await this.service.renewTokens(body.refresh_token)
+    return res.status(HttpStatus.OK).json({
+      ...tokens,
+    })
+  }
+
   @Post('logout')
-  public async logout(@Res() res: Response): Promise<Response> {
+  public async logout(@Res() res: Response, @Headers('Authorization') jwt: string): Promise<Response> {
+    await this.service.clearSession(jwt.replace(/^Bearer\s/, ''))
     return res.status(HttpStatus.OK).send()
   }
 }