424 lines
18 KiB
PHP
424 lines
18 KiB
PHP
<!DOCTYPE html>
|
||
|
||
|
||
|
||
<html lang="en" class="dark-style layout-wide dark customizer-hide" dir="ltr" data-theme="theme-bordered" data-assets-path="{{ asset('assets') }}/" data-template="vertical-menu-template-bordered" data-style="light">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
||
|
||
<title>卡菲姬APP註冊</title>
|
||
<meta name="description" content="卡菲姬 cafeg 是一個自助咖啡機 " />
|
||
<meta name="keywords" content="smart-cafe-g smart-cafe smart-coffee">
|
||
<!-- laravel CRUD token -->
|
||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||
<!-- Canonical SEO -->
|
||
<!-- Favicon -->
|
||
|
||
<link rel="icon" type="image/x-icon" href="../../demo/assets/img/favicon/favicon.ico" />
|
||
|
||
|
||
<!-- ? PROD Only: Google Tag Manager (Default ThemeSelection: GTM-5DDHKGP, PixInvent: GTM-5J3LMKC) -->
|
||
<script>
|
||
(function(w, d, s, l, i) {
|
||
w[l] = w[l] || [];
|
||
w[l].push({
|
||
'gtm.start': new Date().getTime()
|
||
, event: 'gtm.js'
|
||
});
|
||
var f = d.getElementsByTagName(s)[0]
|
||
, j = d.createElement(s)
|
||
, dl = l != 'dataLayer' ? '&l=' + l : '';
|
||
j.async = true;
|
||
j.src =
|
||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
||
f.parentNode.insertBefore(j, f);
|
||
})(window, document, 'script', 'dataLayer', 'GTM-5J3LMKC');
|
||
|
||
</script>
|
||
<!-- End Google Tag Manager -->
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/x-icon" href="{{ asset('assets') }}/img/favicon/favicon.ico" />
|
||
|
||
<!-- Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- Icons -->
|
||
<link rel="stylesheet" href="{{ asset('assets') }}/vendor/fonts/remixicon/remixicon.css" />
|
||
<link rel="stylesheet" href="{{ asset('assets') }}/vendor/fonts/flag-icons.css" />
|
||
|
||
<!-- Menu waves for no-customizer fix -->
|
||
<link rel="stylesheet" href="{{ asset('assets') }}/vendor/libs/node-waves/node-waves.css" />
|
||
|
||
<!-- Core CSS -->
|
||
<link rel="stylesheet" href="{{ asset('assets') }}/vendor/css/rtl/core.css" class="template-customizer-core-css" />
|
||
<link rel="stylesheet" href="{{ asset('assets') }}/vendor/css/rtl/theme-bordered.css" class="template-customizer-theme-css" />
|
||
<link rel="stylesheet" href="{{ asset('assets') }}/css/demo.css" />
|
||
|
||
<!-- Vendors CSS -->
|
||
<link rel="stylesheet" href="{{ asset('assets') }}/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||
<link rel="stylesheet" href="{{ asset('assets') }}/vendor/libs/typeahead-js/typeahead.css" />
|
||
<!-- Vendor -->
|
||
<link rel="stylesheet" href="{{ asset('assets') }}/vendor/libs/@form-validation/form-validation.css" />
|
||
|
||
<!-- Page CSS -->
|
||
<!-- Page -->
|
||
<link rel="stylesheet" href="{{ asset('assets') }}/vendor/css/pages/page-auth.css">
|
||
|
||
<!-- Helpers -->
|
||
<script src="{{ asset('assets') }}/vendor/js/helpers.js"></script>
|
||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
|
||
<script src="{{ asset('assets') }}/vendor/js/template-customizer.js"></script>
|
||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||
<script src="{{ asset('assets') }}/js/config.js"></script>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
|
||
<!-- ?PROD Only: Google Tag Manager (noscript) (Default ThemeSelection: GTM-5DDHKGP, PixInvent: GTM-5J3LMKC) -->
|
||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5J3LMKC" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>
|
||
<!-- End Google Tag Manager (noscript) -->
|
||
|
||
<!-- 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">
|
||
|
||
<!-- Register Card -->
|
||
<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 -->
|
||
<div class="card-body mt-1">
|
||
<h4 class="mb-1">由此註冊卡菲姬 APP 🚀</h4>
|
||
<p class="mb-5">您好 ！客戶 請花幾分鐘註冊</p>
|
||
|
||
<form id="formAuthentication" class="mb-5">
|
||
@csrf
|
||
<div class="form-floating form-floating-outline mb-5">
|
||
<input type="text" class="form-control" id="username" name="name" placeholder="輸入你的稱呼" required>
|
||
<label for="username">稱 呼</label>
|
||
<div class="invalid-feedback">請輸入稱呼。</div>
|
||
</div>
|
||
<div class="form-floating form-floating-outline mb-5">
|
||
<input type="email" class="form-control" id="email" name="email" placeholder="輸入你的帳號" required>
|
||
<label for="email">Email（帳號）</label>
|
||
<div class="invalid-feedback" id = "checkemail">請輸入有效的 Email 地址。</div>
|
||
</div>
|
||
<div class="mb-5 form-password-toggle">
|
||
<div class="input-group input-group-merge">
|
||
<div class="form-floating form-floating-outline">
|
||
<input type="password" id="password" class="form-control" name="password" placeholder="輸入密碼" required minlength="6">
|
||
<label for="password">密碼</label>
|
||
<div class="invalid-feedback">請輸入至少 6 個字符的密碼。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-floating form-floating-outline mb-5">
|
||
<input type="text" class="form-control" id="phone" name="phone" placeholder="輸入您的手機號" required pattern="^[0-9]{10}$">
|
||
<label for="phone">手機號碼</label>
|
||
<div class="invalid-feedback" id="checkphone">請輸入有效的 10 位手機號碼。</div>
|
||
</div>
|
||
<div class="mb-5">
|
||
<div class="form-check mt-2">
|
||
<input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" required>
|
||
<label class="form-check-label" for="terms-conditions">
|
||
我同意
|
||
<a href="javascript:void(0);">隱私權政策和條款</a>
|
||
</label>
|
||
<div class="invalid-feedback">請同意條款。</div>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary d-grid w-100">
|
||
註冊
|
||
</button>
|
||
</form>
|
||
|
||
|
||
<p class="text-center">
|
||
<span>已經有帳號?</span>
|
||
<a href="{{ route('login') }}" class="text-body">
|
||
<span>由此登入</span>
|
||
</a>
|
||
</p>
|
||
|
||
<div class="divider my-5">
|
||
<div class="divider-text">or</div>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-center gap-2">
|
||
<a href="{{ route('front.login.line') }}" class="btn btn-icon rounded-circle btn-text-facebook">
|
||
<i class="tf-icons ri-line-fill"></i>
|
||
</a>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Register Card -->
|
||
<img alt="mask" src="{{ asset('assets') }}/img/illustrations/auth-basic-register-mask-light.png" class="authentication-image d-none d-lg-block" data-app-light-img="illustrations/auth-basic-register-mask-light.png" data-app-dark-img="illustrations/auth-basic-register-mask-dark.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- / Content -->
|
||
|
||
{{--
|
||
<div class="buy-now">
|
||
<a href="https://1.envato.market/materialize_admin" target="_blank" class="btn btn-danger btn-buy-now">Buy Now</a>
|
||
</div>
|
||
--}}
|
||
|
||
|
||
|
||
<!-- Core JS -->
|
||
<!-- build:js assets/vendor/js/core.js -->
|
||
<script src="{{ asset('assets') }}/vendor/libs/jquery/jquery.js"></script>
|
||
<script src="{{ asset('assets') }}/vendor/libs/popper/popper.js"></script>
|
||
<script src="{{ asset('assets') }}/vendor/js/bootstrap.js"></script>
|
||
<script src="{{ asset('assets') }}/vendor/libs/node-waves/node-waves.js"></script>
|
||
<script src="{{ asset('assets') }}/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||
<script src="{{ asset('assets') }}/vendor/libs/hammer/hammer.js"></script>
|
||
<script src="{{ asset('assets') }}/vendor/libs/i18n/i18n.js"></script>
|
||
<script src="{{ asset('assets') }}/vendor/libs/typeahead-js/typeahead.js"></script>
|
||
<script src="{{ asset('assets') }}/vendor/js/menu.js"></script>
|
||
|
||
<!-- endbuild -->
|
||
|
||
<!-- Vendors JS -->
|
||
<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 -->
|
||
<script src="{{ asset('assets') }}/js/main.js"></script>
|
||
|
||
|
||
<!-- Page JS -->
|
||
|
||
</body>
|
||
|
||
</html>
|
||
|
||
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||
|
||
<!-- beautify ignore:end -->
|
||
|
||
|
||
<script>
|
||
$(document).ready(function() {
|
||
// 驗證欄位的函數
|
||
function validateField(field) {
|
||
const id = field.attr('id');
|
||
const value = field.val().trim();
|
||
let isValid = true;
|
||
let errorMsg = '';
|
||
|
||
// 根據欄位 ID 驗證
|
||
switch (id) {
|
||
case 'username':
|
||
if (!value) {
|
||
isValid = false;
|
||
errorMsg = '請輸入稱呼。';
|
||
}
|
||
break;
|
||
case 'email':
|
||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
if (!emailPattern.test(value)) {
|
||
isValid = false;
|
||
errorMsg = '請輸入有效的 Email 地址。';
|
||
}
|
||
break;
|
||
case 'password':
|
||
if (value.length < 6) {
|
||
isValid = false;
|
||
errorMsg = '密碼至少需要 6 個字符。';
|
||
}
|
||
break;
|
||
case 'phone':
|
||
const phonePattern = /^[0-9]{10}$/;
|
||
if (!phonePattern.test(value)) {
|
||
isValid = false;
|
||
errorMsg = '請輸入有效的 10 位手機號碼。';
|
||
}
|
||
break;
|
||
}
|
||
|
||
// 顯示或隱藏錯誤訊息
|
||
if (isValid) {
|
||
field.removeClass('is-invalid');
|
||
field.next('.invalid-feedback').hide();
|
||
} else {
|
||
field.addClass('is-invalid');
|
||
field.next('.invalid-feedback').text(errorMsg).show();
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
|
||
// 手機號碼驗證，包含資料庫檢查
|
||
function validatePhoneField(field) {
|
||
const value = field.val().trim();
|
||
const phonePattern = /^[0-9]{10}$/;
|
||
|
||
// 驗證格式
|
||
if (!phonePattern.test(value)) {
|
||
field.addClass('is-invalid');
|
||
$("#checkphone").text('請輸入有效的 10 位手機號碼。').show();
|
||
return Promise.resolve(false);
|
||
}
|
||
|
||
// 檢查手機號是否已被註冊
|
||
return new Promise((resolve) => {
|
||
$.ajax({
|
||
url: "{{ route('member.checkphone') }}",
|
||
method: 'GET',
|
||
data: {
|
||
phone: value
|
||
},
|
||
success: function(response) {
|
||
if (response.status === 'error') {
|
||
field.addClass('is-invalid');
|
||
$("#checkphone").text(response.msg).show(); // 顯示伺服器返回的錯誤訊息
|
||
resolve(false);
|
||
} else {
|
||
field.removeClass('is-invalid');
|
||
$("#checkphone").hide(); // 隱藏錯誤訊息
|
||
resolve(true);
|
||
}
|
||
},
|
||
error: function() {
|
||
field.addClass('is-invalid');
|
||
$("#checkphone").text('檢查手機號時發生錯誤，請稍後再試。').show();
|
||
resolve(false);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
function validateEmailField(field) {
|
||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
const value = field.val().trim();
|
||
|
||
// 驗證格式
|
||
if (!emailPattern.test(value)) {
|
||
field.addClass('is-invalid');
|
||
$("#checkphone").text('請輸入有效的 10 位手機號碼。').show();
|
||
return Promise.resolve(false);
|
||
}
|
||
|
||
// 檢查手機號是否已被註冊
|
||
return new Promise((resolve) => {
|
||
$.ajax({
|
||
url: "{{ route('member.checkemail') }}",
|
||
method: 'GET',
|
||
data: {
|
||
email: value
|
||
},
|
||
success: function(response) {
|
||
if (response.status === 'error') {
|
||
field.addClass('is-invalid');
|
||
$("#checkemail").text(response.msg).show(); // 顯示伺服器返回的錯誤訊息
|
||
resolve(false);
|
||
} else {
|
||
field.removeClass('is-invalid');
|
||
$("#checkemail").hide(); // 隱藏錯誤訊息
|
||
resolve(true);
|
||
}
|
||
},
|
||
error: function() {
|
||
field.addClass('is-invalid');
|
||
$("#checkphone").text('檢查手機號時發生錯誤，請稍後再試。').show();
|
||
resolve(false);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 綁定每個欄位的失焦事件
|
||
$('#formAuthentication input').on('blur', function() {
|
||
if ($(this).attr('id') === 'phone') {
|
||
validatePhoneField($(this));
|
||
} else {
|
||
validateField($(this));
|
||
}
|
||
if ($(this).attr('id') === 'email') {
|
||
validateEmailField($(this));
|
||
} else {
|
||
validateField($(this));
|
||
}
|
||
});
|
||
|
||
// 表單提交事件
|
||
$('#formAuthentication').on('submit', async function(event) {
|
||
event.preventDefault(); // 阻止表單默認提交
|
||
|
||
let isFormValid = true;
|
||
|
||
// 驗證其他欄位（同步驗證）
|
||
$('#formAuthentication input').not('#phone').each(function() {
|
||
if (!validateField($(this))) {
|
||
isFormValid = false;
|
||
}
|
||
});
|
||
|
||
// 驗證手機欄位（非同步驗證）
|
||
const isPhoneValid = await validatePhoneField($('#phone'));
|
||
|
||
// 如果所有欄位均有效，執行表單提交
|
||
if (isFormValid && isPhoneValid) {
|
||
$.ajaxSetup({
|
||
headers: {
|
||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||
}
|
||
});
|
||
$.ajax({
|
||
url: "{{ route('member.register.create') }}",
|
||
type: 'POST',
|
||
data: $(this).serialize(),
|
||
success: function(response) {
|
||
Swal.fire({
|
||
title: '成功',
|
||
text: '註冊成功',
|
||
icon: 'success',
|
||
confirmButtonText: '確定'
|
||
}).then(() => {
|
||
window.location.href = "{{ route('member.index') }}";
|
||
});
|
||
},
|
||
error: function() {
|
||
Swal.fire({
|
||
title: '失敗',
|
||
text: '註冊失敗，請再試一次。',
|
||
icon: 'error',
|
||
confirmButtonText: '確定'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|