Как сделать авторизацию по лоигну, паролю с токенами на javascript?

Question

необходимо создать login.js в котором реализовать логику получение данных от пользователя + свалидировать их на стороне фронта на корректность email отправить fetch запрос на /api/auth/token - если такой пользователь существует вернётся 200 статус с токеном, данный токен нужно сохранить в куки чтобы иметь к нему доступ. Форма логина сделана на html

<!doctype html>
<html lang="en" >

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!--    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>-->
<!--    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
    <title>Login page</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #17a2b8;
            height: 100vh;
        }
        #login .container #login-row #login-column #login-box {
            margin-top: 120px;
            max-width: 600px;
            height: 320px;
            border: 1px solid #9C9C9C;
            background-color: #EAEAEA;
        }
        #login .container #login-row #login-column #login-box #login-form {
            padding: 20px;
        }
        #login .container #login-row #login-column #login-box #login-form #register-link {
            margin-top: -85px;
        }
    </style>
</head>


<!------ Include the above in your HEAD tag ---------->

<body>
<div id="login">

    <h3 class="text-center text-white pt-5">Login form</h3>
    <div class="container">
        <div id="login-row" class="row justify-content-center align-items-center">
            <div id="login-column" class="col-md-6">
                <div id="login-box" class="col-md-12">
                    <form id="login-form" class="form" action="" method="post">
                        <h3 class="text-center text-info">Please, login...</h3>

                        <div class="form-group">
                            <label for="username" class="text-info">Username:</label><br>
                            <input type="text" name="username" id="username" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="password" class="text-info">Password:</label><br>
                            <input type="text" name="password" id="password" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
                            <input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
                        </div>
                        <div id="register-link" class="text-right">
                            <p><img src="../images/JmLogo.jpg" alt="" width="50" height="27"></p>
                            <a href="#" class="text-info">Register here</a>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
<script src="login.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как сделать авторизацию по лоигну, паролю с токенами на javascript?

Ответы (0 шт):