From: Jérôme Benoit <jerome.benoit@piment-noir.org>
Date: Mon, 15 Jan 2018 17:03:20 +0000 (+0100)
Subject: Add the following features:
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=a96fefe119b8c91c2f5ae6ad04e11af676e5540b;p=Project_webapp.git

Add the following features:

* Account registration;
* User login and logout;
* Search form for flights;
* CSS to polish the webapp;
* Safe guard to protected pages.

And also a bunch of bugs fixed.

Signed-off-by: Jérôme Benoit <jerome.benoit@piment-noir.org>
---

diff --git a/includes/account.php b/includes/account.php
index e69de29..74fbddb 100644
--- a/includes/account.php
+++ b/includes/account.php
@@ -0,0 +1,7 @@
+<?php
+global $is_logged_in;
+if (!$is_logged_in) {
+    echo "Please login first.";
+    redirect("index.php?page=login", 2);
+}
+?>
diff --git a/includes/booking.php b/includes/booking.php
index e69de29..74fbddb 100644
--- a/includes/booking.php
+++ b/includes/booking.php
@@ -0,0 +1,7 @@
+<?php
+global $is_logged_in;
+if (!$is_logged_in) {
+    echo "Please login first.";
+    redirect("index.php?page=login", 2);
+}
+?>
diff --git a/includes/config.php b/includes/config.php
index 35fc43c..ef215ae 100644
--- a/includes/config.php
+++ b/includes/config.php
@@ -6,9 +6,10 @@
      'username' => 'fraggle',
      'password' => '$Love79!',
      'database' => 'bdVols',
