[PATCH buubuu v1 0/5] Login and Register page

public inbox for [email protected]
 help / color / mirror / Atom feed

* [PATCH buubuu v1 0/5] Login and Register page
@ 2022-05-27 20:34 Alviro Iskandar Setiawan
  2022-05-27 20:39 ` [PATCH buubuu v1 1/5] view: Create register.html Alviro Iskandar Setiawan
                   ` (4 more replies)
  0 siblings, 5 replies; 6+ messages in thread
From: Alviro Iskandar Setiawan @ 2022-05-27 20:34 UTC (permalink / raw)
  To: Fernanda Ma'rouf, Akiekano
  Cc: GNU/Weeb Mailing List, Alviro Iskandar Setiawan

Hi,

This series adds a Login and Register page. There are 5 patches:

## Patch 1 and 2
Create these two view files:

   register.html
   login.html

Both of them will generate an XHR request upon form submission. The
content type of the request body will be in JSON format. The backend
then can later consume this JSON data that's sent by the frontend.

## Patch 3
Make Register() function in the auth-controller render the previously
created view, register.html. Only render this file when the user
visits this endpoint with HTTP method "GET".

## Patch 4
Make Login() function in the auth-controller render the previously
created view, login.html. Only render this file when the user visits
this endpoint with HTTP method "GET".

## Patch 5
Add these two routes:

   /auth/login POST authController.Register
   /auth/login GET  authController.login

for the login page and API endpoint.

Note:
Currently, the backend doesn't handle the JSON data sent by the
frontend. This is only the starting point where the frontend
sends the JSON data via a JavaScript XHR.

That's all. Please review, tq!

Signed-off-by: Alviro Iskandar Setiawan <[email protected]>
---
Alviro Iskandar Setiawan (5):
  view: Create register.html
  view: Create login.html
  auth-controller: Register: Render register.html on HTTP GET request
  auth-controller: Login: Render login.html on HTTP GET request
  server: auth: Create `/login` route

 controller/auth-controller.go | 13 ++++-
 server.go                     |  2 +
 view/login.html               | 70 +++++++++++++++++++++++++++
 view/register.html            | 84 +++++++++++++++++++++++++++++++++
 4 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 view/login.html
 create mode 100644 view/register.html

base-commit: 0bcec53449298abf84a135435e6df95dfabcf5d6
-- 
Alviro Iskandar Setiawan

^ permalink raw reply	[flat|nested] 6+ messages in thread

* [PATCH buubuu v1 1/5] view: Create register.html
  2022-05-27 20:34 [PATCH buubuu v1 0/5] Login and Register page Alviro Iskandar Setiawan
@ 2022-05-27 20:39 ` Alviro Iskandar Setiawan
  2022-05-27 20:39 ` [PATCH buubuu v1 2/5] view: Create login.html Alviro Iskandar Setiawan
                   ` (3 subsequent siblings)
  4 siblings, 0 replies; 6+ messages in thread
From: Alviro Iskandar Setiawan @ 2022-05-27 20:39 UTC (permalink / raw)
  To: Fernanda Ma'rouf, Akiekano
  Cc: Alviro Iskandar Setiawan, Alviro Iskandar Setiawan,
	GNU/Weeb Mailing List

Create register.html view file. We will render this file from Register()
function in the auth-controller.

Signed-off-by: Alviro Iskandar Setiawan <[email protected]>
---
 view/register.html | 84 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 view/register.html

diff --git a/view/register.html b/view/register.html
new file mode 100644
index 0000000..1f9e6c7
--- /dev/null
+++ b/view/register.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Register</title>
+</head>
+<body>
+<div class="register_form_box">
+    <h1>Registration Form</h1>
+    <form id="register_form" method="POST" action="javascript:void(0);">
+        <table id="register_table">
+            <tr>
+                <td align="left">Name</td>
+                <td>:</td>
+                <td><input type="text" id="name" name="name" required="1"/></td>
+            </tr>
+            <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 align="left">Retype Password</td>
+                <td>:</td>
+                <td><input type="password" id="cpassword" name="cpassword" required="1"/></td>
+            </tr>
+            <tr>
+                <td colspan="3" align="center">
+                    <div style="margin-top: 20px; margin-bottom: 20px;">
+                        <input type="submit" name="submit" value="Register"/>
+                    </div>
+                </td>
+            </tr>
+        </table>
+    </form>
+</div>
+<style type="text/css">
+    body {
+        font-family: Arial;
+    }
+    .register_form_box {
+        padding: 10px;
+        padding-bottom: 40px;
+        margin: auto;
+        margin-top: 30px;
+        width: 40%;
+        border: 1px solid #000;
+        text-align: center;
+    }
+    #register_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_register() {
+        let json = {
+            name:       get_eid("nama").value.trim(),
+            email:      get_eid("email").value.trim(),
+            /*
+             * Do not trim password, it should be stored as
+             * what it is actually written by the user.
+             */
+            password:   get_eid("password").value,
+            cpassword:  get_eid("cpassword").value,
+        };
+
+        let xhr = new XMLHttpRequest();
+        xhr.open("POST", "/auth/register");
+        xhr.setRequestHeader("Content-type", "application/json");
+        xhr.send(JSON.stringify(json));
+    }
+    get_eid("register_form").addEventListener("submit", do_register);
+</script>
+</body>
+</html>
-- 
Alviro Iskandar Setiawan


^ permalink raw reply related	[flat|nested] 6+ messages in thread

* [PATCH buubuu v1 2/5] view: Create login.html
  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
  2022-05-27 20:39 ` [PATCH buubuu v1 3/5] auth-controller: Register: Render register.html on HTTP GET request Alviro Iskandar Setiawan
                   ` (2 subsequent siblings)
  4 siblings, 0 replies; 6+ messages in thread
From: Alviro Iskandar Setiawan @ 2022-05-27 20:39 UTC (permalink / raw)
  To: Fernanda Ma'rouf, Akiekano
  Cc: Alviro Iskandar Setiawan, Alviro Iskandar Setiawan,
	GNU/Weeb Mailing List

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


^ permalink raw reply related	[flat|nested] 6+ messages in thread

* [PATCH buubuu v1 3/5] auth-controller: Register: Render register.html on HTTP GET request
  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 ` [PATCH buubuu v1 2/5] view: Create login.html Alviro Iskandar Setiawan
