Home
ardianhu
authentication form terminal

authentication form terminal

authentication form with zsh on mac terminal looks

This tailwind example is contributed by ardianhu, on 04-Jul-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Form Login Form Other

Author ardianhu

2.3k

Fork Fullscreen

<div class="terminal p-5 rounded-lg font-mono">
    <div class="terminal-header bg-zinc-700 text-white p-2 rounded-t-lg flex items-center">
        <span class="text-red-500 text-5xl leading-[0px] align-middle -mt-2">•</span>
        <span class="text-yellow-500 text-5xl leading-[0px] align-middle -mt-2 ml-1">&bull;</span>
        <span class="text-green-500 text-5xl leading-[0px] align-middle -mt-2 ml-1">&bull;</span>
        <span class="ml-4 align-baseline">authentication --- bash - zsh </span>
    </div>
    <div id="output" class="pl-4 pt-2 bg-gray-900 max-h-[500px] overflow-auto">
        <p class="text-gray-500">You need to authenticate to continue!</p>
        <p class="text-sky-300">Enter 1 to login</p>
        <p class="text-sky-300">Enter 2 to register</p>
    </div>
    <div id="terminal-input-container" class="input flex pl-4 bg-gray-900 pb-4 rounded-b-lg items-center">
        <span class="text-green-500">➝</span>
        <span class="text-sky-300 ml-2">~</span>
        <span id="placeholder" class="ml-2 text-md text-gray-500"></span>
        <input type="text" id="terminal-input" class="bg-transparent border-none outline-none ring-0 focus:ring-0 text-amber-400 w-full">
    </div>
</div>

terminalInput.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                const input = terminalInput.value.trim();
                if (isPassword) {
                    output.innerHTML += `<div class="flex"><span class="text-green-500">➝</span><span class="bg-transparent border-none outline-none w-full text-amber-400 ml-2">${'•'.repeat(input.length)}</span></div>`;
                } else {
                    output.innerHTML += `<div class="flex"><span class="text-green-500">➝</span><span class="bg-transparent border-none outline-none w-full text-amber-400 ml-2">${input}</span></div>`;
                }
                if (isFinalStep) {
                    terminalInputContainer.classList.add('hidden');
                    output.classList.add('rounded-b-lg', 'pb-4')
                }
                terminalInput.value = '';
                terminalInput.setAttribute('type', 'text')

if (!mode) {
                    if (input === '1') {
                        mode = 'login';
                        output.innerHTML += `<p class="text-sky-300">Login selected. Enter email</p>`;
                        placeholderSpan.innerText = "email:";
                    } else if (input === '2') {
                        mode = 'register';
                        output.innerHTML += `<p class="text-sky-300">Register selected. Enter username</p>`;
                        placeholderSpan.innerText = "username:";
                    } else {
                        output.innerHTML += `<p class="text-red-400">Invalid input. Please press 1 to login or 2 to register.</p>`;
                    }
                } else if (mode === 'login') {
                    handleLogin(input);
                } else if (mode === 'register') {
                    handleRegister(input);
                }

output.scrollTop = output.scrollHeight;
            } else if (event.ctrlKey && event.key === 'c') {
                resetTerminal()
            }
        });

function displayFinalStep() {
            const formattedCredentials = formatCredentials(credentials, mode);
            output.innerHTML += `<p class="text-gray-500">Credentials entered:</p><pre class="text-gray-500">${formattedCredentials}</pre>`;
            output.innerHTML += `
                    <button class="bg-white text-black px-4 py-2 mt-2 rounded ml-2" onclick="handleDiscard()">Reset</button>
                    <button id="continue-auth" class="bg-indigo-500 text-white px-4 py-2 mt-2 rounded" onclick="handleContinue()">Continue</button>
                `;
            placeholderSpan.innerText = ""; // Reset placeholder
        }

window.handleContinue = function() {
            output.innerHTML += `<p>Credentials have been submitted.</p>`;
            resetTerminal();
        }

window.handleDiscard = function() {
            output.innerHTML += `<p>Credentials have been discarded.</p>`;
            resetTerminal();
        }

function resetTerminal() {
            mode = '';
            step = 0;
            credentials = {};
            output.innerHTML = `<p class="text-gray-500">You need to authenticate to continue!</p>
            <p class="text-sky-300">Enter 1 to login</p>
            <p class="text-sky-300">Enter 2 to register</p>`;
            placeholderSpan.innerText = ""; // Reset placeholder
            isFinalStep = false
            isPassword = false
            terminalInputContainer.classList.remove('hidden');
            output.classList.remove('rounded-b-lg', 'pb-4')
        }
    });
</script>

Related Examples

Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

1 year ago

7.9k
HTMLCODE
123

Author:
Anonymous

1 month ago

60
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

9.3k
login form
basic login form

Author:
Ahmath S.

1 month ago

49
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Steve NGOYA

1 month ago

103
cards
cards with background animation

Author:
Anonymous

1 year ago

2.4k
Contact us Form with Responsive

Author:
KULDEEP

3 weeks ago

122
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

536
Apple Dock Navigation Bar

Author:
Cristian

6 months ago

981
Responsive contact us section
responsive contact section

Author:
Geoffrey Callaghan

1 year ago

6.7k
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Author:
Lekhraj Ghimire

1 month ago

70
Fullscreen login form with image backround

Author:
Noah Schmidt

2 years ago

20.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components