Designing a web UI for a legacy password manager – Meet the legacy system – Adding the web UI

Designing a web UI for a legacy password manager

Barcelona Perl Workshop 2014

by Alex Muntada / @alexmuntada

cc-by-sa

Meet the legacy system

     shellscript       passwd db            passwd
    +-----------+     +--------------+     +----------+
    | SP client | <=> | SinglePasswd | <=> | SP agent |
    +-----------+     +--------------+     +----------+

						

SP authentication

$ passwd

You will be prompted for two different passwords:
- Your authentication password.
- Your new password for a service group of your choice.

Enter 'alexm' authentication password:
Authenticating user 'alexm'... Successful
						

SP service list

Service group list for user 'alexm':
[1] Gateway: Access to internal services from outside (home, etc.)
    - Gateway Account
    - VPN
    - ...
[2] Internal: Intranet, UNIX account, E-mail account, etc.
    - Authentication
    - Home Page
    - Intranet
    - Mail Account
    - ...
[3] Other: CVS repositories, Mailing lists, etc.
    - Mail List [mhonarc-test]
    - ...

Enter your choice [1..3, L=list, Q=quit]:
						

SP password change

Enter your choice [1..3, L=list, Q=quit]: 2

Enter 'alexm' new password for 'Internal' (8 chars):
Re-enter 'alexm'  password for 'Internal':

Changing 'alexm' passwords for service group 'Internal'
This may take a long while, please be patient...

Password successfully changed in database
...
						

Adding the web UI

     internet        public        internal
    +---------+     +-------+     +---------+
    | browser | <=> | nginx | <=> | apache  |
    +---------+     +-------+     +---------+
                                       ^
                                       |
                                       v
                                +--------------+
                                | SinglePasswd |
                                +--------------+
                                    ^     ^
                                    | ... |
                                    v     v
                          +----------+   +----------+
                          | SP agent |   | SP agent |
                          +----------+   +----------+

						

The web client

Web UI authentication

Web UI service list

Web UI passord change

Wait, there is more...

Adding password reset

More details next time.

Final thoughts

• Designing an API for legacy software isn't that hard.
• Adding new features becomes possible instantly.
• Using APIs you can replace legacy software smoothly.
• REST APIs are cool and help make cool web UIs.
• Mojolicious makes this task even cooler!

¿Questions?

by Alex Muntada / @alexmuntada