yuzu: configure_web: Use Base64 encoded token for simplifying user experience.

src/yuzu/configuration/configure_web.cpp

@@ -11,6 +11,31 @@
 #include "yuzu/configuration/configure_web.h"
 #include "yuzu/uisettings.h"
 
+static constexpr char token_delimiter{':'};
+
+static std::string GenerateDisplayToken(const std::string& username, const std::string& token) {
+    if (username.empty() || token.empty()) {
+        return {};
+    }
+
+    const std::string unencoded_display_token{username + token_delimiter + token};
+    QByteArray b{unencoded_display_token.c_str()};
+    QByteArray b64 = b.toBase64();
+    return b64.toStdString();
+}
+
+static std::string UsernameFromDisplayToken(const std::string& display_token) {
+    const std::string unencoded_display_token{
+        QByteArray::fromBase64(display_token.c_str()).toStdString()};
+    return unencoded_display_token.substr(0, unencoded_display_token.find(token_delimiter));
+}
+
+static std::string TokenFromDisplayToken(const std::string& display_token) {
+    const std::string unencoded_display_token{
+        QByteArray::fromBase64(display_token.c_str()).toStdString()};
+    return unencoded_display_token.substr(unencoded_display_token.find(token_delimiter) + 1);
+}
+
 ConfigureWeb::ConfigureWeb(QWidget* parent)
     : QWidget(parent), ui(std::make_unique<Ui::ConfigureWeb>()) {
     ui->setupUi(this);
@@ -63,13 +88,18 @@ void ConfigureWeb::SetConfiguration() {
     ui->web_signup_link->setOpenExternalLinks(true);
     ui->web_token_info_link->setOpenExternalLinks(true);
 
+    if (Settings::values.yuzu_username.empty()) {
+        ui->username->setText(tr("Unspecified"));
+    } else {
+        ui->username->setText(QString::fromStdString(Settings::values.yuzu_username));
+    }
+
     ui->toggle_telemetry->setChecked(Settings::values.enable_telemetry);
-    ui->edit_username->setText(QString::fromStdString(Settings::values.yuzu_username));
+    ui->edit_token->setText(QString::fromStdString(
-    ui->edit_token->setText(QString::fromStdString(Settings::values.yuzu_token));
+        GenerateDisplayToken(Settings::values.yuzu_username, Settings::values.yuzu_token)));
 
     // Connect after setting the values, to avoid calling OnLoginChanged now
     connect(ui->edit_token, &QLineEdit::textChanged, this, &ConfigureWeb::OnLoginChanged);
-    connect(ui->edit_username, &QLineEdit::textChanged, this, &ConfigureWeb::OnLoginChanged);
 
     user_verified = true;
 
@@ -80,12 +110,13 @@ void ConfigureWeb::ApplyConfiguration() {
     Settings::values.enable_telemetry = ui->toggle_telemetry->isChecked();
     UISettings::values.enable_discord_presence = ui->toggle_discordrpc->isChecked();
     if (user_verified) {
-        Settings::values.yuzu_username = ui->edit_username->text().toStdString();
+        Settings::values.yuzu_username =
-        Settings::values.yuzu_token = ui->edit_token->text().toStdString();
+            UsernameFromDisplayToken(ui->edit_token->text().toStdString());
+        Settings::values.yuzu_token = TokenFromDisplayToken(ui->edit_token->text().toStdString());
     } else {
-        QMessageBox::warning(this, tr("Username and token not verified"),
+        QMessageBox::warning(
-                             tr("Username and token were not verified. The changes to your "
+            this, tr("Token not verified"),
-                                "username and/or token have not been saved."));
+            tr("Token was not verified. The change to your token has not been saved."));
     }
 }
 
@@ -96,17 +127,15 @@ void ConfigureWeb::RefreshTelemetryID() {
 }
 
 void ConfigureWeb::OnLoginChanged() {
-    if (ui->edit_username->text().isEmpty() && ui->edit_token->text().isEmpty()) {
+    if (ui->edit_token->text().isEmpty()) {
         user_verified = true;
 
         const QPixmap pixmap = QIcon::fromTheme(QStringLiteral("checked")).pixmap(16);
-        ui->label_username_verified->setPixmap(pixmap);
         ui->label_token_verified->setPixmap(pixmap);
     } else {
         user_verified = false;
 
         const QPixmap pixmap = QIcon::fromTheme(QStringLiteral("failed")).pixmap(16);
-        ui->label_username_verified->setPixmap(pixmap);
         ui->label_token_verified->setPixmap(pixmap);
     }
 }
@@ -114,8 +143,9 @@ void ConfigureWeb::OnLoginChanged() {
 void ConfigureWeb::VerifyLogin() {
     ui->button_verify_login->setDisabled(true);
     ui->button_verify_login->setText(tr("Verifying..."));
-    verify_watcher.setFuture(QtConcurrent::run([username = ui->edit_username->text().toStdString(),
+    verify_watcher.setFuture(QtConcurrent::run(
-                                                token = ui->edit_token->text().toStdString()] {
+        [username = UsernameFromDisplayToken(ui->edit_token->text().toStdString()),
+         token = TokenFromDisplayToken(ui->edit_token->text().toStdString())] {
             return Core::VerifyLogin(username, token);
         }));
 }
@@ -127,16 +157,15 @@ void ConfigureWeb::OnLoginVerified() {
         user_verified = true;
 
         const QPixmap pixmap = QIcon::fromTheme(QStringLiteral("checked")).pixmap(16);
-        ui->label_username_verified->setPixmap(pixmap);
         ui->label_token_verified->setPixmap(pixmap);
+        ui->username->setText(
+            QString::fromStdString(UsernameFromDisplayToken(ui->edit_token->text().toStdString())));
     } else {
         const QPixmap pixmap = QIcon::fromTheme(QStringLiteral("failed")).pixmap(16);
-        ui->label_username_verified->setPixmap(pixmap);
         ui->label_token_verified->setPixmap(pixmap);
-
+        ui->username->setText(tr("Unspecified"));
-        QMessageBox::critical(
+        QMessageBox::critical(this, tr("Verification failed"),
-            this, tr("Verification failed"),
+                              tr("Verification failed. Check that you have entered your token "
-            tr("Verification failed. Check that you have entered your username and token "
                                  "correctly, and that your internet connection is working."));
     }
 }

src/yuzu/configuration/configure_web.ui

@@ -55,11 +55,7 @@
            </widget>
           </item>
           <item row="0" column="1" colspan="3">
-           <widget class="QLineEdit" name="edit_username">
+           <widget class="QLabel" name="username" />
-            <property name="maxLength">
-             <number>36</number>
-            </property>
-           </widget>
           </item>
           <item row="1" column="0">
            <widget class="QLabel" name="label_token">
@@ -79,14 +75,10 @@
             </property>
            </widget>
           </item>
-          <item row="0" column="4">
-           <widget class="QLabel" name="label_username_verified">
-           </widget>
-          </item>
           <item row="1" column="1" colspan="3">
            <widget class="QLineEdit" name="edit_token">
             <property name="maxLength">
-             <number>36</number>
+             <number>80</number>
             </property>
             <property name="echoMode">
              <enum>QLineEdit::Password</enum>