tex: add description to app screenshots

tex/part-practical.tex

@@ -1322,62 +1322,137 @@ Appendix~\ref{appendix:gobusterFuzzingLogs}.
 
 \n{1}{Application screenshots}
 
+Figure~\ref{fig:homepage} depicts the initial page that a logged out user is
+greeted with when they load the application.
+
 \obr{Homepage}{fig:homepage}{.84}{graphics/screen-homepage}
 
-\obr{Registration page}{fig:signup}{.54}{graphics/screen-signup}
+Figure~\ref{fig:signup} can be seen showing a registration page with input
+fields turned green after basic validation. Visiting this page with
+registration disabled in settings would yield a 404.
+
+\obr{Registration page}{fig:signup}{.65}{graphics/screen-signup}
+
+\newpage
 
 \obr{Registration page email
 error}{fig:signupEmailError}{.54}{graphics/screen-signup-emailError}
 
+A sign-up form error telling the user to provide a valid email address is shown
+in Figure~\ref{fig:signupEmailError}.
+
+
 \obr{Sign-in page}{fig:signin}{.55}{graphics/screen-signin}
 
+Figure~\ref{fig:signin} depicts a sign-in form similar to the sign-up one.
+
 \obr{Short password error on
 sign-in}{fig:signinShortPasswd}{.55}{graphics/screen-signin-shortPasswordError}
 
+An error in Figure~\ref{fig:signinShortPasswd} prompts the user to lengthen the
+content of the password field from 3 to at least 20 characters.
+
+\newpage
+
 \obr{Admin homepage}
-{fig:adminHome}{.35}
+{fig:adminHome}{.25}
 {graphics/screen-adminHome}
 
+Figure~\ref{fig:adminHome} displays a simple greeting and a logout button.
+
 \obr{User management screen}
 {fig:adminUserManagement}{.85}
 {graphics/screen-adminUserManagement}
 
-\obr{User creation screen}
-{fig:adminUserCreate}{.55}
-{graphics/screen-adminUserCreate}
+Figure~\ref{fig:adminUserManagement} shows the user management screen, which
+provides links to view user details page, start creating a new user.
 
-\obr{Create user `demo'}
-{fig:adminUserCreateDemo}{.85}
-{graphics/screen-adminUserCreateDemo}
+% \obr{User creation screen}
+% {fig:adminUserCreate}{.35}
+% {graphics/screen-adminUserCreate}
 
 \obr{User creation: `username not unique' error}
-{fig:adminUserCreateErrorUsernameNotUnique}{.85}
+{fig:adminUserCreateErrorUsernameNotUnique}{.65}
 {graphics/screen-adminUserCreateErrorUsernameNotUnique}
 
-\obr{User detail screen}
-{fig:adminUserDetail}{.85}
+User creation form can be seen in
+Figure~\ref{fig:adminUserCreateErrorUsernameNotUnique}. Both regular and admin
+level users can be created here. In this case, an error is shown, telling the
+user there is an issue with username uniqueness. User experience of this
+process could in the future be improved by using a bit of JavaScript (or
+WebAssembly) to check uniqueness of the username on user's \emph{key-up}.
+
+\newpage
+
+\obr{Creation of user `demo'}
+{fig:adminUserCreateDemo}{.75}
+{graphics/screen-adminUserCreateDemo}
+
+The user management screen is again shown in
+Figure~\ref{fig:adminUserCreateDemo} after user `demo' was created. An
+informative \emph{flash} message is printed near the top of the page
+immediately after the action and not shown on subsequent page loads.
+
+
+\obr{User details screen}
+{fig:adminUserDetail}{.65}
 {graphics/screen-adminUserDetail}
 
+The user details page is depicted in Figure~\ref{fig:adminUserDetail}. The
+interface presents key information about the user such as ID, username and
+admin status. Additionally, it provides a link back to the previous page and
+two buttons: one for editing the user and one for user deletion.
+
 \obr{User edit screen}
-{fig:adminUserEdit}{.85}
+{fig:adminUserEdit}{.65}
 {graphics/screen-adminUserEdit}
 
+Figure~\ref{fig:adminUserEdit} shows the form for user editing with a button
+`Update' in the bottom for submitting, a couple of checkboxes for toggling
+`admin' and `active' state of the user. Above those, there are input fields for
+`username', `email', `password' and the confirmation of the password.
+
+\newpage
+
 \obr{User deletion confirmation}
-{fig:adminUserDeleteConfirm}{.85}
+{fig:adminUserDeleteConfirm}{.55}
 {graphics/screen-adminUserDeleteConfirmation}
 
+When attempting to delete a user, the administrator is presented with the
+screen shown in Figure~\ref{fig:adminUserDeleteConfirm}, which asks them
+whether they are absolutely sure to perform an action with permanent
+consequences. The `Confirm permanent deletion' button is highlighted in intense
+red colour, while the `Cancel' button is displayed in a light blue tone. There
+are two additional links: the `All users' one that points to the user
+management page, and the `Back to detail' one that simply brings the
+administrator one step back to the user details page.
+
 \obr{User deletion post-hoc}
-{fig:adminUserDeletePostHoc}{.85}
+{fig:adminUserDeletePostHoc}{.55}
 {graphics/screen-adminUserDemoDeletion}
 
+After successful user deletion, the administrator is redirected back to user
+management page and a flash message confirming the deletion is printed near the
+top of the page, as shown in Figure~\ref{fig:adminUserDeletePostHoc}.
+
+\newpage
+
 \obr{Manage API keys}
-{fig:manageAPIKeys}{.85}
+{fig:manageAPIKeys}{.75}
 {graphics/screen-manageAPIKeys}
 
+Figure~\ref{fig:manageAPIKeys} shows a page that allows administrators to
+manage instance-wide API keys for external services, such as \emph{Have I Been
+Pwned?} or \emph{DeHashed.com}. Do note that these keys are never distributed
+to clients in any way and are always only used by the application itself to
+make the requests on behalf of its users.
+
 \obr{Log-out message}
-{fig:logout}{.35}
+{fig:logout}{.30}
 {graphics/screen-logout}
 
+Figure~\ref{fig:logout} shows the message printed to users on logout.
+
 
 
 % =========================================================================== %