356 lines
17 KiB
PHP
356 lines
17 KiB
PHP
|
@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
|