Improvements for the UI

[jsimplicio]

Hey everyone, I found this project under Open Source Design (http://opensourcedesign.net/jobs/) and really want to collaborate and help make the UI look better, and overall UX. I want to start playing with the app so I can start figuring out the weak points in the UI and start sketching. However I am not sure how to run the app. I installed QT and am not sure if that's all that I need to run but when I try to run the command for OS X with qmake it tells me that it cannot find the command qmake. Perhaps is a $PATH issue?

Thanks for your help!

[annejan]

First of all thank you for your interest in helping us out making QtPass more awesome.
Currently we are in a redesign step, so it might be smart to have a look at the current changes in #124

On OSX it's easiest to install QtCreator http://www.qt.io/ide/ which I'm guessing you did?

Then open the qtpass.pro file, this should open the IDE which will ask you some questions about what kinds of builds you want to make, the defaults should suffice.

The IDE has a [Run] button for running QtPass and quickly viewing changes you make in the Forms and Code.

Running qmake from command-line indeed needs a path change, in my .bash_profile on OSX I have export PATH="$HOME/Qt/5.5/clang_64/bin:$PATH"

Please let me know if this is helpful..

Also, for just running QtPass there are builds under https://github.com/IJHack/qtpass/releases

[jsimplicio]

Hey there @annejan and thanks for the quick and helpful reply. I followed your instructions which made complete sense and got everything working! I will catch up to speed on that thread!

Cheers

[jsimplicio]

Hey @annejan I took a stab based on what was already done in that PR. I decided that we have so few icons that I made them myself, why not! So we have a common style going. I noticed in some of your screenshots that the icons were inside of a box with a border. Is it possible to let them stand out by themselves as a button and to remove that outline?

Let me know what you think!

*missing the key icon currently so ignore that.

[annejan]

From @termitoz moved from #124
New looks:

[jsimplicio]

Here are the button icons in svg and previews in jpeg:

qtpass-icons.zip

[jsimplicio]

@annejan Btw if you want the icons outside of the circular buttons too let me know!

[annejan]

Awesome, thank you @jsimplicio !

Yes please, just the icons would be awesome for #124
Also if possible I'd love for a <X] style (clear search for mainwindow and users) button and a Copy (password) button 🙇

Trying the round buttons as fallback (on OSX) now . . looks like this . .

[jsimplicio]

Hey @annejan I'm noticing the config screen is gonna end up looking different soon. Under profiles? I see the mentioning of templates also. What are some things missing from config that we should include in a redesign?

[annejan]

More settings that are per-profile (not just the password-store folder) #112
Most importantly the git settings.

Templates must be that .. Templates not just a template ;-) #155

[jsimplicio]

Right now there's a template tab in the config. How's that different?

[jsimplicio]

Also where would the git settings be now? The current ones aren't enough?

[annejan]

We want the ability to have multiple templates, with names.

For example: server, website, product
And all of them have different fields, server would have IP and product might have serialnumber for example.

The git settings are enough, but should be changeable per-profile.
So that will need a big reshuffle from the general page to a per-profile page (if that makes any sense).

[jsimplicio]

Like this for the git?

[annejan]

Yah that looks very do-able 👍

[jsimplicio]

Cool, I'm not too much of a coder but I can keep giving you these templates for you to refer off of?

For the templates, the types of options under each template would be something you'd have to think about right? Can you name some templates for example

[annejan]

From #155

Secure Notes
Credit Card Info
Logins
Identities
Bank Accounts
Database Logins
Email Accounts
Memberships
Servers (ssh)
Software Licenses

[jsimplicio]

Under templates in config, should I still keep the "use template" and "show all fields templated" ?

And should you be able to switch between templates and fill out their fields?

[jsimplicio]

Also instead of saying "Use TrayIcon" under system in settings, is there a better way to say it that'd be clearer for more users that don't understand what TrayIcon is?

[annejan]

I think you should be able to switch which template you want to edit.

TrayIcon is probably not that good a name indeed, I'm not that well known with the popular naming of widgets on desktop systems.

[jsimplicio]

What is a TrayIcon exactly? What does it mean to use it. So the icon shows up somewhere?

[jsimplicio]

Also I had time to clean up the icons, I ran these thru svgo already as well
qtpass-icons.zip

[annejan]

Thanks for the icons, will put them in when I can.

The tray or system-tray is where some applications can have a quickly accessible icon to use. This is available on most systems. The most striking example most people are familiar with is the volume controls, the speaker icon that pops up a volume slider.
On Windows and KDE the tray is most commonly found at the bottom-right. On Mac OSX and Gnome it's common at the top-right of the screen.

QtPass has the possibility of having a trayicon to hide and show the application. When using the trayicon you also gain the option to "hide" there instead of closing the app when you press the [X] close button.

[jsimplicio]

I think for macs it's referred as the menu bar? I'm not sure what it is called on Windows since I'm not a user of it.

[annejan]

Seems that indeed the Mac name is menu bar

https://support.picturelife.com/hc/en-us/articles/201440709-What-is-the-system-tray-or-menu-bar-

I'll make an automagic platform switch for the terminology :-) and call it "menu bar" on OSX

[jsimplicio]

A user should be able to edit the fields in a template when they're adding a new entry? How does the template settings change under config if at all?

[annejan]

The templates are used when creating a new password entry.
Also when editing an entry they are shown.

If you chose the "show all fields templated" option, every line in the password file that has a : in it as a separator is shown as a "field" with a "value" except for URLs.

Currently you can only add fields via config or while entering or editing a password by entering it as a line field:value in the comment section of the pasword file when using the "show all fields templated" feature.

[jsimplicio]

Any reason why there is this big text area under login and url?

