- Moving all human-facing strings to L10n class

- Better time and date formatting
- Cancel link on edit
- Form styling

htdocs/index.php

@@ -58,7 +58,11 @@ define('BASE_URL', 'https://example.com/path/index.php');
 /// For detecting database migrations.
 define('SCHEMA_VERSION', '20230107');
 define('RECENT_POSTS_PER_PAGE', 50);
-define('SESSION_COOKIE_TTL_SECONDS', 14 * 24 * 60 * 60); // 14 days
+define('SECOND', 1);
+define('MINUTE', 60 * SECOND);
+define('HOUR', 60 * MINUTE);
+define('DAY', 24 * HOUR);
+define('SESSION_COOKIE_TTL_SECONDS', 14 * DAY);
 define('SESSION_COOKIE_NAME', 'journal_token');
 /// If a new post matches an existing post created less than this many seconds
 /// ago, the new duplicate post will be ignored.
@@ -94,6 +98,163 @@ function trace(string $message): void {
 	// error_log($message, 0);
 }
 
+// -- Localization ----------------------------------------
+
+class L10n {
+	// General
+	public const page_title = "Microjournal";
+	public const mobile_app_icon_title = "μJournal";
+
+	// Nav menu
+	public const hamburger_menu_symbol = "☰";
+	public const menu_search = "Search";
+	public const menu_log_out = "Log out";
+
+	// Create post form
+	public const post_form_placeholder = "Your journal post here…";
+	public const post_form_submit_post = "Post";
+	public const post_form_submit_update = "Update";
+	public const post_form_cancel = "Cancel";
+
+	// Previous posts
+	public const posts_previous_page = "Previous";
+	public const posts_next_page = "Next";
+	public static function post_created(int $timestamp): string {
+		$date = self::date_string($timestamp);
+		$date_full = self::date_string($timestamp, full: true);
+		$date_iso = self::date_string($timestamp, iso: true);
+		return "Posted <time datetime=\"{$date_iso}\" title=\"{$date_full}\">{$date}</time>";
+	}
+	public static function post_updated(int $timestamp): string {
+		$date = self::date_string($timestamp);
+		$date_full = self::date_string($timestamp, full: true);
+		$date_iso = self::date_string($timestamp, iso: true);
+		return "(updated <time datetime=\"{$date_iso}\" title=\"{$date_full}\">{$date}</time>)";
+	}
+	public const post_menu = "actions";
+	public const post_menu_edit = "Edit";
+	public const post_menu_delete = "Delete";
+
+	// Search form
+	public const search_submit = "Search";
+	public const search_cancel = "Cancel";
+
+	// Login form
+	public const login_username_label = "Username:";
+	public const login_password_label = "Password:";
+	public const login_submit = "Log in";
+
+	// Create account form
+	public const create_prompt = "Journal is not setup. Please create a " .
+		"username and password to secure your data.";
+	public const create_username_label = "Username:";
+	public const create_password_label = "Password:";
+	public const create_time_zone_label = "Time zone:";
+	public const create_submit = "Create account";
+
+	// Error messages
+	public const error_login_incorrect = "Login incorrect.";
+	public const error_bad_sql_datatype = "Bad datatype in sqlite statement.";
+	public const error_not_configured = "Journal not configured. Open " .
+		"index.php in an editor and configure the variables at the top of " .
+		"the file.";
+	public const error_database_not_found = "Database file cannot be found. " .
+		"Check configuration at the top of index.php.";
+	public static function error_database_not_writable(
+		string $user, string $group): string {
+		return "Database file exists but is not writable by web server " .
+			"user '{$user}' (user group '{$group}'). Check file permissions.";
+	}
+	public const error_no_schema_version = "No schema version in database. " .
+		"Corrupted?";
+	public static function error_unexpected_schema_version(
+		string $schema_version): string {
+		return "Unexpected schema version {$schema_version}.";
+	}
+	public const error_database_web_accessible = "Journal database is " .
+		"accessible from the web! Either alter your .htaccess permissions " .
+		"or rename the database with a UUID filename.";
+	public static function error_parameter_required(string $name): string {
+		return "Parameter {$name} is required.";
+	}
+	public static function error_parameter_empty(string $name): string {
+		return "Parameter {$name} cannot be empty.";
+	}
+	public static function error_parameter_integer(string $name): string {
+		return "Parameter {$name} must be integer.";
+	}
+	public const error_invalid_username = "Invalid username. Can be letters, " .
+		"numbers, underscores, and dashes, or an email address.";
+	public const error_sign_in_to_post = "Please sign in to post.";
+	public const error_sign_in_to_edit = "Please sign in to edit.";
+
+	public static function date_string(int $timestamp, bool $full=false, bool $iso=false): string {
+		static $fmtTime = null;
+		static $fmtDayOfWeek = null;
+		static $fmtMonthDay = null;
+		static $fmtLong = null;
+		static $fmtFull = null;
+		static $fmtIso = null;
+		$locale_code = Locale::acceptFromHttp($_SERVER['HTTP_ACCEPT_LANGUAGE']) ?: 'en-US';
+		$timezone = User::$current->timezone;
+		if (!$fmtTime) {
+			$fmtTime = IntlDateFormatter::create(
+				locale: $locale_code,
+				dateType: IntlDateFormatter::NONE,
+				timeType: IntlDateFormatter::MEDIUM,
+				timezone: $timezone);
+			$fmtDayOfWeek = IntlDateFormatter::create(
+				locale: $locale_code,
+				dateType: IntlDateFormatter::FULL,
+				timeType: IntlDateFormatter::NONE,
+				timezone: $timezone,
+				pattern: "cccc");
+			$fmtMonthDay = IntlDateFormatter::create(
+				locale: $locale_code,
+				dateType: IntlDateFormatter::MEDIUM,
+				timeType: IntlDateFormatter::NONE,
+				timezone: $timezone,
+				pattern: "MMMM d");
+			$fmtLong = IntlDateFormatter::create(
+				locale: $locale_code,
+				dateType: IntlDateFormatter::MEDIUM,
+				timeType: IntlDateFormatter::MEDIUM,
+				timezone: $timezone);
+			$fmtFull = IntlDateFormatter::create(
+				locale: $locale_code,
+				dateType: IntlDateFormatter::FULL,
+				timeType: IntlDateFormatter::FULL,
+				timezone: $timezone);
+			$fmtIso = IntlDateFormatter::create(
+				locale: $locale_code,
+				dateType: IntlDateFormatter::FULL,
+				timeType: IntlDateFormatter::FULL,
+				timezone: $timezone,
+				pattern: "yyyy-MM-dd'T'HH:mm:ssxxx");
+		}
+		$now = time();
+		if ($full) {
+			return $fmtFull->format($timestamp);
+		}
+		if ($iso) {
+			return $fmtIso->format($timestamp);
+		}
+		if ($timestamp > $now) { // future
+			return $fmtLong->format($timestamp);
+		}
+		if ($now - $timestamp < 12 * HOUR) {
+			return $fmtTime->format($timestamp);
+		}
+		if ($now - $timestamp < 4 * DAY) {
+			return $fmtDayOfWeek->format($timestamp) . ', ' . $time->format($timestamp);
+		}
+		if ($now - $timestamp < 180 * DAY) {
+			return $fmtMonthDay->format($timestamp) . ', ' . $time->format($timestamp);
+		}
+		return $fmtLong->format($timestamp);
+	}
+}
+
 // -- Data classes ----------------------------------------
 
 /// Represents a journal post.
