改进 注册或登录页面

resources/views/auth/login.blade.php

@@ -1,39 +1,44 @@
 @extends('layouts.app')
 
 @section('content')
+    <div class="d-flex justify-content-center align-items-center h-screen" style="height: 60vh">
+        <div class="text-center">
+            <span style="font-size: 10rem">
+                <i class="bi bi-person-circle" id="main-icon"></i>
 
-    <h2 id="form-title">注册/登录 {{ config('app.display_name') }}</h2>
+            </span>
+
+            <h2 id="form-title">注册 或 登录</h2>
+
+            <form id="main-form" method="POST" onsubmit="return canSubmit()">
+                @csrf
+
+                <div class="form-group">
+                    <input type="email" name="email" id="email" class="form-control mb-3 text-center" placeholder="邮箱"
+                           aria-label="邮箱" required autofocus>
+                </div>
+
+                <div id="suffix-form"></div>
+            </form>
+
+            <br/>
+
+            <a class="link" href="{{ route('password.request') }}">
+                {{ __('Forgot Your Password?') }}
+            </a>
 
-    <form id="main-form" method="POST" onsubmit="return canSubmit()">
-        @csrf
 
-        <div class="form-group">
-            <label for="email" class="text-left ml-0">邮箱</label>
-            <input type="email" name="email" id="email" class="form-control mb-3" required autofocus>
         </div>
+    </div>
 
-        <div id="suffix-form"></div>
-
-
-        {{--        <button class="btn btn-primary btn-block mt-2" type="submit">--}}
-        {{--            登录--}}
-        {{--        </button>--}}
-    </form>
-
-    <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
+                       class="form-control rounded-right text-center @error('password') is-invalid @enderror" required
-                       placeholder="密码">
+                       placeholder="密码" aria-label="密码">
                 @error('password')
                 <span class="invalid-feedback" role="alert">
                 <strong>{{ $message }}</strong>
@@ -51,14 +56,14 @@ class="form-control rounded-right" required autocomplete="new-password"
         </div>
 
         <div id="remember-form">
-            <div class="form-group mt-2">
+            {{--            <div class="form-group mt-2">--}}
-                <div class="form-check">
+            {{--                <div class="form-check">--}}
-                    <input class="form-check-input" type="checkbox" id="remember" checked>
+            {{--                    <input class="form-check-input" type="checkbox" id="remember" checked>--}}
-                    <label class="form-check-label" for="remember">
+            {{--                    <label class="form-check-label" for="remember">--}}
-                        记住登录
+            {{--                        记住登录--}}
-                    </label>
+            {{--                    </label>--}}
-                </div>
+            {{--                </div>--}}
-            </div>
+            {{--            </div>--}}
         </div>
 
         <small id="tip" class="d-block"></small>
@@ -79,6 +84,7 @@ class="text-decoration-underline">服务条款</a>
         const login = "{{ route('login') }}"
         const register = "{{ route('register') }}"
 
+        const mainIcon = document.getElementById('main-icon')
         const email = document.getElementById('email');
         const title = document.getElementById('form-title');
         const formSuffix = document.getElementById('suffix-form')
@@ -93,17 +99,19 @@ class="text-decoration-underline">服务条款</a>
 
         @error('password')
             title.innerText = "注册莱云"
-            formSuffix.appendChild(rememberForm)
+        formSuffix.appendChild(rememberForm)
+
+
         @enderror
 
-        @error('email')
+            @error('email')
             title.innerText = "密码错误"
-            email.value = "{{ old('email') }}"
+        email.value = "{{ old('email') }}"
-            formSuffix.appendChild(passwordInput)
+        formSuffix.appendChild(passwordInput)
-            formSuffix.appendChild(rememberForm)
+        formSuffix.appendChild(rememberForm)
-            formSuffix.appendChild(tos)
+        formSuffix.appendChild(tos)
-            formSuffix.appendChild(loginBtn)
+        formSuffix.appendChild(loginBtn)
-            loginBtn.innerText = '登录'
+        loginBtn.innerText = '登录'
         @enderror
 
         let canSubmit = function () {
@@ -115,6 +123,18 @@ class="text-decoration-underline">服务条款</a>
         email.onchange = function (ele) {
             const target = ele.target
 
+            if (email.value === '') {
+                title.innerText = "输入邮箱"
+
+                formSuffix.innerHTML = ''
+
+
+                mainIcon.classList.remove(...mainIcon.classList)
+                mainIcon.classList.add('bi', 'bi-person-circle')
+
+                return
+            }
+
             formSuffix.innerHTML = ''
             formSuffix.appendChild(passwordInput)
 
@@ -124,6 +144,9 @@ class="text-decoration-underline">服务条款</a>
                 .then(function (res) {
                     mainForm.action = login
 
+                    mainIcon.classList.remove(...mainIcon.classList)
+                    mainIcon.classList.add('bi', 'bi-person-check')
+
                     title.innerText = "欢迎, " + res.data.name
 
                     formSuffix.appendChild(passwordInput)
@@ -138,6 +161,10 @@ class="text-decoration-underline">服务条款</a>
                     mainForm.action = register
 
                     title.innerText = "注册莱云"
+
+                    mainIcon.classList.remove(...mainIcon.classList)
+                    mainIcon.classList.add('bi', 'bi-person-plus')
+
                     formSuffix.appendChild(passwordInput)
                     formSuffix.appendChild(tos)
                     formSuffix.appendChild(tip)