Shopping : l’authentification
On a vu lors des deux précédents articles comment le schéma des données est organisé. On a aussi garni la base avec des données d’exemples. Toutes les relations sont en place. On va commencer maintenant à s’intéresser au visuel de la boutique.
Le visuel est toujours une affaire de goût personnel. Personnellement j’aime bien Materialize. Alors on va partir avec ce framework pour l’apparence de la boutique. On fera un autre choix pour l’administration.
Vous pouvez télécharger un ZIP du projet ici.
Materialize
On charge Materialize avec npm :
npm i -D materialize-css
On le retrouve ainsi dans le dossier node_modules.
Mais comme on va changer certaines variables pour changer les couleurs de base on va en faire une copie dans le dossier resources/sass. Mais juste la partie utile :
Donc le dossier components et le fichier materialize.scss.
Au passage on supprime le fichier _variables.scss qui ne nous sera plus utile.
Et dans le fichier app.scss on remplace ainsi le code :
@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); //Materialize @import "materialize-css/materialize.scss";
Le fichier où on va intervenir pour changer l’aspect est materialize-css/components/_variables.scss.
On va changer certaines couleurs de base :
$primary-color: color("brown", "darken-2") !default; $secondary-color: color("purple", "darken-2") !default; $card-link-color: color("purple", "accent-3") !default;
Pour le Javascript on va aussi copier le fichier complet issu de dist pour éviter qu’une mise à jour ultérieure vienne mettre la panique :
On modifie le fichier resources/js/app.js avec ce code :
require('./materialize.js'); document.addEventListener('DOMContentLoaded', function() { M.AutoInit(); var elems = document.querySelectorAll('.tooltipped'); M.Tooltip.init(elems); });
Il ne reste plus qu’à générer :
npm run dev
Évidemment là on a tout cassé ! Il ne nous reste plus qu’à arranger déjà l’authentification !
Le layout
On va commencer par modifier le layout (views/layouts/app.blade.php) :
<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> {{-- <meta name="csrf-token" content="{{ csrf_token() }}"> --}} <title>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts --> <script src="{{ asset('js/app.js') }}"></script> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> @yield('css') </head> <body> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> <nav> <div class="nav-wrapper"> <a href="#" class="brand-logo"><img src="/images/logo1.png" width="210px" alt="Logo"></a> <a href="#" data-target="mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a> <ul class="right hide-on-med-and-down"> @guest <li><a href="{{ route('login') }}"><i class="material-icons left">perm_identity</i>Connexion</a></li> @else <li><a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> <i class="material-icons left">perm_identity</i> Déconnexion </a></li> @endguest </ul> </div> </nav> <ul class="sidenav" id="mobile"> @guest <li><a href="{{ route('login') }}">Connexion</a></li> @else <li><a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> Déconnexion </a></li> @endguest </ul> <main> @yield('content') </main> <footer class="page-footer"> <div class="container"> <div class="row"> <div class="col l6 s12"> <h5 class="white-text">Nom de la boutique</h5> <ul> <li class="grey-text text-lighten-3">Adresse de la boutique</li> <li class="grey-text text-lighten-3">Appelez-nous...</li> <li class="grey-text text-lighten-3">Écrivez-nous...</li> <br> <li><img src="/images/paiement.png" alt="Modes de paiement" width="250px"></li> </ul> </div> <div class="col l4 offset-l2 s12"> <h5 class="white-text">Informations</h5> </div> </div> </div> <div class="footer-copyright"> <div class="container"> © 2020 Nom de la boutique <a class="grey-text text-lighten-4 right" href="#" target="_blank"><img src="/images/facebook.png" alt="Facebook"></a> </div> </div> </footer> @yield('javascript') </body> </html>
On complètera ça au fur et à mesure…
Un composant
Laravel 7 a ajouté la possibilité de créer des composants pour les vues alors on ne va pas s’en priver :
php artisan make:component Input
On a la création d’une classe :
Et d’une vue :
On complète ainsi le code de la classe :
<?php namespace App\View\Components; use Illuminate\View\Component; class Input extends Component { public $name; public $type; public $icon; public $label; public $required; public $autofocus; public $value; /** * Create a new component instance. * * @return void */ public function __construct($name, $type, $icon, $label, $value = '', $required = false, $autofocus = false) { $this->name = $name; $this->type = $type; $this->icon = $icon; $this->label = $label; $this->value = $value; $this->required = $required; $this->autofocus = $autofocus; } /** * Get the view / contents that represent the component. * * @return \Illuminate\View\View|string */ public function render() { return view('components.input'); } }
Et celui de la vue :
<div class="row"> <div class="input-field col s12"> <i class="material-icons prefix">{{ $icon }}</i> <input id="{{ $name }}" type="{{ $type }}" name="{{ $name }}" value="{{ old($name, $value !== '' ? $value : '') }}" class="{{ $errors->has($name) ? 'invalid' : '' }}" {{ $required ? 'required' : '' }} {{ $autofocus ? 'autofocus' : '' }}> <label for="{{ $name }}">{{ $label }}</label> <span class="red-text">{{ $errors->has($name) ? $errors->first($name): '' }}</span> </div> </div>
L’enregistrement
On peut maintenant modifier le code pour la vue de l’enregistrement (views/auth/register.blade.php) :
@extends('layouts.app') @section('content') <div class="container"> <div class="row"> <div class="col s12 m10 offset-m1 l8 offset-l2"> <div class="card"> <form method="POST" action="{{ route('register') }}"> <div class="card-content"> @csrf <span class="card-title">Créez votre compte</span> <hr> <x-input name="firstname" type="text" icon="person" label="Prénom" required="true" ></x-input> <x-input name="name" type="text" icon="person" label="Nom" required="true" ></x-input> <x-input name="email" type="email" icon="mail" label="Adresse mail" required="true" ></x-input> <x-input name="password" type="password" icon="lock" label="Mot de passe" required="true" ></x-input> <div class="row"> <div class="input-field col s12"> <i class="material-icons prefix">lock</i> <input id="password-confirm" type="password" name="password_confirmation" required> <label for="password-confirm">Confirmation du mot de passe</label> </div> </div> <div class="row col s12"> <label> <input type="checkbox" name="newsletter" id="newsletter" {{ old('newsletter') ? 'checked' : '' }}> <span>Je désire recevoir votre lettre d'information</span> </label> </div> <div class="row col s12"> <label> <input type="checkbox" name="rgpd" id="rgpd" {{ old('rgpd') ? 'checked' : '' }}> <span>J'accepte les termes et conditions de <a href="{{ route('page', 'politique-de-confidentialite') }}" target="_blank">la politique de confidentialité</a>.</span> </label> </div> <p> <button class="btn waves-effect waves-light disabled" style="width: 100%" type="submit" name="action"> Enregistrer </button> </p> </div> </form> </div> </div> </div> </div> @endsection @section('javascript') <script> document.addEventListener('DOMContentLoaded', function() { const rgpd = document.querySelector('#rgpd'); rgpd.checked = false; rgpd.addEventListener('click', () => document.querySelector('button[type=submit]').classList.toggle('disabled')); }); </script> @endsection
On a déjà quelque chose de plus sympathique :
Le Javascript sert juste à rendre le bouton d’enregistrement actif seulement si l’utilisateur a coché la case d’acceptation de la politique de confidentialité (pour le moment le lien est inactif).
Mais comme on a ajouté des colonnes dans la table users on va avoir un souci pour l’enregistrement !
On va donc modifier ainsi le contrôleur RegisterController :
use App\Models\User; ... protected function validator(array $data) { return Validator::make($data, [ 'name' => ['required', 'string', 'max:255'], 'firstname' => ['required', 'string', 'max:255'], 'email' => ['required', 'string', 'email', 'max:255', 'unique:users'], 'password' => ['required', 'string', 'min:8', 'confirmed'], ]); } protected function create(array $data) { return User::create([ 'name' => $data['name'], 'firstname' => $data['firstname'], 'email' => $data['email'], 'password' => Hash::make($data['password']), 'newsletter' => array_key_exists('newsletter', $data), ]); }
On peut maintenant tenter d’enregistrer un nouvel utilisateur ! Chez moi ça fonctionne :
La connexion
On peut maintenant passer à la connexion avec la vue views/auth/login.blade.php :
@extends('layouts.app') @section('content') <div class="container"> <div class="row"> <div class="col s12 m10 offset-m1 l8 offset-l2"> <div class="card"> <form method="POST" action="{{ route('login') }}"> <div class="card-content"> @csrf <span class="card-title">Connexion</span> <hr> <x-input name="email" type="email" icon="mail" label="Adresse mail" required="true" autofocus="true" ></x-input> <x-input name="password" type="password" icon="lock" label="Mot de passe" required="true" ></x-input> <div class="row col s12"> <label> <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}> <span>Se rappeler de moi</span> </label> </div> <p> <button class="btn waves-effect waves-light" style="width:100%" type="submit" name="action">Connexion <i class="material-icons right">lock_open</i> </button> </p> <br> </div> <div class="card-action"> <p><a href="{{ route('password.request') }}">Mot de passe oublié ?</a></p> <p><a href="{{ route('register') }}">Pas de compte ? Créez-en un</a></p> </div> </form> </div> </div> </div> </div> @endsection
Oubli du mot de passe
On va aussi modifier la vue views/auth/passwords/email.blade.php :
@extends('layouts.app') @section('content') <div class="container"> @if (session('status')) <div class="card"> <div class="card green darken-1"> <div class="card-content white-text"> {{ session('status') }} </div> </div> </div> @endif <div class="row"> <div class="col s12 m10 offset-m1 l8 offset-l2"> <div class="card"> <form method="POST" action="{{ route('password.email') }}"> <div class="card-content"> @csrf <span class="card-title">Renouvellement du mot de passe</span> <hr> <x-input name="email" type="email" icon="mail" label="Adresse mail" required="true" autofocus="true" ></x-input> <p> <button class="btn waves-effect waves-light right" type="submit" name="action"> Envoyer le lien de renouvellement <i class="material-icons right">lock_open</i> </button> </p> <br><br> </div> </form> </div> </div> </div> </div> @endsection
Pour faire l’essai il faut prévoir de renseigner les données de Mailtrap dans le fichier .env :
MAIL_MAILER=smtp MAIL_HOST=smtp.mailtrap.io MAIL_PORT=2525 MAIL_USERNAME="username ici" MAIL_PASSWORD="mot de passe ici" MAIL_ENCRYPTION=null MAIL_FROM_ADDRESS=from@example.com MAIL_FROM_NAME=Example
Lorsque l’email est parti on affiche la jolie banière verte :
Bon c’est encore en anglais, on va aller chercher les traductions en français. On place le dossier ici :
On change aussi dans config/app.php :
'locale' => 'fr',
Et maintenant ça va mieux :
Un email en français
Par contre le contenu de l’email est tout en anglais :
On peut créer un fichier de traduction :
Avec ce code (le source est en grande partie dans laravel/framework/src/illuminate/Auth/Notifications/ResetPassword.php) :
{ "Reset Password Notification": "Renouvellement du mot de passe", "You are receiving this email because we received a password reset request for your account.": "Vous recevez ce message parce que nous avons reçu une demande de renouvellement du mot de passe pour votre compte.", "Reset Password": "Renouvellement", "If you did not request a password reset, no further action is required." : "Si vous n'avez pas fait cette demande, aucune action complémentaire n'est requise.", "Hello!": "Bonjour !", "Regards": "Cordialement", "This password reset link will expire in :count minutes.": "Ce lien de renouvellement expirera dans :count minutes.", "If you’re having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "Si vous avez un problème pour cliquer le boutton \":actionText\", copiez et collez le lien ci-dessous\ndans votre navigateur :", "All rights reserved.": "Tous droits réservés" }
C’est mieux :
On a encore deux petits soucis :
- C’est signé « Laravel »
- Un bas de page qui n’apparaît pas sur l’image affiche : © 2020 Laravel. Tous droits réservés
Pour la signature et le bas de page ça se passe dans la configuration, la valeur est par défaut dans le fichier .env :
APP_NAME=Laravel
Dans un souci d’homogénéité on serait sans doute amené à intégrer cet email à ceux qu’il faudra créer pour la boutique, parce qu’on ne va pas se contenter du système de notification de Laravel. On abordera cette question dans un article utltérieur.
Renouvellement du mot de passe
On va aussi modifier la vue pour le renouvellement du mot de passe (views/auth/passwords/reset.blade.php) :
@extends('layouts.app') @section('content') <div class="container"> <div class="row"> <div class="col s12 m10 offset-m1 l8 offset-l2"> <div class="card"> <form method="POST" action="{{ route('password.update') }}"> <div class="card-content"> @csrf <input type="hidden" name="token" value="{{ $token }}"> <span class="card-title">Renouvellement du mot de passe</span> <hr> <x-input name="email" type="email" icon="mail" label="Adresse mail" required="true" autofocus="true" ></x-input> <x-input name="password" type="password" icon="lock" label="Mot de passe" required="true" ></x-input> <div class="row"> <div class="input-field col s12"> <i class="material-icons prefix">lock</i> <input id="password-confirm" type="password" name="password_confirmation" required> <label for="password-confirm">Confirmation du mot de passe</label> </div> </div> <p> <button class="btn waves-effect waves-light" type="submit" name="action">Renouveler ! <i class="material-icons right">lock_open</i> </button> </p> </div> </form> </div> </div> </div> </div> @endsection
Parfait !
Les urls
J’ai dit qu’on veut un site strictement en français. Ca concerne aussi les urls. Il faudrait éviter login, register, reset…
Par défaut toutes les routes de l’authentification sont générées avec ce simple code :
Auth::routes();
On génère ainsi tout ça :
On se rend compte aussi qu’il y a des routes (confirm) qu’on n’utilisera pas.
Ces routes sont générées dans le fichier vendor\laravel\ui\src\AuthRouteMethods.php.
Pour franciser les urls une seule solution, réécrire ces routes :
Route::post('deconnexion', 'Auth\LoginController@logout')->name('logout'); Route::middleware('guest')->group(function () { Route::prefix('connexion')->group(function () { Route::get('/', 'Auth\LoginController@showLoginForm')->name('login'); Route::post('/', 'Auth\LoginController@login'); }); Route::prefix('inscription')->group(function () { Route::get('/', 'Auth\RegisterController@showRegistrationForm')->name('register'); Route::post('/', 'Auth\RegisterController@register'); }); }); Route::prefix('passe')->group(function () { Route::get('renouvellement', 'Auth\ForgotPasswordController@showLinkRequestForm')->name('password.request'); Route::post('email', 'Auth\ForgotPasswordController@sendResetLinkEmail')->name('password.email'); Route::get('renouvellement/{token}', 'Auth\ResetPasswordController@showResetForm')->name('password.reset'); Route::post('renouvellement', 'Auth\ResetPasswordController@reset')->name('password.update'); });
Un peu de style
Pour terminer on va un peu améliorer le style de nos pages (app.scss). Lancez npm run watch pour constater les changements.
On va déjà un peu décaler le contenu de nos pages par rapport à la barre de menu :
main { padding-top: 40px; };
On va aussi changer la couleur du fond :
body { background-color: #f1f1ff; }
On va aussi aérer le footer :
.page-footer { margin-top: 100px; }
Conclusion
Notre authentification est maintenant en place, on est donc prêts à accueillir des clients ! Il va falloir maintenant leur proposer des produits à la vente et gérer leurs achats…
50 commentaires
Mister Tine
Bonsoir.
Au faites en tappant la commande « npm i -D materialize-css » il y’a une erreur que je n’arrive pas à resoudre
npm ERR! code FETCH_ERROR
npm ERR! errno FETCH_ERROR
npm ERR! invalid json response body at http://registry.npmjs.org/@babel%2fpreset-react/ reason: Unexpected token < in JSON at position 0
npm ERR! A complete log of this run can be found in:
npm ERR! URL
si vous pouvons m'aider je suis preneur
bestmomo
Salut,
On dirait qu’il y a un souci avec npm. Essaie de le réinstaller.
Kalky
Bonjour, merci encore pour le boulot que tu as effectué.
Je suis en train actuellement de suivre votre tuto pour mettre en place l’authentification, sauf qu’à un moment j’ai une erreur.
L’erreur se situe juste après la commande : npm run dev
——————–
λ npm run dev
> @ dev C:\laragon\www\Projet
> npm run development
> @ development C:\laragon\www\Projet
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js –progress –config=node_modules/laravel-mix/setup/webpack.config.js
‘cross-env’ n’est pas reconnu en tant que commande interne
ou externe, un programme exécutable ou un fichier de commandes.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js –progress –config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\kalki\AppData\Roaming\npm-cache\_logs\2021-01-25T16_03_30_089Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\kalki\AppData\Roaming\npm-cache\_logs\2021-01-25T16_03_30_225Z-debug.log
——————–
Du coup, dans mes dossiers, j’ai toujours node_modules\materialize-css (comme au départ quand il apparait).
Et le dossier ressources avec à l’intérieur le dossier js et sass (+ d’autres).
Dans celui de js, j’ai le fichier app.js, bootstrap.js (que je n’ai pas supprimé) et materialize.js qui provient du dossier dist => js de node_modules\materialize-css.
J’ai fait les petites modifications des fichiers, et dans app.js, j’ai remplacé la seule ligne présente par ceux qui sont présentes dans votre tuto.
Ensuite, j’exécute la commande : npm run dev et j’ai les erreurs qui pop.
J’ai regardé certains commentaires avant de poster le mien, mais rien n’y fait. Je cherche, mais en vain.
En vous remerciant, bonne aprem.
bestmomo
Salut,
C’est un souci avec npm. Il faudrait déjà voir s’il est à jour (npm -v) et l’upgrader si besoin.
Ensuite il faudrait supprimer le dossier « node_modules » et le fichier « package-lock.json » et relancer un « npm install » et ensuite « npm run dev ».
myonlyone
j’ai modifié mon fichier input.blade en enter.blade
myonlyone
bonjour svp j’ai un probleme avec mon formulaire d’enregistrement on me signale cette erreur
htmlspecialchars() expects parameter 1 to be string, array given (View: C:\laragon\www\shopping1\resources\views\components\enter.blade.php)
bestmomo
Bonjour,
Quand ce genre d’erreur arrive dans une vue c’est qu’on a envoyé un tableau à la place d’une chaîne de caractères.
Ntsoa
Bonjour !
Je remercie pour cette excellente Tuto. Vous nous avez beaucoup aidé
J’ai un problème, la page d’enregistrement s’est affiché mais elle n’a pas de style, on dirait qu’elle n’a pas eu le style de Materialize, pourriez-vous m’aider svp?
bestmomo
Salut,
Tu as bien lancé la commande « npm run dev » ?
agretsuko
Hello tout le monde, J’ai un souci avec la route pour la page d’enrollement. Comment je me désembourbe?
bestmomo
Salut,
C’est pas très précis « un souci ».
eelisland
J’ai un petit peu lutté sur celui-ci, je m’y suis repris a deux fois, pour des raisons qui sont propre à mon install je crois: linux / apache ?
Tout à fonctionné nickel, mais au refresh de la page Laravel affichait toujours les pages login et register avec du HTML bootstrap type cold-md-8 etc, en fait il fallait vider le dossier:
/shopping/storage/framework/views/
des fichiers (cache?) de type:
8f0dc1a394f33105f53508ef04c78f556dfca6dc.php
Ou relancer mon navigateur peut-être, vidé son cache n’a pas suffit en tout cas, mais je suis sur il y a une commande Laravel pour ça… et oui ! mdr
php artisan view:clear
bestmomo
Je ne m’en sers jamais de cette commande, j’ai pris l’habitude de vider directement le dossier quand une vue ne se rafraichit pas correctement.
fatou
salut, je vois que les styles de mon site ne prenne pas c’est dire si je rentre des styles dans le fichier app.scss rien ne marche or je bien suivie comme le tuto l’a fait
bestmomo
Salut,
Pour que les styles soient actifs il faut régénérer les fichiers compilés avec
npm run dev
.fatou
ahh ok c’est ce que je suis entrain de faire merci
fatou
ahh ok je comprend maintenant. Merci pour l’application grâce à lui je suis entrain de comprendre beaucoup laravel et bien d’autres choses. et Merci d’être disponible à aider
raouf
j’ai un probléme avec la route ici la politique de confidentialité
expliquez moi svp
bestmomo
Bonjour,
Il suffit de remplacer la route par un # en attendant que le sujet soit traité plus tard.
youde
Un souci, je n’ai pas la page politique de confidentialité pour que le lien marche donc mon bouton Enregistrer reste grisé et ma p
youde
Mon bouton Enregistrer reste grisé à cause de politique de confidentialité
bestmomo
Salut,
Si la route n’existe pas encore il suffit de remplacer le lien par #.
youde
ok merci
youde
Une autre erreur
Symfony\Component\ErrorHandler\Error\FatalError
Cannot declare class App\View\Components\Input, because the name is already in use
youde
Bonjour, j’ai une erreur :ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can’t find stylesheet to import.
╷
4 │ @import « components/color-variables »;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
youde
Solution trouvée
Rosisse25
Un problème avec le navigateur Chrome, le style de la page est mal formé, mais avec MozilaFirefox et Ms Edge Tout va bien.
Voici le message qui s’affiche par une inspetcion console sur la page.
DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
bestmomo
Salut,
Je n’ai pas l’erreur avec Chrome chez moi, ça serait pas un module ajouté qui fait ça ?
Rosisse25
Merci beaucoup !!!
Sarx
Bonjour !
Je suis débutant dans Laravel et je suis en train de suivre votre tutoriel.
Cependant, j’ai une erreur : quand je clique sur Register ou login, on me renvoi une erreur 404.
D’où peut venir mon problème ?
Merci.
bestmomo
Bonjour,
Une erreur 404 correspond à une url qui ne correspond à aucune route. Il faudrait donc vérifier les routes avec php artican route:list.
Sarx
GET|HEAD | connexion | login | App\Http\Controllers\Auth\LoginController@showLoginForm | web |
| | | | guest |
POST | connexion | | App\Http\Controllers\Auth\LoginController@login | web |
| | | | guest |
POST | deconnexion | logout | App\Http\Controllers\Auth\LoginController@logout | web |
GET|HEAD | home | home | App\Http\Controllers\HomeController@index | web |
| | | | auth |
GET|HEAD | inscription | register | App\Http\Controllers\Auth\RegisterController@showRegistrationForm | web |
| | | | guest |
POST | inscription | | App\Http\Controllers\Auth\RegisterController@register | web |
| | | | guest |
En plus des routes passe/email et passe/renouvellement
bestmomo
Quelle est l’url générée en cliquant sur Login ?
Sarx
{monapp}/public/connexion
bestmomo
Normalement public ne devrait pas apparaître dans l’url avec le .htaccess fourni avec Laravel.
Sarx
J’aurai dû préciser que j’ai créer mon projet par le biais de Laragon.
Et que je suis en local et que l’url complète est donc http://localhost/{monapp}/public/connexion
bestmomo
Laragon génère automatiquement des hôtes du genre monappli.oo ce qui permet d’avoir un comportement correct au niveau des urls.
Sarx
Du coup, d’où pourrait venir mon erreur ?
Aurai-je du utiliser la commande « composer create-project –prefer-dist laravel/laravel shopping »
plutôt que l’option « créer un site » de Laragon ?
bestmomo
Non
Il faut passer par la commande « Créer un site » pour générer l’hôte virtuel
Sarx
Bonjour,
Je viens donc de refaire le tutoriel en utilisant la commande composer dans le cmd windows plutôt que passer par l’option « créer un site » de Laragon et d’entrer les commande sur le terminal de VSC et tout fonctionne maintenant !
Le problème vient donc de la création du projet ou de l’utilisation du terminal VSC au lieu du cmd de windows. 🙂
ted
bsr bestmomo ! svp ma commande
npm run watch
ne s’arrête pas j’ai ça depuis 30 min environ
10% building 1/1 modules 0 active
webpack is watching the files…
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 7495ms
Asset Size Chunks Chunk Names
/css/app.css 158 KiB /js/app [emitted] /js/app
/js/app.js 370 KiB /js/app [emitted] /js/app
aussi j’ai créer un compte sur mailtrap et renseigné mes identifiants et j’obtiens l’erreurs
Swift_TransportException
La connexion n’a pas pu être établie avec l’hôte smtp.mailtrap.io: stream_socket_client (): impossible de se connecter à smtp.mailtrap.io:2525 au-del d une certaine dur e ou une connexion tablie a chou car l h te de connexion n a pas r pondu.)
j’entre l’adresse email réel car j’ai créer un utilisateur avec cette adresse
voici ce que me propose le site de mailtrap
MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=9efdf8a8429b58
MAIL_PASSWORD=***
MAIL_FROM_ADDRESS=from@example.com
MAIL_FROM_NAME=Example
ici il utiliser MAIL_DRIVER=smtp dans mon projet c’est MAIL_MAILER=smtp j’ai modifié et obtenue la même erreur
j’ai même essayer avec mes identifiants pour le site de mailtrap mais j’ai toujours eu la même erreur
vous faites déjà beaucoup pour nous. désole d’en demander encore
bestmomo
Salut,
Pour npm il faudrait vérifier les versions de node et npm : node -v et npm -v et mettre à jour si nécessaire.
Pour Mailtrap les infos nécessaires sont :
MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=user name ici
MAIL_PASSWORD=password ici
MAIL_ENCRYPTION=null
Hamdi
Bonsoir BestMomo, j’essaie d’envoyer le mail de renouvellement de mot de passe et je suis confronter à une erreur, j’ai essayer de m’en sortir toute seule mais j’y suis pas arriver. Voici l’erreur : Failed to authenticate on SMTP server with username « *** » using 3 possible authenticators. Authenticator CRAM-MD5 returned Expected response code 235 but got code « 535 », with message « 535 5.7.0 Invalid login or password « . Authenticator LOGIN returned Expected response code 250 but got an empty response. Authenticator PLAIN returned Expected response code 250 but got an empty response.
J’ai besoin de votre aide s’il vous plait. Merci
bestmomo
Bonsoir,
Pour les essais je conseille d’utiliser Mailtrap. On ouvre un compte gratuitement et on récupère username et password à mettre dans le fichier .env à la place de ***. J’ai mis ces astérisques pour ne pas afficher mes propres codes.
Hamdi
Bonsoir,
Merci beaucoup pour votre aide grâce à elle je comprends mieux le mécanisme d’envoi de mail. Par contre même après avoir crée mon compte sur Mailtrap je reçoit toujours la même avec à la place des *** j’ai mon username. J’ai fait un php artisan cache:clear mais le problème persiste toujours.
Voici l’erreur :
Failed to authenticate on SMTP server with username « hamdiyatou » using 3 possible authenticators. Authenticator CRAM-MD5 returned Expected response code 235 but got code « 535 », with message « 535 5.7.0 Invalid login or password
« . Authenticator LOGIN returned Expected response code 250 but got an empty response. Authenticator PLAIN returned Expected response code 250 but got an empty response.
Merci d’avance.
bestmomo
Comme c’est un problème d’authentification est-ce que le mot de passe a bien été copié dans .env ?
Hamdi
Bonjour, le problème est réglé. Merci beaucoup pour votre aide
Julienmivo
je ne suis qu’un débutant laravel
J’ai ce problème
ERROR Failed to compile with 1 errors 14:27:30
This relative module was not found:
* ./materialize.js in ./resources/js/app.js
Asset Size Chunks Chunk Names
/css/app.css 158 KiB /js/app [emitted] /js/app
/js/app.js 4.85 KiB /js/app [emitted] /js/app
ERROR in ./resources/js/app.js
Module not found: Error: Can’t resolve ‘./materialize.js’ in ‘C:\laragon\www\assi
vito\resources\js’
@ ./resources/js/app.js 1:0-27
@ multi ./resources/js/app.js ./resources/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/
webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webp
ack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logg
ing output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\client\AppData\Roaming\npm-cache\_logs\2020-05-27T13_27_30_
681Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logg
ing output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\client\AppData\Roaming\npm-cache\_logs\2020-05-27T13_27_30_
774Z-debug.log
bestmomo
Bonjour,
Il faut copier le fichier materialize.js qui est dans node_modules/materialize-css/dist/js dans resources/js.
Julienmivo
Tout va bien maintenant
Merci