миграция для удаления имени пользователя, модальное окно, js-логика, клиентская…

миграция для удаления имени пользователя, модальное окно, js-логика, клиентская валидация, правки по верстке

src/app/Http/Controllers/UserController.php

@@ -19,19 +19,18 @@ class UserController extends Controller
         //dd($request->all());
         
         $request->validate([
-            'name' => 'required',
             'email' => 'required|email|unique:users',
             'password' => 'required|confirmed',
         ]);
         
         $user = User::create([
-            'name' => $request->name, // || 'name' => $request->input('name'),
+            //'name' => $request->name, // || 'name' => $request->input('name'),
             'email' => $request->email,
             'password' => Hash::make($request->password),
             'email_verified_at' => NOW(),
         ]);
         
-        session()->flash('success', 'Successful registration');
+        session()->flash('success', 'Реєстрація успішна');
         Auth::login($user);
         return redirect()->route('home'); // || redirect()->home(); || redirect('/');
     }
@@ -40,29 +39,32 @@ class UserController extends Controller
         //dd($request->all());
         
         $request->validate([
-            'name' => 'required',
             'email' => 'required|email',
             'password' => 'required|confirmed',
         ]);
         
         $user = Auth()->user();
         
-        $user->name = $request->name;
         $user->email = $request->email;
         $user->password = Hash::make($request->password);
         $user->email_verified_at = NOW();
         
         if ($user->save()) {
-            session()->flash('success', 'Sittings saved successful');
+            session()->flash('success', 'Налаштування збережено успішно');
             return redirect()->back();
         }
-        return redirect()->back()->with('error', 'Sittings saving error');
+        return redirect()->back()->with('error', 'Виникла помилка при збереженні налаштувань');
     }
     
     public function loginForm() {
         return view('user.login');
     }
     
+    public function loginAuth() {
+        $is_auth = true;
+        return view('user.auth', compact('is_auth'));
+    }
+    
     public function login(Request $request) {
         
         $request->validate([
@@ -76,12 +78,13 @@ class UserController extends Controller
         ])) {
             return redirect()->route('home');
         }
-        return redirect()->back()->with('error', 'Incorrect login or password');
+        return redirect()->back()->with('error', 'Введено невiрний Email або пароль');
     }
     
     public function logout(Request $request) {
         Auth::logout();
-        return redirect()->route('login.create');
+        //return redirect()->route('login.create');
+        return redirect()->route('home');
     }
     
     public function settings() {
@@ -94,7 +97,6 @@ class UserController extends Controller
         $user = User::where('email','=', $googleUser->email)->first();
         if (!$user) {
             $user = User::create([
-                'name' => $googleUser->name,
                 'email' => $googleUser->email,
                 'password' => Hash::make(config('project.empty_password')),
             ]);
@@ -111,8 +113,7 @@ class UserController extends Controller
         $user = User::where('email','=', $appleUser->email)->first();
         if (!$user) {
             $user = User::create([
-                'name' => $googleUser->name,
-                'email' => $googleUser->email,
+                'email' => $appleUser->email,
                 'password' => Hash::make(config('project.empty_password')),
             ]);
         }

src/app/Http/Middleware/Authenticate.php

@@ -12,6 +12,6 @@ class Authenticate extends Middleware
      */
     protected function redirectTo(Request $request): ?string
     {
-        return $request->expectsJson() ? null : route('login'); // перенаправление для не зарегистрированного
+        return $request->expectsJson() ? null : route('login.auth'); // перенаправление для не зарегистрированного
     }
 }

src/composer.json

@@ -6,6 +6,7 @@
     "license": "MIT",
     "require": {
         "php": "^8.1",
+        "doctrine/dbal": "^3.6",
         "genealabs/laravel-sign-in-with-apple": "^0.7.0",
         "genealabs/laravel-socialiter": "^10.0",
         "guzzlehttp/guzzle": "^7.2",

src/database/migrations/2023_06_22_183848_delete_user_name.php

+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table -> dropColumn('name');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            //
+        });
+    }
+};

