add registarportal

This commit is contained in:
Amir Hamzan
2021-12-05 14:28:39 +08:00
parent c75d37a901
commit a6ad736df2
3 changed files with 185 additions and 2 deletions
@@ -0,0 +1,182 @@
@extends('includes.login.index')
@section('content')
<title>Daftar Akaun| Customer Portal</title>
<h6 style="text-align: center; margin-bottom: 10%;">Sila isi e-mel dan kata laluan</h6>
<form role="form" method="POST" action="{{ route('register') }}">
@csrf
<input type="hidden" name="icno" value="{{ $icno }}" />
<!-- nama -->
<div class="input-group input-group-outline my-3 bg-light">
<input class="form-control" placeholder="{{ __('Name') }}" type="text" name="name" value="{{ old('name') ? old('name') : $nama }}" readonly required autofocus>
</div>
@if ($errors->has('name'))
<span class="invalid-feedback" style="display: block;" role="alert">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
<!-- email -->
<div class="input-group input-group-outline mb-3 {{ $errors->has('email') ? ' has-danger' : '' }}">
<input class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('E-mel') }}" type="email" name="email" value="{{ old('email') }}" required>
</div>
@if ($errors->has('email'))
<span class="invalid-feedback" style="display: block;" role="alert">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
<!-- password -->
<div class="input-group input-group-outline {{ $errors->has('password') ? ' has-danger' : '' }}">
<input id="password" onKeyUp="checkPasswordStrength();" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" placeholder="{{ __('Kata Laluan') }}" type="password" name="password" required>
</div>
@if ($errors->has('password'))
<span class="invalid-feedback" style="display: block;" role="alert">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
<div class="text-muted font-italic mb-3">
<small>{{ __('password strength') }}: <span class="text-muted font-weight-700" id="password-strength-status">none</span></small>
</div>
<!-- confirmation password -->
<div class="input-group input-group-outline mb-3">
<input name="password_confirmation" class="form-control" placeholder="{{ __('Sahkan Kata Laluan') }}" type="password" required>
</div>
<div>
<input class="custom-control-input" id="customCheckRegister" type="checkbox" required style="margin-top: 5%;">
<label class="custom-control-label" for="customCheckRegister">
<span class="text-muted">{{ __('Saya setuju dengan segala') }} <a href="#!">{{ __('Terma & Syarat') }}</a></span>
</label>
</div>
<div class="text-center">
<button type="submit" class="btn bg-gradient-dark w-100 my-4 mb-2" style="background: #4A4E59;">Cipta Akaun</button>
</div>
<p class="mt-6 text-sm text-center">
<a href="{{ route('login') }}">Log-Masuk</a>
<a href="#" class="text-dark text-gradient font-weight-bold"> | </a>
<a href="{{ route('password.request') }}">Lupa Kata Laluan</a>
</p>
</form>
<div id="modal-loading" name="myModal" class="modalloading modal fade" role="dialog" style="display:none">
<div class="modal-dialog-loading">
<img src="{{ asset('argon') }}/login/curvebars.svg" style="height:150px;width:150px;">
</div>
</div>
<script>
function checkPasswordStrength() {
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
if ($('#password').val().length > 0 && $('#password').val().length < 6) {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('text-danger font-weight-700');
$('#password-strength-status').html("Weak (should be atleast 6 characters.)");
} else if ($('#password').val().length == 0) {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('text-muted font-weight-700');
$('#password-strength-status').html("None");
} else {
if ($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('text-success font-weight-700');
$('#password-strength-status').html("Strong");
} else {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('text-yellow font-weight-700');
$('#password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
}
}
}
function checkSamePassword() {
if ($('#password').val() !== $('#confirm_password').val()) {
console.log('x sama dengan password');
}
}
function loading_close() {
$('#modal-loading').modal('hide');
}
function loading($timeout = false) {
// $('#modal-loading').modal('hide');
// $('#modal-loading').modal('show');
// $modal = $('#modal-loading');
// $modal.modal({
// backdrop: 'static',
// keyboard: false
// })
// $modal.modal('hide');
// $modal.modal('show');
// var blength = $(".modal-backdrop").length;
// if(blength > 1){
// $(".modal-backdrop:gt(0)").remove();//all el other than first will be removed
// }
// console.log('blength', $('.modal-backdrop').length);
$('.modal-backdrop').slice(1).remove();
$('#modal-loading').modal('show');
if ($timeout) {
setTimeout("loading_close()", $timeout);
}
}
// loading(500);
// var loading = document.getElementsByClassName('loading');
// loading.onclick = function(){
// loading();
// };
document.body.onclick = function(e) {
e = window.event ? event.srcElement : e.target;
if (e.className && e.className.indexOf('loading') != -1) loading();
}
// $('body').on('click', '.loading', function() {
// loading();
// });
$(function() {
$('.login-form').submit(function() {
if ($(this).valid()) {
//
} else {
loading_close();
}
});
});
var slideIndex = 0;
// showSlides();
// function showSlides() {
// var i;
// var slides = document.getElementsByClassName("mySlides");
// for (i = 0; i < slides.length; i++) {
// slides[i].style.display = "none";
// }
// slideIndex++;
// if (slideIndex > slides.length) {
// slideIndex = 1
// }
// slides[slideIndex - 1].style.display = "block";
// setTimeout(showSlides, 10000); // Change image every 2 seconds
// }
</script>
@endsection
@@ -100,7 +100,7 @@
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
<script src="{{ asset('assets/js/material-kit/material-kit.min.js?v=3.0.0') }}" type="text/javascript"></script>
<!-- <script src="{{ asset('assets/js/material-kit/material-kit.min.js?v=3.0.0') }}" type="text/javascript"></script> -->
</body>