I'm thinking of adding a select drop down list where you switch templates and every time you switch instead of saying 'login' and 'url' it says whatever the fields that template holds. Does that make sense?

[jsimplicio]

Also can you only generate a password, you can't enter your own?

[annejan]

The big field is for comments or other information like notes, hints, links or software licenses.
The login and url come from the Template settings in Configuration, there can already be others.

You can just enter a password in the field, generation is completely optional.

Dropdown would be the way to go as @jounathaen noted in #155
perhaps just a bit more elegant.

[jsimplicio]

Understand. I was getting a little confused by the UI because it suggests you should generate a password instead of perhaps entering your own. Instead of using the fields under templates in config, wouldn't these fields change depending on the template?

[annejan]

Yes, they change depending on the template you chose.

The current situation you can only have one template and optionally choose to have automagic fields added.

When we add multiple templates and for example you have an "email" field set with "a@b.c" in template A and switch to template B which doesn't have "email" them in the comment section would appear a line with email:a@b.c
When you chose the config setting for "show all fields templated" the "email" field will stay, because it is in the password file, even though it's not in the chosen template.

[jsimplicio]

why should you keep the field from template A in template's B comments when you switch?

[annejan]

Normally you don't and they don't show as fields, only in the comment section.

But when a user checks the "show all fields templated" checkbox, they do.
Since that feature shows all lines that have a : and are not urls as a "field" with it's value.

[jsimplicio]

Since there are a lot of fields to be filled and all that, instead of the password adding part being a pop up screen when you're adding a password, wouldn't it be better to automatically open that screen from the screenshot you've sent above?

I tried mocking up a pop up like it happens now but not much can fit in it. I feel like if it automatically opened in the screen above where you fill out stuff it makes more sense?

Here's how crowded a pop up would get:

[annejan]

The screenshot above is just that, a (modal) popup, that what it looks like on a KDE/plasma desktop.

And it's even missing the comment/notes field ;)
But the "popup" can be resized . . it doesn't have to be tiny . .

[keitalbame]

Is there any drawback to have next to the generate password button, a way to change the number of characters? Its not necessary for this to change the default value. Just on that operation.

In my case, I always use 100 characters as default but sometimes, websites don't like this. Some even don't explicit the max allowed and so a trial and error is needed.

I know that this probably is not a feature that is going to be used alot but it would be a nice to have, IMO.

[annejan]

I can't think of any drawbacks except for UI clutter.

[jsimplicio]

I know the screenshot is a modal pop up but when you add a new password the options to add open up on a new pop up. I on as wondering if immediately adding it to the actual qtpass modal and letting you edit there is better than editing on another smaller modal that has popped up when you clicked "add"

[jsimplicio]

Sorry closed it on accident.

[annejan]

Ah, yeah, in-place adding/editing was something I tried when we just started with QtPass.
We found it to be a bit confusing at the time, but it is worth a try.

[jsimplicio]

I believe if you perhaps have the pop up first where you enter the name like it happens now and then it auto adds to the list of passwords and the information pertaining to that one opens up on the side of the password list with edit mode on? The person wouldn't be able to leave that screen without saving the info or canceling out I suppose. I can try mocking some stuff up and we could try testing it out if it's too confusing

[jsimplicio]

@keitalbame This could be a good feature to offer so the password generator is a little customizable. Not sure how cluttered it'd make the interface but I can try to mock it up as well. And we'll see.

[jsimplicio]

Here's how things could look when you click on a password file:

And then you can click edit to make any changes. This screen could also be the screen that shows up after you add a new password file but then with blank everything for you to fill out.

[jounathaen]

At the moment, I'm workin on some UI upgrades, which will maybe fix #127
But I cannot say, when I'll have the time to finish it...

[jounathaen]

I did some Changes, not finished yet.
Includes:

• Second Collumn is grey (not interactable, so why white)
• Filename is shown above entry
• Small Qtpass Icon in the corner
• Deselect item by clicking on whitespace in Treeview (would solve Cannot create top level folder #127)

(still working on last point)

Tell me if you like it!

[tezeb]

@jounathaen is it already merged?(some of the items listed seems to be included in master?)

Anyway, I have an idea how to implement templates to make it easier to modify it(or them?) and to make look and feel of QtPass more consistent(ie. right now even with templates disabled, Add/Edit window shows login/url fields).
Even in the simplest scenario(current) there are effectively two templates(one from configuration and the empty one). Additionally right now each time file is displayed the fields are created/destroyed, which is a bit wastefull. I think that we can create common interface (ie. fileTemplate), which will be used for creating widget given file contents. This widget will be displayed inside gridLayout in MainWindow and inside Add/Edit window and whenever displaying/editing password is needed. Of course different widget will be created depending on desired action(show/edit).

class fileTemplate {
protected:
QWidget* getPasswordLine(bool edit = false);
QWidget* getPlainTextEdit(bool edit = false);
QWidget* getEditLine(bool edit = false);
public:
QWidget* getWidget(QString &fileContent, bool edit = false);
void clear();
};

It will come handy if we're going to implement #155.

[annejan]

Correct, @tezeb, the stuff proposed by @jounathaen has been merged (and improved upon too) . .

Your idea seems nice, but did you take into account the "treat all colon separated fields (except urls) as template fields" scenario?

[tezeb]

Not really. Wasn't aware of it. Is it described somewhere?
It shouldn't be difficult to extend though(after all each template has access to whole content and can split it arbitrarily).

[tezeb]

Additionally widget can have signals which will be proxied through fileTemplate to MainWindow so that fileTemplate can has final say on the format of data stored inside a file.

[tezeb]

I've just noticed in the passworddialog.cpp what you probably have meant. I do intend to keep the format of stored files exactly the same as they are now(ie. templated lines of form "name: value").