From 3078d0c3920f41f05a1e0511b9b09542d263aba3 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 1 Mar 2021 15:43:31 +0000
Subject: [PATCH] Bug 27823: List upcoming steps during installation process

This patch adds text to each step of the installation process showing
which steps have been completed, which step is current, and which steps
come next. This helps the user know where they are in the process.

To test, apply the patch and begin the process of installing Koha. In my
testing environment I drop the Koha database and create it again.

On each step of the installation process, confirm that the list of steps
is correct, showing the right stage in the process.
---
 koha-tmpl/intranet-tmpl/prog/css/installer.css     | 25 ++++++
 .../prog/en/includes/installer-doc-head-close.inc  |  1 +
 .../prog/en/modules/installer/step1.tt             | 60 +++++++++++++-
 .../prog/en/modules/installer/step2.tt             | 12 +++
 .../prog/en/modules/installer/step3.tt             | 93 ++++++++++++++++++++++
 .../prog/en/modules/onboarding/onboardingstep1.tt  | 15 ++++
 .../prog/en/modules/onboarding/onboardingstep2.tt  | 15 ++++
 .../prog/en/modules/onboarding/onboardingstep3.tt  | 15 ++++
 .../prog/en/modules/onboarding/onboardingstep4.tt  | 15 ++++
 .../prog/en/modules/onboarding/onboardingstep5.tt  | 23 ++++++
 10 files changed, 273 insertions(+), 1 deletion(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/installer.css b/koha-tmpl/intranet-tmpl/prog/css/installer.css
index 7d5d3d9fb7..1d51f278dc 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/installer.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/installer.css
@@ -241,3 +241,28 @@ span.breadcrumbs {
 .deselectall.optional {
     display: none;
 }
+    #steps {
+        border: 1px solid #EEE;
+        border-radius: 5px;
+        padding: 1em;
+        margin: 1em 0;
+    }
+
+    #steps ol {
+        font-size: 1.2rem;
+        list-style-type: none;
+        margin: 0;
+    }
+
+    .open {
+        color: #888;
+    }
+
+    .current {
+        color: #000;
+        font-weight: bold;
+    }
+
+    .complete {
+        color: green;
+    }
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc
index 3c1a5f4659..556d241762 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc
@@ -4,5 +4,6 @@
 <link rel="shortcut icon" href="[% IF ( IntranetFavicon ) %][% IntranetFavicon | html %][% ELSE %][% interface | html %]/[% theme | html %]/img/favicon.ico[% END %]" type="image/x-icon" />
 [% Asset.css("lib/jquery/jquery-ui-1.11.4.min.css") | $raw %]
 [% Asset.css("lib/bootstrap/bootstrap.min.css") | $raw %]
+[% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
 [% Asset.css("css/installer.css")  | $raw %]
 <style id="antiClickjack">body{display:none !important;}</style>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step1.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step1.tt
index d314036b99..a75f5a03ac 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step1.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step1.tt
@@ -26,7 +26,17 @@
 
                 [% UNLESS ( language ) %]
                     <h2>Web installer &rsaquo; Choose your language</h2>
-                    <p>You are about to install Koha.</p>
+
+                    <div id="steps">
+                        <ol>
+                            <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Choose your language</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Database settings</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Set up database</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                        </ol>
+                    </div>
 
                     <p>Please pick your language from the following list. If your language is not listed, please inform your system administrator.</p>
 
@@ -57,6 +67,18 @@
                     [% UNLESS ( checkmodule ) %]
                         [% IF ( missing_modules ) %]
                             <h2>Web installer &rsaquo; Perl modules missing</h2>
+
+                            <div id="steps">
+                                <ol>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                                    <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Database settings</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Set up database</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                                </ol>
+                            </div>
+
                             <p>Some Perl modules are missing. <span class="label label-danger">Important: </span>Required modules must be installed before you may continue.<br />
                             <ul>
                                 [% FOREACH missing_module IN missing_modules %]
@@ -69,6 +91,18 @@
 
                         [% IF ( upgrade_modules ) %]
                             <h2>Web installer &rsaquo; Perl modules due for upgrade</h2>
+
+                            <div id="steps">
+                                <ol>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                                    <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Database settings</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Set up database</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                                </ol>
+                            </div>
+
                             <p>Some Perl modules require upgrade. <span class="label label-danger">Important: </span>Required modules must be installed at the correct version before you may continue.<br />
                             <ul>
                                 [% FOREACH upgrade_module IN upgrade_modules %]
@@ -83,6 +117,18 @@
 
                         [% IF ( problems ) %]
                             <h2>Web installer &rsaquo; Perl version too old</h2>
+
+                            <div id="steps">
+                                <ol>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                                    <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Database settings</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Set up database</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                                </ol>
+                            </div>
+
                             <p>I encountered some problems.</p>
                             <ul>
                                 [% IF ( perlversion ) %]
@@ -98,6 +144,18 @@
 
                     [% ELSE # IF checkmodule %]
                         <h2>Web installer &rsaquo; Check Perl dependencies</h2>
+
+                        <div id="steps">
+                            <ol>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                                <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Database settings</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Set up database</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                            </ol>
+                        </div>
+
                         <p>All required Perl modules appear to be installed.</p>
                         <p> All dependencies installed.</p>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step2.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step2.tt
index 5bd245081d..a055fbd087 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step2.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step2.tt
@@ -10,6 +10,18 @@
 
                 <h1 id="logo"><a href="#">Koha</a></h1>
                 <h2>Web installer &rsaquo; Database settings</h2>
+
+                    <div id="steps">
+                        <ol>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                            <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Database settings</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Set up database</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                        </ol>
+                    </div>
+
                 <h3>Database settings:</h3>
                 <ul>
                     <li><em>Database type: </em> [%- dbms | $HtmlTags tag=>'code' -%]</li>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt
index 685fd7f116..2731a2ef6c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt
@@ -47,6 +47,18 @@
                 <h1 id="logo"><a href="#">Koha</a></h1>
                 [% IF ( finish ) %]
                     <h2>Web installer &rsaquo; Installation complete</h2>
+
+                    <div id="steps">
+                        <ol>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Database settings</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Set up database</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                        </ol>
+                    </div>
+
                     <h3>Congratulations, installation complete</h3>
                     <p>This page will redirect in 10 seconds. <a href="/cgi-bin/koha/installer/onboarding.pl">If not, click here to start onboarding process.</a></p>
                 [% END %]
@@ -54,6 +66,21 @@
                 [% IF ( choosemarc ) %]
                     <h2>Select your MARC flavor</h2>
 
+                    <div id="steps">
+                        <ol>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Database settings</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Set up database</li>
+                            <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                                <ol>
+                                    <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Select your MARC flavor</li>
+                                    <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Selecting default settings</li>
+                                </ol>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                        </ol>
+                    </div>
+
                     <form name="frameworkselection" method="post" action="install.pl">
                         <input type="hidden" name="step" value="3" />
                         <input type="hidden" name="op" value="selectframeworks" />
@@ -78,6 +105,20 @@
                 [% IF ( selectframeworks ) %]
                     <h2>Web installer &rsaquo; Selecting default settings</h2>
 
+                    <div id="steps">
+                        <ol>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Database settings</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Set up database</li>
+                            <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                                <ol>
+                                    <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Select your MARC flavor</li>
+                                    <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Selecting default settings</li>
+                                </ol>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                        </ol>
+                    </div>
 
                     <form name="frameworkselection" method="post" action="install.pl">
                         <input type="hidden" name="step" value="3" />
@@ -166,6 +207,22 @@
 
                 [% IF ( addframeworks ) %]
                     <h2>Web installer &rsaquo; Default data loaded</h2>
+
+                    <div id="steps">
+                        <ol>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Database settings</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Set up database</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                                <ol>
+                                    <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Select your MARC flavor</li>
+                                    <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Selecting default settings</li>
+                                </ol>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                        </ol>
+                    </div>
+
                     [% FOREACH lis IN list %]
                         [% IF lis.level == 'mandatory' %]
                             <h3>Mandatory data added</h3>
@@ -217,6 +274,18 @@
                     [% ELSE %]
                         <h2>Web installer &rsaquo; Success</h2>
                         <div class="alert alert-success"><p>Database tables created</p></div>
+
+                        <div id="steps">
+                            <ol>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Database settings</li>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Set up database</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                            </ol>
+                        </div>
+
                         <form action="install.pl" method="post">
                             <input type="hidden" name="step" value="3" />
                             <p><input value="Continue to the next step" class="btn btn-primary" type="submit" /></p>
@@ -226,6 +295,18 @@
 
                 [% IF ( proposeimport ) %]
                     <h2>Web installer &rsaquo; Set up database</h2>
+
+                    <div id="steps">
+                        <ol>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Database settings</li>
+                            <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Set up database</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                            <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                        </ol>
+                    </div>
+
                     <p>Now we're ready to create the database tables and fill them with some default data.</p>
                     <form action="install.pl" method="post">
                         <input type="hidden" name="step" value="3" />
@@ -241,6 +322,18 @@
                         <p><a href="install.pl?step=3&amp;op=updatestructure" class="btn btn-primary">Update your database</a></p>
                     [% ELSE %]
                         <h2>Web installer &rsaquo; Install basic configuration settings</h2>
+
+                        <div id="steps">
+                            <ol>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Choose your language</li>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Check Perl dependencies</li>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Database settings</li>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Set up database</li>
+                                <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Install basic configuration settings</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding</li>
+                            </ol>
+                        </div>
+
                         <p>We are ready to do some basic configuration.</p>
                         <p><a href="install.pl?step=3&amp;op=choosemarc" class="btn btn-primary">Continue to the next step</a></p>
                     [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt
index 01fd4e5f1d..4d5ae8f35a 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt
@@ -13,6 +13,21 @@
 
                 [% INCLUDE 'onboarding_messages.inc' %]
 
+                <div id="steps">
+                    <ol>
+                        <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Installation</li>
+                        <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding
+                            <ol>
+                                <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a library</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a patron category</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Create Koha administrator patron</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a new item type</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a new circulation rule</li>
+                            </ol>
+                        </li>
+                    </ol>
+                </div>
+
                 <form name="LibraryCreation" method="post" action="onboarding.pl">
                     <fieldset class="rows" >
                         <input type="hidden" name="step" value="1"/>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
index b01da625cd..fef8b697f7 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
@@ -23,6 +23,21 @@
 
                 [% INCLUDE 'onboarding_messages.inc' %]
 
+                <div id="steps">
+                    <ol>
+                        <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Installation</li>
+                        <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding
+                            <ol>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Create a library</li>
+                                <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a patron category</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Create Koha administrator patron</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a new item type</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a new circulation rule</li>
+                            </ol>
+                        </li>
+                    </ol>
+                </div>
+
                 <p> The patron category you create will be used by the <span class="bg-info">administrator account</span>.</p>
 
                 <form id="category_form" method="post" action="onboarding.pl">
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt
index 273aa6cd9d..c63af0fb62 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt
@@ -15,6 +15,21 @@
 
                 [% INCLUDE 'onboarding_messages.inc' %]
 
+                <div id="steps">
+                    <ol>
+                        <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Installation</li>
+                        <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding
+                            <ol>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Create a library</li>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Create a patron category</li>
+                                <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Create Koha administrator patron</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a new item type</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a new circulation rule</li>
+                            </ol>
+                        </li>
+                    </ol>
+                </div>
+
                 <p>
                 Now we will create a patron with superlibrarian permissions. Log in with this to access Koha as a staff member with all permissions.
                 </p>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt
index 67cd5ef0a3..f2daee8463 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt
@@ -12,6 +12,21 @@
 
                 [% INCLUDE 'onboarding_messages.inc' %]
 
+                <div id="steps">
+                    <ol>
+                        <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Installation</li>
+                        <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding
+                            <ol>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Create a library</li>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Create a patron category</li>
+                                <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Create Koha administrator patron</li>
+                                <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a new item type</li>
+                                <li class="open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a new circulation rule</li>
+                            </ol>
+                        </li>
+                    </ol>
+                </div>
+
                 <!--Create a item type screen 1-->
 
                     <p> Item types are used to group related items. Examples of item types might be books, CDs, or DVDs.</p>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt
index e70870f500..e164236f9d 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt
@@ -19,6 +19,14 @@
 
                     <h2>Web installer &rsaquo; Complete</h2>
                     [% INCLUDE 'onboarding_messages.inc' %]
+
+                    <div id="steps">
+                        <ol>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Installation</li>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Onboarding</li>
+                        </ol>
+                    </div>
+
                     <h3>Congratulations you have finished and are ready to use Koha</h3>
                     <a class="btn btn-success" href="/cgi-bin/koha/mainpage.pl">Start using Koha</a>
 
@@ -28,6 +36,21 @@
 
                     [% INCLUDE 'onboarding_messages.inc' %]
 
+                    <div id="steps">
+                        <ol>
+                            <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Installation</li>
+                            <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Onboarding
+                                <ol>
+                                    <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Create a library</li>
+                                    <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Create a patron category</li>
+                                    <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Create Koha administrator patron</li>
+                                    <li class="complete"><i class="fa fa-check-square-o" aria-hidden="true"></i> Create a new item type</li>
+                                    <li class="current open"><i class="fa fa-square-o" aria-hidden="true"></i> Create a new circulation rule</li>
+                                </ol>
+                            </li>
+                        </ol>
+                    </div>
+
                     <form name="createcirculationrule" method="post" action="onboarding.pl">
                         <fieldset class="rows">
                             <input type="hidden" name="step" value="5"/>
-- 
2.11.0