Merge remote-tracking branch 'origin/trunk' into trunk

Author: adimoldovan

src/assets/icons/github.svg

@@ -1,14 +1,22 @@
 import './style.css';
 import icons from './icons';
+import { getBaseUrl } from './utils/utils';
 
 export function getHeader(routes) {
-	const header = document.createElement('header');
-	const img = document.createElement('img');
-	img.src = icons['puzzle.svg'];
-	img.alt = 'puzzle';
-	header.appendChild(img);
-	header.appendChild(getNav(routes));
-	return header;
+  const header = document.createElement('header');
+
+  const link = document.createElement('a');
+  link.href = getBaseUrl();
+
+  const img = document.createElement('img');
+  img.src = icons['puzzle.svg'];
+  img.alt = 'puzzle';
+  img.classList.add('logo');
+
+  link.appendChild(img);
+  header.appendChild(link);
+  header.appendChild(getNav(routes));
+  return header;
 }
 
 function getNav(routes) {

src/assets/icons/puzzle.svg

@@ -49,7 +49,6 @@ const routes = {
 		content: signup
 	},
 	signout: {
-		linkLabel: 'Sign out',
 		content: signout
 	}
 };

src/assets/icons/stub.svg

@@ -1,3 +1,5 @@
+import { getDefaultContainer } from '../utils/utils';
+
 const buttons = [
 	{
 		id: 'alert-trigger',
@@ -35,10 +37,8 @@ function showPrompt() {
 }
 
 export default function alerts() {
-	const container = document.createElement('div');
-	const title = document.createElement('h1');
-	title.textContent = 'Alerts';
-	container.appendChild(title);
+	const container = getDefaultContainer('Alerts');
+
 	for (const button of buttons) {
 		const buttonElement = document.createElement('button');
 		buttonElement.id = button.id;

src/header.js

@@ -1,3 +1,4 @@
 #cookie-value {
 	font-size: 2rem;
+	padding-top: 1vh;
 }

src/index.js

@@ -1,8 +1,8 @@
-import { getCookie, getValueFromCookie } from '../utils/utils';
+import { getCookie, getDefaultContainer, getValueFromCookie } from '../utils/utils';
 import './cookie.css';
 
-let cookieValue;
 const cookieName = 'gibberish';
+let cookieValue = getCookieValue();
 
 function randomString() {
 	let text = '';
@@ -15,67 +15,39 @@ function randomString() {
 function setCookie(value, expirationDays) {
 	let d = new Date();
 	d.setTime(d.getTime() + expirationDays * 24 * 60 * 60 * 1000);
-	let expires = 'expires=' + d.toUTCString();
-	let v = cookieName + '=' + value + '; ' + expires;
+	let v = `${cookieName}=${value};expires=${d.toUTCString()}`;
 	console.log('Setting cookie ' + v);
 	document.cookie = v;
 
-	cookieValue = getCookieValue();
+	document.getElementById('cookie-value').textContent = getCookieValue();
 }
 
 function getCookieValue() {
 	const cookieValue = getValueFromCookie(getCookie(cookieName));
 	return cookieValue ? cookieValue : '';
 }
 
-function update(shouldDelete) {
-	if (shouldDelete) {
-		setCookie('', -1);
-	} else {
-		setCookie(randomString(), 5);
-	}
-}
-
-export default function alerts() {
-	const container = document.createElement('div');
-
-	const title = document.createElement('h1');
-	title.textContent = 'The gibberish talking cookie';
-	container.appendChild(title);
-
-	const row = document.createElement('div');
-	row.classList.add('row');
-	container.appendChild(row);
-
-	const col = document.createElement('div');
-	col.classList.add('col', 'text-center');
-	row.appendChild(col);
-
-	const buttonGroupDiv = document.createElement('div');
-	col.appendChild(buttonGroupDiv);
-
-	const buttonGroup = document.createElement('div');
-	buttonGroup.classList.add('btn-group');
-	buttonGroupDiv.appendChild(buttonGroup);
+export default function main() {
+	const container = getDefaultContainer('The gibberish talking cookie');
 
 	const setButton = document.createElement('button');
-	setButton.classList.add('btn', 'btn-success');
+	setButton.classList.add('success');
 	setButton.id = 'set-cookie';
-	setButton.textContent = cookieValue ? 'Update' : 'Set' + ' the cookie';
-	setButton.addEventListener('click', () => update(false));
-	buttonGroup.appendChild(setButton);
+	setButton.textContent = 'Set the cookie';
+	setButton.addEventListener('click', () => setCookie(randomString(), 1));
+	container.appendChild(setButton);
 
 	const deleteButton = document.createElement('button');
-	deleteButton.classList.add('btn', 'btn-danger');
+	deleteButton.classList.add('danger');
 	deleteButton.id = 'delete-cookie';
 	deleteButton.textContent = 'Remove the cookie';
-	deleteButton.addEventListener('click', () => update(true));
-	buttonGroup.appendChild(deleteButton);
+	deleteButton.addEventListener('click', () => setCookie('', -1));
+	container.appendChild(deleteButton);
 
 	const cookieValueDiv = document.createElement('div');
-	col.appendChild(cookieValueDiv);
+	container.appendChild(cookieValueDiv);
 
-	const cookieValueSpan = document.createElement('span');
+	const cookieValueSpan = document.createElement('div');
 	cookieValueSpan.id = 'cookie-value';
 	cookieValueSpan.textContent = cookieValue ? cookieValue : '';
 	cookieValueDiv.appendChild(cookieValueSpan);

src/pages/alerts.js

@@ -8,12 +8,11 @@ export default function home() {
 	const title = document.createElement('h1');
 	title.textContent = `Welcome to web-stubs, ${userWithActiveSession ? userWithActiveSession : 'guest'}!`;
 
-	if (userWithActiveSession) {
-		const signOut = document.createElement('a');
-		signOut.textContent = 'Sign out';
-		signOut.href = '?page=signout';
-		title.appendChild(signOut);
-	}
+	const action = document.createElement('a');
+	action.classList.add('signInLink');
+	action.textContent = userWithActiveSession ? 'Sign out' : 'Sign in';
+	action.href = userWithActiveSession ? '?page=signout' : '?page=login';
+	title.appendChild(action);
 
 	container.appendChild(title);
 

src/pages/cookie.css

@@ -1,3 +1,7 @@
+.actionBtn {
+	margin-bottom: 200px;
+}
+
 .dropdown {
 	position: relative;
 	display: inline-block;
@@ -14,11 +18,11 @@
 .dropdown-content div {
 	cursor: pointer;
 	width: 100%;
-	padding: 6px 0 6px 0;
+	padding: 16px 0 6px 0;
 }
 
 .dropdown-content div:hover {
-	background-color: #ddd;
+	opacity: 0.8;
 }
 
 .dropdown:hover .dropdown-content {

src/pages/cookie.js

@@ -1,23 +1,21 @@
 import './hover.css';
+import { getDefaultContainer } from '../utils/utils';
 
-export default function hover() {
-	const container = document.createElement('div');
-
-	const title = document.createElement('h1');
-	title.textContent = 'Hover';
-	container.appendChild(title);
+export default function main() {
+	const container = getDefaultContainer('Hover');
 
 	const result = document.createElement('p');
 	result.id = 'result';
 	result.innerHTML = `<span class='clicked'></span>`;
 	container.appendChild(result);
 
 	const row = document.createElement('div');
-	row.classList.add('row', 'dropdown');
+	row.classList.add('dropdown');
 	container.appendChild(row);
 
 	const button = document.createElement('button');
 	button.textContent = 'Hover me';
+	row.classList.add('actionBtn');
 	row.appendChild(button);
 
 	const dropdownContent = document.createElement('div');

src/pages/forms.css

@@ -1,11 +1,8 @@
 import './interceptor.css';
+import { getDefaultContainer } from '../utils/utils';
 
 export default function interceptor() {
-	const container = document.createElement('div');
-
-	const title = document.createElement('h1');
-	title.textContent = 'Click intercepted';
-	container.appendChild(title);
+	const container = getDefaultContainer('Click intercepted');
 
 	const content = document.createElement('div');
 	content.classList.add('interceptor-content');

src/pages/home.js

@@ -1,6 +1,5 @@
-import './forms.css';
 import users from '../data/users.json';
-import { createSession, getActiveUserSession, goHome } from '../utils/utils.js';
+import { createSession, getActiveUserSession, getDefaultContainer, goHome } from '../utils/utils.js';
 
 function validCredentials(values) {
 	const user = users.filter((u) => u.username === values.user)[0];
@@ -13,11 +12,7 @@ export default function login() {
 		goHome();
 	}
 
-	const container = document.createElement('div');
-
-	const title = document.createElement('h1');
-	title.textContent = 'Sign in';
-	container.appendChild(title);
+	const container = getDefaultContainer('Sign in');
 
 	const description = document.createElement('p');
 	description.classList.add('page-description');
@@ -28,17 +23,9 @@ export default function login() {
 	registerLink.innerHTML = `<Col>No account yet? Register one <a href='?page=signup'>here</a></Col>`;
 	container.appendChild(registerLink);
 
-	const row = document.createElement('div');
-	row.classList.add('row');
-	container.appendChild(row);
-
-	const col = document.createElement('div');
-	col.classList.add('col', 'lg-4');
-	row.appendChild(col);
-
 	const formContainer = document.createElement('div');
 	formContainer.classList.add('form-container');
-	col.appendChild(formContainer);
+	container.appendChild(formContainer);
 
 	const form = document.createElement('form');
 	form.addEventListener('submit', handleSubmit);
@@ -54,59 +41,22 @@ export default function login() {
 	formGroupUser.classList.add('form-group');
 	form.appendChild(formGroupUser);
 
-	const labelUser = document.createElement('label');
-	labelUser.setAttribute('for', 'user');
-	labelUser.textContent = 'Username';
-	formGroupUser.appendChild(labelUser);
-
-	const inputGroupUser = document.createElement('div');
-	inputGroupUser.classList.add('input-group');
-	formGroupUser.appendChild(inputGroupUser);
-
-	const inputGroupTextUser = document.createElement('div');
-	inputGroupTextUser.classList.add('input-group-text');
-	inputGroupTextUser.innerHTML = '<i class="icon-person"></i>';
-	inputGroupUser.appendChild(inputGroupTextUser);
-
 	const inputUser = document.createElement('input');
 	inputUser.id = 'user';
-	inputGroupUser.appendChild(inputUser);
+	inputUser.placeholder = 'Enter your username';
+	formGroupUser.appendChild(inputUser);
 
 	const formGroupPass = document.createElement('div');
 	formGroupPass.classList.add('form-group');
 	form.appendChild(formGroupPass);
 
-	const labelPass = document.createElement('label');
-	labelPass.setAttribute('for', 'pass');
-	labelPass.textContent = 'Password';
-	formGroupPass.appendChild(labelPass);
-
-	const inputGroupPass = document.createElement('div');
-	inputGroupPass.classList.add('input-group');
-	formGroupPass.appendChild(inputGroupPass);
-
-	const inputGroupTextPass = document.createElement('div');
-	inputGroupTextPass.classList.add('input-group-text');
-	inputGroupTextPass.innerHTML = '<i class="icon-key"></i>';
-	inputGroupPass.appendChild(inputGroupTextPass);
-
 	const inputPass = document.createElement('input');
 	inputPass.id = 'pass';
 	inputPass.type = 'password';
-	inputGroupPass.appendChild(inputPass);
-
-	const formGroupRemember = document.createElement('div');
-	formGroupRemember.classList.add('form-group');
-	form.appendChild(formGroupRemember);
-
-	const inputRemember = document.createElement('input');
-	inputRemember.id = 'remember';
-	inputRemember.type = 'checkbox';
-	inputRemember.label = 'Remember me';
-	formGroupRemember.appendChild(inputRemember);
+	inputPass.placeholder = 'Enter your password';
+	formGroupPass.appendChild(inputPass);
 
 	const submitButton = document.createElement('button');
-	submitButton.classList.add('btn', 'btn-primary');
 	submitButton.textContent = 'Sign in';
 	form.appendChild(submitButton);