This is the CodeU starter project. Click the links above to login and visit your page. 34 | You can post messages on your page, and you can visit other user pages if you have 35 | their URL.
36 |This is your code now! Feel free to make changes, and don't be afraid to get creative! 37 | You could start by modifying this page to tell the world more about your team.
38 | 39 | 40 | -------------------------------------------------------------------------------- /src/main/webapp/js/navigation-loader.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2019 Google Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** 18 | * Adds a login or logout link to the page, depending on whether the user is 19 | * already logged in. 20 | */ 21 | function addLoginOrLogoutLinkToNavigation() { 22 | const navigationElement = document.getElementById('navigation'); 23 | if (!navigationElement) { 24 | console.warn('Navigation element not found!'); 25 | return; 26 | } 27 | 28 | fetch('/login-status') 29 | .then((response) => { 30 | return response.json(); 31 | }) 32 | .then((loginStatus) => { 33 | if (loginStatus.isLoggedIn) { 34 | navigationElement.appendChild(createListItem(createLink( 35 | '/user-page.html?user=' + loginStatus.username, 'Your Page'))); 36 | 37 | navigationElement.appendChild( 38 | createListItem(createLink('/logout', 'Logout'))); 39 | } else { 40 | navigationElement.appendChild( 41 | createListItem(createLink('/login', 'Login'))); 42 | } 43 | }); 44 | } 45 | 46 | /** 47 | * Creates an li element. 48 | * @param {Element} childElement 49 | * @return {Element} li element 50 | */ 51 | function createListItem(childElement) { 52 | const listItemElement = document.createElement('li'); 53 | listItemElement.appendChild(childElement); 54 | return listItemElement; 55 | } 56 | 57 | /** 58 | * Creates an anchor element. 59 | * @param {string} url 60 | * @param {string} text 61 | * @return {Element} Anchor element 62 | */ 63 | function createLink(url, text) { 64 | const linkElement = document.createElement('a'); 65 | linkElement.appendChild(document.createTextNode(text)); 66 | linkElement.href = url; 67 | return linkElement; 68 | } 69 | -------------------------------------------------------------------------------- /src/main/webapp/js/user-page-loader.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2019 Google Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | // Get ?user=XYZ parameter value 18 | const urlParams = new URLSearchParams(window.location.search); 19 | const parameterUsername = urlParams.get('user'); 20 | 21 | // URL must include ?user=XYZ parameter. If not, redirect to homepage. 22 | if (!parameterUsername) { 23 | window.location.replace('/'); 24 | } 25 | 26 | /** Sets the page title based on the URL parameter username. */ 27 | function setPageTitle() { 28 | document.getElementById('page-title').innerText = parameterUsername; 29 | document.title = parameterUsername + ' - User Page'; 30 | } 31 | 32 | /** 33 | * Shows the message form if the user is logged in and viewing their own page. 34 | */ 35 | function showMessageFormIfViewingSelf() { 36 | fetch('/login-status') 37 | .then((response) => { 38 | return response.json(); 39 | }) 40 | .then((loginStatus) => { 41 | if (loginStatus.isLoggedIn && 42 | loginStatus.username == parameterUsername) { 43 | const messageForm = document.getElementById('message-form'); 44 | messageForm.classList.remove('hidden'); 45 | } 46 | }); 47 | } 48 | 49 | /** Fetches messages and add them to the page. */ 50 | function fetchMessages() { 51 | const url = '/messages?user=' + parameterUsername; 52 | fetch(url) 53 | .then((response) => { 54 | return response.json(); 55 | }) 56 | .then((messages) => { 57 | const messagesContainer = document.getElementById('message-container'); 58 | if (messages.length == 0) { 59 | messagesContainer.innerHTML = 'This user has no posts yet.
'; 60 | } else { 61 | messagesContainer.innerHTML = ''; 62 | } 63 | messages.forEach((message) => { 64 | const messageDiv = buildMessageDiv(message); 65 | messagesContainer.appendChild(messageDiv); 66 | }); 67 | }); 68 | } 69 | 70 | /** 71 | * Builds an element that displays the message. 72 | * @param {Message} message 73 | * @return {Element} 74 | */ 75 | function buildMessageDiv(message) { 76 | const headerDiv = document.createElement('div'); 77 | headerDiv.classList.add('message-header'); 78 | headerDiv.appendChild(document.createTextNode( 79 | message.user + ' - ' + new Date(message.timestamp))); 80 | 81 | const bodyDiv = document.createElement('div'); 82 | bodyDiv.classList.add('message-body'); 83 | bodyDiv.innerHTML = message.text; 84 | 85 | const messageDiv = document.createElement('div'); 86 | messageDiv.classList.add('message-div'); 87 | messageDiv.appendChild(headerDiv); 88 | messageDiv.appendChild(bodyDiv); 89 | 90 | return messageDiv; 91 | } 92 | 93 | /** Fetches data and populates the UI of the page. */ 94 | function buildUI() { 95 | setPageTitle(); 96 | showMessageFormIfViewingSelf(); 97 | fetchMessages(); 98 | } -------------------------------------------------------------------------------- /src/main/webapp/user-page.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |