Skip to content

Join channel modal with Key #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
klexas merged 1 commit into from
Jan 29, 2025
Merged

Join channel modal with Key #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,17 @@
</head>

<body class="bg-gray-800 text-white font-sans">

<!-- Popup modal to join a Channel -->
<div id="join-channel-popup" class="fixed top-0 left-0 right-0 bottom-0 bg-gray-900 bg-opacity-50 flex justify-center items-center hidden" id="joinChannelModal">
<div id="join-channel-popup" class="fixed top-0 left-0 right-0 bottom-0 bg-gray-900 bg-opacity-50 flex justify-center items-center channel-open hidden" id="joinChannelModal">
<div class="bg-gray-800 p-8 rounded-lg max-w-lg">
<h2 class="text-xl mb
-4">Join a channel</h2>
<h2 class="text-xl mb-4">Join a channel</h2>
<input type="text" id="channel" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-4" placeholder="Channel name" />
<button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg mt-4" id="joinChannel">Join</button>
<input type="text" id="channel-key" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-4" placeholder="Key (Optional)" />
<div class="flex items addEventListener-center mt-4">
<input type="checkbox" id="isDM" class="mr-2" />
<label for="isDM">Direct Message</label>
</div>
<button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg mt-4" id="join_channel">Join</button>
</div>
</div>

Expand All @@ -46,6 +49,8 @@ <h1 class="text-xl mb-8">IRC</h1>
<!-- Top bar with connected channels -->
<div class="logged-in fixed top-0 left-0 right-0 bg-gray-900 border-b border-gray-600 p-4 flex justify-between items-center hidden">
<div class="flex space-x-4" id="channels"></div>
<!-- Join Channel button -->
<button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg" onclick="toggleOpenChannel()">Join Channel</button>
<button class="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg" id="disconnect">Disconnect</button>
</div>

Expand Down
21 changes: 17 additions & 4 deletions public/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,13 @@ $(document).ready(function () {
});

$('#join_channel').click(()=>{
var channel = $('#channel').val();
var key = $('#key').val();
const channel = $('#channel').val();
const key = $('#channel-key').val();
const isDm = $('#isDm').val();

$('#channel').val('');
$('#key').val('');
joinChannel(channel, key);
$('#channel-key').val('');
joinChannel(channel, key, isDm);
});
});

Expand Down Expand Up @@ -194,6 +196,16 @@ function toggleLoggedIn() {
$('.logged-out').addClass('hidden');
}

function toggleOpenChannel() {
if ($('.channel-open').hasClass('hidden')) {
$('.channel-open').removeClass('hidden');
$('.channel-closed').addClass('hidden');
} else {
$('.channel-open').addClass('hidden');
$('.channel-closed').removeClass('hidden');
}
}

function notifyChannel(channel) {
var notifyChannel = channel;
channel[0] == '#' ? notifyChannel = channel.substring(1) : notifyChannel = channel;
Expand Down Expand Up @@ -242,6 +254,7 @@ function cleanChannelCss(channel){
};

function joinChannel(channel, key, isDm) {
console.log(isDm);
axios.post('http://127.0.0.1:3000/channel/join', {
channel: channel,
key: key
Expand Down