Chillweb/numstation-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
benjibennn
2023-12-22 12:35:55 +08:00
commit 9f89a732d6
872 changed files with 156291 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
resources/views/themes/tailwind/auth/user-register.blade.php Normal file
View File

@@ -0,0 +1,355 @@
@extends('theme::layouts.app')
@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="flex flex-col justify-center py-20 px-2 sm:px-6 lg:px-8 min-h-screen main-wrapper login-signup-page" style="background-image: url({{ asset('themes/tailwind/images/login-bg.png') }})">
<form action="{{ route('register') }}" method="POST" id="registerFrm">
@csrf
<input id="invite_token" type="hidden" name="invite_token" value="{{ $invite_token }}">
<div class="form-steps" data-step="1" id="formStep1">
<div class="mx-auto login-signup-card">
<h3 class="form-title mb-6">Create Account</h3>
<div class="form-group mb-6">
<label for="first_name">
First Name
</label>
<input id="first_name" type="text" name="first_name" required class="w-full form-input no-radius" value="{{ old('first_name') }}" autofocus>
@if ($errors->has('first_name'))
<div class="mt-1 text-red-500">
{{ $errors->first('first_name') }}
</div>
@endif
</div>
<div class="form-group mb-6">
<label for="last_name">
Last Name
</label>
<input id="last_name" type="text" name="last_name" required class="w-full form-input no-radius" value="{{ old('last_name') }}" autofocus>
@if ($errors->has('last_name'))
<div class="mt-1 text-red-500">
{{ $errors->first('last_name') }}
</div>
@endif
</div>
<div class="form-group mb-6">
<label for="email">Email</label>
<input id="email" type="email" name="email" value="{{ $invite_email ? $invite_email : old('email') }}" required class="w-full form-input no-radius" autofocus {{ $invite_email ? 'disabled' : '' }}>
@if ($errors->has('email'))
<div class="mt-1 text-red-500">
{{ $errors->first('email') }}
</div>
@endif
</div>
<div class="form-group mb-6">
<label for="phone">
Phone Number
</label>
<input id="phone" type="text" name="phone" name="phone" value="{{ old('phone') }}" required class="w-full form-input no-radius">
@if ($errors->has('phone'))
<div class="mt-1 text-red-500">
{{ $errors->first('phone') }}
</div>
@endif
</div>
<div class="form-group mb-6">
<label for="password">
Password
</label>
<div class="password-wrapper">
<input id="password" type="password" name="password" required class="w-full form-input no-radius">
<img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
</div>
@if ($errors->has('password'))
<div class="mt-1 text-red-500">
{{ $errors->first('password') }}
</div>
@endif
</div>
<div class="form-group mb-6">
<label for="password_confirmation">
Confirm Password
</label>
<div class="password-wrapper">
<input id="password_confirmation" type="password" name="password_confirmation" required class="w-full form-input no-radius">
<img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
</div>
@if ($errors->has('password_confirmation'))
<div class="mt-1 text-red-500">
{{ $errors->first('password_confirmation') }}
</div>
@endif
</div>
<div class="form-group mb-6 ">
<div class="row align-items-center">
<div class="col-md-2 mt-0">
<label for="role_id" class="mb-0">
Role
</label>
</div>
<div class="col-md-10 mt-0">
<select id="role_id" name="role_id" required class="w-full form-input no-radius">
@foreach ($roles as $role)
<option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>{{ $role->display_name }}</option>
@endforeach
</select>
</div>
</div>
@if ($errors->has('phone_number'))
<div class="mt-1 text-red-500">
{{ $errors->first('phone_number') }}
</div>
@endif
</div>
<div class="mb-6">
<div class="custom-radio-checkbox">
<input type="checkbox" class="remember" name="terms_and_conditions" id="terms_and_conditions" value="1">
<label class="remember_label" for="terms_and_conditions">
I accept <a href="{{ route('user-terms-and-conditions') }}" class="blue-link d-inline-block text-decoration-none">Terms and Conditions</a>
</label>
</div>
</div>
<div class="mb-6">
<span class="block w-full rounded-md shadow-sm">
<button type="button" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button change-form-step submit-btn {{ $invite_token ? 'send-btn' : '' }}" data-target="{{ $invite_token ? '3' : '2' }}">
Create Account
</button>
</span>
</div>
<p class="bottom-desc">
Already have an account? <a href="{{ route('login') }}" class="blue-link d-inline-block">Sign in</a>
</p>
</div>
</div>
@if (!$invite_token)
<div class="form-steps" data-step="2" id="formStep2" style="display: none;">
<div class="mx-auto login-signup-card">
<img class="logo mb-6 mx-auto" src="{{ asset('themes/tailwind/images/email.png') }}">
<h3 class="form-title mb-6">Your Company Owner Email</h3>
<div class="form-group mb-6">
<label for="company_email">Email</label>
<input id="company_email" type="email" name="company_email" required class="w-full form-input no-radius" autofocus>
@if ($errors->has('company_email'))
<div class="mt-1 text-red-500">
{{ $errors->first('company_email') }}
</div>
@endif
</div>
<div class="mb-6">
<span class="block w-full rounded-md shadow-sm">
<button type="button" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button change-form-step submit-btn send-btn" data-target="3">
Send
</button>
</span>
</div>
<p class="bottom-desc">
Go back to <a href="{{ route('login') }}" class="blue-link d-inline-block">Sign in</a>
</p>
</div>
</div>
@endif
<div class="form-steps" data-step="3" style="display: none;">
<div class="mx-auto login-signup-card">
<h3 class="form-title mb-6">Your account is now activated!</h3>
<div class="mb-6">
<span class="block w-full rounded-md shadow-sm">
<a href="{{ route('login') }}" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button submit-btn">
Sign in
</a>
</span>
</div>
</div>
</div>
<button type="submit" id="submitBtn" class="d-none"></button>
</form>
<div class="mx-auto bottom-links-wrapper">
<a href="{{ route('user-terms-and-conditions') }}" class="link">Terms and Conditions</a>
<a href="{{ route('user-privacy-policy') }}" class="link">Privacy Policy</a>
</div>
</div>
{{-- Didn't accept T&C Modal --}}
<div class="modal fade validation-modal style1" id="validationModal1" tabindex="-1" aria-labelledby="validationModal1Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content mx-auto w-100">
<div class="modal-body p-0">
<p class="text-center error-message">You are not accept Terms & Conditions</p>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
{{-- Error Modal --}}
<div class="modal fade validation-modal style2" id="validationModal2" tabindex="-1" aria-labelledby="validationModal2Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content mx-auto w-100">
<div class="modal-body p-0">
<p class="text-center error-message">Wrong Password</p>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
{{-- Sent Success Modal --}}
<div class="modal fade validation-modal style2" id="validationModal3" tabindex="-1" aria-labelledby="validationModal3Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content mx-auto w-100">
<div class="modal-body p-0">
<p class="text-center error-message">
@if ($invite_token)
Register successfully
@else
Sent successfully
@endif
</p>
<a href="{{ route('login') }}" class="btn btn-secondary">Back</a>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
$(function() {
$('.password-hide-show').click(function() {
var type = $(this).parent().find('input').attr('type');
if (type == 'password') {
$(this).parent().find('input').attr('type', 'text');
}
else {
$(this).parent().find('input').attr('type', 'password');
}
});
$('.change-form-step').click(function() {
var target = $(this).attr('data-target');
var validForm = true;
var form = $(this).parents('form').first();
var currentStep = $('.form-steps:visible').first().attr('id');
form.find('input[type="text"][required]:visible').each(function() {
if (!$(this).val()) {
validForm = false;
return false;
}
});
form.find('input[type="email"][required]:visible').each(function() {
if (!$(this).val()) {
validForm = false;
return false;
}
});
form.find('input[type="checkbox"][required]:visible').each(function() {
if (!$(this).is(':checked')) {
validForm = false;
return false;
}
});
if (currentStep == 'formStep1' && validForm) {
if (!form.find('#terms_and_conditions').is(':checked')) {
$('#validationModal1').modal('show');
return;
}
else if (form.find('#password').val() != form.find('#password_confirmation').val()) {
$('#validationModal2 .error-message').html('Wrong Password');
$('#validationModal2').modal('show');
return;
}
}
if (validForm) {
if (target == '3') {
form.find('button[type="submit"]').click();
}
else {
$('.form-steps').hide();
$('.form-steps[data-step="' + target + '"]').show();
}
}
else {
form.find('button[type="submit"]').click();
}
});
$('#registerFrm').submit(function(e) {
e.preventDefault();
var button = $(this).find('.send-btn');
var buttonHtml = button.html();
if (!button.is(':disabled')) {
button.attr('disabled', 'disabled');
button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');
$(this).find('#email').removeAttr('disabled');
var data = $(this).serialize();
$(this).find('#email').attr('disabled', 'disabled');
$.ajax({
url: '{{ route("wave.register-ajax") }}',
type: "post",
data: data,
dataType:'json',
success:function(data) {
button.removeAttr('disabled');
button.html(buttonHtml);
if (data.success) {
$('#validationModal3').modal('show');
}
},
error: function(data) {
var errors = data.responseJSON.errors;
var errorMessage = '<ul>';
$.each(errors, function(index, error) {
console.log(error);
errorMessage += '<li>' + error[0] + '</li>';
});
errorMessage += '</ul>';
$('#validationModal2 .error-message').html(errorMessage);
$('#validationModal2').modal('show');
button.removeAttr('disabled');
button.html(buttonHtml);
}
});
}
});
});
</script>
@endsection