326 lines
14 KiB
PHP
326 lines
14 KiB
PHP
<!DOCTYPE html>
|
||
|
||
|
||
|
||
<html lang="en" class="light-style layout-wide 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>卡菲姬後台註冊</title>
|
||
<meta name="description" content="Materialize – is the most developer friendly & highly customizable Admin Dashboard Template." />
|
||
<meta name="keywords" content="dashboard, material, material design, bootstrap 5 dashboard, bootstrap 5 design, bootstrap 5">
|
||
<!-- laravel CRUD token -->
|
||
<meta name="csrf-token" content="6fa8KEfKxuHo22PqMwHmCoxMDArqCNYyqRXJNZSE">
|
||
<!-- 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">由此註冊後臺 🚀</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">請輸入有效的 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">請輸入有效的 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('admin.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('admin.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>
|
||
$(document).ready(function() {
|
||
// 驗證邏輯函數
|
||
function validateField(field) {
|
||
console.log('load');
|
||
const id = field.attr('id');
|
||
const value = field.val().trim();
|
||
let isValid = true;
|
||
let errorMsg = '';
|
||
|
||
if (id === 'username') {
|
||
if (!value) {
|
||
isValid = false;
|
||
errorMsg = '請輸入稱呼。';
|
||
}
|
||
} else if (id === 'email') {
|
||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
if (!emailPattern.test(value)) {
|
||
isValid = false;
|
||
errorMsg = '請輸入有效的 Email 地址。';
|
||
}
|
||
} else if (id === 'password') {
|
||
if (value.length < 6) {
|
||
isValid = false;
|
||
errorMsg = '密碼至少需要 6 個字符。';
|
||
}
|
||
} else if (id === 'phone') {
|
||
const phonePattern = /^[0-9]{10}$/;
|
||
if (!phonePattern.test(value)) {
|
||
isValid = false;
|
||
errorMsg = '請輸入有效的 10 位手機號碼。';
|
||
}
|
||
}
|
||
|
||
if (isValid) {
|
||
field.removeClass('is-invalid');
|
||
field.next('.invalid-feedback').hide();
|
||
} else {
|
||
field.addClass('is-invalid');
|
||
if (field.next('.invalid-feedback').length) {
|
||
field.next('.invalid-feedback').text(errorMsg).show();
|
||
}
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
|
||
// 每個輸入框綁定失焦事件
|
||
$('#formAuthentication input').on('blur', function() {
|
||
validateField($(this));
|
||
});
|
||
|
||
// 表單提交事件
|
||
$('#formAuthentication').on('submit', function(event) {
|
||
event.preventDefault(); // 阻止表單自動提交
|
||
|
||
let isFormValid = true;
|
||
|
||
// 驗證所有字段
|
||
$('#formAuthentication input').each(function() {
|
||
if (!validateField($(this))) {
|
||
isFormValid = false;
|
||
}
|
||
});
|
||
|
||
// 如果表單有效，使用 AJAX 提交
|
||
if (isFormValid) {
|
||
$.ajax({
|
||
url: "{{ route('admin.register.create') }}",
|
||
type: 'POST',
|
||
data: $(this).serialize(),
|
||
success: function(response) {
|
||
Swal.fire({
|
||
title: '成功',
|
||
text: '註冊成功',
|
||
icon: 'success',
|
||
confirmButtonText: '確定'
|
||
}).then(() => {
|
||
window.location.href = "{{ route('admin.index') }}";
|
||
});
|
||
},
|
||
error: function(error) {
|
||
Swal.fire({
|
||
title: '失敗',
|
||
text: '註冊失敗，請再試一次。',
|
||
icon: 'error',
|
||
confirmButtonText: '確定'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
|
||
</script>
|
||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||
|
||
<!-- beautify ignore:end -->
|
||
|
||
|
||
<script>
|
||
</script> |