src/public/assets/css/common.css

@@ -6,23 +6,77 @@
     z-index: 9999;
     }
     
+.b-alerts .alert.m-hide
+    {
+    display: none;
+    }
+    
+
 .b-header-menu
     {
     text-align: right;
     }
 
-#navbar,
-#navbar ul,
-#navbar ul li.dropdown,
-#navbar ul li.dropdown span
+   
+/*
+ +++ Обрезание логина-почты
+*/  
+
+#navbar
+    {
+    max-width: 65%;
+    }
+  
+#navbar>ul
+    {
+    max-width: 100%;
+    }
+    
+#navbar ul li.dropdown
+    {
+    max-width: 100%;
+    }
+
+#navbar ul li.dropdown>a
     {
     overflow: hidden;
+    max-width: 100%;
     }
 
-    #navbar ul li.dropdown span
+#navbar ul li.dropdown span
     {
+    overflow: hidden;
     text-overflow: ellipsis;
     }
+/*
+ ---  Обрезание логина-почты
+*/
+
+.b-social.m-hide,
+.b-auth.m-hide,
+.b-email.m-hide,
+.b-reg.m-hide,
+
+.soc-link.m-hide,
+
+.modal-header .modal-title.auth.m-hide,
+.modal-header .modal-title.reg.m-hide
+    {
+    display: none;
+    }
+    
+    
+.modal-body
+    {
+    padding: 3rem;
+    }
+
+.b-social
+    {
+    margin: 10px;
+    }
+    
+    
 
 
 .b-auth-wrap
@@ -56,15 +110,3 @@
     border: none !important;
     }
     
-.b-email,
-.b-social
-    {
-    //transition: all 1s ease-out;
-    //animation: 3s linear 1s slidein;
-    }
-    
-.b-email.m-hide,
-.b-social.m-hide
-    {
-    display: none;
-    }
\ No newline at end of file