@ 2022-05-27 20:39 ` 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
  4 siblings, 0 replies; 6+ messages in thread
From: Alviro Iskandar Setiawan @ 2022-05-27 20:39 UTC (permalink / raw)
  To: Fernanda Ma'rouf, Akiekano
  Cc: Alviro Iskandar Setiawan, Alviro Iskandar Setiawan,
	GNU/Weeb Mailing List

Make Register() function in the auth-controller render the previously
created view, register.html. Only render this file when the user visits
this endpoint with HTTP method "GET".

Signed-off-by: Alviro Iskandar Setiawan <[email protected]>
---
 controller/auth-controller.go | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/controller/auth-controller.go b/controller/auth-controller.go
index 958f452..afc8da4 100644
--- a/controller/auth-controller.go
+++ b/controller/auth-controller.go
@@ -51,7 +51,12 @@ func (c *authController) Login(ctx *gin.Context) {
 }
 
 func (c *authController) Register(ctx *gin.Context) {
-	ctx.HTML(http.StatusOK, "index.html",gin.H{})
+
+	if (ctx.Request.Method == "GET") {
+		ctx.HTML(http.StatusOK, "register.html", gin.H{})
+		return
+	}
+
 	var registerDTO dto.RegisterDTO
 	errDTO := ctx.ShouldBind(&registerDTO)
 	if errDTO != nil {
-- 
Alviro Iskandar Setiawan


^ permalink raw reply related	[flat|nested] 6+ messages in thread

* [PATCH buubuu v1 4/5] auth-controller: Login: Render login.html on HTTP GET request
  2022-05-27 20:34 [PATCH buubuu v1 0/5] Login and Register page Alviro Iskandar Setiawan
                   ` (2 preceding siblings ...)
  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 ` Alviro Iskandar Setiawan
  2022-05-27 20:39 ` [PATCH buubuu v1 5/5] server: auth: Create `/login` route Alviro Iskandar Setiawan
  4 siblings, 0 replies; 6+ messages in thread
From: Alviro Iskandar Setiawan @ 2022-05-27 20:39 UTC (permalink / raw)
  To: Fernanda Ma'rouf, Akiekano
  Cc: Alviro Iskandar Setiawan, Alviro Iskandar Setiawan,
	GNU/Weeb Mailing List

Make Login() function in the auth-controller render the previously
created view, login.html. Only render this file when the user visits
this endpoint with HTTP method "GET".

Signed-off-by: Alviro Iskandar Setiawan <[email protected]>
---
 controller/auth-controller.go | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/controller/auth-controller.go b/controller/auth-controller.go
index afc8da4..034f07e 100644
--- a/controller/auth-controller.go
+++ b/controller/auth-controller.go
@@ -31,6 +31,12 @@ func NewAuthController(authService service.AuthService, jwtService service.JWTSe
 }
 
 func (c *authController) Login(ctx *gin.Context) {
+
+	if (ctx.Request.Method == "GET") {
+		ctx.HTML(http.StatusOK, "login.html", gin.H{})
+		return
+	}
+
 	var loginDTO dto.LoginDTO
 	errDTO := ctx.ShouldBind(&loginDTO)
 	if errDTO != nil {
-- 
Alviro Iskandar Setiawan


^ permalink raw reply related	[flat|nested] 6+ messages in thread

* [PATCH buubuu v1 5/5] server: auth: Create `/login` route
  2022-05-27 20:34 [PATCH buubuu v1 0/5] Login and Register page Alviro Iskandar Setiawan
                   ` (3 preceding siblings ...)
  2022-05-27 20:39 ` [PATCH buubuu v1 4/5] auth-controller: Login: Render login.html " Alviro Iskandar Setiawan
@ 2022-05-27 20:39 ` Alviro Iskandar Setiawan
  4 siblings, 0 replies; 6+ messages in thread
From: Alviro Iskandar Setiawan @ 2022-05-27 20:39 UTC (permalink / raw)
  To: Fernanda Ma'rouf, Akiekano
  Cc: Alviro Iskandar Setiawan, Alviro Iskandar Setiawan,
	GNU/Weeb Mailing List

Add these two routes:

   /auth/login POST authController.Register
   /auth/login GET  authController.login

for the login page and API endpoint.

Signed-off-by: Alviro Iskandar Setiawan <[email protected]>
---
 server.go | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/server.go b/server.go
index 3042fd5..14ffff6 100644
--- a/server.go
+++ b/server.go
@@ -30,6 +30,8 @@ func main() {
 	{
 		authRoutes.POST("/register", authController.Register)
 		authRoutes.GET("/register", authController.Register)
+		authRoutes.POST("/login", authController.Login)
+		authRoutes.GET("/login", authController.Login)
 
 		// authRoutes.GET("/register", check)
 		// authRoutes.GET("/register", func(c *gin.Context) {
-- 
Alviro Iskandar Setiawan


^ permalink raw reply related	[flat|nested] 6+ messages in thread

end of thread, other threads:[~2022-05-27 20:39 UTC | newest]

Thread overview: 6+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
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 ` [PATCH buubuu v1 2/5] view: Create login.html Alviro Iskandar Setiawan
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

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox