Merge pull request #6 from alik-r/avatar

Avatar

backend/pkg/api/handlers.go

@@ -16,7 +16,9 @@ import (
 
 type LoginRequest struct {
 	Username string `json:"username"`
+	Email    string `json:"email"`
 	Password string `json:"password"`
+	Avatar   string `json:"avatar,omitempty"`
 }
 
 type DepositRequest struct {
@@ -37,11 +39,27 @@ func Login(w http.ResponseWriter, r *http.Request) {
 
 	var user models.User
 	isRegister := false
-	err := db.DB.Where("username = ?", loginRequest.Username).First(&user).Error
+	query := db.DB.Where("email = ?", loginRequest.Email)
+	if loginRequest.Username != "" {
+		query = query.Or("username = ?", loginRequest.Username)
+	}
+
+	err := query.First(&user).Error
 	if err != nil {
 		if errors.Is(err, gorm.ErrRecordNotFound) {
+			if loginRequest.Username == "" || loginRequest.Email == "" {
+				http.Error(w, "Both username and email are required", http.StatusBadRequest)
+				return
+			}
+
+			if loginRequest.Avatar == "" {
+				loginRequest.Avatar = "images/avatars/avatar1.png"
+			}
+
 			user = models.User{
 				Username: loginRequest.Username,
+				Email:    loginRequest.Email,
+				Avatar:   loginRequest.Avatar,
 				Password: loginRequest.Password,
 				Balance:  1000,
 			}
@@ -68,7 +86,10 @@ func Login(w http.ResponseWriter, r *http.Request) {
 	}
 
 	w.Header().Set("Content-Type", "application/json")
-	json.NewEncoder(w).Encode(map[string]string{"token": token, "is_register": strconv.FormatBool(isRegister)})
+	json.NewEncoder(w).Encode(map[string]string{
+		"token":       token,
+		"is_register": strconv.FormatBool(isRegister),
+	})
 }
 
 func Deposit(w http.ResponseWriter, r *http.Request) {

backend/pkg/models/models.go

@@ -7,6 +7,8 @@ import (
 type User struct {
 	ID        uint      `gorm:"primaryKey" json:"id"`
 	Username  string    `gorm:"unique;not null" json:"username"`
+	Email     string    `gorm:"unique;not null" json:"email"`
+	Avatar    string    `json:"avatar"`
 	Password  string    `gorm:"not null" json:"-"`
 	Balance   int       `gorm:"default:0" json:"balance"`
 	CreatedAt time.Time `json:"-" gorm:"autoCreateTime"`

frontend/Dockerfile

@@ -1,7 +1,15 @@
 FROM nginx:1.21.3-alpine
 
 COPY nginx.conf /etc/nginx/nginx.conf
+
 COPY ./index.html /usr/share/nginx/html/index.html
+COPY ./register.html /usr/share/nginx/html/register.html
+COPY ./roulette.html /usr/share/nginx/html/roulette.html
+
 COPY ./style.css /usr/share/nginx/html/style.css
+COPY ./styles/ /usr/share/nginx/html/styles/
+COPY ./fonts/ /usr/share/nginx/html/fonts/
+COPY ./images/ /usr/share/nginx/html/images/
+COPY ./scripts/ /usr/share/nginx/html/scripts/
 
 EXPOSE 80

frontend/nginx.conf

@@ -22,11 +22,41 @@ http {
         }
 
         location /api/ {
-            proxy_pass http://backend:8080;  # Adjust the URL to match your backend service in Docker Compose
+            proxy_pass http://backend:8080;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
+
+            add_header 'Access-Control-Allow-Origin' '*';
+            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
+            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
+
+            if ($request_method = 'OPTIONS') {
+                add_header 'Access-Control-Allow-Origin' '*';
+                add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
+                add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
+                add_header 'Access-Control-Max-Age' 1728000;
+                add_header 'Content-Length' 0;
+                add_header 'Content-Type' 'text/plain charset=UTF-8';
+                return 204;
+            }
+        }
+
+        location /styles/ {
+            alias /usr/share/nginx/html/styles/;
+        }
+
+        location /fonts/ {
+            alias /usr/share/nginx/html/fonts/;
+        }
+
+        location /images/ {
+            alias /usr/share/nginx/html/images/;
+        }
+
+        location /scripts/ {
+            alias /usr/share/nginx/html/scripts/;
         }
     }
 }

frontend/register.html

@@ -6,7 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gabarito&display=swap">
     <link rel="stylesheet" href="styles/main_style.css">
-
+    <script src="https://unpkg.com/[email protected]"></script>
+    <script src="https://unpkg.com/[email protected]/dist/ext/json-enc.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
+    <script defer src="scripts/avatar.js"></script>
     <title>Register</title>
 </head>
 
@@ -15,42 +18,88 @@
         Don’t bet on <br>
         your soul
     </div>
-    <section class="container">
+
+    <section class="container" x-data="{ isRegister: true }">
         <div class="header">
-            <button class="tab" id="login-tab">Login</button>
-            <button class="tab-active" id="register-tab">Register</button>
+            <button class="tab" :class="{ 'tab-active': !isRegister }" @click="isRegister = false">Login</button>
+            <button class="tab" :class="{ 'tab-active': isRegister }" @click="isRegister = true">Register</button>
         </div>
-        <form id="register-form">
+
+        <form class="container-register" id="register-form" x-show="isRegister" hx-post="/api/login" hx-trigger="submit" hx-target="#response"
+            hx-ext='json-enc' hx-headers='{"Content-Type": "application/json"}'>
+
+            <div class="input-box">
+                <label>Username</label>
+                <input type="text" name="username" required>
+            </div>
             <div class="input-box">
                 <label>Email</label>
-                <input type="email" name="email-register">
+                <input type="email" name="email" required>
             </div>
             <div class="input-box">
                 <label>Password</label>
-                <input type="password" name = 'password-register'>
+                <input type="password" name="password" required>
             </div>
-            <div class="input-box">
-                <label>Avatar</label>
-                <div id="avatarContainer" class="avatar-grid">
 
-                </div>
+            <div class="avatar-grid" id="avatarContainer"></div>
+            <input type="hidden" name="avatar" id="selectedAvatar">
 
-            </div>
+            <button class="submit-btn" type="submit">Register</button>
         </form>
-        <form id="login-form" style="display: none;">
+
+        <form class="container-login" id="login-form" x-show="!isRegister" hx-post="/api/login" hx-trigger="submit" hx-include="#login-form"
+            hx-target="#response" hx-headers='{"Content-Type": "application/json"}' hx-ext='json-enc'>
             <div class="input-box">
                 <label>Email</label>
-                <input type="email" name="login-email">
+                <input type="email" name="email" required>
             </div>
             <div class="input-box">
                 <label>Password</label>
-                <input type="password" name="login-password">
+                <input type="password" name="password" required>
             </div>
+            <button class="submit-btn" type="submit">Login</button>
         </form>
+
+        <div id="response"></div>
     </section>
-    <script src="scripts/avatar.js"></script>
-    <script src="scripts/script.js"></script>
-
-</body>
 
-</html>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const avatarContainer = document.getElementById('avatarContainer');
+            const selectedAvatarInput = document.getElementById('selectedAvatar');
+
+            avatarContainer.addEventListener('click', function (event) {
+                if (event.target && event.target.tagName === 'IMG') {
+                    const avatarDiv = event.target.closest('.avatar-item');
+                    const avatarPath = event.target.src;
+
+                    document.querySelectorAll('.avatar-item').forEach(item => item.classList.remove('selected'));
+                    avatarDiv.classList.add('selected');
+
+                    selectedAvatarInput.value = avatarPath;
+                }
+            });
+        });
+    </script>
+    <script>
+        document.addEventListener("htmx:afterRequest", (event) => {
+            if (event.detail.successful) {
+                const response = JSON.parse(event.detail.xhr.responseText);
+                if (response.token) {
+                    localStorage.setItem("authToken", response.token);
+
+                    if (response.is_register === "true") {
+                        document.getElementById("response").innerText = "Registered successfully!";
+                    } else {
+                        document.getElementById("response").innerText = "Logged in successfully!";
+                    }
+
+                    location.href = "/roulette.html";
+                } else {
+                    document.getElementById("response").innerText = "Failed to login or register.";
+                }
+            }
+        });
+    </script>
+</body>
+</html>

frontend/scripts/avatar.js

@@ -1,36 +1,20 @@
 const avatarContainer = document.getElementById('avatarContainer');
 
-const avatars = ['images/avatars/avatar1.png',
-                'images/avatars/avatar2.png',
-                'images/avatars/avatar3.png',
-                'images/avatars/avatar4.png',
-                'images/avatars/avatar5.png',
-                'images/avatars/avatar6.png',
-                'images/avatars/avatar7.png',
-                'images/avatars/avatar8.png',
-                'images/avatars/avatar9.png',
-                'images/avatars/avatar10.png',
-                'images/avatars/avatar11.png',
-                'images/avatars/avatar12.png',
-                'images/avatars/avatar13.png',
-                'images/avatars/avatar14.png',
-                'images/avatars/avatar15.png',
+const avatars = [
+    'images/avatars/avatar1.png', 'images/avatars/avatar2.png', 'images/avatars/avatar3.png',
+    'images/avatars/avatar4.png', 'images/avatars/avatar5.png', 'images/avatars/avatar6.png',
+    'images/avatars/avatar7.png', 'images/avatars/avatar8.png', 'images/avatars/avatar9.png',
+    'images/avatars/avatar10.png', 'images/avatars/avatar11.png', 'images/avatars/avatar12.png',
+    'images/avatars/avatar13.png', 'images/avatars/avatar14.png', 'images/avatars/avatar15.png'
 ];
 
-function generateAvatars(){
-    avatars.forEach((avatars,index)=>{
+function generateAvatars() {
+    avatars.forEach((avatarPath, index) => {
         const avatarDiv = document.createElement('div');
         avatarDiv.classList.add('avatar-item');
-        avatarDiv.innerHTML = `<img src ="${avatars}" alt = Avatar ${index+1} />`;
-
-        avatarDiv.addEventListener('click',()=>{
-            document.querySelectorAll('.avatar-item').forEach(item => item.classList.remove('selected'));
-            avatarDiv.classList.add('selected');
-
-        });
+        avatarDiv.innerHTML = `<img src="${avatarPath}" alt="Avatar ${index + 1}" />`;
         avatarContainer.appendChild(avatarDiv);
-
     });
-
 }
+
 generateAvatars();

frontend/scripts/script.js

@@ -4,19 +4,10 @@ const loginForm = document.getElementById('login-form');
 const registerForm = document.getElementById('register-form');
 
 console.log("PENISI");
-loginTab.addEventListener('click',()=>{
-    loginForm.style.display = 'block';
-    registerForm.style.display = 'none';
-    loginTab.className = "tab-active";
-    registerTab.className = "tab";
-
-});
 
 registerTab.addEventListener('click',()=>{
     registerForm.style.display = 'block';
     loginForm.style.display = 'none';
     loginTab.className = "tab";
     registerTab.className = "tab-active";
-
-
 })