wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化找回密码和注册登录

This commit is contained in:
pushuo 2022-07-07 17:42:27 +08:00
parent bbc6302359
commit ec6d90439b
8 changed files with 168 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
beike/Shop/Http/Controllers/Account/ForgottenController.php
View File

@ -44,7 +44,7 @@ class ForgottenController
*/
public function changePassword(ForgottenRequest $request)
{
AccountService::verifyAndChangePassword($request->get('code'), $request->get('account'), $request->get('password'));
AccountService::verifyAndChangePassword($request->get('code'), $request->get('email'), $request->get('password'));
return json_success('密码已修改');
}

3
beike/Shop/Services/AccountService.php
View File

@ -85,6 +85,9 @@ class AccountService
if ($type == 'email') {
$customer = CustomerRepo::findByEmail($account);
if (!$customer) {
throw new \Exception("账号不存在");
}
} elseif ($type == 'telephone') {
throw new \Exception("暂不支持手机号码找回密码");
} else {

6
public/build/beike/shop/default/css/app.css vendored
View File

@ -360,16 +360,16 @@ footer .footer-bottom {
font-weight: bold;
}
body.page-login .login-item-header {
body.page-login .login-item-header, body.page-forgotten .login-item-header {
background: #f8f9fa;
border-bottom: none;
padding: 1.2rem 1.5rem;
}
body.page-login .login-item-header h6 {
body.page-login .login-item-header h6, body.page-forgotten .login-item-header h6 {
font-weight: bold;
font-size: 1rem;
}
body.page-login .card {
body.page-login .card, body.page-forgotten .card {
border: none;
}

2
public/build/beike/shop/default/css/bootstrap.css vendored
View File

@ -18043,7 +18043,7 @@ textarea.form-control-lg {
border-bottom: 0 solid rgba(0, 0, 0, 0.125);
}
.card .card-header:first-child {
border-radius: 1rem 1rem 0 0;
border-radius: 0;
}
.card .card-header .card-title {
margin-bottom: 0;

2
resources/beike/shop/default/css/bootstrap/bootstrap.scss vendored
View File

@ -92,7 +92,7 @@ $card-border-width: 0;
border-bottom: 0 solid rgba(0,0,0,.125);
&:first-child {
border-radius: 1rem 1rem 0 0;
border-radius: 0;
}
.card-title {

2
resources/beike/shop/default/css/login.scss vendored
View File

@ -1,6 +1,6 @@
@charset "UTF-8";
body.page-login {
body.page-login, body.page-forgotten {
.login-item-header {
background: #f8f9fa;
border-bottom: none;

165
themes/default/account/forgotten.blade.php
View File

@ -1,42 +1,137 @@
@extends('layout.master')
@section('body-class', 'page-forgotten')
@push('header')
<script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script>
<script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script>
<link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.6/css.css') }}">
@endpush
@section('content')
<div class="container">
<h1>找回密码</h1>
<form action="{{ route('shop.register.store') }}" method="post">
@csrf
<div class="container" id="page-forgotten" v-cloak>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
{{-- <div class="hero-content pb-5 text-center"><h1 class="hero-heading">找回密码</h1></div> --}}
<div class="row my-5 justify-content-md-center">
<div class="col-lg-5 col-xxl-4">
<div class="card">
<el-form ref="form" :model="form" :rules="rules">
<div class="card-body p-0">
<h4 class="fw-bold">请根据提示找回您的密码</h4>
<p class="text-muted" v-if="!isCode">请输入邮箱地址获取验证码</p>
<p class="text-muted" v-else>请输入新密码</p>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="email">邮箱</span>
</div>
<input type="text" name="register[email]" class="form-control" value="{{ old('register.email') }}" placeholder="邮箱地址">
</div>
@error('register.email')
<x-admin::form.error :message="$message"/>
@enderror
<el-form-item label="邮箱" prop="email" v-if="!isCode">
<el-input v-model="form.email" placeholder="邮箱地址"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code" class="mb-3" v-if="isCode">
<el-input v-model="form.code" placeholder="密码"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" class="mb-3" v-if="isCode">
<el-input type="password" v-model="form.password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="password_confirmation" v-if="isCode">
<el-input type="password" v-model="form.password_confirmation" placeholder="确认密码"></el-input>
</el-form-item>
<div class="mt-5 mb-3">
<button type="button" @click="submitForm('form')" class="btn w-50 btn-dark">@{{ !isCode ? '发送验证码' : '提交' }}</button>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="password">密码</span>
</div>
<input type="password" name="register[password]" class="form-control" placeholder="密码">
</div>
@error('register.password')
<x-admin::form.error :message="$message"/>
@enderror
</div>
@if (session('error'))
<div class="alert alert-success">
{{ session('error') }}
</div>
@endif
<button type="submit" class="btn btn-primary btn-block mb-4">登录</button>
</form>
</el-form>
</div>
</div>
</div>
</div>
@endsection
@push('add-scripts')
<script>
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (value !== '') {
app.$refs.form.validateField('password_confirmation');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入确认密码'));
} else if (value !== app.form.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
let app = new Vue({
el: '#page-forgotten',
data: {
form: {
email: '',
code: '',
password: '',
password_confirmation: '',
},
isCode: false,
rules: {
email: [
{required: true, message: '请输入邮箱', trigger: 'blur'},
{type: 'email', message: '请输入正确邮箱地址', trigger: 'blur'},
],
code: [
{required: true, message: '请输入验证码', trigger: 'blur'}
],
password: [
{required: true, validator: validatePass, trigger: 'blur'}
],
password_confirmation: [
{required: true, validator: validatePass2, trigger: 'blur'}
]
},
},
beforeMount () {
},
methods: {
submitForm(form) {
let _data = this.form, url = '/forgotten/password'
if (!this.isCode) {
url = '/forgotten/send_code'
}
this.$refs[form].validate((valid) => {
if (!valid) {
// layer.msg('请检查表单是否填写正确', () => {})
return;
}
$http.post(url, this.form).then((res) => {
this.$message.success(res.message);
this.isCode = true
this.$refs[form].resetFields();
})
});
}
}
})
</script>
@endpush

33
themes/default/account/login.blade.php
View File

@ -36,11 +36,13 @@
<el-input v-model="loginForm.email" placeholder="邮箱地址"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-form-item label="密码" prop="password" class="mb-1">
<el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
</el-form-item>
<div class="mt-5 mb-3">
<a class="text-muted" href="{{ shop_route('forgotten.index') }}">Forgot Your Password?</a>
<div class="mt-4 mb-3">
<button type="button" @click="checkedBtnLogin('loginForm')" class="btn btn-outline-dark"><i class="bi bi-box-arrow-in-right"></i> 登录</button>
</div>
</div>
@ -87,7 +89,28 @@
@push('add-scripts')
<script>
new Vue({
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (value !== '') {
app.$refs.registerForm.validateField('password_confirmation');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入确认密码'));
} else if (value !== app.registerForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
let app = new Vue({
el: '#page-login',
data: {
@ -118,10 +141,10 @@
{type: 'email', message: '请输入正确邮箱地址', trigger: 'blur'},
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'}
{required: true, validator: validatePass, trigger: 'blur'}
],
password_confirmation: [
{required: true, message: '请输入密码', trigger: 'blur'}
{required: true, validator: validatePass2, trigger: 'blur'}
]
}
},