ui templates login page

.vscode/launch.json

@@ -17,7 +17,7 @@
             "request": "launch",
             "mode": "debug",
             "env": {"FLASH_PORT": 8080},
-            "program": "src/services/blog-api/api.go"
+            "program": "src/api.go"
         }
     ]
 }

src/api.go

@@ -3,12 +3,23 @@ package main
 import (
 	"blog-on-containers/handler"
 	"blog-on-containers/middleware"
+	"blog-on-containers/templates"
 
 	"github.com/gin-gonic/gin"
 )
 
 func main() {
 	r := gin.Default()
+
+	r = gin.New()
+	r.Use(gin.Logger())
+
+	r.LoadHTMLGlob("templates/views/*.html")
+	r.Static("/css", "./static/css")
+
+	r.GET("/loginpage", templates.LoginPage)
+	r.POST("/registerpage", templates.RegisterPage)
+
 	r.POST("/login", handler.LoginHandler)
 
 	api := r.Group("/api")

src/go.mod

@@ -10,6 +10,7 @@ require (
 
 require (
 	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/foolin/gin-template v0.0.0-20190415034731-41efedfb393b // indirect
 	github.com/gin-contrib/sse v0.1.0 // indirect
 	github.com/go-playground/locales v0.13.0 // indirect
 	github.com/go-playground/universal-translator v0.17.0 // indirect

src/go.sum

@@ -3,6 +3,8 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dgrijalva/jwt-go v3.2.0+incompatible h1:7qlOGliEKZXTDg6OTjfoBKDXWrumCAMpl/TFQ4/5kLM=
 github.com/dgrijalva/jwt-go v3.2.0+incompatible/go.mod h1:E3ru+11k8xSBh+hMPgOLZmtrrCbhqsmaPHjLKYnJCaQ=
+github.com/foolin/gin-template v0.0.0-20190415034731-41efedfb393b h1:pAJ/RYH5lYGDg55jBX658waK6LlqdPCaB65TG6GCAfE=
+github.com/foolin/gin-template v0.0.0-20190415034731-41efedfb393b/go.mod h1:C2ca9FYDoq/nsiqURv2kJwzhqXAgSXTTES2q25whECc=
 github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
 github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
 github.com/gin-gonic/gin v1.7.7 h1:3DoBmSbJbZAWqXJC3SLjAPfutPJJRN1U5pALB7EeTTs=

src/handler/loginHandler.go

@@ -13,14 +13,26 @@ import (
 
 func LoginHandler(context *gin.Context) {
 	var loginObj models.LoginRequest
-	if err := context.ShouldBindJSON(&loginObj); err != nil {
-		var errors []models.ErrorDetail = make([]models.ErrorDetail, 0, 1)
-		errors = append(errors, models.ErrorDetail{
-			ErrorType:    models.ErrorTypeValidation,
-			ErrorMessage: fmt.Sprintf("%v", err),
-		})
-		badRequest(context, http.StatusBadRequest, "invalid request", errors)
-		return
+
+	context.MultipartForm()
+	for key, value := range context.Request.PostForm {
+		if key == "Username" {
+			loginObj.UserName = value[0]
+		} else if key == "password" {
+			loginObj.Password = value[0]
+		}
+	}
+
+	if loginObj.UserName == "" && loginObj.Password == "" {
+		if err := context.ShouldBindJSON(&loginObj); err != nil {
+			var errors []models.ErrorDetail = make([]models.ErrorDetail, 0, 1)
+			errors = append(errors, models.ErrorDetail{
+				ErrorType:    models.ErrorTypeValidation,
+				ErrorMessage: fmt.Sprintf("%v", err),
+			})
+			badRequest(context, http.StatusBadRequest, "invalid request", errors)
+			return
+		}
 	}
 
 	if err := loginObj.IsValid(); err != nil {

src/static/css/signin.css

@@ -0,0 +1,49 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background-color: #f5f5f5;
+}
+
+.form-signin {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: 0 auto;
+}
+.form-signin .checkbox {
+  font-weight: 400;
+}
+.form-signin .form-control {
+  position: relative;
+  box-sizing: border-box;
+  height: auto;
+  padding: 10px;
+  font-size: 16px;
+}
+.form-signin .form-control:focus {
+  z-index: 2;
+}
+.form-signin input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

src/templates/template.go

@@ -0,0 +1,31 @@
+package templates
+
+import (
+	"html/template"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+var tmpl *template.Template
+
+type todo struct {
+	Item string
+	Done bool
+}
+
+type PageData struct {
+	Title string
+	Todos []todo
+}
+
+func LoginPage(context *gin.Context) {
+
+	context.HTML(http.StatusOK, "login.html", nil)
+
+}
+func RegisterPage(context *gin.Context) {
+
+	context.HTML(http.StatusOK, "register.html", nil)
+
+}

src/templates/views/login.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <!-- Required meta tags -->
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Bootstrap CSS -->
+        <link href="css/bootstrap.min.css" rel="stylesheet">
+        <link href="css/signin.css" rel="stylesheet">
+      </head>
+      <body class="text-center">
+        <form action="/login" method="post" class="form-signin">
+          <h1 class="h3 mb-3 font-weight-normal">Giriş</h1>
+          <input type="inputUsername" name="Username" class="form-control" placeholder="Username" >
+          <input type="inputPassword" name="password" class="form-control mt-1" placeholder="Şifre" required="">
+          <!-- <div class="checkbox mb-3">
+            <label>
+              <input type="checkbox" value="remember-me"> Beni hatırla
+            </label>
+          </div>-->
+          <button class="btn btn-lg btn-primary btn-block mt-3" type="submit">Giriş</button>
+        </form>
+    </body>
+</html>

src/templates/views/register.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>Account Registration</h2><br>
+<ul>
+    <li>usernames must contain only letters or numbers</li>
+    <li>usernames must be longer than 4 characters but shorter than 51</li>
+    <li>passwords must contain a uppercase letter, lowercase letter, number, and special character</li>
+    <li>passwords must be greater than 11 characters but less than 60</li>
+</ul><br>
+
+<form action="/registerauth" method="POST">
+    <label for="username">Name:</label><br>
+    <input type="text" id="username" name="username"><br>
+    <label for="password">Password:</label><br>
+    <input type="password" id="password" name="password"><br><br>
+    <input type="submit" value="Submit">
+</form> 
+
+<br><br>
+{{if .}}
+    {{.}}
+{{end}}
+
+</body>
+</html>