-     'actions' => array (
+     'actions' => array(
          'home',
          'login',
+         'logout',
          'register',
          'booking',
          'search',
diff --git a/includes/formlogin.php b/includes/formlogin.php
index 8da2e2c..73cdff0 100644
--- a/includes/formlogin.php
+++ b/includes/formlogin.php
@@ -3,14 +3,28 @@ $form_email = filter_input(INPUT_POST, "email", FILTER_VALIDATE_EMAIL);
 $form_password = filter_input(INPUT_POST, "password", FILTER_SANITIZE_STRING);
 
 if (!$form_email) {
-    echo "The email is not valid <br>";
-} else {
-    $sql_pquery = "select count(NumCI) from CLIENTS where EmailCI = ?";
-
-    echo "This email do not belong to a registred client, please register first <br>";
-
-    if (password_verify($form_password, $stored_password)) {
-
+    echo "The email is not valid. <br>";
+} elseif (isset($form_email) && isset($form_password)) {
+    if (chk_account($form_email)) {
+        if (chk_password($form_email, $form_password)) {
+            // authentification okay, setup session
+            session_regenerate_id(true);
+            $_SESSION['email'] = $form_email;
+            $_SESSION['IP_address'] = $_SERVER['REMOTE_ADDR'];
+            // redirect to required page
+            echo "You're successfully authenticated. <br>";
+            redirect("index.php", 3);
+        } else {
+            echo "Your password is incorrect for the account email" . $form_email . ". <br>";
+            echo "<a href=\"javascript:history.go(-1)\">Retour</a>";
+        }
+    } else {
+        echo "You do not have an account for the email " . $form_email . ". <br>";
+        echo "Please register first.";
+        redirect("index.php?page=register", 3);
     }
+} else {
+    // didn't authenticate, go back to login form
+    echo "Fail to authenticate. <br>";
+    redirect("index.php?page=login", 3);
 }
-?>
diff --git a/includes/formregister.php b/includes/formregister.php
index 53b5f6d..6cb9223 100644
--- a/includes/formregister.php
+++ b/includes/formregister.php
@@ -4,7 +4,7 @@ $form_firstname = filter_input(INPUT_POST, "firstname", FILTER_SANITIZE_STRING);
 $form_numstreet = filter_input(INPUT_POST, "numstreet", FILTER_VALIDATE_INT);
 $form_street = filter_input(INPUT_POST, "street", FILTER_SANITIZE_STRING);
 $form_postalcode = filter_input(INPUT_POST, "postalcode", FILTER_VALIDATE_INT);
-$form_town = filter_input(INPUT_POST, "postalcode", FILTER_SANITIZE_STRING);
+$form_city = filter_input(INPUT_POST, "city", FILTER_SANITIZE_STRING);
 $form_email = filter_input(INPUT_POST, "email", FILTER_VALIDATE_EMAIL);
 $form_password = filter_input(INPUT_POST, "password", FILTER_SANITIZE_STRING);
 $form_confirmpassword = filter_input(INPUT_POST, "confirmpassword", FILTER_SANITIZE_STRING);
@@ -15,30 +15,42 @@ $error_email = false;
 $error_password = false;
 
 if (!$form_numstreet) {
-    echo "The street number is not valid <br>" ;
+    echo "The street number is not valid. <br>" ;
     $error_numstreet = true;
 }
 if (!$form_postalcode) {
-    echo "The postal code is not valid <br>";
+    echo "The postal code is not valid. <br>";
     $error_postalcode = true;
 }
 if (!$form_email) {
-    echo "The email is not valid <br>";
+    echo "The email is not valid. <br>";
     $error_email = true;
 }
-if (strcmp($form_password, $form_confirmpassword) === 0) {
-    echo "Password do not match <br>";
+if (strcmp($form_password, $form_confirmpassword) !== 0) {
+    echo "Password do not match. <br>";
     $error_password = true;
 }
 
 if (!empty($form_name) && !empty($form_firstname) && !empty($form_numstreet) && !empty($form_street) &&
-    !empty($form_postalcode) && !empty($form_town) && !empty($form_email) && !empty($form_password)){
-    global $connection;
-    $sql_pquery = "select count(NumCl) from CLIENTS where EmailCl = ?";
-    $stmt = $connection->prepare_query($sql_pquery);
-    $stmt->bind_param("s", $form_email);
-    //$connection->prepared_query_bind_param("s", $form_email);
-    $connection->run_prepared_query();
-    $connection->close_prepared_query();
+    !empty($form_postalcode) && !empty($form_city) && !empty($form_email) && !empty($form_password) &&
+    !$error_numstreet && !$error_postalcode && !$error_email && !$error_password) {
+    if (!chk_account($form_email)) {
+        global $connection;
+        $hashed_password = password_hash($form_password, PASSWORD_DEFAULT);
+        $sql_pquery = "insert into CLIENTS (NomCl, PrenomCl, EmailCl, PasswordCl, NumRueCl, NomRueCl, CodePosteCl, VilleCl)
+                       values (?, ?, ?, ?, ?, ?, ?, ?)";
+        $connection->prepare_query($sql_pquery);
+        $connection->prepared_query_bind_param("ssssisis", array($form_name, $form_firstname, $form_email, $hashed_password, $form_numstreet, $form_street, $form_postalcode, $form_city));
+        $connection->run_prepared_query();
+        $connection->close_prepared_query();
+        echo "You've successfully registered, you will be redirected to the login form in 3 seconds. <br>";
+        redirect("index.php?page=login", 3);
+    } else {
+        echo "You're already registered, you will be redirected to the login form in 3 seconds. <br>";
+        redirect("index.php?page=login", 3);
+    }
+} else {
+    echo "There's a required non filled field or the input in a field do not match the required pattern. <br>";
+    echo "<a href=\"javascript:history.go(-1)\">Retour</a>";
 }
 ?>
diff --git a/includes/header.html b/includes/header.html
index 602e0cf..557bf59 100644
--- a/includes/header.html
+++ b/includes/header.html
@@ -6,5 +6,6 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed">
 <link rel="stylesheet" type="text/css" href="styles/airpolytech.css" />
+<script type="text/javascript" src="js/airpolytech.js"></script>
 </head>
 <body>
diff --git a/includes/header.php b/includes/header.php
index ac394bf..1aa4c02 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -1,25 +1,44 @@
 <?php
 include('header.html');
+include('lib/utils.php');
 /**
  * Let's use an array as the list of tunables.
  * Put in a variable the inclusion of this file:
  * $config_var = include('config.php');
  */
 $configs = include('config.php');
+
+/**
+ * [session_start start a unique session for the current browser client]
+ */
+session_start();
+$is_logged_in = chk_logged_in();
 ?>
 <div id="header">
     <!-- Put headers stuff here -->
     <a href="<?php echo $configs['root_url'] ?>/index.php?page=home">Bienvenue sur Air Polytech !</a>
 </div>
+<div id="account">
+    <a href="<?php echo $configs['root_url'] ?>/index.php?page=account">Mon espace client</a>
+    <br>
+    <?php
+    $root_url = $configs['root_url'];
+    if ($is_logged_in) {
+        echo htmlentities($_SESSION['email']) . " <br>";
+        echo "<a href=\"$root_url/index.php?page=logout\">Se de&#769;connecter</a>";
+    } else {
+        echo "<a href=\"$root_url/index.php?page=login\">S'identifier</a>";
+    }
+    ?>
+</div>
+<div id="menu">
+    <a href="<?php echo $configs['root_url'] ?>/index.php?page=home">Accueil</a> |
+    <a href="<?php echo $configs['root_url'] ?>/index.php?page=search">Rechercher un vol</a>
+</div>
+
+
 <?php
 
-function display_menu() {
-    switch ($page) {
-        case "home":
-        break;
-        case "register":
-        break;
-    }
 
-}
+
 ?>
diff --git a/includes/home.php b/includes/home.php
index cc378a2..fa15da8 100644
--- a/includes/home.php
+++ b/includes/home.php
@@ -1,24 +1,16 @@
+<table id="home">
 <?php
+global $is_logged_in;
 
-function home()
-{
-    global $connection;
-
-    $requete = "SELECT NumCl, NomCl, CodePosteCl, VilleCl FROM CLIENTS";
-    $result = $connection->query($requete);
-    echo "<table border=1>\n";
-    echo "<tr><td>Code_CL</td><td>Nom</td><td>Rue</td><td>Ville</td></tr>\n";
-    while ($ligne = $result->fetch_row()) {
-        $code = htmlentities($ligne[0]);
-        $nom = htmlentities($ligne[1]);
-        $rue = htmlentities($ligne[2]);
-        $ville = htmlentities($ligne[3]);
-        echo "<tr><td>$code</td><td>$nom</td><td>$rue</td><td>$ville</td></tr>\n";
-    }
-    echo "</table>\n";
-    $result->close();
+if (!$is_logged_in) {
+    $root_url = $configs['root_url'];
+    echo "<tr>\n";
+    echo "   <td><a href=\"$root_url/index.php?page=login\">S'identifier</a></td>\n";
+    echo "   <td><a href=\"$root_url/index.php?page=register\">Cre&#769;er un compte</a></td>\n";
+    echo "</tr>\n";
 }
-
-home();
-
 ?>
+  <tr>
+    <td<?php if (!$is_logged_in) { echo " colspan=\"2\""; } ?>><a href="<?php echo $configs['root_url'] ?>/index.php?page=search">Rechercher un vol</a></td>
+  </tr>
+</table>
diff --git a/includes/login.php b/includes/login.php
index 19c74da..cc7fd92 100644
--- a/includes/login.php
+++ b/includes/login.php
@@ -1,6 +1,10 @@
-<form action="index.php" method="post">
+<h1>Identifiez-vous</h1>
+
+<form action="index.php" id="login" method="post">
  <input type="hidden" name="form" value="login" />
- <p> Email : <input type="text" name="email" /> </p>
- <p> Mot de passe : <input type="password" name="password" /> </p>
- <p> <input type="submit" value="Valider"> </p>
+ <label> Email : </label>
+ <input type="email"size="25" name="email" required />
+ <label> Mot de passe : </label>
+ <input type="password" size="15" name="password" required/>
+ <input type="submit" value="Valider">
 </form>
diff --git a/includes/logout.php b/includes/logout.php
new file mode 100644
index 0000000..689d777
--- /dev/null
+++ b/includes/logout.php
@@ -0,0 +1,7 @@
+<?php
+unset($_SESSION['email']);
+unset($_SESSION['IP_address']);
+session_destroy();
+echo "You've been successfully logged out, you will be redirected to the home page in 2 seconds. <br>";
+redirect("index.php", 2);
+?>
diff --git a/includes/register.php b/includes/register.php
index 72b9884..8db3bc0 100644
--- a/includes/register.php
+++ b/includes/register.php
@@ -1,15 +1,24 @@
-<form action="index.php" method="post">
+<h1>Cre&#769;er votre compte</h1>
+
+<form action="index.php" id="register" method="post">
  <input type="hidden" name="form" value="register" />
- <p> Nom  : <input type="text" name="name" /> </p>
- <p> Pre&#769;nom : <input type="text" name="firstname" /> </p>
- <p> Adresse : </p>
- <p> Nume&#769;ro de rue : <input type="text" name="numstreet" />
-     Rue : <input type="text" name="street" />
-     Code postal : <input type="text" name="postalcode" />
-     Ville : <input type="text" name="town" />
- </p>
- <p> Email : <input type="text" name="email" /> </p>
- <p> Mot de passe : <input type="password" name="password" /> </p>
- <p> Confirnation du mot de passe : <input type="password" name="confirmpassword" /> </p>
- <p> <input type="submit" value="Valider"> </p>
+ <label> Nom :* </label>
+ <input type="text" size="25" name="name" required/>
+ <label> Pre&#769;nom :* </label>
+ <input type="text" size="25" name="firstname" required/>
+     <label> Adresse : <br> Nume&#769;ro de rue :* </label>
+     <input type="number" size="5" name="numstreet" required/>
+     <label> Rue :* </label>
+     <input type="text" size="50" name="street" required/>
+     <label> Code postal :* </label>
+     <input type="number" size="5" name="postalcode" required/>
+     <label> Ville :* </label>
+     <input type="text" size="15" name="city" required/>
+ <label> Email :* </label>
+ <input type="email" size="25 "name="email" required/>
+ <label> Mot de passe :* </label>
+ <input type="password" minlength="8" size="15" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*" title="Doit contenir 8 caracte&#768;res minimum dont une majuscule, une minuscule et un chiffre" required/>
+ <label> Confirmation du mot de passe :* </label>
+ <input type="password" minlength="8" size="15" name="confirmpassword" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*" title="Doit contenir 8 caracte&#768;res minimum dont une majuscule, une minuscule et un chiffre" required/>
+ <input type="submit" value="Valider">
 </form>
diff --git a/includes/search.php b/includes/search.php
index e69de29..2a1b947 100644
--- a/includes/search.php
+++ b/includes/search.php
@@ -0,0 +1,14 @@
+<h1> Rechercher un vol </h1>
+
+<form action="index.php" id="search" method="post">
+ <input type="hidden" name="form" value="search" />
+ <label> De&#769;part : Ville -> </label>
+ <input type="text" size="15" name="departure_city" required/>
+ <label> Date -> </label>
+ <input type="datetime-local" name="departure_date" value="<?php echo date('Y-m-d\TH:i'); ?>" required>
+ <label> Arrive&#769;e : Ville -> </label>
+ <input type="text" size="15" name="arrival_city" required/>
+ <label> Date -> </label>
+ <input type="datetime-local" name="arrival_date" value="<?php echo date('Y-m-d\TH:i'); ?>" required>
+ <input type="submit" value="Valider">
+</form>
diff --git a/index.php b/index.php
index 8bceb64..9dc9e0b 100644
--- a/index.php
+++ b/index.php
@@ -2,19 +2,13 @@
 require('includes/header.php');
 
 include('lib/db.php');
-include('lib/utils.php');
-
-/**
- * [session_start start a unique session for the current browser client]
- */
-session_start();
 
 $connection = new CustomDB($configs['host'], $configs['username'], $configs['password'], $configs['database']);
 
 $page = filter_input(INPUT_GET, 'page', FILTER_SANITIZE_URL);
-$isPage = true;
+$is_page = true;
 if (!isset($page)) {
-    $isPage = false;
+    $is_page = false;
     $page = "";
 }
 
@@ -22,20 +16,20 @@ if (!isset($page)) {
  * form MUST have an hidden field named 'form' to enable proper routing
  */
 $form = filter_input(INPUT_POST, 'form', FILTER_SANITIZE_URL);
-$isForm = true;
+$is_form = true;
 if (!isset($form)) {
-    $isForm = false;
+    $is_form = false;
     $form = "";
 }
 
 function get_action_type() {
-    global $isPage, $isForm;
+    global $is_page, $is_form;
 
-    if ($isPage && !$isForm && is_get_request()) {
+    if ($is_page && !$is_form && is_get_request()) {
         return "page";
-    } elseif ($isForm && !$isPage && is_post_request()) {
+    } elseif ($is_form && !$is_page && is_post_request()) {
         return "form";
-    } elseif (!$isPage && !$isForm && is_get_request()){
+    } elseif (!$is_page && !$is_form && is_get_request()){
         return "empty";
     } else {
         return "unknown";
@@ -52,7 +46,7 @@ function get_url_action($action_type) {
     } elseif ($action_type === "empty") {
         return "";
     } elseif ($action_type === "unknown") {
-        die('Cannot get a valid action from URL parameters or form fields');
+        die('Cannot get a valid action from URL parameters or form fields.');
     }
 }
 
@@ -91,19 +85,17 @@ function display_action($action_name, $action_type)
             } elseif ($action_type === "form") {
                 include($includes_rpath . "/form" . $action . ".php");
             } else {
-                echo "Unknown error in action displaying <br>";
+                echo "Unknown error in action displaying. <br>";
             }
             $found_action = true;
             break;
         }
     }
     if (!$found_action) {
-        echo "Action to display do not exist <br>";
+        echo "Action to display do not exist. <br>";
     }
 }
 
-//password_hash('12345678', PASSWORD_DEFAULT);
-
 $action_type = get_action_type();
 $url_action = get_url_action($action_type);
 $action = validate_url_action($url_action);
@@ -111,7 +103,7 @@ display_action($action, $action_type);
 
 $connection->close();
 
-session_destroy();
+session_write_close();
 
 require('includes/footer.html');
 ?>
diff --git a/js/airpolytech.js b/js/airpolytech.js
new file mode 100644
index 0000000..e69de29
diff --git a/lib/db.php b/lib/db.php
index b548804..6c102c3 100644
--- a/lib/db.php
+++ b/lib/db.php
@@ -9,6 +9,7 @@ class CustomDB
     public $connected;
     private $current_pquery;
     private $current_stmt;
+    private $current_result;
 
     /**
      * [__construct description]
@@ -25,12 +26,17 @@ class CustomDB
         if (!$this->connection->connect_errno) {
             $this->connected = true;
         } else {
-            die('Fail to connect to the RDBMS');
+            die('Fail to connect to the RDBMS.');
         }
 
         return $this->connection;
     }
 
+    /* public function __destruct()
+    {
+        $this->close();
+    } */
+
     /**
      * [close description]
      * @return [type] [description]
@@ -40,7 +46,7 @@ class CustomDB
         if ($this->connected && $this->connection->close()) {
             $this->connected = false;
         } else {
-            die('Fail to close the connection to the RDBMS');
+            die('Fail to close the connection to the RDBMS.');
         }
     }
 
@@ -51,10 +57,10 @@ class CustomDB
      */
     public function query($sql_query)
     {
-        if ($this->connected && !($query_result = $this->connection->query($sql_query))) {
+        if ($this->connected && !($this->current_result = $this->connection->query($sql_query))) {
             echo "Fail to execute the SQL query : " . $sql_query . "<br>";
         }
-        return $query_result;
+        return $this->current_result;
     }
 
     /**
@@ -78,10 +84,9 @@ class CustomDB
      * @param  [type] $params [description]
      * @return [type]         [description]
      */
-    public function prepared_query_bind_param(...$params)
+    public function prepared_query_bind_param($types, $params)
     {
-        var_dump($params);
-        $rt_val = $this->current_stmt->bind_param($params);
+        $rt_val = $this->current_stmt->bind_param($types, ...$params);
         if (!$rt_val) {
             echo "Fail to link parameters to SQL query : (" . $this->current_stmt->errno . ") " . $this->current_stmt->error . " - " . $this->current_pquery . "<br>";
         }
@@ -101,6 +106,24 @@ class CustomDB
         return $rt_val;
     }
 
+    public function get_pquery_result()
+    {
+        $rt_val = $this->current_result = $this->current_stmt->get_result();
+        if (!$rt_val) {
+            echo "Fail to fill SQL query result : (" . $this->current_stmt->errno . ") " . $this->current_stmt->error . " - " . $this->current_pquery . "<br>";
+        }
+        return $rt_val;
+    }
+
+    public function get_result_array()
+    {
+        $rt_val = $this->current_result->fetch_array();
+        if (!$rt_val) {
+            echo "Fail to build SQL query result array : (" . $this->current_stmt->errno . ") " . $this->current_stmt->error . " - " . $this->current_pquery . "<br>";
+        }
+        return $rt_val;
+    }
+
     /**
      * [close_prepared_query description]
      * @return [type] [description]
diff --git a/lib/utils.php b/lib/utils.php
index d937db7..bc5db9b 100644
--- a/lib/utils.php
+++ b/lib/utils.php
@@ -1,5 +1,6 @@
 <?php
-function is_post_request() {
+function is_post_request()
+{
     if (filter_input(INPUT_SERVER, 'REQUEST_METHOD') === 'POST') {
         return true;
     } else {
@@ -7,11 +8,61 @@ function is_post_request() {
     }
 }
 
-function is_get_request() {
+function is_get_request()
+{
     if (filter_input(INPUT_SERVER, 'REQUEST_METHOD') === 'GET') {
         return true;
     } else {
         return false;
     }
 }
+
+function chk_account($email)
+{
+    global $connection;
+    $sql_pquery = "select count(NumCl) from CLIENTS where EmailCl = ?";
+    $connection->prepare_query($sql_pquery);
+    $connection->prepared_query_bind_param("s", array($email));
+    $connection->run_prepared_query();
+    $connection->get_pquery_result();
+    $row = $connection->get_result_array();
+    $connection->close_prepared_query();
+    if (!empty($row[0])) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+function chk_password($email, $password)
+{
+    global $connection;
+    $sql_pquery = "select PasswordCl from CLIENTS where EmailCl = ?";
+    $connection->prepare_query($sql_pquery);
+    $connection->prepared_query_bind_param("s", array($email));
+    $connection->run_prepared_query();
+    $connection->get_pquery_result();
+    $row = $connection->get_result_array();
+    $connection->close_prepared_query();
+    if (password_verify($password, $row[0])) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+function chk_logged_in()
+{
+    if (isset($_SESSION['email'])) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+function redirect($url, $delay)
+{
+    header("refresh:$delay; url=$url");
+}
+
 ?>
diff --git a/styles/airpolytech.css b/styles/airpolytech.css
index 00dd294..e5a93bf 100644
--- a/styles/airpolytech.css
+++ b/styles/airpolytech.css
@@ -3,7 +3,9 @@ body {
     color: #eeeeee;
     font-family: 'Encode Sans Semi Condensed', Arial, Helvetica, Verdana, sans-serif;
     display: block;
-    margin: 8px;
+    text-align: center;
+    line-height: 2em;
+    margin: 2em;
 }
 
 a, a:link a:active {
@@ -21,11 +23,87 @@ a:hover {
     color: #909090;
 }
 
-#footer {
-    text-align: center;
+form {
+    width: 680px;
+    margin: 0px auto;
+    line-height: 2.5em;
+}
+
+form#login {
+    width: 680px;
+}
+
+form#search {
+    width: 620px;
+}
+
+form#register {
+    width: 720px;
+}
+
+label, input {
+    /* in order to define widths */
+    display: inline-block;
+}
+
+label {
+    width: 30%;
+    /* positions the label text beside the input */
+    text-align: right;
+}
+
+label + input {
+    width: 30%;
+    /* large margin-right to force the next element to the new-line
+       and margin-left to create a gutter between the label and input */
+    margin: 0 30% 0 4%;
+}
+
+/* only the submit button is matched by this selector,
+   but to be sure you could use an id or class for that button */
+input + input {
+    float: right;
+}
+
+table {
+    margin: 0px auto;
+    width: 100%;
+}
+
+table#home {
+    font-size: 3em;
+    line-height: 1em;
+}
+
+table#result tr:nth-child(even) {
+    background-color: #eee;
+}
+
+table#result tr:nth-child(odd) {
+    background-color: #fff;
 }
 
 #header {
-    font-size: 44px;
+    font-size: 4em;
+    text-align: center;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+#account {
+    text-align: right;
+    line-height: 1.2em;
+}
+
+#menu {
+    font-size: 2em;
+    text-align: center;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+#footer {
     text-align: center;
+    margin-top: 1em;
+    margin-bottom: 1em;
 }