ivampiresp/Lae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

改进 注册或登录页面

Browse Source
This commit is contained in:
iVampireSP.com 2023-02-28 20:13:10 +08:00
parent 38c1b41c3b
commit b3ab22b221
No known key found for this signature in database
GPG Key ID: 2F7B001CA27A8132
1 changed files with 65 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
resources/views/auth/login.blade.php
View File

@ -1,23 +1,24 @@
@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">
<label for="email" class="text-left ml-0">邮箱</label>
<input type="email" name="email" id="email" class="form-control mb-3" required autofocus>
<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>
{{-- <button class="btn btn-primary btn-block mt-2" type="submit">--}}
{{-- 登录--}}
{{-- </button>--}}
</form>
<br/>
@ -26,14 +27,18 @@
{{ __('Forgot Your Password?') }}
</a>
</div>
</div>
<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="密码">
class="form-control rounded-right text-center @error('password') is-invalid @enderror" required
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-check">
<input class="form-check-input" type="checkbox" id="remember" checked>
<label class="form-check-label" for="remember">
记住登录
</label>
</div>
</div>
{{-- <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>
@ -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')
@ -94,6 +100,8 @@ class="text-decoration-underline">服务条款</a>
@error('password')
title.innerText = "注册莱云"
formSuffix.appendChild(rememberForm)
@enderror
@error('email')
@ -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)