Compare commits
No commits in common. "feature-frontend-structure" and "main" have entirely different histories.
feature-fr
...
main
@ -1,25 +0,0 @@
|
|||||||
import Navbar from './components/Navbar.js';
|
|
||||||
import ChatBox from './components/ChatBox.js';
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const loginForm = document.getElementById('loginForm');
|
|
||||||
const dashboard = document.getElementById('dashboard');
|
|
||||||
const loginRegister = document.getElementById('login-register');
|
|
||||||
|
|
||||||
loginForm.addEventListener('submit', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
loginRegister.classList.add('d-none');
|
|
||||||
dashboard.classList.remove('d-none');
|
|
||||||
loadComponents();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('logoutButton').addEventListener('click', () => {
|
|
||||||
location.reload();
|
|
||||||
});
|
|
||||||
|
|
||||||
function loadComponents() {
|
|
||||||
const chatboxContainer = document.getElementById('chatbox');
|
|
||||||
const chatbox = new ChatBox();
|
|
||||||
chatboxContainer.appendChild(chatbox.render());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import Message from './Message.js';
|
|
||||||
|
|
||||||
export default class ChatBox {
|
|
||||||
render() {
|
|
||||||
const container = document.createElement('div');
|
|
||||||
container.classList.add('d-flex', 'flex-column', 'h-100');
|
|
||||||
|
|
||||||
container.innerHTML = `
|
|
||||||
<div id="messages" class="flex-grow-1 p-3 overflow-auto"></div>
|
|
||||||
<form id="messageForm" class="d-flex">
|
|
||||||
<input type="text" id="messageInput" class="form-control me-2" placeholder="Type your message..." required>
|
|
||||||
<button type="submit" class="btn btn-success">Send</button>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
container.querySelector('#messageForm').addEventListener('submit', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const messageText = container.querySelector('#messageInput').value;
|
|
||||||
const message = new Message(messageText, 'sent');
|
|
||||||
container.querySelector('#messages').appendChild(message.render());
|
|
||||||
container.querySelector('#messageInput').value = '';
|
|
||||||
});
|
|
||||||
|
|
||||||
return container;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
export default class Message {
|
|
||||||
constructor(text, type) {
|
|
||||||
this.text = text;
|
|
||||||
this.type = type;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const message = document.createElement('div');
|
|
||||||
message.className = 'message ' + (this.type === 'sent' ? 'sent' : '');
|
|
||||||
message.textContent = this.text;
|
|
||||||
return message;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
body {
|
|
||||||
background: linear-gradient(to right, #74ebd5, #acb6e5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="id">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
<title>Registrasi - ChatsApp</title>
|
|
||||||
</head>
|
|
||||||
<body class="bg-light">
|
|
||||||
<div class="container d-flex justify-content-center align-items-center min-vh-100">
|
|
||||||
<div class="card shadow" style="width: 400px;">
|
|
||||||
<div class="card-body">
|
|
||||||
<h2 class="card-title text-center">Registrasi</h2>
|
|
||||||
<form id="registerForm">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="username">Nama Pengguna</label>
|
|
||||||
<input type="text" class="form-control" id="username" name="username" required placeholder="Masukkan Nama Pengguna">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">Email</label>
|
|
||||||
<input type="email" class="form-control" id="email" name="email" required placeholder="Masukkan Email">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="password">Kata Sandi</label>
|
|
||||||
<input type="password" class="form-control" id="password" name="password" required placeholder="Masukkan Kata Sandi">
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary btn-block">Daftar</button>
|
|
||||||
</form>
|
|
||||||
<div class="text-center mt-3">
|
|
||||||
<small>Sudah punya akun? <a href="#">Masuk</a></small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
|
|
||||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
||||||
<script src="js/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
document.getElementById('registerForm').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const username = document.getElementById('username').value;
|
|
||||||
const email = document.getElementById('email').value;
|
|
||||||
const password = document.getElementById('password').value;
|
|
||||||
|
|
||||||
// Logika buat ngirim data ke server bisa ditambahin dimari
|
|
||||||
console.log('Registrasi:', { username, email, password });
|
|
||||||
alert('Registrasi berhasil!');
|
|
||||||
|
|
||||||
// Reset form setelah pengiriman
|
|
||||||
this.reset();
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user