src/public/assets/js/login.js

 (function() {
     "use strict";
 
-    console.log('AAA login page');
 
     const select = (el, all = false) => {
     el = el.trim()
@@ -23,13 +22,27 @@
     }
     }
 
-    let email = select('.b-email');
-    let social = select('.b-social');
 
-    function ToggleAuthBlock()
+    let
+        social = select('.b-social'),
+        auth = select('.b-auth'),
+        email = select('.b-email'),
+        reg = select('.b-reg'),
+        authTitle = select('.modal-title.auth'),
+        regTitle = select('.modal-title.reg');
+        
+    function ToggleLoginBlock()
     {
         email.classList.toggle('m-hide');
+        reg.classList.toggle('m-hide');
+        authTitle.classList.toggle('m-hide');
+        regTitle.classList.toggle('m-hide');
+    }
+
+    function ToggleAuthBlock()
+    {
         social.classList.toggle('m-hide');
+        auth.classList.toggle('m-hide');
     }
     
     on('click', '.btn-email', function(e) {
@@ -37,13 +50,120 @@
         ToggleAuthBlock();
     });
 
-    on('click', '.b-email_back', function(e) {
+    on('click', '.soc-link', function(e) {
         e.preventDefault();
         ToggleAuthBlock();
+    });
+    
+    on('click', '.soc-link2', function(e) {
+        e.preventDefault();
+        ToggleAuthBlock();
+    });
+
+    on('click', '.auth-link', function(e) {
+        e.preventDefault();
+        ToggleLoginBlock();
+    });
+
+    on('click', '.reg-link', function(e) {
+        e.preventDefault();
+        ToggleLoginBlock();
+    });
+    
+
+})();
+
+
+(function() {
+
+    var constraintsAuth = {
+        email: {
+            presence: {message: "Email не повинен бути пустим"},
+            email: {message: "Перевiрте поштову адресу"}
+        },
+        password: {
+            presence: {message: "Пароль не повинен бути пустим"},
+        },
+    };
     
+    
+    
+    var constraintsReg = {
+        email: {
+            presence: {message: "Email не повинен бути пустим"},
+            email: {message: "Перевiрте поштову адресу"}
+        },
+        password: {
+            presence: {message: "Пароль не повинен бути пустим"},
+        },
+        'password_confirmation': {
+            presence: {message: "Повторiть пароль"},
+            equality: {
+                attribute: "password",
+                message: "Паролi не спiвпадають"
+            }
+        },
+    };
+
+    var alertForm = document.querySelector(".b-alerts .alert.form");
+    var alertAll = document.querySelectorAll(".b-alerts .alert");
+    
+    // клик извне, чтобы закрыть сообщение ошибок
+    document.addEventListener( 'click', (e) => {
+        const withinAlertAll = e.composedPath().includes(alertAll);
+            if (!withinAlertAll) {
+                //alertAll.classList.add('m-hide');
+                alertAll.forEach(function(item){
+                    item.classList.add('m-hide');
+                })
+            }
     });
     
     
+    var formAuth = document.querySelector("form#auth-form");
+    formAuth.addEventListener("submit", function(ev) {
+        ev.preventDefault();
+        handleFormSubmit(formAuth, constraintsAuth);
+    });
+    
+    
+    var formReg = document.querySelector("form#reg-form");
+    formReg.addEventListener("submit", function(ev) {
+        ev.preventDefault();
+        handleFormSubmit(formReg, constraintsReg);
+    });
+    
+    var formSet = document.querySelector("form#set-form");
+    if (formSet) {
+        formSet.addEventListener("submit", function(ev) {
+            ev.preventDefault();
+            handleFormSubmit(formSet, constraintsReg);
+        });
+    }
+    
+
+    function handleFormSubmit(form, constraints) {
+        var errors = validate(form, constraints, {fullMessages: false});
+        showErrors(errors || {});
+        if (!errors) {
+            form.submit();
+        }
+    }
+
+
+    function showErrors(errors) {
+        if (!Object.keys(errors).length) {
+            return false;
+        }
+        
+        var messageText = '<ul>';
+        for (const [key, value] of Object.entries(errors)) {
+            messageText += `<li>${value}</li>`;
+        }
+        messageText += '</ul>';
+        alertForm.innerHTML = messageText;
+        alertForm.classList.remove('m-hide');
+    }
 
       
-})()
\ No newline at end of file
+})();
\ No newline at end of file

src/public/assets/js/main.js

@@ -282,9 +282,11 @@
             const withinDropdown = e.composedPath().includes(navbarDropdown);
             const withinBoundaries = e.composedPath().includes(navbarDropdownUl);
                 if (withinDropdown && !withinBoundaries) {
+                    console.log('AAA 1');
                     e.preventDefault();
                     navbarDropdownUl.classList.toggle('visible');
                 } else if (!withinBoundaries) {
+                    console.log('AAA 2');
                     navbarDropdownUl.classList.remove('visible');
                 }
         });

src/public/assets/vendor/php-email-form/validate.js

@@ -23,7 +23,6 @@
       }
       thisForm.querySelector('.loading').classList.add('d-block');
       thisForm.querySelector('.error-message').classList.remove('d-block');
-      thisForm.querySelector('.sent-message').classList.remove('d-block');
 
       let formData = new FormData( thisForm );
 
