改进 注册登录

app/Helpers/Auth/AuthenticatesUsers.php

@@ -2,6 +2,7 @@
 
 namespace App\Helpers\Auth;
 
+use App\Models\User;
 use Illuminate\Contracts\Auth\StatefulGuard;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
@@ -23,6 +24,23 @@ public function showLoginForm(): View
         return view('auth.login');
     }
 
+    public function userIfExists(Request $request)
+    {
+        $request->validate([
+            'email' => 'required|email',
+        ]);
+
+        $user = User::where('email', $request->input('email'))->first();
+
+        if ($user) {
+            return $this->success([
+                'name' => $user->name,
+            ]);
+        }
+
+        return $this->notFound();
+    }
+
     /**
      * Handle a login request to the application.
      *

app/Http/Controllers/Web/Auth/RegisterController.php

@@ -6,6 +6,7 @@
 use App\Http\Controllers\Controller;
 use App\Models\User;
 use App\Providers\RouteServiceProvider;
+use Faker\Provider\zh_CN\Person;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Validator;
 
@@ -45,9 +46,9 @@ public function __construct()
     protected function validator(array $data): \Illuminate\Contracts\Validation\Validator
     {
         return Validator::make($data, [
-            'name' => ['required', 'string', 'max:255'],
+            'name' => ['nullable', 'string', 'max:255'],
             'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
-            'password' => ['required', 'string', 'min:8', 'confirmed'],
+            'password' => ['required', 'string', 'min:8'],
         ]);
     }
 
@@ -57,7 +58,7 @@ protected function validator(array $data): \Illuminate\Contracts\Validation\Vali
     protected function create(array $data): User
     {
         return (new User)->create([
-            'name' => $data['name'],
+            'name' => $data['name'] ?? '随机 - '.Person::firstNameMale(),
             'email' => $data['email'],
             'password' => Hash::make($data['password']),
         ]);

app/Http/Controllers/Web/AuthController.php

@@ -52,7 +52,7 @@ public function index(Request $request): View|RedirectResponse
             }
         }
 
-        return $request->user('web') ? view('index') : view('welcome');
+        return $request->user('web') ? view('index') : view('auth.login');
     }
 
     public function confirm_redirect(Request $request): View

app/Http/Middleware/RedirectIfAuthenticated.php

@@ -4,6 +4,7 @@
 
 use App\Providers\RouteServiceProvider;
 use Closure;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
@@ -14,10 +15,9 @@ class RedirectIfAuthenticated
     /**
      * Handle an incoming request.
      *
-     * @param Closure(Request): (Response|RedirectResponse) $next
      * @param  string|null  ...$guards
      */