@@ -134,8 +295,13 @@ class Post {
 			trace("Same post already created recently. Skipping.");
 			return;
 		}
-		$sql = 'INSERT INTO posts (body, author_id, created) VALUES (:body, :author_id, :created);';
-		$args = array(':body' => $body, ':author_id' => $author_id, ':created' => $created);
+		$sql = 'INSERT INTO posts (body, author_id, created) VALUES ' .
+			'(:body, :author_id, :created);';
+		$args = array(
+			':body' => $body,
+			':author_id' => $author_id,
+			':created' => $created,
+		);
 		Database::query($sql, $args);
 	}
 
@@ -149,7 +315,8 @@ class Post {
 			string $body,
 			int $author_id,
 			int $created): bool {
-		$sql = 'SELECT * FROM posts WHERE body=:body AND author_id=:author_id AND ABS(created - :created) < :seconds LIMIT 1;';
+		$sql = 'SELECT * FROM posts WHERE body=:body AND author_id=:author_id ' .
+			'AND ABS(created - :created) < :seconds LIMIT 1;';
 		$args = array(
 			':body' => $body,
 			':author_id' => $author_id,
@@ -165,8 +332,8 @@ class Post {
 	/// @param ?int $before_time  If provided, only posts older than this Unix
 	///                           timestamp are returned.
 	/// @return array             Three-element tuple - 0: array of Posts,
-	///                           1: relative URL to show previous page, or null if none
-	///                           2: relative URL to show next page, or null if none
+	///                           1: relative URL to show previous page, or null
+	///                           2: relative URL to show next page, or null
 	public static function get_posts(
 			int $user_id,
 			int $count = RECENT_POSTS_PER_PAGE,
@@ -203,7 +370,8 @@ class Post {
 		if ($before_time) {
 			// We're paged forward. Check if there are newer posts.
 			$sql = 'SELECT rowid, * FROM posts WHERE author_id=:author_id AND ' .
-				'created >= :before_time ' . $search_where . ' ORDER BY created ASC LIMIT :count;';
+				'created >= :before_time ' . $search_where .
+				' ORDER BY created ASC LIMIT :count;';
 			// Reusing same $args
 			$newer_posts = Database::query_objects('Post', $sql, $args);
 			if (sizeof($newer_posts) > $count) {
@@ -325,12 +493,12 @@ class User {
 		$user = self::get_by_username($username);
 		if ($user === null) {
 			trace("Login failed. No such user {$username}.");
-			fatal_error("Login incorrect.");
+			fatal_error(L10n::error_login_incorrect);
 			return null;
 		}
 		if (!password_verify($password, $user->password_hash)) {
 			trace("Login failed. Bad password for {$username}.");
-			fatal_error("Login incorrect.");
+			fatal_error(L10n::error_login_incorrect);
 			return null;
 		}
 		trace("Login succeeded for {$username}.");
@@ -342,7 +510,9 @@ class User {
 
 	/// Updates self::$current from $_SESSION.
 	public static function update_current(): void {
-		if (self::any_exist() && array_key_exists(SESSION_KEY_USER_ID, $_SESSION) && is_int($_SESSION[SESSION_KEY_USER_ID])) {
+		if (self::any_exist() &&
+			array_key_exists(SESSION_KEY_USER_ID, $_SESSION) &&
+			is_int($_SESSION[SESSION_KEY_USER_ID])) {
 			$id = $_SESSION[SESSION_KEY_USER_ID];
 			self::$current = User::get_by_id($id);
 		} else {
@@ -414,12 +584,15 @@ class Session {
 		$this->updated = time();
 		$secure = str_starts_with(BASE_URL, 'https:');
 		$expires = intval(time()) + SESSION_COOKIE_TTL_SECONDS;
-		trace('Updating cookie to ' . localized_date_string($expires));
+		trace('Updating cookie to ' . L10n::date_string($expires));
 		setcookie(SESSION_COOKIE_NAME, $this->token, $expires, path: '/',
 			secure: $secure, httponly: true);
 		if ($update_table) {
 			$sql = 'UPDATE sessions SET updated=:updated WHERE rowid=:rowid;';
-			$args = array(':updated' => $this->updated, ':rowid' => $this->rowid);
+			$args = array(
+				':updated' => $this->updated,
+				':rowid' => $this->rowid,
+			);
 			Database::query($sql, $args);
 		}
 	}
@@ -447,7 +620,8 @@ class Session {
 		$args = array(':rowid' => $this->rowid);
 		Database::query($sql, $args);
 		$secure = str_starts_with(BASE_URL, 'https:');
-		setcookie(SESSION_COOKIE_NAME, '', 1, path: '/', secure: $secure, httponly: true);
+		setcookie(SESSION_COOKIE_NAME, '', 1, path: '/', secure: $secure,
+			httponly: true);
 		unset($_COOKIE[SESSION_COOKIE_NAME]);
 	}
 }
@@ -492,7 +666,10 @@ class Database {
 	/// @param $params     Map of SQL placeholders to values.
 	/// @return ?object    Object of given class from first result row, or null
 	///                    if no rows matched.
-	public static function query_object(string $classname, string $sql, array $params = array()): ?object {
+	public static function query_object(
+		string $classname,
+		string $sql,
+		array $params = array()): ?object {
 		$objs = self::query_objects($classname, $sql, $params);
 		return (sizeof($objs) > 0) ? $objs[0] : null;
 	}
@@ -505,7 +682,10 @@ class Database {
 	/// @param $sql        Query to execute.
 	/// @param $params     Map of SQL placeholders to values.
 	/// @return array      Array of records of the given class.
-	public static function query_objects(string $classname, string $sql, array $params = array()): array {
+	public static function query_objects(
+		string $classname,
+		string $sql,
+		array $params = array()): array {
 		$rows = self::query($sql, $params);
 		$objs = array();
 		if ($rows !== false) {
@@ -524,7 +704,9 @@ class Database {
 	/// @param $params  Map of SQL placeholders to values.
 	/// @return array   Array of arrays. The inner arrays contain both indexed
 	///                 and named column values.
-	public static function query(string $sql, array $params = array()): bool|array {
+	public static function query(
+		string $sql,
+		array $params = array()): bool|array {
 		$db = new SQLite3(DB_PATH);
 		trace('SQL: ' . $sql);
 		$stmt = $db->prepare($sql);
@@ -563,7 +745,7 @@ class Database {
 			case 'NULL':
 				return SQLITE3_NULL;
 			default:
-				fatal_error("Bad datatype in sqlite statement");
+				fatal_error(L10n::error_bad_sql_datatype);
 		}
 	}
 
@@ -617,7 +799,8 @@ class Config {
 	private static function set_config_value(string $name, $value): void {
 		$args = array(':name' => $name, ':value' => $value);
 		Database::query('UPDATE config SET value=:value WHERE name=:name;', $args);
-		Database::query('INSERT OR IGNORE INTO config (name, value) VALUES (:name, :value);', $args);
+		Database::query('INSERT OR IGNORE INTO config (name, value) ' .
+			'VALUES (:name, :value);', $args);
 	}
 }
 
@@ -627,27 +810,27 @@ class Config {
 function check_setup(): void {
 	// Check user-configurable variables to make sure they aren't default values.
 	if (str_contains(BASE_URL, 'example.com') || DB_PATH == '/path/to/journal.db') {
-		fatal_error("Journal not configured. Open index.php in an editor and configure the variables at the top of the file.");
+		fatal_error(L10n::error_not_configured);
 	}
 
 	if (!Database::exists()) {
-		fatal_error("Database file cannot be found. Check configuration at the top of index.php.");
+		fatal_error(L10n::error_database_not_found);
 	}
 
 	if (!Database::is_writable()) {
 		$user = trim(shell_exec('whoami'));
 		$group = trim(shell_exec('id -gn'));
-		fatal_error("Database file exists but is not writable by web server user '{$user}' (user group '{$group}'). Check file permissions.");
+		fatal_error(L10n::error_database_not_writable($user, $group));
 	}
 
 	$schema_version = Config::get_schema_version();
 	if ($schema_version === null) {
-		fatal_error("No schema version in database. Corrupted?");
+		fatal_error(L10n::error_no_schema_version);
 	}
 
 	if ($schema_version != SCHEMA_VERSION) {
 		// TODO: If schema changes, migration paths will go here. For now just fail.
-		fatal_error("Unexpected schema version $schema_version.");
+		fatal_error(L10n::error_unexpected_schema_version($schema_version));
 	}
 
 	if (Config::get_is_configured()) {
@@ -658,7 +841,7 @@ function check_setup(): void {
 	// If using default database name, make sure it's not accessible from the
 	// web. It'd be far too easy to access.
 	if (Database::is_accessible_by_web()) {
-		fatal_error("Journal database is accessible from the web! Either alter your .htaccess permissions or rename the database with a UUID filename.");
+		fatal_error(L10n::error_database_web_accessible);
 	}
 
 	// Everything looks good!
@@ -705,7 +888,7 @@ define('INPUT_TYPE_USERNAME', 0x4 | INPUT_TYPE_TRIMMED | INPUT_TYPE_NONEMPTY);
 function validate(array $source, string $name, int $type, bool $required = true) {
 	if (!array_key_exists($name, $source)) {
 		if ($required) {
-			fatal_error("Parameter {$name} is required.");
+			fatal_error(L10n::error_parameter_required($name));
 		}
 		return null;
 	}
@@ -715,44 +898,34 @@ function validate(array $source, string $name, int $type, bool $required = true)
 	}
 	if (strlen($val) == 0) {
 		if ($type & INPUT_TYPE_NONEMPTY) {
-			fatal_error("Parameter {$name} cannot be empty.");
+			fatal_error(L10n::error_parameter_empty($name));
 		}
 	}
 	if (($type & INPUT_TYPE_INT) == INPUT_TYPE_INT) {
 		if (is_numeric($val)) return intval($val);
-		fatal_error("Parameter {$name} must be integer.");
+		fatal_error(L10n::error_parameter_integer($name));
 	}
 	if (($type & INPUT_TYPE_STRING) == INPUT_TYPE_STRING) {
 		return $val;
 	}
 	if (($type & INPUT_TYPE_USERNAME) == INPUT_TYPE_USERNAME) {
 		if (preg_match('/[a-zA-Z0-9_@+-]+/', $val)) return $val;
-		fatal_error("Invalid username. Can be letters, numbers, underscores, and dashes, or an email address.");
+		fatal_error(L10n::error_invalid_username);
 	}
 	return null;
 }
 
-function localized_date_string(int $timestamp): string {
-	$locale_code = Locale::acceptFromHttp($_SERVER['HTTP_ACCEPT_LANGUAGE']) ?: 'en-US';
-	$timezone = User::$current->timezone;
-	$formatter = IntlDateFormatter::create(
-		$locale_code,
-		dateType: IntlDateFormatter::MEDIUM,
-		timeType: IntlDateFormatter::MEDIUM,
-		timezone: $timezone,
-		calendar: IntlDateFormatter::GREGORIAN);
-	return $formatter->format($timestamp);
-}
-
 // -- HTML renderers --------------------------------------
 
 class HTMLPage {
 	public static function render_page_start(): void {
+		$str_title = L10n::page_title;
+		$str_app_icon_title = L10n::mobile_app_icon_title;
 		print(<<<HTML
 			<!DOCTYPE html>
 			<html>
 				<head>
-					<title>Microjournal</title>
+					<title>{$str_title}</title>
 					<meta charset="UTF-8" />
 					<link rel="stylesheet" type="text/css" href="journal.css" />
 					<link rel="apple-touch-icon" sizes="58x58" href="apple-touch-icon-58.png" />
@@ -764,30 +937,33 @@ class HTMLPage {
 					<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152.png" />
 					<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-167.png" />
 					<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180.png" />
-					<meta name="apple-mobile-web-app-title" content="μJournal" />
+					<meta name="apple-mobile-web-app-title" content="{$str_app_icon_title}" />
 					<meta name="apple-mobile-web-app-capable" content="yes" />
 					<meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)" />
 					<meta name="theme-color" content="#444" media="(prefers-color-scheme: dark)" />
-					<meta name="viewport" content="user-scalable=no,width=device-width,viewport-fit=cover" />
+					<meta name="viewport" content="user-scalable=no, width=device-width, viewport-fit=cover, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
 					<link rel="icon" sizes="16x16" type="image/png" href="favicon-16.png" />
 					<link rel="icon" sizes="32x32" type="image/png" href="favicon-32.png" />
 				</head>
 				<body>
 					<nav>
 						<div class="top-nav">
-							<span class="title">Microjournal</span>
+							<span class="title">{$str_title}</span>
 			HTML
 		);
 		if (User::$current) {
+			$str_hamburger = L10n::hamburger_menu_symbol;
+			$str_search = L10n::menu_search;
+			$str_log_out = L10n::menu_log_out;
 			print(<<<HTML
 							<div class="menu-container">
 								<details class="menu">
-									<summary class="no-indicator menu-button"><span>☰</span></summary>
+									<summary class="no-indicator menu-button"><span>{$str_hamburger}</span></summary>
 
 									<ul>
-										<li><a href="?search">Search</a></li>
+										<li><a href="?search">{$str_search}</a></li>
 										<li class="menu-divider"></li>
-										<li class="logout-item destructive"><a href="?logout">Log out</a></li>
+										<li class="logout-item destructive"><a href="?logout">{$str_log_out}</a></li>
 									</ul>
 								</details>
 							</div>
@@ -825,13 +1001,13 @@ class HTMLPage {
 
 	public static function render_post_form(): void {
 		$action = 'post';
-		$verb = 'Post';
+		$str_submit = L10n::post_form_submit_post;
 		$body = '';
 		if ($edit_id = validate($_GET, 'edit', INPUT_TYPE_INT, required: false)) {
 			if ($post = Post::get_by_id($edit_id)) {
 				$body = $post->body;
 				$action = 'edit';
-				$verb = 'Update';
+				$str_submit = L10n::post_form_submit_update;
 			} else {
 				unset($edit_id);
 			}
@@ -840,17 +1016,24 @@ class HTMLPage {
 			unset($_SESSION[SESSION_KEY_POST_BODY]);
 		}
 		$body_html = htmlentities($body);
+		$str_placeholder = L10n::post_form_placeholder;
 		print(<<<HTML
 			<form id="post-form" method="POST">
-				<div class="text-container"><textarea name="body" placeholder="Your journal post here…">$body_html</textarea></div>
+				<div class="text-container"><textarea name="body" placeholder="$str_placeholder">$body_html</textarea></div>
 				<input type="hidden" name="action" value="{$action}" />
 			HTML
 		);
 		if ($edit_id) {
 			print("<input type=\"hidden\" name=\"edit_id\" value=\"{$edit_id}\" />");
 		}
+		print("<div class=\"submit-post form-buttons\">");
+		if ($edit_id) {
+			$url = BASE_URL;
+			$str_cancel = L10n::post_form_cancel;
+			print("<a class=\"cancel-edit\" href=\"{$url}\">{$str_cancel}</a> ");
+		}
 		print(<<<HTML
-				<div class="submit-post"><input type="submit" value="{$verb}" /></div>
+				<input type="submit" value="{$str_submit}" /></div>
 			</form>
 			HTML
 		);
@@ -862,13 +1045,15 @@ class HTMLPage {
 		[ $posts, $prev_url, $next_url ] = Post::get_posts(User::$current->user_id, query: $query, before_time: $before);
 		print("<div class=\"post-container\">\n");
 		if ($prev_url !== null) {
-			print("<div class=\"previous\"><a href=\"{$prev_url}\">Previous</a></div>\n");
+			$str_prev = L10n::posts_previous_page;
+			print("<div class=\"previous\"><a href=\"{$prev_url}\">{$str_prev}</a></div>\n");
 		}
 		foreach ($posts as $post) {
 			self::render_post($post);
 		}
 		if ($next_url !== null) {
-			print("<div class=\"next\"><a href=\"{$next_url}\">Next</a></div>\n");
+			$str_next = L10n::posts_next_page;
+			print("<div class=\"next\"><a href=\"{$next_url}\">{$str_next}</a></div>\n");
 		}
 		print("</div>\n");
 	}
@@ -893,7 +1078,7 @@ class HTMLPage {
 	public static function render_post(Post $post): void {
 		$body_html = MARKDOWN_ENABLED ? Markdown::markdown_to_html($post->body) :
 			self::post_body_html($post->body);
-		$date = localized_date_string($post->created);
+		$str_posted = L10n::post_created($post->created);
 		print(<<<HTML
 			<div class="post">
 				<article>
@@ -901,21 +1086,25 @@ class HTMLPage {
 					<div class="post-footer">
 						<footer class="secondary-text">
 							<div class="post-date">
-								Posted {$date}
+								{$str_posted}
 			HTML
 		);
 		if ($post->updated && $post->updated != $post->created) {
-			print('<br/>(updated ' . localized_date_string($post->updated) . ')');
+			$str_updated = L10n::post_updated($post->updated);
+			print("<br/>\n$str_updated");
 		}
+		$str_menu = L10n::post_menu;
+		$str_edit = L10n::post_menu_edit;
+		$str_delete = L10n::post_menu_delete;
 		print(<<<HTML
 							</div>
 							<details class="post-actions menu">
-								<summary class="no-indicator menu-button"><span>actions</span></summary>
+								<summary class="no-indicator menu-button"><span>$str_menu</span></summary>
 
 								<ul>
-									<li><a href="?edit={$post->post_id}">Edit</a></li>
+									<li><a href="?edit={$post->post_id}">{$str_edit}</a></li>
 									<li class="menu-divider"></li>
-									<li class="post-action-delete destructive"><a href="?delete={$post->post_id}">Delete</a></li>
+									<li class="post-action-delete destructive"><a href="?delete={$post->post_id}">{$str_delete}</a></li>
 								</ul>
 							</details>
 						</footer>
@@ -930,52 +1119,69 @@ class HTMLPage {
 		$q = validate($_GET, 'search', INPUT_TYPE_STRING | INPUT_TYPE_TRIMMED, required: false);
 		$q_html = htmlentities($q);
 		$cancel = BASE_URL;
+		$str_submit = L10n::search_submit;
+		$str_cancel = L10n::search_cancel;
 		print(<<<HTML
-			<form id="search-form" method="GET">
-				<div>
-					<label for="search">Search:</label>
-					<input type="text" name="search" id="search" value="{$q_html}" autocapitalize="off" />
-					<input type="submit" value="Search" />
-					<a href="{$cancel}">Cancel</a>
-				</div>
-			</form>
+			<div class="form-container">
+				<form id="search-form" method="GET">
+					<div>
+						<input type="search" name="search" id="search" value="{$q_html}" size="40" autocapitalize="off" />
+					</div>
+					<div class="form-buttons">
+						<a class="cancel-search" href="{$cancel}">{$str_cancel}</a>
+						<input type="submit" value="{$str_submit}" />
+					</div>
+				</form>
+			</div>
 			HTML
 		);
 	}
 
 	public static function render_sign_in_form(): void {
+		$str_username = L10n::login_username_label;
+		$str_password = L10n::login_password_label;
+		$str_submit = L10n::login_submit;
 		print(<<<HTML
-			<form id="signin-form" method="POST">
-				<div>
-					<label for="username">Username:</label>
-					<input type="text" name="username" id="username" autocapitalize="off" autocorrect="off" />
-				</div>
-				<div>
-					<label for="password">Password:</label>
-					<input type="password" name="password" id="password" />
-				</div>
-				<input type="hidden" name="action" value="signin" />
-				<input type="submit" value="Sign in" />
-			</form>
+			<div class="form-container">
+				<form id="signin-form" method="POST">
+					<div style="text-align: end;">
+						<label for="username">{$str_username}</label>
+						<input type="text" name="username" id="username" autocapitalize="off" autocorrect="off" />
+					</div>
+					<div style="text-align: end;">
+						<label for="password">{$str_password}</label>
+						<input type="password" name="password" id="password" />
+					</div>
+					<input type="hidden" name="action" value="signin" />
+					<div class="form-buttons">
+						<input type="submit" value="{$str_submit}" />
+					</div>
+				</form>
+			</div>
 			HTML
 		);
 	}
 
 	public static function render_setup_form(): void {
+		$str_prompt = L10n::create_prompt;
+		$str_username = L10n::create_username_label;
+		$str_password = L10n::create_password_label;
+		$str_time_zone = L10n::create_time_zone_label;
 		print(<<<HTML
-			<div class="important">Journal is not setup. Please create a username and password to secure your data.</div>
-			<form id="setup-form" method="POST">
-				<div>
-					<label for="username">Username:</label>
-					<input type="text" id="username" name="username" autocapitalize="off" autocorrect="off" />
-				</div>
-				<div>
-					<label for="password">Password:</label>
-					<input type="password" id="password" name="password" />
-				</div>
-				<div>
-					<label for="timezone">Time zone:</label>
-					<select name="timezone" id="timezone">
+			<div class="important">{$str_prompt}</div>
+			<div class="form-container">
+				<form id="setup-form" method="POST">
+					<div style="text-align: end;">
+						<label for="username">{$str_username}</label>
+						<input type="text" id="username" name="username" autocapitalize="off" autocorrect="off" />
+					</div>
+					<div style="text-align: end;">
+						<label for="password">{$str_password}</label>
+						<input type="password" id="password" name="password" />
+					</div>
+					<div>
+						<label for="timezone">{$str_time_zone}</label>
+						<select name="timezone" id="timezone">
 			HTML
 		);
 		foreach (DateTimeZone::listIdentifiers() as $timezone) {
@@ -985,11 +1191,15 @@ class HTMLPage {
 			}
 			print(">" . htmlentities($timezone) . "</option>\n");
 		}
+		$str_submit = L10n::create_submit;
 		print(<<<HTML
-					</select></div>
-				<input type="hidden" name="action" value="createaccount" />
-				<div><input type="submit" value="Create account" /></div>
-			</form>
+						</select></div>
+					<input type="hidden" name="action" value="createaccount" />
+					<div class="form-buttons">
+						<input type="submit" value="{$str_submit}" />
+					</div>
+				</form>
+			</div>
 			HTML
 		);
 	}
@@ -1249,7 +1459,7 @@ switch ($_SERVER['REQUEST_METHOD']) {
 				if (!User::$current) {
 					// Not logged in. Save body for populating once they sign in.
 					$_SESSION[SESSION_KEY_POST_BODY] = $body;
-					fatal_error('Please sign in to post.');
+					fatal_error(L10n::error_sign_in_to_post);
 				}
 				Post::create($body, $author, $created);
 				break;
@@ -1258,7 +1468,7 @@ switch ($_SERVER['REQUEST_METHOD']) {
 				$edit_id = validate($_POST, 'edit_id', INPUT_TYPE_INT);
 				if (!User::$current) {
 					// Not logged in. Save body for populating once they sign in.
-					fatal_error('Please sign in to edit.');
+					fatal_error(L10n::error_sign_in_to_edit);
 				}
 				Post::get_by_id($edit_id)?->update($body);
 				break;

htdocs/journal.css

@@ -9,6 +9,7 @@
 	--menu-border: #ccc;
 
 	--highlight: #d83;
+	--highlight-contrast: #000;
 	--error-text: #d00;
 	--error-background: #fcc;
 	--error-border: #400;
@@ -17,6 +18,8 @@
 	--callout-border: #886;
 	--destructive: #e00;
 	--destructive-contrast: #fff;
+
+	--font-size: 12pt;
 }
 
 @media(prefers-color-scheme: dark) {
@@ -35,7 +38,7 @@
 :root, input, textarea {
 	font-family: Garamond, Times New Roman, serif;
 	line-height: 1.25;
-	font-size: 12pt;
+	font-size: var(--font-size);
 }
 body, textarea, input, select {
 	background-color: var(--page-background);
@@ -79,7 +82,7 @@ details.menu li a {
 }
 details.menu li a:hover {
 	background-color: var(--highlight);
-	color: black;
+	color: var(--highlight-contrast);
 }
 details.menu li {
 }
@@ -114,7 +117,17 @@ summary.menu-button > span:first-child {
 }
 details[open] summary.menu-button > span:first-child {
 	background-color: var(--highlight);
-	color: white;
+	color: var(--highlight-contrast);
+}
+.form-container {
+	position: relative;
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+.form-container form {
+	display: inline-block;
+	text-align: start;
 }
 
 
@@ -188,9 +201,36 @@ textarea::placeholder {
 .submit-post {
 	text-align: right;
 }
+.cancel-edit {
+	display: inline-block;
+	padding-inline-end: 2em;
+}
+.form-buttons {
+	text-align: end;
+}
 input[type="submit"] {
 	margin-top: 0.5em;
 	min-width: 15ch;
+	padding: 0.3em 1.5em;
+	color: var(--highlight);
+	border: 1px solid var(--highlight);
+	border-radius: 0.2em;
+	font-size: 1rem;
+	-webkit-appearance: none;
+}
+input[type="submit"]:hover {
+	background-color: var(--highlight);
+	color: var(--highlight-contrast);
+}
+
+/* Search */
+
+#search-form input[type="search"] {
+	width: 100%;
+}
+.cancel-search {
+	display: inline-block;
+	padding-inline-end: 1em;
 }
 
 /* Posts */
@@ -239,6 +279,6 @@ details.menu li.post-action-delete a:hover {
 
 @media screen and (max-width: 450px) {
 	:root {
-		font-size: 16pt;
+		--font-size: 16px;
 	}
 }