@php
$registerCaption = getContent('register.content',true);
@endphp
@extends($activeTemplate .'layouts.master')
@section('content')
@include($activeTemplate.'breadcrumb')
<div class="appHeader no-border transparent position-absolute">
<div class="left">
<a href="#" class="headerButton goBack">
<ion-icon name="chevron-back-outline"></ion-icon>
</a>
</div>
<div class="pageTitle"></div>
<div class="right">
<a href="{{ route('user.login') }}" style="background-image: -webkit-linear-gradient(229.45deg,#ffeb3a,#4def8e); padding:6px 15px; font-size: 14px; border-radius: 10px; color: black; font-weight: 500;">
Login
</a>
</div>
</div>
<div id="appCapsule">
<div class="section mt-2 text-center">
<h1 style="color: white;">Register now</h1>
<h4 style="color: white;">Create an account</h4>
</div>
<section class="section mb-5 p-2 pt-120 pb-120">
<div class="card">
<div class="card-body">
<div class="row justify-content-center">
<div class="col">
<div class="login-area">
<form class="action-form mt-50 loginForm" action="{{ route('user.register') }}" method="post">
@csrf
@if($reference)
<div class="form-group basic">
<label class="label">@lang('Referred By')</label>
<input type="text" name="referBy" class="form-control" autocomplete="off" autofocus="off" value="{{ $reference }}" readonly>
</div
><!-- form
-group
end --> @endif
<!-- Username Field -->
<div class="form-group basic">
<label class="label">@lang('Username')</label>
<input type="text" name="username" placeholder="@lang('Username')" class="form-control checkUser" value="{{ old('username') }}">
<small class="text-danger usernameExist"></small>
</div
><!-- form
-group
end -->
<!-- Password Field -->
<div class="form-group basic hover-input-popup">
<label class="label">Password</label>
<input type="password" name="password" placeholder="@lang('Password')" class="form-control">
@if($general->secure_password)
<div class="input-popup">
<p class="error lower">@lang('1 small letter minimum')</p>
<p class="error capital">@lang('1 capital letter minimum')</p>
<p class="error number">@lang('1 number minimum')</p>
<p class="error special">@lang('1 special character minimum')</p>
<p class="error minimum">@lang('6 character password')</p>
</div>
@endif
</div
><!-- form
-group
end -->
<!-- Confirm Password Field -->
<div class="form-group basic">
<label class="label">@lang('Re-type Password')</label>
<input type="password" name="password_confirmation" placeholder="@lang('Re-type Password')" class="form-control">
</div
><!-- form
-group
end -->
<div class="form-group d-flex justify-content-center">
@php echo recaptcha() @endphp
</div
><!-- form
-group
end -->
@include('partials.custom-captcha')
@if($general->agree)
<div class="form-group">
@php
$links = getContent('footer_link.element');
@endphp
<input type="checkbox" name="agree" required class="mr-2">
@lang('I agree with ')@foreach($links as $link)
<a href="{{ route('links',[$link->id,slug($link->data_values->title)]) }}"> {{ __($link->data_values->title) }} </a>
@if(!$loop->last) , @endif @endforeach
</div
><!-- form
-group
end --> @endif
<div class="form-button-group text-center transparent">
<button type="submit" class="cmn-btn btn btn-primary btn-block btn-lg">@lang('Register Now')</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Modal for Existing User -->
<div class="modal fade" id="existModalCenter" tabindex="-1" role="dialog" aria-labelledby="existModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="existModalLongTitle">@lang('You are with us')</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6 class="text-center">@lang('You already have an account please Sign in ')</h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('Close')</button>
<a href="{{ route('user.login') }}" class="btn btn-primary">@lang('Login')</a>
</div>
</div>
</div>
</div>
@endsection
@push('style')
<style>
body{
background-color:#282828 !important;
}
.hover-input-popup {
position: relative;
}
.hover-input-popup:hover .input-popup {
opacity: 1;
visibility: visible;
}
.input-popup {
position: absolute;
bottom: 130%;
left: 50%;
width: 280px;
background-color: #1a1a1a;
color: #fff;
padding: 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
</style>
@endpush
@push('script-lib')
<script src="{{ asset('assets/global/js/secure_password.js') }}"></script>
@endpush
@push('script')
<script>
(function ($, document) {
"use strict";
$('.loginForm').on('submit', function () {
var response = grecaptcha.getResponse();
if (response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">Captcha field is required.</span>';
return false;
}
return true;
});
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
@if($general->secure_password)
$('input[name=password]').on('input', function () {
secure_password($(this));
});
@endif
$('.checkUser').on('focusout', function (e) {
var url = '{{ route('user.checkUser') }}';
var value = $(this).val();
var token = '{{ csrf_token() }}';
if ($(this).attr('name') == 'username') {
var data = { username: value, _token: token };
}
$.post(url, data, function (response) {
if (response['data'] != null) {
$(`.${response['type']}Exist`).text(`${response['type']} already exists`);
} else {
$(`.${response['type']}Exist`).text('');
}
});
});
})(jQuery, document);
</script>
@endpush