Galane-dev · Galane-dev · Feb 10, 2026 · Feb 10, 2026 · Feb 10, 2026 · Feb 10, 2026
diff --git a/assets/images/icons/add.png b/assets/images/icons/add.png
diff --git a/assets/images/icons/image.png b/assets/images/icons/image.png
diff --git a/assets/images/icons/profile.png b/assets/images/icons/profile.png
diff --git a/assets/images/icons/search.png b/assets/images/icons/search.png
diff --git a/assets/images/icons/send.png b/assets/images/icons/send.png
diff --git a/assets/images/icons/user.png b/assets/images/icons/user.png
diff --git a/assets/images/logo.png b/assets/images/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Authenticate | LocalChat</title>
+
+        <link href="./styles/landing-page.css" rel="stylesheet">
+    </head>
+    <body>
+        <main>
+            <article>
+                <div  id="landing-message">
+                    <img id="logo-image" src="./assets/images/logo.png" alt="logo image">
+                    <h1 id="welcome-heading">Welcome Back...</h1>
+                    <p id="welcome-message">LocalChat is a local chat app<br>
+                        Your data is stored securely in your own <br>computer, no one but you will be able to access the data</p>
+                </div>
+            </article>
+
+            <!--The login form on the side-->
+            <aside>
+                <section  id="landing-form">
+                    <h3 id="text-logo">Local<span>Chat</span></h3>
+                    <form>
+                        <input id="username-input" name="username-input" type="text" placeholder="Enter username">
+                        <input id="password-input" name="password-input" type="password" placeholder="Enter password">
+                        <button id="submit-button" name="submit-button" type="button">Sign In</button>
+                    </form>
+
+                    <p id="toggle-question">Don't have an account?</p>
+                    <p id="toggle-action">Sign Up</p>
+                </section>
+
+            </aside>
+        </main>
+
+        <footer></footer>
+
+
+
+
+        <script type="module" src="./js/landing-page.js"></script>
+    </body>
+</html>
diff --git a/js/landing-page.js b/js/landing-page.js
@@ -0,0 +1,86 @@
+import LocalStorageService from "./services/local-storage.js";
+import SessionManager from "./services/session-manager.js";
+import User from "./models/user.js";
+
+
+console.log(LocalStorageService.getUsers());
+let isSignUp=true;
+const defaultView=document.getElementById('toggle-action');
+let authButton=document.getElementById('submit-button');
+
+
+function toggleView(){
+    let heading=document.getElementById('welcome-heading');
+    let toggleQuestion=document.getElementById('toggle-question');
+    let toggleView=document.getElementById('toggle-action');
+    let toggleMessage=document.getElementById('welcome-message');
+    let submitButton=document.getElementById('submit-button');
+
+
+
+    if(isSignUp){
+        heading.textContent='Hey newbie...';
+        toggleQuestion.textContent='Already have an account?';
+        toggleMessage.innerHTML='LocalChat is a local chat app.<br>Your data is stored securely in your own <br>computer, no one but you will be able to access the data.';
+        toggleView.textContent="Sign In";
+        submitButton.textContent='Sign Up';
+
+    }
+    else{
+        heading.textContent='Welcome Back...';
+        toggleQuestion.textContent='Don’t have an account?';
+        toggleMessage.innerHTML='LocalChat is a local chat app.<br>Your data is stored securely in your own <br>computer, no one but you will be able to access the data.';
+        toggleView.textContent='Sign Up';
+        submitButton.textContent='Sign In';
+
+    }
+
+    isSignUp=!isSignUp;
+    console.log('done');
+}
+
+
+function authenticate(){
+    let username=document.getElementById('username-input').value;
+    let password=document.getElementById('password-input').value;
+    if(!isSignUp){
+        if(User.isUserNameUnique(username)){
+            //Create an account
+            LocalStorageService.createUser(username,password);
+            console.log(LocalStorageService.getUsers());
+        }
+        else{
+            alert('Please enter a new username, make it unique');
+            return;
+        }
+    }
+    //Login
+    let user=SessionManager.login(username,password);
+    console.log(user);
+    if(user){
+        console.log('logged in as '+ user.username);
+        //Navigate to the main page
+        window.location.replace('./pages/main.html');
+    }
+    else{
+        alert('Login failed, ensure you have entered correct credentials');
+        return;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+function main(){
+    console.log('Main method test');
+    defaultView.addEventListener('click',()=>toggleView());
+    authButton.addEventListener('click', ()=>authenticate());
+}
+
+main();