-    public function handle(Request $request, Closure $next, ...$guards): Response|RedirectResponse
+    public function handle(Request $request, Closure $next, ...$guards): Response|RedirectResponse|JsonResponse
     {
         $guards = empty($guards) ? [null] : $guards;
 

resources/views/auth/login.blade.php

@@ -2,9 +2,9 @@
 
 @section('content')
 
-    <h2>欢迎使用 {{ config('app.display_name') }}</h2>
+    <h2 id="form-title">注册/登录 {{ config('app.display_name') }}</h2>
 
-    <form action="{{ route('login') }}" method="POST">
+    <form id="main-form" method="POST" onsubmit="return canSubmit()">
         @csrf
 
         <div class="form-group">
@@ -12,42 +12,145 @@
             <input type="email" name="email" id="email" class="form-control mb-3" required autofocus>
         </div>
 
-        <div class="form-group">
+        <div id="suffix-form"></div>
-            <label for="password">密码</label>
-            <input type="password" id="password" name="password"
-                   class="form-control rounded-right" required>
-        </div>
 
-        <div class="form-group mt-2">
+
-            <div class="form-check">
+        {{--        <button class="btn btn-primary btn-block mt-2" type="submit">--}}
-                <input class="form-check-input" type="checkbox" id="remember" checked>
+        {{--            登录--}}
-                <label class="form-check-label" for="remember">
+        {{--        </button>--}}
-                    记住登录
+    </form>
-                </label>
+
+    <br/>
+
+    <a class="link" href="{{ route('password.request') }}">
+        {{ __('Forgot Your Password?') }}
+    </a>
+
+    <div class="d-none">
+
+        <div id="password-input">
+            <div class="form-group mt-2">
+                <label for="password">密码</label>
+                <input type="password" id="password" name="password"
+                       class="form-control rounded-right @error('password') is-invalid @enderror" required
+                       placeholder="密码">
+                @error('password')
+                <span class="invalid-feedback" role="alert">
+                <strong>{{ $message }}</strong>
+            </span>
+                @enderror
             </div>
         </div>
 
-        <div class="mt-1">如果您继续，则代表您已经阅读并同意 <a
+
+        <div class="form-group mt-2" id="password-confirm-input">
+            <label for="password-confirm">确认密码</label>
+            <input type="password" id="password-confirm" name="password_confirmation"
+                   class="form-control rounded-right" required autocomplete="new-password"
+                   placeholder="再次输入您的密码">
+        </div>
+
+        <div id="remember-form">
+            <div class="form-group mt-2">
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" id="remember" checked>
+                    <label class="form-check-label" for="remember">
+                        记住登录
+                    </label>
+                </div>
+            </div>
+        </div>
+
+        <small id="tip" class="d-block"></small>
+
+        <div class="mt-1" id="tos">如果您继续，则代表您已经阅读并同意 <a
                 href="https://www.laecloud.com/tos/"
                 target="_blank"
                 class="text-decoration-underline">服务条款</a>
         </div>
 
-
+        <button class="btn btn-primary btn-block mt-2" type="submit" id="login-btn">
-        <button class="btn btn-primary btn-block mt-2" type="submit">
+            继续
-            登录
         </button>
+    </div>
 
 
-    </form>
+    <script>
+        const login = "{{ route('login') }}"
+        const register = "{{ route('register') }}"
 
-    <br/>
+        const email = document.getElementById('email');
+        const title = document.getElementById('form-title');
+        const formSuffix = document.getElementById('suffix-form')
+        const rememberForm = document.getElementById('remember-form')
+        const passwordInput = document.getElementById('password-input')
+        const passwordConfirmInput = document.getElementById('password-confirm-input')
+        const loginBtn = document.getElementById('login-btn')
+        const nameInput = document.getElementById('name')
+        const mainForm = document.getElementById('main-form')
+        const tos = document.getElementById('tos')
+        const tip = document.getElementById('tip')
+
+        @error('password')
+            title.innerText = "注册莱云"
+            formSuffix.appendChild(rememberForm)
+        @enderror
+
+        @error('email')
+            title.innerText = "密码错误"
+            email.value = "{{ old('email') }}"
+            formSuffix.appendChild(passwordInput)
+            formSuffix.appendChild(rememberForm)
+            formSuffix.appendChild(tos)
+            formSuffix.appendChild(loginBtn)
+            loginBtn.innerText = '登录'
+        @enderror
+
+        let canSubmit = function () {
+            return (email.value !== '' && passwordInput.value !== '')
+        }
+
+        const validateUrl = "{{ route('login.exists-if-user') }}"
+
+        email.onchange = function (ele) {
+            const target = ele.target
+
+            formSuffix.innerHTML = ''
+            formSuffix.appendChild(passwordInput)
+
+            axios.post(validateUrl, {
+                email: target.value
+            })
+                .then(function (res) {
+                    mainForm.action = login
+
+                    title.innerText = "欢迎, " + res.data.name
+
+                    formSuffix.appendChild(passwordInput)
+                    formSuffix.appendChild(rememberForm)
+                    formSuffix.appendChild(tos)
+                    formSuffix.appendChild(loginBtn)
+                    loginBtn.innerText = '登录'
+
+
+                })
+                .catch(function () {
+                    mainForm.action = register
+
+                    title.innerText = "注册莱云"
+                    formSuffix.appendChild(passwordInput)
+                    formSuffix.appendChild(tos)
+                    formSuffix.appendChild(tip)
+
+                    formSuffix.appendChild(loginBtn)
+
+                    tip.innerText = '当您注册后，我们将为您分配随机用户名。'
+
+                    loginBtn.innerText = '注册'
+                });
+        }
+
+
+    </script>
 
-    <a class="link" href="{{ route('register') }}">
-        {{ __('Register') }}
-    </a>
-    &nbsp;
-    <a class="link" href="{{ route('password.request') }}">
-        {{ __('Forgot Your Password?') }}
-    </a>
 @endsection

routes/web.php

@@ -21,6 +21,7 @@
     Route::get('login', [LoginController::class, 'showLoginForm'])->name('login');
     Route::post('login', [LoginController::class, 'login']);
     Route::post('logout', [LoginController::class, 'logout'])->name('logout');
+    Route::post('exists', [LoginController::class, 'userIfExists'])->name('login.exists-if-user');
 
     Route::get('register', [RegisterController::class, 'showRegistrationForm'])->name('register');
     Route::post('register', [RegisterController::class, 'register']);