From: Alviro Iskandar Setiawan <[email protected]>
To: Fernanda Ma'rouf <[email protected]>,
Akiekano <[email protected]>
Cc: Alviro Iskandar Setiawan <[email protected]>,
Alviro Iskandar Setiawan <[email protected]>,
GNU/Weeb Mailing List <[email protected]>
Subject: [PATCH buubuu v1 2/5] view: Create login.html
Date: Fri, 27 May 2022 20:39:17 +0000 [thread overview]
Message-ID: <[email protected]> (raw)
In-Reply-To: <CAOG64qNDyrKyV_TqTdP6pdVAyTn1=hRppnOoJ=e9T73C9Nsjmg@mail.gmail.com>
Create login.html view file. We will render this file from Login()
function in the auth-controller.
Signed-off-by: Alviro Iskandar Setiawan <[email protected]>
---
view/login.html | 70 +++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 70 insertions(+)
create mode 100644 view/login.html
diff --git a/view/login.html b/view/login.html
new file mode 100644
index 0000000..3b74e0a
--- /dev/null
+++ b/view/login.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Login</title>
+</head>
+<body>
+<div class="login_form_box">
+ <h1>Login Form</h1>
+ <form id="login_form" method="POST" action="javascript:void(0);">
+ <table id="login_table">
+ <tr>
+ <td align="left">Email</td>
+ <td>:</td>
+ <td><input type="text" id="email" name="email" required="1"/></td>
+ </tr>
+ <tr>
+ <td align="left">Password</td>
+ <td>:</td>
+ <td><input type="password" id="password" name="password" required="1"/></td>
+ </tr>
+ <tr>
+ <td colspan="3" align="center">
+ <div style="margin-top: 20px; margin-bottom: 20px;">
+ <input type="submit" name="submit" value="Login"/>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </form>
+</div>
+<style type="text/css">
+ body {
+ font-family: Arial;
+ }
+ .login_form_box {
+ padding: 10px;
+ padding-bottom: 40px;
+ margin: auto;
+ margin-top: 30px;
+ width: 40%;
+ border: 1px solid #000;
+ text-align: center;
+ }
+ #login_table {
+ padding: 10px;
+ margin: auto;
+ width: 90%;
+ text-align: left;
+ }
+</style>
+<script type="text/javascript">
+ function get_eid(id) {
+ return document.getElementById(id);
+ }
+
+ function do_login() {
+ let json = {
+ name: get_eid("email").value.trim(),
+ password: get_eid("password").value.trim()
+ };
+
+ let xhr = new XMLHttpRequest();
+ xhr.open("POST", "/auth/login");
+ xhr.setRequestHeader("Content-type", "application/json");
+ xhr.send(JSON.stringify(json));
+ }
+ get_eid("login_form").addEventListener("submit", do_login);
+</script>
+</body>
+</html>
--
Alviro Iskandar Setiawan
next prev parent reply other threads:[~2022-05-27 20:39 UTC|newest]
Thread overview: 6+ messages / expand[flat|nested] mbox.gz Atom feed top
2022-05-27 20:34 [PATCH buubuu v1 0/5] Login and Register page Alviro Iskandar Setiawan
2022-05-27 20:39 ` [PATCH buubuu v1 1/5] view: Create register.html Alviro Iskandar Setiawan
2022-05-27 20:39 ` Alviro Iskandar Setiawan [this message]
2022-05-27 20:39 ` [PATCH buubuu v1 3/5] auth-controller: Register: Render register.html on HTTP GET request Alviro Iskandar Setiawan
2022-05-27 20:39 ` [PATCH buubuu v1 4/5] auth-controller: Login: Render login.html " Alviro Iskandar Setiawan
2022-05-27 20:39 ` [PATCH buubuu v1 5/5] server: auth: Create `/login` route Alviro Iskandar Setiawan
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20220527203920.2474126-2-alviro.iskandar@gnuweeb.org \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox