Sistema de autenticación

Clase 23 de 26 • Curso de Aplicaciones en Tiempo Real con Socket.io

Yeison David Sanabria Ascanio

student•

Style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    background: #43a8f0;
    color: #fff;
    padding: 7px;
}

.button-container {
    display: flex;
    justify-content: center;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
}

.btn:focus {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}

.btn:active {
    color: var(--btn-active-color);
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border-color);
}

.primary {
    --btn-color: #fff;
    --btn-bg: #43a8f0;
    --btn-border-color: #43a8f0;
    --btn-hover-color: #fff;
    --btn-hover-bg: #116bf0;
    --btn-hover-border-color: #0a58ca;
    --btn-focus-shadow-rgb: 49,132,253;
    --btn-active-color: #fff;
    --btn-active-bg: #0a58ca;
    --btn-active-border-color: #0a53be;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #0d6efd;
    --btn-disabled-border-color: #0d6efd;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group input {
    border: 1px solid #ccc;
    outline: none;
    padding: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.card {
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 12%);
    border-radius: 3px;
    background: #fff;
}

Yeison David Sanabria Ascanio

student•

Register.css

main {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

main form {
    width: 50%;
    padding: 20px;
}

main form .input-group label {
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
}

main form .button-container {
    margin-top: 10px;
}

Francisco Carranza

student•

Les dejo aqui el diseño de register muy similar al de discord:

codigo css:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #5865F2;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto Condensed', sans-serif;
}

.register_box {
    background: #313338;
    max-width: 700px;
    width: 600px;
    min-width: 380px;
    height: auto;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    padding-bottom: 40px;
}

.h1_discord {
    color: #ffff;
    font-size: 28px;
    text-align: center;
    margin-bottom: 5px;
}

.h3_discord {
    margin: 5px;
    color: #80848E;
    font-size: 18px;
    text-align: center;
}
.input_box{
    margin-top: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: transparent;
    width: 350px;
    gap: 10px;
}
.label_discord{
    text-transform: uppercase;
    font-weight: 600;
    color: #80848E;
}
.label_discord span{
    color: red;
}
.input_discord{
    border: none;
    outline: none;
    height: 30px;
    border-radius: 2px;
    background: #1E1F22;
    color: #80848E;
    font-size: 16px;
    padding: 10px;
}
.btn_discord{
    margin-top: 10px;
    color: #ffff;
    font-size: 16px;
    outline: none;
    border: none;
    height: 50px;
    border-radius: 5px;
    background: #5865F2;
    cursor: pointer;
}

codigo HTML:

 <main class="register_box">
        <h1 class="h1_discord">¡Hola de nuevo!</h2>
        <p  class="h3_discord">!Nos alegramos mucho de volver a verte!</p>
        <form method="post">
            <section class="input_box">
                <label for="usernameInput" class="label_discord">nombre de usuario <span>*</span></label>
                <input type="text" id="usernameInput" name="username" class="input_discord">        
                <button type="button" class="btn_discord">Entrar</button>
            </section>

        </form>
    </main>

Jose Ever Muñoz Muñoz

student•

ta chido

Fredy Max Chavez Loyola

student•

Por aquí dejo mi diseño final

Jose Ever Muñoz Muñoz

student•

you are an artist

julian trejos

student•

yo: Bro estoy usando tus estilos.

mi Bro: no son mis estilos

Iván Roberto Rivas Celeita

student•

este curso debe llamarse "aterrizada en express basico y middleware"

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    background: #43a8f0;
    color: #fff;
    padding: 7px;
}

.button-container {
    display: flex;
    justify-content: center;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
}

.btn:focus {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}

.btn:active {
    color: var(--btn-active-color);
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border-color);
}

.primary {
    --btn-color: #fff;
    --btn-bg: #43a8f0;
    --btn-border-color: #43a8f0;
    --btn-hover-color: #fff;
    --btn-hover-bg: #116bf0;
    --btn-hover-border-color: #0a58ca;
    --btn-focus-shadow-rgb: 49,132,253;
    --btn-active-color: #fff;
    --btn-active-bg: #0a58ca;
    --btn-active-border-color: #0a53be;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #0d6efd;
    --btn-disabled-border-color: #0d6efd;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group input {
    border: 1px solid #ccc;
    outline: none;
    padding: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.card {
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 12%);
    border-radius: 3px;
    background: #fff;
}

main {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

main form {
    width: 50%;
    padding: 20px;
}

main form .input-group label {
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
}

main form .button-container {
    margin-top: 10px;
} 

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #5865F2;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto Condensed', sans-serif;
}

.register_box {
    background: #313338;
    max-width: 700px;
    width: 600px;
    min-width: 380px;
    height: auto;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    padding-bottom: 40px;
}

.h1_discord {
    color: #ffff;
    font-size: 28px;
    text-align: center;
    margin-bottom: 5px;
}

.h3_discord {
    margin: 5px;
    color: #80848E;
    font-size: 18px;
    text-align: center;
}
.input_box{
    margin-top: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: transparent;
    width: 350px;
    gap: 10px;
}
.label_discord{
    text-transform: uppercase;
    font-weight: 600;
    color: #80848E;
}
.label_discord span{
    color: red;
}
.input_discord{
    border: none;
    outline: none;
    height: 30px;
    border-radius: 2px;
    background: #1E1F22;
    color: #80848E;
    font-size: 16px;
    padding: 10px;
}
.btn_discord{
    margin-top: 10px;
    color: #ffff;
    font-size: 16px;
    outline: none;
    border: none;
    height: 50px;
    border-radius: 5px;
    background: #5865F2;
    cursor: pointer;
}

 <main class="register_box">
        <h1 class="h1_discord">¡Hola de nuevo!</h2>
        <p  class="h3_discord">!Nos alegramos mucho de volver a verte!</p>
        <form method="post">
            <section class="input_box">
                <label for="usernameInput" class="label_discord">nombre de usuario <span>*</span></label>
                <input type="text" id="usernameInput" name="username" class="input_discord">        
                <button type="button" class="btn_discord">Entrar</button>
            </section>

        </form>
    </main>

Sistema de autenticación

Fundamentos de Socket.io

Cómo hacer aplicaciones en tiempo real

Protocolos de comunicación: HTTP vs. WebSockets

¿Qué es Socket.io?

Socket.io vs. WebSockets

¿Cómo funciona Socket.io?

Ciclo de vida de Socket.io

Socket.io en la práctica

Creando nuestra primera aplicación con Socket.io

Obteniendo información de conexiones en el servidor

Emisión de eventos

On, Once y Off

Broadcast de eventos

Creación de salas con Socket.io

Namespaces en Socket.io

Lógica de envio de mensajes

Manejo offline

Eventos volátiles

Manejo de Middlewares

Herramientas extra

Debugging en Socket.io

Configuración para testing usando la librería jest

Testing con jest

Admin UI

Proyecto WebChat

Estructura inicial del proyecto WebChat

Sistema de autenticación

Programando la lógica del chat

Detalles finales y demostración de chat en tiempo real

Cierre

¿Quieres un Curso Práctico de Socket.io?