493 lines
22 KiB
PHP
493 lines
22 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
|
|
<!-- Content -->
|
|
<div class="position-relative">
|
|
<div class="authentication-wrapper authentication-basic container-p-y p-4 p-sm-0">
|
|
<div class="authentication-inner py-6">
|
|
|
|
<!-- Login -->
|
|
<div class="card p-md-7 p-1">
|
|
<!-- Logo -->
|
|
<div class="app-brand justify-content-center mt-5">
|
|
<a href="#" class="app-brand-link gap-2">
|
|
<span class="app-brand-logo demo"><span>
|
|
<img src="{{ asset('assets/img/logo/cafeg-logo.png') }}" width="50px" height="50px"
|
|
alt="{{ asset('img/logo/cafeg-logo.png') }}"> </img>
|
|
|
|
</span>
|
|
</span>
|
|
<span class="app-brand-text demo text-heading fw-semibold">
|
|
<img src="{{ asset('assets/img/logo/cafeg-logo-h.png') }}" width="120px"
|
|
height="50px" alt="{{ asset('img/logo/cafeg-logo.png') }}"> </img>
|
|
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<!-- /Logo -->
|
|
@php
|
|
if (empty($data)) {
|
|
$data = Auth::guard('member')->user();
|
|
unset($data['password']);
|
|
}
|
|
@endphp
|
|
<div class="card-body mt-1">
|
|
<h4 class="mb-1">卡菲姬個人資料</h4>
|
|
<p class="mb-5">Hi, <span class="text-ifno"> {{ $data->name }} 用戶 </span> 歡迎你 ! ,請花幾分鐘完善資料</p>
|
|
<div class="card" id="editUser">
|
|
<div class="content">
|
|
<div class="body p-0">
|
|
<div class="text-center mb-6">
|
|
<h4 class="mb-2">編輯您的資訊</h4>
|
|
<p class="mb-6">更新用戶詳細資訊</p>
|
|
</div>
|
|
<form id="editUserForm" class="row g-5">
|
|
<!-- 暱稱 -->
|
|
<div class="col-12">
|
|
<div class="form-floating form-floating-outline">
|
|
<input readonly type="text" id="modalEditUserFirstName"
|
|
name="modalEditUserFirstName" class="form-control"
|
|
value="{{ $data->name }}" placeholder="暱稱" aria-label="暱稱" />
|
|
<label for="modalEditUserFirstName">暱稱 </label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="col-12">
|
|
<div class="form-floating form-floating-outline">
|
|
<input type="email" id="formValidationEmail" class="form-control"
|
|
placeholder="john.doe@example.com" aria-label="Email" required
|
|
value="{{ $data->email ?? '' }}" @if(isset($data->email)) readonly @endif />
|
|
<label for="formValidationEmail">Email</label>
|
|
<div class="invalid-feedback">請輸入有效的 Email</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 密碼 -->
|
|
<div class="col-12">
|
|
<div class="form-password-toggle">
|
|
<div class="input-group input-group-merge">
|
|
<div class="form-floating form-floating-outline">
|
|
<input type="password" id="basic-default-password"
|
|
class="form-control" placeholder="密碼" aria-label="密碼"
|
|
value="" />
|
|
<label for="basic-default-password">密碼</label>
|
|
<div class="invalid-feedback">請輸入有效密碼</div>
|
|
|
|
</div>
|
|
<span class="input-group-text cursor-pointer"
|
|
id="basic-default-password3">
|
|
<i class="ri-eye-off-line"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 確認密碼 -->
|
|
<div class="col-12">
|
|
<div class="form-password-toggle">
|
|
<div class="input-group input-group-merge">
|
|
<div class="form-floating form-floating-outline">
|
|
<input type="password" id="formValidationConfirmPass"
|
|
name="formValidationConfirmPass" class="form-control"
|
|
placeholder="確認密碼" aria-label="確認密碼" value="" />
|
|
<label for="formValidationConfirmPass">確認密碼</label>
|
|
<div class="invalid-feedback">密碼與確認密碼不相符</div>
|
|
|
|
</div>
|
|
<span class="input-group-text cursor-pointer"
|
|
id="multicol-confirm-password2">
|
|
<i class="ri-eye-off-line"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 電話 -->
|
|
<div class="col-12">
|
|
<div class="input-group input-group-merge">
|
|
|
|
<div class="form-floating form-floating-outline">
|
|
<input type="text" id="modalEditUserPhone" name="modalEditUserPhone"
|
|
class="form-control phone-number-mask" value="{{ $data->phone }}"
|
|
placeholder="0920111222" aria-label="電話" />
|
|
<label for="modalEditUserPhone">電話</label>
|
|
<div class="invalid-feedback">請輸入有效電話</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 按鈕 -->
|
|
<div
|
|
class="col-12 text-center d-flex flex-wrap justify-content-center gap-4 row-gap-4">
|
|
<button type="submit" class="btn btn-primary">送出</button>
|
|
<button id='cancel' type="button" class="btn btn-outline-secondary"
|
|
data-bs-dismiss="modal" aria-label="Close">
|
|
取消
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/ Content -->
|
|
|
|
<!--/ Layout Content -->
|
|
|
|
|
|
{{-- <div class="buy-now">
|
|
<a href="#" target="" class="btn btn-danger btn-buy-now">Buy Now</a>
|
|
</div> --}}
|
|
|
|
|
|
<!-- Include Scripts -->
|
|
<!-- $isFront is used to append the front layout scripts only on the front layout otherwise the variable will be blank -->
|
|
<!-- BEGIN: Vendor JS-->
|
|
@section('scripts')
|
|
<!-- Core JS -->
|
|
|
|
|
|
<!-- endbuild -->
|
|
|
|
<!-- Vendors JS -->
|
|
<script src="{{ asset('assets') }}/vendor/libs/select2/select2.js"></script>
|
|
<script src="{{ asset('assets') }}/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
|
|
<script src="{{ asset('assets') }}/vendor/libs/moment/moment.js"></script>
|
|
<script src="{{ asset('assets') }}/vendor/libs/flatpickr/flatpickr.js"></script>
|
|
<script src="{{ asset('assets') }}/vendor/libs/tagify/tagify.js"></script>
|
|
<script src="{{ asset('assets') }}/vendor/libs/@form-validation/popular.js"></script>
|
|
<script src="{{ asset('assets') }}/vendor/libs/@form-validation/bootstrap5.js"></script>
|
|
<script src="{{ asset('assets') }}/vendor/libs/@form-validation/auto-focus.js"></script>
|
|
|
|
<!-- Main JS -->
|
|
|
|
|
|
|
|
|
|
<!-- Page JS -->
|
|
<script src="../../assets/js/form-validation.js"></script>
|
|
|
|
|
|
|
|
</body>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
$("#formValidationEmail").on('blur', function() {
|
|
var email = $(this).val(); // 獲取電子郵件輸入框的值
|
|
|
|
// 簡單的電子郵件格式驗證（可選）
|
|
if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: '格式錯誤',
|
|
text: '請輸入有效的電子郵件地址！'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 發送 AJAX 請求到伺服器進行進一步驗證
|
|
$.ajax({
|
|
url: "{{ route('member.validemail') }}", // 替換成你的 API 路徑
|
|
type: 'get', // 或 'GET'，根據你的需求
|
|
data: {
|
|
email: email
|
|
},
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
|
|
'content') // 如果使用 Laravel CSRF 保護
|
|
},
|
|
success: function(response) {
|
|
// 如果電子郵件已被註冊
|
|
if (!response.valid) {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: '電子郵件已被註冊',
|
|
text: '該電子郵件已存在，請選擇下一步操作。',
|
|
showCancelButton: true,
|
|
confirmButtonText: '驗證電子郵件',
|
|
cancelButtonText: '我知道了，換一個',
|
|
reverseButtons: true // 按鈕排列反向
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// 使用者選擇驗證電子郵件
|
|
Swal.fire({
|
|
icon: 'info',
|
|
title: '驗證發送中',
|
|
text: '已向該電子郵件發送驗證信，請檢查郵箱。'
|
|
});
|
|
// 可在此處調用發送驗證郵件的函式
|
|
sendVerificationEmail(email);
|
|
} else if (result.dismiss === Swal.DismissReason
|
|
.cancel) {
|
|
// 使用者選擇換一個電子郵件
|
|
$('#formValidationEmail').val(''); // 清空輸入框
|
|
}
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: '電子郵件可用',
|
|
text: '您可以繼續使用此電子郵件。'
|
|
});
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
// 錯誤處理
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: '伺服器錯誤',
|
|
text: '驗證失敗，請稍後再試！'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
// 發送驗證郵件的函式
|
|
function sendVerificationEmail(email) {
|
|
console.log('email:', email);
|
|
$.ajax({
|
|
url: "{{ route('member.sendemail') }}", // 替換為發送驗證郵件的 API
|
|
type: 'POST',
|
|
data: {
|
|
email: email
|
|
},
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
},
|
|
success: function(Response) {
|
|
console.log('Response:', Response);
|
|
|
|
if (Response.status == 'success') {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: '驗證信已發送',
|
|
text: '請檢查您的電子郵件以完成驗證。'
|
|
});
|
|
}
|
|
|
|
},
|
|
error: function() {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: '驗證信發送失敗',
|
|
text: '請稍後再試！'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
$('#editUserForm').on('submit', function(e) {
|
|
e.preventDefault(); // 防止表單提交
|
|
|
|
let valid = true;
|
|
|
|
// Email 驗證
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
const emailInput = $('#formValidationEmail');
|
|
if (!emailRegex.test(emailInput.val())) {
|
|
valid = false;
|
|
emailInput.addClass('is-invalid');
|
|
} else {
|
|
emailInput.removeClass('is-invalid');
|
|
}
|
|
|
|
// 密碼長度驗證
|
|
const passwordInput = $('#basic-default-password');
|
|
//if (passwordInput.val().length < 6) {
|
|
// valid = false;
|
|
//passwordInput.addClass('is-invalid');
|
|
//} else {
|
|
// passwordInput.removeClass('is-invalid');
|
|
//}
|
|
|
|
// 確認密碼驗證
|
|
const confirmPasswordInput = $('#formValidationConfirmPass');
|
|
if (passwordInput.val() !== confirmPasswordInput.val()) {
|
|
valid = false;
|
|
confirmPasswordInput.addClass('is-invalid');
|
|
} else {
|
|
confirmPasswordInput.removeClass('is-invalid');
|
|
}
|
|
|
|
// 手機號碼驗證
|
|
const phoneRegex = /^09\d{8}$/;
|
|
const phoneInput = $('#modalEditUserPhone');
|
|
if (!phoneRegex.test(phoneInput.val())) {
|
|
valid = false;
|
|
phoneInput.addClass('is-invalid');
|
|
} else {
|
|
phoneInput.removeClass('is-invalid');
|
|
}
|
|
|
|
// 若通過所有驗證，發送 AJAX 請求
|
|
if (valid) {
|
|
const formData = {
|
|
email: emailInput.val(),
|
|
password: passwordInput.val(),
|
|
phone: phoneInput.val(),
|
|
};
|
|
|
|
$.ajax({
|
|
url: "{{ route('member.profile.update') }}",
|
|
type: 'put',
|
|
data: formData,
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
},
|
|
success: function(response) {
|
|
Swal.fire({
|
|
title: '成功',
|
|
text: "{{ session('success') }}",
|
|
icon: 'success',
|
|
confirmButtonText: '确定'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// 跳轉到 member.index 路由
|
|
window.location.href =
|
|
"{{ route('member.index') }}";
|
|
}
|
|
});
|
|
|
|
|
|
},
|
|
error: function(error) {
|
|
Swal.fire({
|
|
title: '失敗',
|
|
text: "更新失敗",
|
|
icon: 'error',
|
|
confirmButtonText: '确定'
|
|
});
|
|
},
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#cancel").on('click', function() {
|
|
let valid = true;
|
|
|
|
// Email 驗證
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
const emailInput = $('#formValidationEmail');
|
|
if (!emailRegex.test(emailInput.val())) {
|
|
valid = false;
|
|
emailInput.addClass('is-invalid');
|
|
} else {
|
|
emailInput.removeClass('is-invalid');
|
|
}
|
|
if (valid == true) {
|
|
window.location.href = "{{ route('member.index') }}";
|
|
}
|
|
|
|
});
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<link rel="module" href="{{ asset('assets') }}/vendor/libs/@form-validation/popular.js" />
|
|
|
|
<script>
|
|
$("#cancel").on('click', function() {
|
|
|
|
window.location.href = "{{ route('member.index') }}";
|
|
});
|
|
$(document).ready(function() {
|
|
// 監聽表單提交事件
|
|
$('#editUserForm').on('submit', function(e) {
|
|
e.preventDefault(); // 阻止默認的表單提交行為
|
|
|
|
// 獲取表單數據
|
|
let email = $('#formValidationEmail').val();
|
|
let password = $('#basic-default-password').val();
|
|
let confirmPassword = $('#formValidationConfirmPass').val();
|
|
let phone = $('#modalEditUserPhone').val();
|
|
|
|
// 表單驗證
|
|
let valid = true;
|
|
|
|
// 驗證 Email
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(email)) {
|
|
valid = false;
|
|
$('#formValidationEmail').addClass('is-invalid');
|
|
} else {
|
|
$('#formValidationEmail').removeClass('is-invalid');
|
|
}
|
|
|
|
// 驗證密碼與確認密碼是否相符
|
|
if (password !== confirmPassword) {
|
|
valid = false;
|
|
$('#formValidationConfirmPass').addClass('is-invalid');
|
|
} else {
|
|
$('#formValidationConfirmPass').removeClass('is-invalid');
|
|
}
|
|
|
|
// 驗證手機號碼格式
|
|
const phoneRegex = /^09\d{8}$/;
|
|
if (!phoneRegex.test(phone)) {
|
|
valid = false;
|
|
$('#modalEditUserPhone').addClass('is-invalid');
|
|
} else {
|
|
$('#modalEditUserPhone').removeClass('is-invalid');
|
|
}
|
|
|
|
// 若驗證通過，發送 AJAX 請求
|
|
if (valid) {
|
|
// 打包數據
|
|
let formData = {
|
|
email: email,
|
|
password: password,
|
|
phone: phone
|
|
};
|
|
|
|
$.ajax({
|
|
url: "{{ route('member.profile.update') }}", // 替換為後端處理路由
|
|
type: 'PUT', // 使用 HTTP PUT 方法
|
|
data: formData,
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 驗證
|
|
},
|
|
success: function(response) {
|
|
// 成功處理邏輯
|
|
Swal.fire({
|
|
title: '更新成功',
|
|
text: response.message || '您的個人資訊已成功更新！',
|
|
icon: 'success',
|
|
confirmButtonText: '確定'
|
|
}).then(() => {
|
|
// 跳轉至其他頁面
|
|
window.location.href = "{{ route('member.index') }}";
|
|
});
|
|
},
|
|
error: function(xhr, status, error) {
|
|
// 錯誤處理邏輯
|
|
Swal.fire({
|
|
title: '更新失敗',
|
|
text: xhr.responseJSON.message || '請稍後重試！',
|
|
icon: 'error',
|
|
confirmButtonText: '確定'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
@endsection
|
|
@endsection
|