@@ -65,7 +64,6 @@
     .then(data => {
       thisForm.querySelector('.loading').classList.remove('d-block');
       if (data.trim() == 'OK') {
-        thisForm.querySelector('.sent-message').classList.add('d-block');
         thisForm.reset(); 
       } else {
         throw new Error(data ? data : 'Form submission failed and no error message returned from: ' + action); 
@@ -77,8 +75,11 @@
   }
 
   function displayError(thisForm, error) {
+      
+      console.log('AAA error = ', error);
+      
     thisForm.querySelector('.loading').classList.remove('d-block');
-    thisForm.querySelector('.error-message').innerHTML = error;
+    thisForm.querySelector('.error-message').innerHTML = error.message;
     thisForm.querySelector('.error-message').classList.add('d-block');
   }
 

src/resources/views/layouts/alerts.blade.php

 <div class="b-alerts row justify-content-center">
     
+    <div class="alert form alert-danger col-4 m-hide">
+    </div>
+    
     @if(session('success'))
         <div class="alert alert-success col-4">
             {{ session('success') }}

src/resources/views/layouts/layout.blade.php

@@ -25,6 +25,9 @@
 
 <body>
     
+    <!-- ======= Modal ======= -->
+    @include('layouts.modal')
+
     <!-- ======= Header ======= -->
     <header id="header" class="fixed-top">
         <div class="container d-flex align-items-center justify-content-between">
@@ -34,10 +37,6 @@
             <nav id="navbar" class="navbar">
                 <ul>
                     @auth
-                        <?php /*?>
-                            $email = auth()->user()->email;
-                            $email_brief = (strlen($email) > 30) ? substr_replace($email, '...', 5, 25) : $email;
-                        <?php */ ?>
                         <li class="dropdown"><a href="#"><span class="fw-bold">{{ auth()->user()->email }}</span> <i class="bi bi-chevron-down"></i></a>
                             <ul>
                                 <li><a href="{{ url('settings') }}">Налаштування</a></li>
@@ -46,7 +45,9 @@
                         </li>
                     @endauth
                     @guest
-                        <li><a class="getstarted" href="{{ route('login.create') }}">Увiйти</a></li>
+                        <li>
+                            <a class="getstarted" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Увiйти</a>
+                        </li>
                     @endguest
                 </ul>
                 

src/resources/views/layouts/modal.blade.php

+<div class="modal fade" id="loginModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title auth">Авторизацiя</h5>
+                <h5 class="modal-title reg m-hide">Новий акаунт</h5>
+                @isset ($is_auth)
+                    <a class="btn-close" href="{{ route('home') }}" role="button"></a>
+                @else
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрити"></button>
+                @endisset
+            </div>
+            
+            <div class="modal-body">
+                
+                <div class="b-social text-center">
+                    <div class="row">
+                        <a class="btn btn-google" href="{{ route('login.google') }}" role="button"><img src="https://img.icons8.com/color/16/000000/google-logo.png"> Sign in with Google</a>
+                    </div>
+                    <br>
+                    <div class="row b-social_apple">
+                        @signInWithApple("white", true, "sign-in", 10)
+                    </div>
+                    <br>
+                    <div class="row">
+                        <a class="btn btn-email" href="#" role="button">Продовжити за допомогою e-mail</a>
+                    </div>
+                </div>
+                
+                <div class="b-auth m-hide">
+
+                    <div class="b-email contact text-center">
+                        <form method="post" action="{{ route('login') }}" class="php-email-form" id="auth-form">
+                            @csrf
+                            <div class="form-group">
+                                <input class="form-control" type="email" id="email_1" name="email" placeholder="Ваша електронна пошта" value="{{ old('email') }}">
+                                <div class="messages"></div>
+                            </div>
+                            <div class="form-group">
+                                <input class="form-control" type="password" id="password_1" name="password" placeholder="Пароль">
+                                <div class="messages"></div>
+                            </div>
+                            <div class="form-group d-flex justify-content-between align-items-center">
+                                <a class="soc-link" href="#">Назад</a>
+                                <a class="reg-link" href="#">Новий акаунт</a>
+                                <button type="submit" class="btn btn-primary">Увiйти</button>
+                            </div>
+                        </form>
+                    </div>
+                
+                    <div class="b-reg contact text-center m-hide">
+                        <form method="post" action="{{ route('register.store') }}" class="php-email-form" id="reg-form">
+                            @csrf
+                            <div class="form-group">
+                                <input class="form-control" type="email" id="email_2" name="email" placeholder="Ваша електронна пошта" value="{{ old('email') }}">
+                            </div>
+                            <div class="form-group">
+                                <input class="form-control" type="password" id="password_2" placeholder="Пароль" name="password">
+                            </div>
+                            <div class="form-group">
+                                <input class="form-control" type="password" id="password_confirmation" name="password_confirmation" placeholder="Підтвердіть пароль">
+                            </div>
+                            <div class="form-group d-flex justify-content-between align-items-center">
+                                <a class="soc-link2" href="#">Назад</a>
+                                <a class="auth-link" href="#">Вже є акаунт</a>
+                                <button type="submit">Зареєструватись</button>
+                            </div>
+                        </form>
+                    </div>
+                
+                </div>
+                    
+            </div>
+        </div>
+    </div>
+</div>
+

src/resources/views/layouts/scripts.blade.php

@@ -10,8 +10,11 @@
     <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
     <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
     <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
-    <script src="assets/vendor/php-email-form/validate.js"></script>
+    
+    <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
+    
     <script src="assets/js/main.js"></script>
+    <script src="assets/js/login.js"></script>
 
 @endif
   
\ No newline at end of file

src/resources/views/user/auth.blade.php

+@extends('layouts.layout')
+
+@section('title')Авторизацiя @endsection
+
+@section('page_scripts')
+    @if(!config('project.minificate_static'))
+        <script>
+            document.querySelector('#navbar .getstarted').click();
+        </script>
+    @endif
+@endsection

src/resources/views/user/login.blade.php

@@ -50,12 +50,12 @@
                             @csrf
 
                             <div class="form-group">
-                                <label for='email'>Email address</label>
+                                <label for='email'>Ваша електронна пошта</label>
                                 <input class="form-control" type="email" id="email" name="email" value="{{ old('email') }}">
                             </div>
 
                             <div class="form-group">
-                                <label for='password'>Password</label>
+                                <label for='password'>Пароль</label>
                                 <input class="form-control" type="password" id="password" name="password">
                             </div>
                             <br>

src/resources/views/user/settings.blade.php

@@ -5,31 +5,26 @@
 @section('content')
 
 <section>
-    <div class='container'>
+    <div class='container contact'>
 
         <h4>Налаштування</h4>
         
-        <form method="post" action="{{ route('settings.edit') }}">
+        <form method="post" action="{{ route('settings.edit') }}" class="php-email-form" id="set-form">
 
             @csrf
 
             <div class="form-group">
-                <label for='name'>Ваше имя</label>
-                <input class="form-control" type="text" id="name" name="name" value="{{ auth()->user()->name }}">
-            </div>
-
-            <div class="form-group">
-                <label for='email'>Email address</label>
+                <label for='email'>Ваша електронна пошта</label>
                 <input class="form-control" type="email" id="email" name="email" value="{{ auth()->user()->email }}">
             </div>
             
             <div class="form-group">
-                <label for='password'>Password</label>
+                <label for='password'>Пароль</label>
                 <input class="form-control" type="password" id="password" name="password">
             </div>
             
             <div class="form-group">
-                <label for='password_confirmation'>Confirm password</label>
+                <label for='password_confirmation'>Підтвердіть пароль</label>
                 <input class="form-control" type="password" id="password_confirmation" name="password_confirmation">
             </div>
             

src/routes/web.php

@@ -30,10 +30,10 @@ Route::group(['middleware' => 'guest'], function(){
     
     Route::get('/register', [UserController::class, 'create']) -> name('register.create');
     Route::post('/register', [UserController::class, 'store']) -> name('register.store');
-    Route::get('/login', [UserController::class, 'loginForm']) -> name('login.create');
+    Route::get('/login', [UserController::class, 'loginAuth']) -> name('login.auth');
+    //Route::get('/login', [UserController::class, 'loginForm']) -> name('login.create');
     Route::post('/login', [UserController::class, 'login']) -> name('login');
 
-
     //Auth Google
     Route::get('/login/google', function () {
         return Socialite::driver('google')->redirect();