feat(NewAccount): refactor, redesign (#50)

* NewAccount: make the dialog a little bit flatter

* NewAccount: redesign layout

* Network: pass error message to error callback

* fix: CRITICAL log on request when there's no access token

* fix: hide titlebar only when no-title exists

to avoid it being applied when we actually do want a flat headerbar with title

* fix: bind auth_page.description and use_auto_auth

there's a small delay between the auth code entry becoming visible and the description updating

* fix: hide title on the other steps too

* Change URL entry title

* Add OSK hint

Co-authored-by: Evangelos Paterakis <evan@geopjr.dev>
This commit is contained in:
Bleak Grey 2023-01-10 19:52:40 +03:00 committed by GitHub
parent 2df67299a0
commit ac01692652
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 80 additions and 60 deletions

View File

@ -12,6 +12,10 @@
box-shadow: none;
}
headerbar.flat.no-title .title {
opacity: 0;
}
.attachment, .attachment button, flowboxchild {
padding:0px;
margin:0px;

View File

@ -8,14 +8,20 @@
<property name="title" translatable="yes">Add Account</property>
<child>
<object class="AdwLeaflet" id="deck">
<property name="can_navigate_back">1</property>
<property name="can_unfold">0</property>
<property name="transition_type">slide</property>
<signal name="notify::visible_child" handler="on_visible_child_notify" swapped="no"/>
<child>
<object class="GtkBox" id="instance_step">
<property name="orientation">vertical</property>
<child>
<object class="AdwHeaderBar">
<property name="show-end-title-buttons">false</property>
<property name="show-start-title-buttons">false</property>
<style>
<class name="flat"/>
<class name="no-title"/>
</style>
<child>
<object class="GtkButton">
<property name="label" translatable="yes">Cancel</property>
@ -39,7 +45,11 @@
<object class="AdwStatusPage">
<property name="vexpand">1</property>
<property name="icon_name">tooth-network-server-symbolic</property>
<property name="title" translatable="yes">What is Your Instance?</property>
<property name="title" translatable="yes">What is your Server?</property>
<property name="description" translatable="yes">If you don&apos;t have one yet, you can register &lt;a href=&quot;https://joinmastodon.org/servers&quot;&gt;here&lt;/a&gt;.</property>
<style>
<class name="compact"/>
</style>
<child>
<object class="AdwClamp">
<property name="maximum-size">400</property>
@ -53,24 +63,18 @@
<property name="orientation">vertical</property>
<property name="spacing">6</property>
<child>
<object class="GtkBox">
<object class="AdwPreferencesGroup">
<child>
<object class="GtkButton">
<property name="label">https://</property>
<property name="sensitive">0</property>
<property name="receives_default">1</property>
<object class="AdwEntryRow" id="instance_entry">
<property name="title" translatable="true">Server URL</property>
<property name="input_purpose">url</property>
<signal name="entry_activated" handler="on_next_clicked" swapped="no"/>
<signal name="changed" handler="clear_errors" swapped="no"/>
</object>
</child>
<child>
<object class="GtkEntry" id="instance_entry">
<property name="hexpand">1</property>
<signal name="activate" handler="on_next_clicked" swapped="no"/>
</object>
</child>
<style>
<class name="linked"/>
</style>
</object>
</child>
<child>
<object class="GtkLabel" id="instance_entry_error">
@ -83,13 +87,6 @@
</child>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">&lt;a href=&quot;https://joinmastodon.org/&quot;&gt;Don&apos;t have one yet?&lt;/a&gt;</property>
<property name="use_markup">1</property>
<property name="xalign">1</property>
</object>
</child>
</object>
</child>
</object>
@ -103,9 +100,15 @@
<property name="orientation">vertical</property>
<child>
<object class="AdwHeaderBar">
<property name="show-end-title-buttons">false</property>
<property name="show-start-title-buttons">false</property>
<style>
<class name="flat"/>
<class name="no-title"/>
</style>
<child>
<object class="GtkButton">
<property name="label" translatable="yes">Previous</property>
<property name="label" translatable="yes">Back</property>
<signal name="clicked" handler="on_back_clicked" swapped="no"/>
</object>
</child>
@ -123,10 +126,13 @@
</object>
</child>
<child>
<object class="AdwStatusPage">
<object class="AdwStatusPage" id="auth_page">
<property name="vexpand">1</property>
<property name="icon_name">tooth-key-password-symbolic</property>
<property name="title" translatable="yes">Enter Authorization Code</property>
<property name="title" translatable="yes">Confirm Authorization</property>
<style>
<class name="compact"/>
</style>
<child>
<object class="AdwClamp">
<property name="maximum-size">400</property>
@ -140,8 +146,15 @@
<property name="orientation">vertical</property>
<property name="spacing">6</property>
<child>
<object class="GtkEntry" id="code_entry">
<signal name="activate" handler="on_next_clicked" swapped="no"/>
<object class="AdwPreferencesGroup">
<property name="visible" bind-source="ToothDialogsNewAccount" bind-property="use_auto_auth" bind-flags="sync-create|invert-boolean"/>"
<child>
<object class="AdwEntryRow" id="code_entry">
<property name="title" translatable="true">Authorization Code</property>
<signal name="entry_activated" handler="on_next_clicked" swapped="no"/>
<signal name="changed" handler="clear_errors" swapped="no"/>
</object>
</child>
</object>
</child>
<child>
@ -155,14 +168,6 @@
</child>
</object>
</child>
<child>
<object class="GtkLabel" id="code_label">
<property name="label" translatable="yes">Didn't work? &lt;a href=&quot;tooth://manual_auth&quot;&gt;Try manual authorization.&lt;/a&gt;</property>
<property name="use_markup">1</property>
<property name="xalign">1</property>
<signal name="activate-link" handler="on_activate_code_label_link" swapped="no"/>
</object>
</child>
</object>
</child>
</object>
@ -176,6 +181,12 @@
<property name="orientation">vertical</property>
<child>
<object class="AdwHeaderBar">
<property name="show-end-title-buttons">false</property>
<property name="show-start-title-buttons">false</property>
<style>
<class name="flat"/>
<class name="no-title"/>
</style>
<child type="end">
<object class="GtkButton">
<property name="receives_default">1</property>
@ -193,7 +204,11 @@
<object class="AdwStatusPage" id="done_page">
<property name="vexpand">1</property>
<property name="icon_name">tooth-check-round-outline-symbolic</property>
<property name="title">Welcome!</property>
<property name="title">Hello!</property>
<property name="description" translatable="true">Your account is connected and ready to use.</property>
<style>
<class name="compact"/>
</style>
</object>
</child>
</object>

View File

@ -3,6 +3,9 @@ using Gtk;
[GtkTemplate (ui = "/dev/geopjr/tooth/ui/dialogs/new_account.ui")]
public class Tooth.Dialogs.NewAccount: Adw.Window {
const string AUTO_AUTH_DESCRIPTION = _("Allow access to your account in the browser. If something went wrong, <a href=\"tooth://manual_auth\">try manual authorization</a>.");
const string CODE_AUTH_DESCRIPTION = _("Copy the authorization code from the browser and paste it here.");
const string scopes = "read write follow";
protected bool is_working { get; set; default = false; }
@ -15,28 +18,27 @@ public class Tooth.Dialogs.NewAccount: Adw.Window {
[GtkChild] unowned Box code_step;
[GtkChild] unowned Box done_step;
[GtkChild] unowned Entry instance_entry;
[GtkChild] unowned Adw.EntryRow instance_entry;
[GtkChild] unowned Label instance_entry_error;
[GtkChild] unowned Entry code_entry;
[GtkChild] unowned Adw.EntryRow code_entry;
[GtkChild] unowned Label code_entry_error;
// [GtkChild] unowned Label code_label;
[GtkChild] unowned Adw.StatusPage auth_page;
[GtkChild] unowned Adw.StatusPage done_page;
public NewAccount () {
Object (transient_for: app.main_window);
app.add_account_window = this;
app.add_window (this);
// StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), app.css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
bind_property("use-auto-auth", auth_page, "description", BindingFlags.SYNC_CREATE, (b, src, ref target) => {
target.set_string (src.get_boolean () ? AUTO_AUTH_DESCRIPTION : CODE_AUTH_DESCRIPTION);
return true;
});
reset ();
present ();
instance_entry.buffer.inserted_text.connect(clear_errors);
instance_entry.buffer.deleted_text.connect(clear_errors);
code_entry.buffer.inserted_text.connect(clear_errors);
code_entry.buffer.deleted_text.connect(clear_errors);
// bind_property ("use-auto-auth", code_label, "visible", BindingFlags.SYNC_CREATE);
}
public override bool close_request () {
@ -62,14 +64,6 @@ public class Tooth.Dialogs.NewAccount: Adw.Window {
}
}
[GtkCallback]
bool on_activate_code_label_link (string uri) {
use_auto_auth = false;
register_client.begin ();
// reset();
return true;
}
void reset () {
message ("Reset state");
clear_errors ();
@ -167,7 +161,7 @@ public class Tooth.Dialogs.NewAccount: Adw.Window {
message ("Saving account");
accounts.add (account);
done_page.title = _("Hello, %s!").printf (account.handle);
done_page.title = _("Hello, %s!").printf (account.display_name);
deck.visible_child = done_step;
message ("Switching to account");
@ -178,6 +172,13 @@ public class Tooth.Dialogs.NewAccount: Adw.Window {
present ();
message (@"Received uri: $uri");
if ("manual_auth" in uri) {
use_auto_auth = false;
register_client.begin ();
// reset();
return;
}
var query = new Soup.URI (uri).get_query ();
var split = query.split ("=");
var code = split[1];
@ -195,6 +196,7 @@ public class Tooth.Dialogs.NewAccount: Adw.Window {
code_entry_error.label = error_message;
}
[GtkCallback]
public void clear_errors () {
instance_entry.remove_css_class("error");
instance_entry_error.label = "";

View File

@ -59,8 +59,7 @@ public class Tooth.Network : GLib.Object {
else if (status == Soup.Status.CANCELLED)
debug ("Message is cancelled. Ignoring callback invocation.");
else
critical (@"Should be ecb: $status $(msg.reason_phrase)");
// ecb ((int32) status, msg.reason_phrase);
ecb ((int32) status, msg.reason_phrase);
});
}

View File

@ -101,7 +101,7 @@ public class Tooth.Request : Soup.Message {
if (form_data != null)
form_data.to_message(request_headers, request_body);
if (account != null) {
if (account != null && account.access_token != null) {
request_headers.append ("Authorization", @"Bearer $(account.access_token)");
}