add compte - modified ...

app/Controllers/Http/AuthController.ts

@@ -21,6 +21,7 @@ export default class AuthController {
       response.redirect().toRoute('login')
     }
   }
+  
 
   async signup({ view }: HttpContextContract) {
     return view.render('auth/signup')
@@ -31,4 +32,10 @@ export default class AuthController {
     await User.create(playload)
     return response.redirect().toRoute('home')
   }
+
+
+  async logout({ auth, response }:HttpContextContract) {
+    await auth.logout()
+    return response.redirect().back()
+ }
 }

app/Controllers/Http/CompteController.ts

@@ -0,0 +1,33 @@
+import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
+import ModifPseudoValidator from 'App/Validators/ModifPseudoValidator'
+import ModifEmailValidator from 'App/Validators/ModifEmailValidator'
+
+export default class CompteController {
+
+  async index({ view }: HttpContextContract) {
+    return view.render('compte')
+  }
+
+  async modifpseudo({ request, auth, session, response }: HttpContextContract) {
+    const user = auth.user
+
+    await request.validate(ModifPseudoValidator)
+
+    user!.pseudo = request.input('pseudo')
+    await user!.save()
+    session.flash({success: "Username updated successfully"})
+    response.redirect().back()
+  }
+
+  async modifemail({ request, auth, session, response }: HttpContextContract) {
+    const user = auth.user
+
+    await request.validate(ModifEmailValidator)
+
+    user!.email = request.input('email')
+    await user!.save()
+    session.flash({success: "Email updated successfully"})
+    response.redirect().back()
+  }
+
+}

app/Validators/ModifEmailValidator.ts

@@ -0,0 +1,46 @@
+import { schema, CustomMessages, rules } from '@ioc:Adonis/Core/Validator'
+import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
+
+export default class ModifEmailValidator {
+  constructor(protected ctx: HttpContextContract) {}
+
+  /*
+   * Define schema to validate the "shape", "type", "formatting" and "integrity" of data.
+   *
+   * For example:
+   * 1. The username must be of data type string. But then also, it should
+   *    not contain special characters or numbers.
+   *    ```
+   *     schema.string([ rules.alpha() ])
+   *    ```
+   *
+   * 2. The email must be of data type string, formatted as a valid
+   *    email. But also, not used by any other user.
+   *    ```
+   *     schema.string([
+   *       rules.email(),
+   *       rules.unique({ table: 'users', column: 'email' }),
+   *     ])
+   *    ```
+   */
+  public schema = schema.create({
+    email: schema.string({}, [rules.email(), rules.unique({ table: 'users', column: 'email' }) ])
+  })
+
+  /**
+   * Custom messages for validation failures. You can make use of dot notation `(.)`
+   * for targeting nested fields and array expressions `(*)` for targeting all
+   * children of an array. For example:
+   *
+   * {
+   *   'profile.username.required': 'Username is required',
+   *   'scores.*.number': 'Define scores as valid numbers'
+   * }
+   *
+   */
+  public messages: CustomMessages = {
+    required: 'The {{ field }} is required to modifie email',
+    'email.email': 'You must enter an email in the email field',
+    'email.unique': 'Email is already in use'
+  }
+}

app/Validators/ModifPseudoValidator.ts

