Custom Captcha Login Statamic 5 - Tutorial Statamic Bahasa Indonesia

   

        Statamic adalah CMS (Content Management System) modern berbasis flat-file yang powerful dan fleksibel, tanpa perlu database!  Dibangun di atas Laravel, Statamic cocok banget buat kamu yang mau bikin website cepat, aman, dan super customizable. Statamic juga memungkinkan kalian untuk melakukan perubahan fungsi dan tampilan dari folder /vendor dengan cara melakukan publish file/ components ke dalam folder resource yang kaliann miliki. Untuk tutorialnya bisa kalian ikuti pada video di bawah ini :

Berikut code form yang bisa kalian gunakan, didalamnya sudah terdapat captcha, kalian bisa copy code di bawah ini kemudian paste pada file login.blade.php yang sudah kalian publish sebelumnya :

  <form method="POST" v-show="showEmailLogin" class="email-login select-none"
    @if ($oauth) v-cloak @endif onsubmit="return validateCaptcha()">
    {!! csrf_field() !!}

    <input type="hidden" name="referer" value="{{ $referer }}" />

    <div class="mb-8">
        <label class="mb-2" for="input-email">{{ __('Email') }}</label>
        <input type="text" class="input-text input-text" name="email" value="{{ old('email') }}" autofocus
            id="input-email">
        @if ($hasError('email'))
            <div class="text-red-500 text-xs mt-2">{{ $errors->first('email') }}</div>
        @endif
    </div>

    <div class="mb-8">
        <label class="mb-2" for="input-password">{{ __('Password') }}</label>
        <input type="password" class="input-text input-text" name="password" id="input-password">
        @if ($hasError('password'))
            <div class="text-red-500 text-xs mt-2">{{ $errors->first('password') }}</div>
        @endif
    </div>

    <!-- Captcha -->
    <div class="mb-8">
        <label class="mb-2" for="captcha">{{ __('Captcha: ') }}<span id="num1"></span> + <span
                id="num2"></span>?</label>
        <input type="text" class="input-text input-text" id="captcha" name="captcha">
        <div id="captcha-error" class="text-red-500 text-xs mt-2" style="display: none;">Jawaban salah, silahkan coba
            lagi!</div>
    </div>

    <div class="flex justify-between items-center">
        <label for="remember-me" class="flex items-center cursor-pointer">
            <input type="checkbox" name="remember" id="remember-me">
            <span class="rtl:mr-2 ltr:ml-2">{{ __('Remember me') }}</span>
        </label>
        <button type="submit" class="btn-primary" :disabled="busy">{{ __('Masuk') }}</button>
    </div>
</form>


<script>
    // Generate two random numbers for captcha
    let num1 = Math.floor(Math.random() * 10) + 1;
    let num2 = Math.floor(Math.random() * 10) + 1;

    // Display numbers in the form
    document.getElementById('num1').textContent = num1;
    document.getElementById('num2').textContent = num2;

    // Function to validate captcha
    function validateCaptcha() {
        let captchaInput = document.getElementById('captcha').value;
        let captchaError = document.getElementById('captcha-error');

        // Check if captcha input matches the sum of num1 and num2
        if (parseInt(captchaInput) !== (num1 + num2)) {
            // Show error message
            captchaError.style.display = 'block';
            return false; // Prevent form submission
        }

        // Hide error message if the captcha is correct
        captchaError.style.display = 'none';
        return true; // Allow form submission
    }
</script>

    Jangan lupa pastikan kalian sudah hapus <form> sampai </form> yang sebelumnya bawaan dari statamic ya teman-teman, jika ditemukan masalah pada code ini kalian bisa tinggalkan pada kolom komentar pada video youtube saya atau kalian juga boleh hubungi aku dengan klik disini. Terimakasih semoga berhasil.