Page Comparison

1

Login Page

As an admin/moderator, I want to have a login page, so that I can access the site's backend

Notes

• Has a half-page image

  • Will only be set 1 time, HI will give official image before go-live

• Has a login form

• Has a link for a password reset

• Need to use OpenTeleRehab logo

2

Account Verification

As the site owner, I want the new admin/moderator users to verify their accounts, so that I can validate that they received a proper account creation invite in their email

Notes

• We will be using KeyCloak's account validation by email

• Use OpenTeleRehab no-reply emailer

• Use the same process implemented in OpenTeleRehab

3

User Role Setup

As the site owner, I want to be able to define user roles for the backend users, so that we can restrict access to some parts of the site

Notes

• Admin

  • Backend access

  • Full administration rights

  • Can add/invite other admin users

  • Can add/invite/delete moderators

  • Can add/moderate resources

  • Can edit/moderate resource translations

  • Can add resource categories

  • Can edit static pages

  • Can add/edit UI label translations

• Moderator

  • Backend access

  • Can add/moderate resources

  • Can edit/moderate resource translations

4

Backend Landing Page

As an admin/moderator, I want to have a landing page after my successful login, so that I quickly start to do my tasks

Notes

• Has some quick content statistic cards that show:

  • Total content

  • Total new submissions

  • Total new translations

• Users can click on those cards to quick access the resource list and view content, approve submissions, and approve translations

5

Backend Navigation Menu

As an admin/moderator, I want to have a navigation menu in the backed, so that I can access the other pages of the backend site

Notes

• The menu will be a sidebar

• Menu items will be:

  • Resources - displays resources by content type

  • Categories - displays categories by content type

  • Translations - lists UI labels that can be translated

  • Users - lists the backed users

  • Static Pages - lists all pages that can be customized

Additional Improvements

• Make the menu collapsible

• Only one level, the second level will be converted to tabs

6

User Profile Page

As an admin/moderator, I want to be able to update my profile, so that my details are up to date and I can also reset my password 

Notes

• Has the same form of OpenTeleRehab

  • Editable form and confirm save/cancel action if there are unsaved edits before leaving the page

• For password reset

  • Add a link to reset the password and let Keycloak manage the password reset process by sending a reset password email

7

Resources - Content List

As an admin/moderator, I want to be able to see the list of resources per content type, so that I can quickly view the submitted, approved, and declined contents and translations

Notes

• Applied for all content types

• Will list items as a data table

  • Columns

    • Title

    • Status

      • Approved - Approved by admin/moderator and can be seen in the library

      • Pending - Waiting to be reviewed by admin/moderator and hidden in the library

      • Rejected - Rejected by admin/moderator and hidden in the library

    • Uploaded By

    • Contributor Email

    • Upload Date

• We will add notification icons for items that are pending review and items with submitted translations

• Has the search/filter sidebar

8

Resources - Add/Edit/Review Content

As an admin/moderator, I want to be able to add/edit/review submitted content, so that I approved content submissions from site visitors and also add my own content

Notes

• When user clicks an item in the datable, they can edit content and publish the item

• Will have the same add/edit resource content interface of the frontend but without the option to upload more content

9

Automatic Google Translation of Approved Content

As the site owner, I want the system to automatically generate translations by Google Translate of approved contents, so that a base level translation can be displayed in the frontend for all of the sites available language

Notes

• Translations will be generated as soon as the submission is approved

• We will use Google Cloud to generate the translations

• We need to add Google Translate attribution when displaying the unedited translation in the frontent

  • https://cloud.google.com/translate/attribution

• If unaltered translation results are displayed on web pages that can be indexed by search engines, you are required to designate the translated text as machine translated content using the HTML markup reference.

10

Resources - Edit/Review Content Translations

As an admin/moderator, I want to be able to edit/review submitted content translations, so that I approved the submissions and update the official translation

Notes

• When user clicks an item in the datable, they can edit content translations and publish the item

• If translated by Google translate:

  • Edited translation will remove the Google Translate attribution

  • Remove machine translated content designation in the HTML markup

Additional Improvements

• In the language drop-down field, display a marker/icon to help identify which languages has translations

  • At the minimum change the font to bold and chage it's color (we will use HI-orange)

11

Block Mulit-User Editing

As an admin/moderator, I want to be able to block other users from editing the current resource that I'm editing, so that no one can override my content update

Notes

• The first user to open the resource should have the edit lock

• Edit lock is release when user leaves the resource details edit page

• Other users can view the edit page but all fields are disabled and has a notification on top showing who is currently editing the content

12

Resources - Download Exercises

As an admin, I want to be able to download exercise resources from the library, so that I can have a spreadsheet that I can use to upload them to the OpenTeleRehab system

Notes

• Has a download button on the bottom of the search and filter sidebar

• Clicking the download button will download all exercises on the list as a CSV file

  • Follows the template used in OpenTeleRehab

  • Assumption is that any categories here that is does match from OpenTeleRehab will be dropped, but the exercise will be uploaded

13

Categories List

