Light styling and cleanup of vanilla js version (#31)

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);