index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blitzchat</title>
    <!-- Required styles for MDC Web -->
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="./styles/fonts.css">
    <link rel="stylesheet" href="./styles/index.css">
    <link rel="stylesheet" href="./styles/mdc-tweaks.css">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="signedIn">
            <header id="header" class="no-select">
                <span id="name">Hello, {{displayName}}</span>
                <span id="chat-title">{{chatTitle}}</span>

                <button class="mdc-icon-button material-icons" id="triple-dots" v-on:click="openMoreMenu">
                    more_vert
                </button>

                <div class="mdc-menu-surface--anchor" id="more-menu-anchor">
                    <div id="more-menu" class="mdc-menu mdc-menu-surface">
                        <ul class="mdc-list" role="menu" aria-hidden="false" aria-orientation="vertical" tabindex="-1">
                            <li class="mdc-list-item" role="menuitem">
                                <span class="mdc-list-item__graphic material-icons">feedback</span>
                                <span class="mdc-list-item__text">Feedback</span>
                            </li>
                            
                            <li class="mdc-list-item" role="menuitem">
                                <span class="mdc-list-item__graphic material-icons">settings</span>
                                <span class="mdc-list-item__text">Settings</span>
                            </li>
                            
                            <li class="mdc-list-item" role="menuitem" v-on:click="logOut">
                                <span class="mdc-list-item__graphic material-icons">exit_to_app</span>
                                <span class="mdc-list-item__text">Log out</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>

            <nav id="contacts">
                <div id="add-contact" class="button bordered mdc-ripple-surface mdc-ripple-surface--primary"
                    v-on:click="openNewConversation">
                    <i class="material-icons">person_add</i>
                    <span>New Conversation</span>
                </div>
                <template v-for="contact in contacts">
                    <contact-item :contact="contact" />
                </template>
                <div v-if="contacts.size == 0" id="no-contacts" class="no-select">
                    <i class="material-icons">face</i><br>
                    <span>You have no conversations.</span>
                </div>
            </nav>

            <div id="chat-space" v-bind:class="{hidden: openedChats.length > 0}">
                <p id="chat-space-message">Tap a chat or drag one into me!</p>
            </div>

            <div id="chat-grid" ref="chatGrid"
                v-bind:class="{shown: openedChats.length > 0 , single: openedChats.length == 1 || (openedChats.length == 0)}">
                <template v-for="chat in openedChats">
                    <window-wrapper v-bind:window="chat"></window-wrapper>
                </template>

            </div>


        </div>

        <div id="sign-in" v-if="!signedIn">
            <h1>Blitzchat</h1>

            <button v-on:click="signIn" class="button primary" id="sign-in-button">SIGN IN</button>
        </div>


    </div>

    <div id="loading">loading Blitzchat...</div>

    <template id="contactItemTemplate">

        <div class="contact-item" v-on:click="open($event)">
            <img v-if="contact.photoURL" v-bind:src="contact.photoURL" v-bind:alt="contact.name" width="50" height="50"
                class="picture">
            <div v-else class="noimage picture">{{contact.people.length}}</div>
            <h3>{{computedName}}</h3>
            <p class="last-message">{{lastMessage}}</p>
            <div class="actions">
                <button class="button" title="Mark as Read"><i class="material-icons">done_all</i></button>
                <button class="button warn" title="Remove Conversation"><i class="material-icons">delete</i></button>
            </div>
        </div>

    </template>

    <template id="chatWindowTemplate">

        <div class="window mdc-elevation--z1" v-on:focus="focusHandler" tabindex="-1">
            <div class="header mdc-elevation--z2">
                <div class="actions">
                    <button class="button" v-on:click="fullscreenHandler">
                        <i class="material-icons">fullscreen</i>
                    </button>
                </div>
                <span class="title">{{computedName}}</span>
                <div class="actions right">
                    <button class="button close" v-on:click="close">
                        <i class="material-icons">close</i>
                    </button><button class="button">
                        <i class="material-icons">more_vert</i>
                    </button>
                </div>
            </div>
            <div class="chat" ref="messages">

                <div class="chat-beginning">
                    Your conversation with <b>{{computedName}}</b> starts here.
                </div>

                <template v-for="message in chat.messages">
                    <message :message="message"></message>
                </template>

            </div>
            <div class="send-message">
                <input class="input" v-bind:minlength="minimumLength" v-bind:maxlength="maximumLength"
                    v-model="messageText" v-on:keyup.enter="sendMessage" placeholder="Send a message..."
                    ref="sendMessageInput">
                <button class="button send" v-bind:class="{disabled: !sendButtonEnabled}" v-on:click="sendMessage">
                    <i class="material-icons">send</i>
                </button>
            </div>
        </div>

    </template>

    <template id="contactSearchResultTemplate">
        <div class="contact-search-result" v-bind:class="{red: red, hidden: dying}">

            <img v-bind:src="profile.photoURL" alt="profile.displayName" width="50" height="50" class="picture">

            <div>{{profile.displayName}}</div>

            <button v-on:mouseover="red = true" v-on:mouseleave="red = false" v-on:click="remove" class="button"><i
                    class="material-icons">cancel</i></button>
        </div>
    </template>

    <template id="newConversationFormTemplate">
        <div class="new-conversation-form window mdc-elevation--z1" tabindex="-1" v-on:focus="focusHandler">
            <button class="mdc-icon-button material-icons" v-on:click="previousPhase"
                v-bind:class="{disabled: form.phase == 0}">
                arrow_back
            </button><button class="mdc-icon-button material-icons" v-on:click="nextPhase"
                v-bind:class="{disabled: form.phase == 1}">
                arrow_forward
            </button><button class="mdc-icon-button material-icons" v-on:click="submit"
                v-if="form.phase == 1 && form.people.length > 0">
                done
            </button>

            <button class="mdc-icon-button material-icons close-new-conversation" v-on:click="close">close</button>

            <div class="new-conversation-phase" v-if="form.phase == 0">
                <div v-on:click="toggleGroup" class="active-glow"
                    style="user-select: none; margin-top: -18px; border-radius: 10px; text-align: center; height: calc(100% - 58px);">
                    <h2 class="blue"><i class="material-icons">person_add</i> <br> New Conversation</h2>
                    <span v-if="form.group">Create a <span class="blue">Group</span></span>
                    <span v-else>Create a <span class="blue">Contact</span></span>

                    <div class="input-hint">
                        <i class="material-icons">touch_app</i> <br>
                        <b>tap</b> to toggle
                    </div>


                </div>
            </div>

            <div class="new-conversation-phase" v-if="form.phase == 1">
                <h2>
                    <span v-if="form.group">
                        <i class="material-icons blue">group</i> <br>
                        <span class="blue">Group</span>
                        Members
                    </span>
                    <span v-else>
                        <i class="material-icons blue">contacts</i> <br>
                        <span class="blue">Contact </span>
                        Profile
                    </span>
                </h2>

                <div class="fill-window" style="margin-bottom: 0; padding-top: 0;">

                    <div v-if="form.group">
                        <p class="hint">Optional group name.</p>
                        <input type="text" maxlength="100" class="input" v-model="form.name" placeholder="Group Name"
                            autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                            v-on:keyup.enter="nextPhase">
                    </div>

                    <p class="hint">Type an email address to invite someone.</p>

                    <input type="email" class="input" placeholder="Search" autocomplete="off" autocorrect="off"
                        autocapitalize="off" spellcheck="false" v-model="form.contactSearch"
                        v-on:keyup.enter="addProfile" ref="contactSearch" />

                    <button class="button round search-profiles-button" v-on:click="addProfile">
                        <i class="material-icons" style="font-size: 20px;">add</i>
                    </button>

                </div>


                <div class="fill-window" style="padding: 0;">

                    <template v-for="person in form.people">
                        <contact-search-result :profile="person" />
                    </template>

                </div>


            </div>
        </div>
    </template>

    <template id="windowWrapperTemplate">
        <div class="window-wrapper">
            <chat-window v-if="window.type == TYPE.CHAT" :chat="window.content" :window="window"></chat-window>
            <new-conversation-form v-if="window.type == TYPE.NEWCHAT" :window="window" :form="window.content.form">
            </new-conversation-form>
        </div>
    </template>

    <template id="messageTemplate">
        <div class="message-wrapper" v-bind:class="{'sent-by-self': sentBySelf}">
            <img width="30" height="30" v-bind:src="message.user.photoURL" v-bind:alt="message.user.displayName">
            <div>
                <div class="message-body" v-html="urlify(message.message)"></div>
                <br>
                <p class="message-time">{{computedTime}}</p>
            </div>
        </div>
    </template>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
    <!-- Required MDC Web JavaScript library -->
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

    <script src="./scripts/keypress.js"></script>
    <script src="./scripts/vue.js"></script>
    <script src="./scripts/core.js" type="module"></script>
</body>

</html>