As an admin, I want to be able to see the list of categories per content type, so that I can quickly view what are the available labels I can use to categorize the contents

Notes

• Applied for all content types

• Switching the conent type will diplay the categories available under that type

• Will have the exact the same UI of OpenTeleTehab

  • Each content type displays 3 columns that represents the category level

  • Each column list the category item

  • Each item will have an edit or delete buttons

  • Selecting the item will display the sub-items under it

  • There is a search box on each column to quickly search category item under that level

  • There is an "+" button to add a new category under that level

14

Create/Update Categories

As an admin, I want to be able create to categories per content type per level, so that I can add more categories to label the contents

Notes

• When I click on the "+", it will open a Create/Edit category pop-up

  • The pop-up has a language drop-down so that the user can specify translations of the categories

    • First language created is English by default

    • Other languages can only be chosen on edit mode

  • The pop-up has a required text field for category name

  • The pop-up has a required text field for category value(s)

    • User can enter multiple values separated by ';'

  • The pop-up has a Create/Save and Cancel button

    • Clicking create/save will add the category on the correct level it was created for

    • Clicking cancel will close the pop-up and cancel the creation/save process

15

UI Translations Page

As an admin, I want to be able to add translations of the UI, so that the system can be seen as properly translated on other language

Notes

• Will have the same UI of OpenTeleRehab

  • Has a dropdown to choose the platform to be translated

  • A search bar, filter and column buttons

  • A data table listing the available labels that can be translated that has the key and available languages as columns

  • First column will have an edit link to allow users to enter translations for each available language

• We have an addtional tab to add a new language

16

Languages Tab

As an admin, I want to be able to manage the languages for the site, so that I can view, add and delete languages of the site

Notes

• Will have the same UI of OpenTeleRehab

  • Has a button to add languages

    • Clicking the add button will open an Add language pop-up

      • Name

      • Code

      • Create/Edit and Cancel button

  • A search bar, filter and column buttons

  • A data table listing the available languages for the site

    • ID

    • Name

    • Code

    • Actions

      • Edit

      • Delete

17

User Page

As an admin, I want to be able to view the list of users of the system, so that I can add/invite/delete other admins or moderators to/from the system.

Notes

• Will have a datatable listing the users with the following information
  

  • First Name

  • Last Name

  • Email

  • Gender

  • Role

  • Last Login

  • Actions

    • Edit

    • Delete

• Will have an Add User button

18

Adding/Inviting New Users

As an admin, I want to be able to add/invite other admins or moderators, so that I can add more users to the system

Notes

• When the Add User button is clicked, a pop-up dialog will open containing the Add New User form

• The form will have the following:

  • Radio buttons to select role of user being created

    • Admin

    • Moderator

  • Email field

  • First Name field

  • Last Name field

  • Gender dropdown

  • Create and Cancel buttons

• Clicking create will send an account vefication link to the email entered in the form

• Account will not be active until the account creation link is verified

19

Editing User Information

As an admin, I want to be able to edit user information, so that I can update them if necessary

Notes

• When the edit action is clicked from a user in the datatable, a pop-up dialog will open containing the Edit User form

• The form will have the following:
  

  • Email field

  • First Name field

  • Last Name field

  • Gender dropdown

  • Save and Cancel buttons

• Updating the email will resend an email verfication link

• Account will not be active until the email link is verified

20

Deleting Users

As an admin, I want to delete other admins or moderators, so that I can remove other users from the system

Notes

• When the delete action is clicked from a user in the datatable, a pop-up dialog will open asking for delete confirmation

• Only disabled users can be deleted

21

Disabling Users

As an admin, I want to disable other admins or moderators, so that I can prevent them from accessing the system

Notes

• When the disable action is toggled from a user in the datatable, a pop-up dialog will open asking for disable confirmation

• Disabled users cannot login into the system

22

Static Pages

As an admin, I want to create static pages, so that I can create content for About Us, Home, Terms and Conditions, and Acknowledgement pages

Notes

• Create a template form for creating static pages

  • About Us and Terms and Conditions

    • Banner

    • Page Title

    • Rich Text Editor for main content

  • Home

    • Banner

    • Page Title

    • Rich Text Editor for intoduction content

      • Should we add a limit?

    • Featured Section Component

      • Allow admin to select 8 resources from the dropdown

    • Quick statistics component

  • Acknowledgement

    • Banner

    • Page Title

    • Rich Text Editor for intoduction content

    • Top contributors component

23

Contributor Components

Notes

• Crate a component that will display the contributor information

Additional Improvements

• Will add all contributors that agree to have their name posted

• Will also add all moderators

• Create a different avatar for moderators

• Allow the admin to remove/hide people from the list

24

SEO Basic

Notes

• URL auto-generated from resource/page title 

• H1 autogenerated from resource/page title

• Meta title auto-generated from resource/page title

• Meta description auto-generated from resource/page title

• OG auto generated from resource title / URL https://ogp.me/

• Editable Robots.txt file (for developer use only)

• Custom 404 page

• Hreflang implementation

Additional Improvements

• Create an XML sitemap