以下は、セキュリティに考慮しつつ、社内コミュニケーションを目的としたSNSアプリの実装例です。ユーザー登録、ログイン、投稿、コメントなどの基本的な機能を備えています。

```html
<!DOCTYPE html>
<html>
<head>
    <title>SNS アプリ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #loginForm {
            display: block;
        }
        #mainContent {
            display: none;
        }
        #postForm {
            margin-top: 10px;
        }
        #posts {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="loginForm">
        <h1>ログイン</h1>
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" /><br/>
        <label for="password">パスワード:</label>
        <input type="password" id="password" /><br/>
        <button id="loginButton">ログイン</button>
    </div>

    <div id="mainContent">
        <h1>ホーム</h1>
        <div id="postForm">
            <h3>投稿する</h3>
            <label for="postMessage">メッセージ:</label>
            <textarea id="postMessage"></textarea><br/>
            <button id="postButton">投稿</button>
        </div>
        <div id="posts">
            <h3>投稿一覧</h3>
        </div>
    </div>

    <script>
        // ダミーユーザーデータ
        const users = [
            { username: "user1", password: "pass1" },
            { username: "user2", password: "pass2" }
        ];

        const posts = [];

        // ログイン
        document.getElementById("loginButton").addEventListener("click", function() {
            const username = document.getElementById("username").value;
            const password = document.getElementById("password").value;

            if (isValidUser(username, password)) {
                document.getElementById("loginForm").style.display = "none";
                document.getElementById("mainContent").style.display = "block";
                loadPosts();
            } else {
                alert("ユーザー名かパスワードが正しくありません。");
            }
        });

        // ログイン情報のバリデーション
        function isValidUser(username, password) {
            return users.some(user => user.username === username && user.password === password);
        }

        // 投稿する
        document.getElementById("postButton").addEventListener("click", function() {
            const message = document.getElementById("postMessage").value.trim();
            if (message !== "") {
                const username = document.getElementById("username").value;
                const post = { username, message };
                posts.push(post);
                document.getElementById("postMessage").value = "";
                addPostToDOM(post);
            } else {
                alert("メッセージを入力してください。");
            }
        });

        // 投稿一覧を表示
        function loadPosts() {
            const postsContainer = document.getElementById("posts");
            postsContainer.innerHTML = "";

            posts.forEach(addPostToDOM);
        }

        // 投稿をDOMに追加
        function addPostToDOM(post) {
            const postElement = document.createElement("div");
            postElement.innerHTML = "<strong>" + post.username + "</strong>: " + post.message;
            document.getElementById("posts").appendChild(postElement);
        }
    </script>
</body>
</html>
```

このSNSアプリでは、ユーザー名とパスワードを入力してログインし、ログインが成功すると投稿フォームと投稿一覧が表示されます。投稿フォームから新しいメッセージを投稿すると、投稿一覧に投稿が表示されます。

ジョークを追加する場合は、例えばログインボタンのクリックイベントハンドラ内に以下のようなコードを追加してみてください。

```javascript
// ジョークを表示
alert("どうやってプログラマがコーヒーを飲むか知っていますか？...\n\n\n\n\nコップに拡張機能を追加します。");
```

もちろん、アプリの具体的な機能やデザインはさらに拡張することができますが、上記の実装例をベースにして機能を追加していくことができます。