@@ -0,0 +1,45 @@
+import { schema, CustomMessages, rules } from '@ioc:Adonis/Core/Validator'
+import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
+
+export default class ModifPseudoValidator {
+  constructor(protected ctx: HttpContextContract) {}
+
+  /*
+   * Define schema to validate the "shape", "type", "formatting" and "integrity" of data.
+   *
+   * For example:
+   * 1. The username must be of data type string. But then also, it should
+   *    not contain special characters or numbers.
+   *    ```
+   *     schema.string([ rules.alpha() ])
+   *    ```
+   *
+   * 2. The email must be of data type string, formatted as a valid
+   *    email. But also, not used by any other user.
+   *    ```
+   *     schema.string([
+   *       rules.email(),
+   *       rules.unique({ table: 'users', column: 'email' }),
+   *     ])
+   *    ```
+   */
+  public schema = schema.create({
+    pseudo: schema.string({}, [rules.minLength(3)])
+  })
+
+  /**
+   * Custom messages for validation failures. You can make use of dot notation `(.)`
+   * for targeting nested fields and array expressions `(*)` for targeting all
+   * children of an array. For example:
+   *
+   * {
+   *   'profile.username.required': 'Username is required',
+   *   'scores.*.number': 'Define scores as valid numbers'
+   * }
+   *
+   */
+  public messages: CustomMessages = {
+    required: 'The {{ field }} is required to modifie pseudo',
+    'pseudo.minLength': 'The pseudo must be at least 3 characters long'
+  }
+}

resources/views/components/form/form.edge

@@ -1,4 +1,7 @@
 <form method="{{ method }}" action="{{ action }}">
-  @!component('components/flash')
+  @if(flash)
+  @else
+    @!component('components/flash')
+  @end
   {{{ await $slots.main() }}}
 </form>

resources/views/components/select_theme.edge

@@ -22,7 +22,7 @@
       </svg>
       <svg x-cloak
         x-bind:class="localStorage.theme === 'systeme' && window.matchMedia('(prefers-color-scheme: dark)').matches ? '' : 'hidden'"
-        viewBox="0 0 24 24" fill="none" class="w-6 h-6 mr-2">
+        viewBox="0 0 24 24" fill="none" class="w-6 h-6 ">
         <path fill-rule="evenodd" clip-rule="evenodd"
           d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z"
           class="fill-transparent"></path>
@@ -36,7 +36,7 @@
       <svg x-cloak
         x-bind:class="localStorage.theme === 'systeme' && window.matchMedia('(prefers-color-scheme: dark)').matches !== true ? '' : 'hidden'"
         viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-        class="w-6 h-6 mr-2">
+        class="w-6 h-6">
         <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="stroke-slate-400 dark:stroke-slate-500"></path>
         <path
           d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836"

resources/views/compte.edge

@@ -0,0 +1,67 @@
+@layout('layouts/main')
+@set('title', 'Compte')
+
+@section('body')
+
+<main class="m-24">
+
+  @!component('components/flash')
+
+  <h1 class="text-4xl font-bold mb-9">Welcome {{ auth.user.pseudo }}</h1>
+
+  <a href="{{ route('home') }}"
+    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+    >return to home page</a>
+
+  <div>
+    <h2 class="text-2xl font-bold mb-3 mt-9">Here is your personal information:</h2>
+    <p>pseudo : {{ auth.user.pseudo }}</p>
+    <p>email : {{ auth.user.email }}</p>
+    <p>created at : {{ auth.user.createdAt }}</p>
+  </div>
+
+  <div id="settings">
+    <h2 class="text-2xl font-bold mb-5 mt-9">You can modify your personal information:</h2>
+
+    @component('components/form/form', {
+      'action': 'modifpseudo',
+      'method': 'post',
+      'flash': 'not',
+    }) 
+      @!component('components/form/field', {
+        'label': 'Pseudo :',
+        'name': 'pseudo',
+        'type': 'text',
+        'required': true,
+        'placeholder': 'new pseudo',
+      })
+      @!component('components/form/button', {
+        'type': 'submit',
+        'text': 'Envoyer',
+      })
+    @end
+
+    <div class="mt-5"></div>
+
+    @component('components/form/form', {
+      'action': 'modifemail',
+      'method': 'post',
+      'flash': 'not',
+    }) 
+      @!component('components/form/field', {
+        'label': 'Email :',
+        'name': 'email',
+        'type': 'text',
+        'required': true,
+        'placeholder': 'new email',
+      })
+      @!component('components/form/button', {
+        'type': 'submit',
+        'text': 'Envoyer',
+      })
+    @end
+  </div>
+
+</main>
+
+@end

