CORE_V5 // auth

PATH: home / rwabteecom / project_11 / resources / views / web / auth /

Editing: register.blade.php

@extends('web.layouts.base')
@section('css')
    <link rel="stylesheet" href="{{ asset('dashboard/css/intlTelInput.css') }}" />
    <style>
        .form-relative{
            position: relative;
            overflow: hidden;
            width: 100%;
            overflow-x: hidden;
        }
        .form-relative .stepper{
            position: absolute;
            width: 100%;
            transition: 0.4s;
            top: 0;
            left: 110%;
        }
        .form-relative .stepper.active{
            left: 0%;
        }
        .back-btn{
            color: #ff9a4a !important;
            cursor: pointer;
        }
        .back-btn *{color: #ff9a4a !important;}
        .loader-parent{position: relative;}
        .spinner-parent{
            position: absolute;
            top: 50%;
            transform: translateY(12%);
            @if(LaravelLocalization::getCurrentLocale() == 'ar') left: 17px @else right:17px @endif
        }

</style>
@endsection
@section('body')
    <section class="register-page">
        <div class="row">
            <div class="col-12 col-lg-7 register-left text-center p-5 py-4">
                
                <div class="col-12 col-lg-8 mx-auto">
                    <div class="d-flex align-items-center justify-content-between">
                    <a href="{{route('index')}}"><img src="{{ gs('logo') }}" alt=""></a>
                    @include('web.partials.lang')
                </div>
                <form class="mt-4 pt-5 text-start signForm" method="post" action="{{ route('register.store') }}">
                    @csrf
                    <h2 class="mb-2">{{ __('Create your link') }}</h2>
                    <p class="mb-4 switch-link">{{ __('Already have an account?') }} <a
                            href="{{ route('login') }}">{{ __('Sign In') }}</a></p>
                    
                    <div class="form-relative">
                        <div class="step-1 stepper active">
                            <div class="my-3 loader-parent">
                                <label class="formlabel">{{ __('Email') }}</label>
                                <input type="email" class="formInput text-start" name="email" value="{{ old('email') }}"
                                    placeholder="{{ __('Email') }}" id="email">
                                    
                                    <div class="spinner-parent d-none email-loader">
                                        <div class="spinner-border spinner-border-sm" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>      
                                    </div>

<p class="mb-0 email-error text-danger small d-none"> {{__("Email given is not correct")}} </p>
                                <p class="mb-0 email-in-error text-danger small d-none"> {{__("Email given is already in use")}} </p>
                            </div>
        
                            <div class="my-3">
                                <label class="formlabel">{{ __('Password') }}</label>
                                <div class="formInput password-eye">
                                    <input type="password" class="password-input px-0" name="password"
                                        placeholder="{{ __('Password') }}" id="password" />
                                       
                                    <span class="hide-password">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                            fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
                                            <path
                                                d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />
                                            <path
                                                d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
                                            <path
                                                d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />
                                        </svg>
                                    </span>
                                    <span class="show-password">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                            fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                                            <path
                                                d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" />
                                            <path
                                                d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
                                        </svg>
                                    </span>
                                </div>
                                <p class="mb-0 text-danger weak-password small d-none"> {{__("Weak Password")}} </p>
                            </div>

<button class="form-submit my-4 moveto" data-to=".step-2" type="button" id="step-1-submitter" disabled>
                                {{ __('Create an account') }}
                            </button>
                        </div>

<div class="d-flex mb-3 moveto back-btn" data-to=".step-1">
                                <i class="bi bi-chevron-right me-1"></i>
                                {{__("Back")}}
                            </div>
                            <h2 class="fw-bold fs-1 mb-5"> {{__("Choose your username")}} </h2>
                            <div class="my-3 loader-parent">
                                <label class="formlabel">{{ __('create link') }}</label>
                                <div class="formInput">
                                    <span>{{ env('DOMIN') }}/</span>
                                    <input type="text" placeholder="{{__('username')}}"
                                        value="{{ old('username', request()->username) }}" name="username" id="user-link">
                                
                                    <div class="spinner-parent d-none username-loader">
                                        <div class="spinner-border spinner-border-sm" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>      
                                    </div>
                                    
                                </div>
                                <p class="mb-0 link-error text-danger small d-none"> {{__("This link is already in use")}} </p>
                            </div>
        
                            <button class="form-submit my-4" type="submit" id="step-2-submitter" disabled>
                                {{ __('Claim your link') }}
                            </button>
                        </div>

</div>
                    
                    <div class="or-div my-3">
                        <div class="line-div"></div>
                        <p class="mb-0">{{ __('OR') }}</p>
                    </div>
                    <a href="{{ route('google.redirect', 'google') }}" class="social-login mb-3">
                        <svg width="23" height="23" class="me-3" viewBox="0 0 23 23" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M22.54 11.7614C22.54 10.9459 22.4668 10.1618 22.3309 9.40909H11.5V13.8575H17.6891C17.4225 15.295 16.6123 16.513 15.3943 17.3284V20.2139H19.1109C21.2855 18.2118 22.54 15.2636 22.54 11.7614Z"
                                fill="#4285F4" />
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M11.5 22.9998C14.605 22.9998 17.2081 21.9701 19.1109 20.2137L15.3943 17.3283C14.3645 18.0183 13.0472 18.426 11.5 18.426C8.50474 18.426 5.96951 16.403 5.06519 13.6848H1.22314V16.6644C3.11542 20.4228 7.00451 22.9998 11.5 22.9998Z"
                                fill="#34A853" />
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M5.06523 13.6851C4.83523 12.9951 4.70455 12.258 4.70455 11.5001C4.70455 10.7421 4.83523 10.0051 5.06523 9.31506V6.33551H1.22318C0.444318 7.88801 0 9.64437 0 11.5001C0 13.3557 0.444318 15.1121 1.22318 16.6646L5.06523 13.6851Z"
                                fill="#FBBC05" />
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M11.5 4.57386C13.1884 4.57386 14.7043 5.15409 15.8961 6.29364L19.1945 2.99523C17.2029 1.13955 14.5997 0 11.5 0C7.00451 0 3.11542 2.57705 1.22314 6.33545L5.06519 9.315C5.96951 6.59682 8.50474 4.57386 11.5 4.57386Z"
                                fill="#EA4335" />
                        </svg>
                        {{ __('Continue with Google') }}
                    </a>
                    <a href="{{ route('google.redirect', 'facebook') }}" class="social-login">
                        <svg width="24" height="23" class="me-3" viewBox="0 0 24 23" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M23.1113 11.5001C23.1113 5.14878 17.9626 5.53131e-05 11.6113 5.53131e-05C5.26005 5.53131e-05 0.111328 5.14878 0.111328 11.5001C0.111328 17.24 4.31671 21.9976 9.81445 22.8604V14.8243H6.89453V11.5001H9.81445V8.96646C9.81445 6.08427 11.5313 4.49224 14.1582 4.49224C15.4164 4.49224 16.7324 4.71685 16.7324 4.71685V7.54693H15.2823C13.8537 7.54693 13.4082 8.4334 13.4082 9.34284V11.5001H16.5977L16.0878 14.8243H13.4082V22.8604C18.9059 21.9976 23.1113 17.24 23.1113 11.5001Z"
                                fill="#1877F2" />
                        </svg>
                        {{ __('Continue with Facebook') }}
                    </a>
                </form>
                
            </div>
            </div>
            @include('web.partials.auth-banner')
        </div>
    </section>
@endsection
@section('js')
    <script src="{{ asset('front/js/password.js') }}"></script>
    <script>
        // validate email
        var isEmailValid = false;
        var emailInUse = true;
        var passwordValid = false;

$('input[name="password"]').on("keyup" , function(){
            passwordValid = false;
            if($(this).val().length >= 6){
                passwordValid = true;
                $(".weak-password").addClass("d-none");
            }
            checkIfStep1CanProceed();
        });

$('input[name="password"]').on("blur" , function(){
            if(!passwordValid){
                $(".weak-password").removeClass("d-none");
            }
        });

$('input[name="email"]').on("keyup" , function(){
            isEmailValid = false
            let email = $(this).val();

var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {
                $('.email-error').removeClass('d-none');
            } else {
                $('.email-error').addClass('d-none');
                isEmailValid = true;
            }
            checkIfStep1CanProceed();
        });

$('input[name="email"]').on("blur" , function(){
            // check if email already in use
            emailInUse = true;
            if(isEmailValid){
                $(".email-in-error").addClass("d-none");
                $(".email-loader").removeClass("d-none");

function checkIfStep1CanProceed()
        {
            $("#step-1-submitter").prop("disabled" , true);
            if(!emailInUse && isEmailValid & passwordValid){
                $("#step-1-submitter").prop("disabled" , false);
            }
        }

$(".moveto").on("click" , function(){
            revertSubmitBtns();
            let tabClass = $(this).attr("data-to");
            $(".stepper").removeClass("active");
            $(".stepper" + tabClass).addClass("active");
            activateStepHeight();
        })
        function activateStepHeight()
        {
            let activeTabHeight = $(".stepper.active").height() + 20;
            
            $(".form-relative").height(activeTabHeight + "px")
        }
        activateStepHeight();

var typingTimeout;
        
        $("input[name='username']").on("keyup", function(){
            $("#step-2-submitter").prop("disabled" , true);
            clearTimeout(typingTimeout);
            typingTimeout = setTimeout(checkUserName, 500);

})

$("input[name='username']").on("blur", function(){
            checkUserName();
        });

checkUserName();

</script>
@endsection

CANCEL