improve UI and add keyboard shortcuts

[paolostivanin]

Evaluate switch to GtkListBox and global ui file:

• cleaner ui
• can be used on small screen (eg, librem 5)
• accels can be easily added when using one single ui file
• codebase becomes cleaner if the ui part is taken out

[gergelypolonkai]

I made a hasty implementation of the main window as a .ui file, using a GtkListBox. Feel free to use it if you like.

If you want, I can also make the code use it and send you a proper PR.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.22.0 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <template class="main-window" parent="GtkApplicationWindow">
    <property name="can_focus">False</property>
    <property name="default_width">500</property>
    <property name="default_height">350</property>
    <property name="icon_name">otpclient</property>
    <child>
      <object class="GtkListBox" id="token-list">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
      </object>
    </child>
    <child type="titlebar">
      <object class="GtkHeaderBar" id="header">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="title">OTPClient 1.1.1</property>
        <child>
          <object class="GtkBox">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <object class="GtkButton" id="remove-button">
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="tooltip_text" translatable="yes">Add</property>
                <child>
                  <object class="GtkImage">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="icon_name">list-add-symbolic</property>
                  </object>
                </child>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">0</property>
              </packing>
            </child>
            <child>
              <object class="GtkButton" id="add-button">
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="tooltip_text" translatable="yes">Remove</property>
                <child>
                  <object class="GtkImage">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="icon_name">list-remove-symbolic</property>
                  </object>
                </child>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">1</property>
              </packing>
            </child>
            <style>
              <class name="linked"/>
            </style>
          </object>
        </child>
        <child>
          <object class="GtkMenuButton" id="menu-button">
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="receives_default">True</property>
            <child>
              <object class="GtkImage">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="icon_name">open-menu-symbolic</property>
              </object>
            </child>
          </object>
          <packing>
            <property name="pack_type">end</property>
            <property name="position">1</property>
          </packing>
        </child>
      </object>
    </child>
  </template>
</interface>

[paolostivanin]

Thanks for your help, always appreciated :)
I gave it a quick look and I spotted an error here: <property name="title">OTPClient 1.1.1</property>. The title is generated at runtime, so no need to hard-code the name and version here.

[gergelypolonkai]

Yes I know, I just added it for readability’s purpose :)

[paolostivanin]

Another alternative would be to keep the current UI and improving it by:

• removing the tick column
• when row is selected otp is shown and copied to the clipboard
• when otp column is double clicked otp value is copied to the clipboard
• moving the countdown to a separate column with an empty value when type is hotp

[gergelypolonkai]

I was about to open a discussion about copying the code even if the checkbox is not ticked. You were faster :)

Also, it would look nice if the TOTP countdown would be a decreasing progress bar instead of the current GtkLabel.

[paolostivanin]

Yes, I also thought about that. I was thinking about having a "pie progress" instead of the usual progress bar, but I couldn't find anything like that on gtk. I guess I'll stick with the plain old progress bar then :)

Sent from my Aquaris X Pro using FastHub

[gergelypolonkai]

There’s a (seemingly abandoned) project called gnome-break-timer; they used a custom widget as the progress bar. It is written in Vala, but it seems straightforward to implement in C.

[paolostivanin]

Thanks for link! I'll have a look at it :)

Sent from my Aquaris X Pro using FastHub

[paolostivanin]

I'm not convinced that a circle counter/progress bar widget would be better than a plain text counter here. The widget would be very small and, therefore, more difficult to interpret compared to a simple countdown label.

[gergelypolonkai]

How about a progress bar then? A thin one like some web apps use nowadays, not a full thick one.

[paolostivanin]

I'll try it and see how it will look like :)
But I think I will add a new setting in the menu, so everyone will be able to choose between label and widget 👍

[gergelypolonkai]

Also, what will it look like for codes that use 60s htimeout instead of 30? FreeOTP+ solves it by not displaying a global timer, but one for every code. However, when you reveal multiple codes, it is rather annoying (although why on earth would you do that?)

[paolostivanin]

Actually it won't look at all. I still have to implement the support for 60s codes. I had it in mind, but then I completely forgot about it. Thank you for reminding me 👍

The global timer will be gone with version 1.3.0. I'm planning to add an additional column with a counter for each row. It's a bit uglier than now to have so many redundant counters, but

1. how many code does someone input at the same time (or in a short timeframe)? Maybe 2 or 3
2. HOTPs don't need a timer, so right now the global one is a bit confusing
3. there will be support also 60s tokens, so the global one won't make any sense
4. the counter(s) will be hidden by default

[gergelypolonkai]

1. this is only valid if the checkbox gets automatically unticked after some periods of time; if I have to untick it manually, it is possible that I will end up having a lot of visible codes.
2. indeed. Even though I don’t use HOTP, I can imagine how confusing it can be
3. see the previous point
4. that’s a good idea

I begin to feel a bit embarrassed to always mention it, but FreeOTP+ solves it pretty good to only display timers when the code is displayed. When you tap on a code, two timers get visible. The inner circle counts down until the current code is valid. The outer timer counts down until a code is visible on the screen, which is basically this code and the next one; if that timer ends, the code gets automatically hidden. I’m not sure it’s a good idea for a desktop app, but the idea behind it is pretty good (for me.)

[paolostivanin]

Ahahah no problem! Feedbacks are always more than welcome :)
Mmm, I could implement something like that...maybe as an additional setting like, for example, "number of cycles the token will stay visible"