https://www.cosplayhi.fun/register

Scan-ID:
6012b306-86c6-4ad3-af90-03747bc0f476Beendet
Eingereichte URL:
https://www.cosplayhi.fun/register
Bericht beendet:

JavaScript-Variablen · 3 gefunden

NameTyp
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject

Konsolenprotokoll-Meldungen · 2 gefunden

TypKategorieProtokoll
verbosedom
URL
https://www.cosplayhi.fun/register
Text
[DOM] Input elements should have autocomplete attributes (suggested: "new-password"): (More info: https://goo.gl/9p2vKq) %o
verbosedom
URL
https://www.cosplayhi.fun/register
Text
[DOM] Input elements should have autocomplete attributes (suggested: "new-password"): (More info: https://goo.gl/9p2vKq) %o

HTML

<!DOCTYPE html><html lang="en"><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CosplayHi - Register</title>

        <!-- Website Icon -->
        <link rel="icon" href="./images/cosplayhi-logo-no-text.png" type="image/png">

        <!-- External CSS -->
        <link rel="stylesheet" href="./css/style.css">
        <link rel="stylesheet" href="./css/auth.css">

        <!-- Remix Icon -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css" integrity="sha512-MqL4+Io386IOPMKKyplKII0pVW5e+kb+PI/I3N87G3fHIfrgNNsRpzIXEi+0MQC0sR9xZNqZqCYVcC61fL5+Vg==" crossorigin="anonymous" referrerpolicy="no-referrer">

        <!-- Facebook Link Thumbnail -->
        <meta property="og:title" content="CosplayHi - Connect with Cosplayers">
        <meta property="og:description" content="A platform for cosplayers to find mutuals and be easily discovered by others.">
        <meta property="og:image" content="https://cosplayhi.fun/images/cosplayhi-post-thumbnail.png">
        <meta property="og:url" content="https://cosplayhi.fun">
        <meta property="og:type" content="website">
    </head>

    <body>
        <nav>
            <a href="./">
                <img class="logo" src="./images/cosplayhi-cropped-logo.png" alt="CosplayHi logo">
            </a>
            
            <ul class="right">
                <a href="./events" class=""><i class="ri-calendar-2-line"></i> <span>Events</span></a>
                
                                    <li><a class="sign-in" href="./sign-in">Sign in</a></li>
                    <li><a class="register" href="./register">Register</a></li>
                            </ul>

            <li id="menu-icon"><i class="ri-menu-line"></i></li>
        </nav>
<div class="container">
    <h2>Register</h2>

    <form id="register-form" method="POST" enctype="multipart/form-data">
        <h3>Profile Image</h3>
        <input type="file" name="profile_image" id="profile-image" accept="image/*">
        <p id="profile-image-err" class="auth-status"></p>
        <div id="profile-image-preview">
            <div class="details">
                <h3 class="cosplayer-name"></h3>
                <p class="character"></p>
                <p class="source"></p>
            </div>
        </div>

        <h3>Character Portrayed</h3>
        <input type="text" name="character" id="character" placeholder="Enter character (don't worry this can be changed later)">
        <p id="character-err" class="auth-status"></p>

        <h3>Source of Character</h3>
        <input type="text" name="source" id="source" placeholder="Enter source (e.g., One Piece, Naruto, League of Legends, etc.)">
        <p id="source-err" class="auth-status"></p>

        <h3>Cosplayer Name</h3>
        <input type="text" name="cosplayer_name" id="cosplayer-name" placeholder="Enter cosplayer name">
        <p id="cosplayer-name-err" class="auth-status"></p>
        
        <h3>Birthdate</h3>
        <input type="date" name="birthdate" id="birthdate">
        <p id="birthdate-err" class="auth-status"></p>
        
        <h3>Email</h3>
        <input type="email" name="email" id="email" placeholder="Enter email">
        <p id="email-err" class="auth-status"></p>

        <h3>Username</h3>
        <input type="text" name="username" id="username" placeholder="Enter username">
        <p id="username-err" class="auth-status"></p>

        <h3>Password</h3>
        <input type="password" name="password" id="password" placeholder="Enter password">
        <p id="password-err" class="auth-status"></p>

        <h3>Confirm Password</h3>
        <input type="password" name="confirm_password" id="confirm-password" placeholder="Enter confirm password">
        <p id="confirm-password-err" class="auth-status"></p>
        
        <div class="agree">
            <input type="checkbox" name="terms" id="terms">
            <label for="terms">I agree to the <a href="./terms-of-service" target="_blank">Terms of Service</a> and <a href="./privacy-policy" target="_blank">Privacy Policy</a></label>
        </div>
        <p id="terms-err" class="auth-status"></p>
        
        <div id="loader">
            <div class="spinner"></div>
        </div>
        <input id="register" type="submit" name="register" value="Register">
    </form>
</div>

<script>
    // REGISTER FORM
    document.querySelector('#register-form').addEventListener('submit', (e) => {
        e.preventDefault();

        document.querySelector('#loader').style.display = 'block';
        document.querySelector('#register').disabled = true;
        
        const formData = new FormData(e.target);
        document.querySelector('#loader').style.display = 'block';
        document.querySelector('#register').disabled = true;
        
        fetch('./api/handle-register', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                document.querySelector('#loader').style.display = 'none';
                document.querySelector('#register').disabled = false;

                console.log(data);

                if (data.success) {
                    window.location.href = data.url;
                }

                document.querySelector('#profile-image-err').innerHTML = data.errors?.profile_image_err || '';
                document.querySelector('#character-err').innerHTML = data.errors?.character_err || '';
                document.querySelector('#source-err').innerHTML = data.errors?.source_err || '';
                document.querySelector('#cosplayer-name-err').innerHTML = data.errors?.cosplayer_name_err || '';
                document.querySelector('#birthdate-err').innerHTML = data.errors?.birthdate_err || '';
                document.querySelector('#email-err').innerHTML = data.errors?.email_err || '';
                document.querySelector('#username-err').innerHTML = data.errors?.username_err || '';
                document.querySelector('#password-err').innerHTML = data.errors?.password_err || '';
                document.querySelector('#confirm-password-err').innerHTML = data.errors?.confirm_password_err || '';
                document.querySelector('#terms-err').innerHTML = data.errors?.terms_err || '';
            })
            .catch(error => console.error('Error:', error));
    });

    // PREVIEW IMAGE WITH STYLED TEXT
    document.querySelector('#profile-image').addEventListener('change', (e) => {
        const file = e.target.files[0];
        const profileImagePreview = document.querySelector('#profile-image-preview');

        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            
            reader.onload = (e) => {
                profileImagePreview.style.backgroundImage = `url('${e.target.result}')`;
                profileImagePreview.style.display = 'block';
            };

            reader.readAsDataURL(file);
        } else {
            profileImagePreview.style.display = 'none';
        }
    });
    document.querySelector('#character').addEventListener('input', (e) => {
        document.querySelector('.details .character').innerHTML = e.target.value;
    });
    document.querySelector('#source').addEventListener('input', (e) => {
        document.querySelector('.details .source').innerHTML = e.target.value;
    });
    document.querySelector('#cosplayer-name').addEventListener('input', (e) => {
        document.querySelector('.details .cosplayer-name').innerHTML = e.target.value;
    });
</script>


        <script src="./js/script.js" defer=""></script>
    
</body></html>