resources/views/home.edge

@@ -14,4 +14,4 @@
 
 @include('partials/footer')
 
-@end
+@end

resources/views/partials/header.edge

@@ -1,4 +1,4 @@
-<header class="flex mt-36 mx-24 mb-24">
+<header class="flex mt-36 mx-4 mb-24 sm:mx-24">
   <div class="mr-10">
     <h1 class="text-4xl font-bold mb-3">Hi! 👋🏻<br>I'm Arthur.</h1>
     <h2 class="text-2xl font-bold mb-3">Founder</h2>

resources/views/partials/main/about.edge

@@ -1,4 +1,4 @@
-<section id="about" class="pt-32 mx-24 mb-24">
+<section id="about" class="pt-32 mx-4 mb-24 sm:mx-24">
    <h2 class="text-2xl font-bold mb-10">About</h2>
    <p>Hi ! I'm Arthur, a passionate developer based in France. My journey in the world of development is an inspiring adventure. Every line of code I write is a step toward creating unique and engaging experiences. I am driven by the desire to bring ideas to life and shape them into innovative designs.</p>
 

resources/views/partials/main/contact.edge

@@ -1,4 +1,4 @@
-<section id="contact" class="pt-32 mx-24 mb-24">
+<section id="contact" class="pt-32 mx-4 mb-24 sm:mx-24">
   <h2 class="text-2xl font-bold mb-10">Contact</h2>
 
   @component('components/form/form', {
@@ -10,14 +10,14 @@
       'name': 'nom',
       'type': 'text',
       'required': true,
-      'placeholder': 'Votre nom',
+      'placeholder': 'nom',
     })
     @!component('components/form/field', {
       'label': 'E-mail :',
       'name': 'email',
       'type': 'email',
       'required': true,
-      'placeholder': 'prenom.nom@mail.com',
+      'placeholder': 'exemple@mail.com',
     })
     @!component('components/form/field', {
       'label': 'Message :',

resources/views/partials/main/projects.edge

@@ -1,4 +1,4 @@
-<section id="projects" class="pt-32 mx-24 mb-24">
+<section id="projects" class="pt-32 mx-4 mb-24 sm:mx-24">
   <h2 class="text-2xl font-bold mb-10">Projects</h2>
 
   <div class="flex flex-wrap justify-center">

resources/views/partials/nav.edge

@@ -53,15 +53,14 @@
 
               <!-- Dropdown menu -->
               <div x-show="profileMenuOpen" @click.away="profileMenuOpen = false" x-cloak class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
-                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-200">Your Profile</a>
-                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-200">Settings</a>
-                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-200">Sign out</a>
+                <a href="{{ route('compte') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-200">Your Profile</a>
+                <a href="{{ route('compte') }}#settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-200">Settings</a>
+                <a href="{{ route('logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-200">Sign out</a>
               </div>
             </div>
           @else
-            {{ auth.user }}
-            <a href="{{ route('login') }}">Login</a>
-            <a href="{{ route('signup') }}">Signup</a>
+            <a href="{{ route('login') }}" class="mr-2 text-gray-300">Login</a>
+            <a href="{{ route('signup') }}" class="text-gray-300">Signup</a>
           @end
         </div>
     </div>

start/routes.ts

@@ -31,4 +31,10 @@ Route.get('/terms', async ({ view }) => {
 Route.get('/auth/login', 'AuthController.login').as('login')
 Route.post('/auth/login', 'AuthController.doLogin')
 Route.get('/auth/signup', 'AuthController.signup').as('signup')
-Route.post('/auth/signup', 'AuthController.doSignup')
+Route.post('/auth/signup', 'AuthController.doSignup')
+
+Route.get('/compte', 'CompteController.index').as('compte')
+Route.post('/modifpseudo', 'CompteController.modifpseudo')
+Route.post('/modifemail', 'CompteController.modifemail')
+
+Route.get('/auth/logout', 'AuthController.logout').as('logout')