register and login pages

12 files changed, 165 insertions, 84 deletions

diff --git a/controllers/home.go b/controllers/home.go
index 5e14b9e..6758a4b 100644
--- a/controllers/home.go
+++ b/controllers/home.go
@@ -6,7 +6,7 @@ import (
 	"github.com/gofiber/fiber/v2"
 )
 
-func HomeController(ctx *fiber.Ctx) error {
+func HomePageController(ctx *fiber.Ctx) error {
 	ctx.Locals("Title", "Home Page")
 	return shortcuts.Render(ctx, "home", nil)
 }
diff --git a/controllers/login.go b/controllers/login.go
index 1d6bc5e..1ea9caf 100644
--- a/controllers/login.go
+++ b/controllers/login.go
@@ -6,7 +6,7 @@ import (
 	"github.com/gofiber/fiber/v2"
 )
 
-func LoginController(ctx *fiber.Ctx) error {
+func LoginPageController(ctx *fiber.Ctx) error {
 	ctx.Locals("Title", "Login")
 	return shortcuts.Render(ctx, "login", nil)
 }
diff --git a/controllers/register.go b/controllers/register.go
index 3be4e64..d16db9d 100644
--- a/controllers/register.go
+++ b/controllers/register.go
@@ -6,7 +6,7 @@ import (
 	"github.com/gofiber/fiber/v2"
 )
 
-func RegisterController(ctx *fiber.Ctx) error {
+func RegisterPageController(ctx *fiber.Ctx) error {
 	ctx.Locals("Title", "Register")
 	return shortcuts.Render(ctx, "register", nil)
 }
diff --git a/router/routes.go b/router/routes.go
index a7acbde..4541419 100644
--- a/router/routes.go
+++ b/router/routes.go
@@ -8,15 +8,12 @@ import (
 

 func Initialize(router *fiber.App) {

 	main := router.Group("/")

-	main.Get("/", controllers.HomeController)

+	main.Get("/", controllers.HomePageController)

+	main.Get("/login", controllers.LoginPageController)

+	main.Get("/register", controllers.RegisterPageController)

 

 	posts := router.Group("/posts")

 	posts.Get("/", controllers.PostsController)

 

-	// router.Get("/posts", controllers.PostsController)

-	// router.Get("/register", controllers.RegisterController)

-	// router.Get("/login", controllers.LoginController)

-	// router.Get("/preferences", controllers.PreferencesController)

-

 	router.Use(controllers.NotFoundController)

 }

diff --git a/static/css/main.css b/static/css/main.css
index 3d52c8c..ceaa6bf 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -175,7 +175,9 @@ main {
     align-items: center;
 }
 
-input[type="text"] {
+input[type="text"],
+input[type="email"],
+input[type="password"] {
     background-color: #1a0033;
     border: 1px solid #9999ff;
     color: #ccccff;
@@ -183,7 +185,9 @@ input[type="text"] {
     width: 250px;
 }
 
-input[type="text"]:focus {
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus {
     border-color: #ff99cc;
     background-color: #260040;
     outline: none;
@@ -282,4 +286,68 @@ footer::before {
     display: block;
     color: #ffccee;
     margin-bottom: 10px;
+}
+
+.bordered-box {
+    border: 1px solid #4d4d80;
+    padding: 8px;
+}
+
+.bordered-box hr {
+    border: 1px solid #4d4d80;
+    margin: 8px 0;
+}
+
+
+
+.ibform {
+    background-color: #0d001a;
+    border: 1px solid #ff99cc;
+    padding: 8px;
+    margin: 16px auto;
+}
+
+.fgroup {
+    border: 1px dashed #4d4d80;
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+}
+
+.fg-main {
+    display: flex;
+    min-width: 128px;
+}
+
+.fg-sub {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.fg-sub small {
+    color: #ff99cc;
+    font-size: 11px;
+}
+
+.fg-main label {
+    color: #ffccff;
+    font-weight: bold;
+
+}
+
+.fg-sub input {
+    border-style: double;
+    border-width: 3px;
+    border-color: #9999ff;
+    width: 100%;
+}
+
+.fbtngrp {
+    margin: 8px 0 0 0;
+}
+
+.fbtngrp input {
+    padding: 4px 8px;
 }
\ No newline at end of file
diff --git a/static/images/1c8fcc330ea1e971440cd3bdb8993a81.webp b/static/images/1c8fcc330ea1e971440cd3bdb8993a81.webp
new file mode 100644
index 0000000..dae614a
--- /dev/null
+++ b/static/images/1c8fcc330ea1e971440cd3bdb8993a81.webp
diff --git a/static/images/25631a9833b39de4053f9eed8b2d3ae6.webp b/static/images/25631a9833b39de4053f9eed8b2d3ae6.webp
new file mode 100644
index 0000000..a7d93e4
--- /dev/null
+++ b/static/images/25631a9833b39de4053f9eed8b2d3ae6.webp
diff --git a/static/images/image_main.png b/static/images/original/image_main.png
index 80cf9cc..80cf9cc 100644
--- a/static/images/image_main.png
+++ b/static/images/original/image_main.png
diff --git a/static/images/original/welcome_login.png b/static/images/original/welcome_login.png
new file mode 100644
index 0000000..0f2b89a
--- /dev/null
+++ b/static/images/original/welcome_login.png
diff --git a/static/images/original/welcome_register.png b/static/images/original/welcome_register.png
new file mode 100644
index 0000000..60e82e2
--- /dev/null
+++ b/static/images/original/welcome_register.png
diff --git a/templates/login.django b/templates/login.django
index 9e5ab88..96a5e27 100644
--- a/templates/login.django
+++ b/templates/login.django
@@ -1,36 +1,40 @@
 {% extends 'layouts/main.django' %}
 
 {% block content %}
-  <h2>Login to {{ Appname }}</h2>
-
-  {% if Error %}
-    <div class="error">{{ Error }}</div>
-  {% endif %}
-
-  <form action="/login" method="POST">
-    <fieldset>
-      <legend>User Login</legend>
-
-      <div class="form-group">
-        <label for="username">Username or Email:</label>
-        <input type="text" id="username" name="username" required value="{{ Username }}" />
-      </div>
-
-      <div class="form-group">
-        <label for="password">Password:</label>
-        <input type="password" id="password" name="password" required />
-      </div>
-
-      <div class="form-actions">
-        <input type="submit" value="LOGIN" />
-      </div>
-    </fieldset>
-  </form>
-
-  <p>
-    Don't have an account? <a href="/register">Register here</a>
-  </p>
-  <p>
-    <a href="/forgot-password">Forgot your password?</a>
-  </p>
+  <div class="centered-main">
+    <div class="bordered-box">
+      <img src="/static/images/25631a9833b39de4053f9eed8b2d3ae6.webp" alt="Login Image" class="register-img" />
+      <h1>Login to {{ Appname }}</h1>
+      <p>Welcome back! Please enter your credentials to continue.</p>
+      {% if Error %}
+        <div class="error">{{ Error }}</div>
+      {% endif %}
+      <form action="/login" method="POST" class="ibform">
+        <div class="fgroup">
+          <div class="fg-main">
+            <label for="username">Username</label>
+          </div>
+          <div class="fg-sub">
+            <input type="text" id="username" name="username" required value="{{ Username }}" minlength="3" maxlength="72" autocomplete="username" pattern="[a-zA-Z0-9_-]+" />
+            <small>3-72 characters, letters, numbers, underscores, and hyphens only</small>
+          </div>
+        </div>
+        <div class="fgroup">
+          <div class="fg-main">
+            <label for="password">Password</label>
+          </div>
+          <div class="fg-sub">
+            <input type="password" id="password" name="password" required minlength="8" />
+          </div>
+        </div>
+        <div class="fbtngrp">
+          <input type="submit" value="Login" />
+          <input type="button" value="Reset" />
+        </div>
+      </form>
+      <p class="text-center">
+        Don't have an account? <a href="/register">Register here</a>.
+      </p>
+    </div>
+  </div>
 {% endblock %}
diff --git a/templates/register.django b/templates/register.django
index 2d0e8b2..39ce985 100644
--- a/templates/register.django
+++ b/templates/register.django
@@ -1,45 +1,57 @@
 {% extends 'layouts/main.django' %}
 
 {% block content %}
-  <h2>Join {{ Appname }}</h2>
-
-  {% if Error %}
-    <div class="error">{{ Error }}</div>
-  {% endif %}
-
-  <form action="/register" method="POST">
-    <fieldset>
-      <legend>Create Account</legend>
-
-      <div class="form-group">
-        <label for="username">Username</label>
-        <input type="text" id="username" name="username" required value="{{ Username }}" minlength="3" maxlength="72" pattern="[a-zA-Z0-9_-]+" />
-        <small>3-72 characters, letters, numbers, underscores, and hyphens only</small>
-      </div>
-
-      <div class="form-group">
-        <label for="email">Email Address</label>
-        <input type="email" id="email" name="email" required value="{{ Email }}" />
-      </div>
-
-      <div class="form-group">
-        <label for="password">Password</label>
-        <input type="password" id="password" name="password" required minlength="8" />
-        <small>Minimum 8 characters</small>
-      </div>
-
-      <div class="form-group">
-        <label for="confirm_password">Confirm Password</label>
-        <input type="password" id="confirm_password" name="confirm_password" required />
-      </div>
-
-      <div class="form-actions">
-        <button type="submit">CREATE ACCOUNT</button>
-      </div>
-    </fieldset>
-  </form>
-
-  <p>
-    Already have an account? <a href="/login">Login here</a>
-  </p>
+  <div class="centered-main">
+    <div class="bordered-box">
+      <img src="/static/images/1c8fcc330ea1e971440cd3bdb8993a81.webp" alt="Register Image" class="register-img" />
+      <h1>Join {{ Appname }}</h1>
+      <p>Create your account to start sharing and exploring images!</p>
+      {% if Error %}
+        <div class="error">{{ Error }}</div>
+      {% endif %}
+      <form action="/register" method="POST" class="ibform">
+        <div class="fgroup">
+          <div class="fg-main">
+            <label for="username">Username</label>
+          </div>
+          <div class="fg-sub">
+            <input type="text" id="username" name="username" required value="{{ Username }}" minlength="3" maxlength="72" autocomplete="username" pattern="[a-zA-Z0-9_-]+" />
+            <small>3-72 characters, letters, numbers, underscores, and hyphens only</small>
+          </div>
+        </div>
+        <div class="fgroup">
+          <div class="fg-main">
+            <label for="email">Email Address</label>
+          </div>
+          <div class="fg-sub">
+            <input type="email" id="email" name="email" required value="{{ Email }}" />
+          </div>
+        </div>
+        <div class="fgroup">
+          <div class="fg-main">
+            <label for="password">Password</label>
+          </div>
+          <div class="fg-sub">
+            <input type="password" id="password" name="password" required minlength="8" />
+            <small>Minimum 8 characters</small>
+          </div>
+        </div>
+        <div class="fgroup">
+          <div class="fg-main">
+            <label for="confirm_password">Confirm Password</label>
+          </div>
+          <div class="fg-sub">
+            <input type="password" id="confirm_password" name="confirm_password" required />
+          </div>
+        </div>
+        <div class="fbtngrp">
+          <input type="submit" value="Create Account" />
+          <input type="button" value="Clear" onclick="this.form.reset();" />
+        </div>
+      </form>
+      <p>
+        Already have an account? <a href="/login">Login here</a>
+      </p>
+    </div>
+  </div>
 {% endblock %}