[feat] add support for self-hosted server configuration

src/gui/panels/local_peer_panel.cpp

@@ -0,0 +1,290 @@
+#include <random>
+
+#include "layout.h"
+#include "localization.h"
+#include "rd_log.h"
+#include "render.h"
+
+int Render::LocalWindow() {
+  ImGui::SetNextWindowPos(ImVec2(-1.0f, title_bar_height_), ImGuiCond_Always);
+  ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
+
+  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
+  ImGui::BeginChild("LocalDesktopWindow",
+                    ImVec2(local_window_width_, local_window_height_),
+                    ImGuiChildFlags_None,
+                    ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+                        ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
+                        ImGuiWindowFlags_NoBringToFrontOnFocus);
+  ImGui::PopStyleColor();
+
+  ImGui::SetCursorPosY(ImGui::GetCursorPosY() + main_window_text_y_padding_);
+  ImGui::Indent(main_child_window_x_padding_);
+
+  ImGui::TextColored(
+      ImVec4(0.0f, 0.0f, 0.0f, 0.5f), "%s",
+      localization::local_desktop[localization_language_index_].c_str());
+
+  ImGui::Spacing();
+  {
+    ImGui::SetNextWindowPos(
+        ImVec2(main_child_window_x_padding_,
+               title_bar_height_ + main_child_window_y_padding_),
+        ImGuiCond_Always);
+    ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(239.0f / 255, 240.0f / 255,
+                                                   242.0f / 255, 1.0f));
+    ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, 10.0f);
+    ImGui::BeginChild(
+        "LocalDesktopWindow_1",
+        ImVec2(local_child_window_width_, local_child_window_height_),
+        ImGuiChildFlags_Border,
+        ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+            ImGuiWindowFlags_NoTitleBar |
+            ImGuiWindowFlags_NoBringToFrontOnFocus);
+    ImGui::PopStyleVar();
+    ImGui::PopStyleColor();
+    {
+      ImGui::SetWindowFontScale(0.8f);
+      ImGui::Text("%s",
+                  localization::local_id[localization_language_index_].c_str());
+
+      ImGui::Spacing();
+
+      ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH);
+      ImGui::SetWindowFontScale(1.0f);
+      ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
+
+      if (strcmp(client_id_display_, client_id_)) {
+        for (int i = 0, j = 0; i < sizeof(client_id_); i++, j++) {
+          client_id_display_[j] = client_id_[i];
+          if (i == 2 || i == 5) {
+            client_id_display_[++j] = ' ';
+          }
+        }
+      }
+
+      ImGui::InputText(
+          "##local_id", client_id_display_, IM_ARRAYSIZE(client_id_display_),
+          ImGuiInputTextFlags_CharsUppercase | ImGuiInputTextFlags_ReadOnly);
+      ImGui::PopStyleVar();
+
+      ImGui::SameLine();
+
+      ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0));
+      ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0, 0, 0, 0));
+      ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0, 0, 0, 0));
+      ImGui::SetWindowFontScale(0.5f);
+      if (ImGui::Button(ICON_FA_COPY, ImVec2(22, 38))) {
+        local_id_copied_ = true;
+        ImGui::SetClipboardText(client_id_);
+        copy_start_time_ = ImGui::GetTime();
+      }
+      ImGui::SetWindowFontScale(1.0f);
+      ImGui::PopStyleColor(3);
+
+      double time_duration = ImGui::GetTime() - copy_start_time_;
+      if (local_id_copied_ && time_duration < 1.0f) {
+        const ImGuiViewport* viewport = ImGui::GetMainViewport();
+        ImGui::SetNextWindowPos(
+            ImVec2((viewport->WorkSize.x - viewport->WorkPos.x -
+                    notification_window_width_) /
+                       2,
+                   (viewport->WorkSize.y - viewport->WorkPos.y -
+                    notification_window_height_) /
+                       2));
+
+        ImGui::SetNextWindowSize(
+            ImVec2(notification_window_width_, notification_window_height_));
+        ImGui::PushStyleColor(
+            ImGuiCol_WindowBg,
+            ImVec4(1.0f, 1.0f, 1.0f, 1.0f - (float)time_duration));
+        ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f);
+        ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 5.0f);
+        ImGui::Begin("ConnectionStatusWindow", nullptr,
+                     ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
+                         ImGuiWindowFlags_NoSavedSettings);
+        ImGui::PopStyleVar(2);
+        ImGui::PopStyleColor();
+
+        auto window_width = ImGui::GetWindowSize().x;
+        auto window_height = ImGui::GetWindowSize().y;
+        ImGui::SetWindowFontScale(0.8f);
+        std::string text = localization::local_id_copied_to_clipboard
+            [localization_language_index_];
+        auto text_width = ImGui::CalcTextSize(text.c_str()).x;
+        ImGui::SetCursorPosX((window_width - text_width) * 0.5f);
+        ImGui::SetCursorPosY(window_height * 0.5f);
+        ImGui::PushStyleColor(ImGuiCol_Text,
+                              ImVec4(0, 0, 0, 1.0f - (float)time_duration));
+        ImGui::Text("%s", text.c_str());
+        ImGui::PopStyleColor();
+        ImGui::SetWindowFontScale(1.0f);
+
+        ImGui::End();
+      }
+
+      ImGui::Spacing();
+      ImGui::Separator();
+      ImGui::Spacing();
+
+      ImGui::SetWindowFontScale(0.8f);
+      ImGui::Text("%s",
+                  localization::password[localization_language_index_].c_str());
+      ImGui::SetWindowFontScale(1.0f);
+
+      ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH);
+      ImGui::Spacing();
+
+      ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
+      ImGui::InputTextWithHint(
+          "##server_pwd",
+          localization::max_password_len[localization_language_index_].c_str(),
+          password_saved_, IM_ARRAYSIZE(password_saved_),
+          show_password_
+              ? ImGuiInputTextFlags_CharsNoBlank | ImGuiInputTextFlags_ReadOnly
+              : ImGuiInputTextFlags_CharsNoBlank |
+                    ImGuiInputTextFlags_Password |
+                    ImGuiInputTextFlags_ReadOnly);
+      ImGui::PopStyleVar();
+
+      ImGui::SameLine();
+      ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0));
+      ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0, 0, 0, 0));
+      ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0, 0, 0, 0));
+      ImGui::SetWindowFontScale(0.5f);
+      auto l_x = ImGui::GetCursorScreenPos().x;
+      auto l_y = ImGui::GetCursorScreenPos().y;
+      if (ImGui::Button(ICON_FA_EYE, ImVec2(22, 38))) {
+        show_password_ = !show_password_;
+      }
+
+      if (!show_password_) {
+        ImDrawList* draw_list = ImGui::GetWindowDrawList();
+        draw_list->AddLine(ImVec2(l_x + 3.0f, l_y + 12.5f),
+                           ImVec2(l_x + 20.3f, l_y + 26.5f),
+                           IM_COL32(239, 240, 242, 255), 2.0f);
+        draw_list->AddLine(ImVec2(l_x + 3.0f, l_y + 11.0f),
+                           ImVec2(l_x + 20.3f, l_y + 25.0f),
+                           IM_COL32(0, 0, 0, 255), 1.5f);
+      }
+
+      ImGui::SameLine();
+
+      if (ImGui::Button(ICON_FA_PEN, ImVec2(22, 38))) {
+        show_reset_password_window_ = true;
+      }
+      ImGui::SetWindowFontScale(1.0f);
+      ImGui::PopStyleColor(3);
+
+      if (show_reset_password_window_) {
+        const ImGuiViewport* viewport = ImGui::GetMainViewport();
+
+        ImGui::SetNextWindowPos(
+            ImVec2((viewport->WorkSize.x - viewport->WorkPos.x -
+                    connection_status_window_width_) /
+                       2,
+                   (viewport->WorkSize.y - viewport->WorkPos.y -
+                    connection_status_window_height_) /
+                       2));
+
+        ImGui::SetNextWindowSize(ImVec2(connection_status_window_width_,
+                                        connection_status_window_height_));
+
+        ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
+
+        ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1.0, 1.0, 1.0, 1.0));
+        ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 1.0f);
+        ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 5.0f);
+
+        ImGui::Begin("ResetPasswordWindow", nullptr,
+                     ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+                         ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
+                         ImGuiWindowFlags_NoSavedSettings);
+        ImGui::PopStyleVar(2);
+        ImGui::PopStyleColor();
+
+        auto window_width = ImGui::GetWindowSize().x;
+        auto window_height = ImGui::GetWindowSize().y;
+        std::string text =
+            localization::new_password[localization_language_index_];
+        ImGui::SetWindowFontScale(0.5f);
+        auto text_width = ImGui::CalcTextSize(text.c_str()).x;
+        ImGui::SetCursorPosX((window_width - text_width) * 0.5f);
+        ImGui::SetCursorPosY(window_height * 0.2f);
+        ImGui::Text("%s", text.c_str());
+
+        ImGui::SetCursorPosX((window_width - IPUT_WINDOW_WIDTH / 2) * 0.5f);
+        ImGui::SetCursorPosY(window_height * 0.4f);
+        ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH / 2);
+
+        ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
+
+        if (focus_on_input_widget_) {
+          ImGui::SetKeyboardFocusHere();
+          focus_on_input_widget_ = false;
+        }
+
+        bool enter_pressed = ImGui::InputText(
+            "##new_password", new_password_, IM_ARRAYSIZE(new_password_),
+            ImGuiInputTextFlags_CharsNoBlank |
+                ImGuiInputTextFlags_EnterReturnsTrue);
+
+        ImGui::PopStyleVar();
+
+        ImGui::SetCursorPosX(window_width * 0.315f);
+        ImGui::SetCursorPosY(window_height * 0.75f);
+
+        // OK
+        if (ImGui::Button(
+                localization::ok[localization_language_index_].c_str()) ||
+            enter_pressed) {
+          if (6 != strlen(new_password_)) {
+            LOG_ERROR("Invalid password length");
+            show_reset_password_window_ = true;
+            focus_on_input_widget_ = true;
+          } else {
+            show_reset_password_window_ = false;
+            memset(&password_saved_, 0, sizeof(password_saved_));
+            strncpy(password_saved_, new_password_,
+                    sizeof(password_saved_) - 1);
+            password_saved_[sizeof(password_saved_) - 1] = '\0';
+
+            std::string client_id_with_password =
+                std::string(client_id_) + "@" + password_saved_;
+            strncpy(client_id_with_password_, client_id_with_password.c_str(),
+                    sizeof(client_id_with_password_) - 1);
+            client_id_with_password_[sizeof(client_id_with_password_) - 1] =
+                '\0';
+
+            SaveSettingsIntoCacheFile();
+
+            LeaveConnection(peer_, client_id_);
+            DestroyPeer(&peer_);
+            focus_on_input_widget_ = true;
+          }
+        }
+
+        ImGui::SameLine();
+
+        if (ImGui::Button(
+                localization::cancel[localization_language_index_].c_str())) {
+          show_reset_password_window_ = false;
+          focus_on_input_widget_ = true;
+          memset(new_password_, 0, sizeof(new_password_));
+        }
+
+        ImGui::SetWindowFontScale(1.0f);
+
+        ImGui::End();
+        ImGui::PopStyleVar();
+      }
+    }
+
+    ImGui::EndChild();
+  }
+
+  ImGui::EndChild();
+  ImGui::PopStyleVar();
+
+  return 0;
+}

src/gui/panels/recent_connections_panel.cpp

@@ -0,0 +1,286 @@
+#include "localization.h"
+#include "rd_log.h"
+#include "render.h"
+
+int Render::RecentConnectionsWindow() {
+  ImGui::SetNextWindowPos(
+      ImVec2(0, title_bar_height_ + local_window_height_ - 1.0f),
+      ImGuiCond_Always);
+  ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0.0f, 0.0f));
+  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
+  ImGui::BeginChild(
+      "RecentConnectionsWindow",
+      ImVec2(main_window_width_default_,
+             main_window_height_default_ - title_bar_height_ -
+                 local_window_height_ - status_bar_height_ + 1.0f),
+      ImGuiChildFlags_Border,
+      ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+          ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
+          ImGuiWindowFlags_NoBringToFrontOnFocus);
+  ImGui::PopStyleVar();
+  ImGui::PopStyleColor();
+
+  ImGui::SetCursorPosY(ImGui::GetCursorPosY() + main_window_text_y_padding_);
+  ImGui::Indent(main_child_window_x_padding_);
+
+  ImGui::TextColored(
+      ImVec4(0.0f, 0.0f, 0.0f, 0.5f), "%s",
+      localization::recent_connections[localization_language_index_].c_str());
+
+  ShowRecentConnections();
+
+  ImGui::EndChild();
+
+  return 0;
+}
+
+int Render::ShowRecentConnections() {
+  ImGui::SetCursorPosX(25.0f);
+  ImVec2 sub_window_pos = ImGui::GetCursorPos();
+  std::map<std::string, ImVec2> sub_containers_pos;
+  float recent_connection_sub_container_width =
+      recent_connection_image_width_ + 16.0f;
+  float recent_connection_sub_container_height =
+      recent_connection_image_height_ + 36.0f;
+  ImGui::PushStyleColor(ImGuiCol_ChildBg,
+                        ImVec4(239.0f / 255, 240.0f / 255, 242.0f / 255, 1.0f));
+  ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, 10.0f);
+  ImGui::BeginChild("RecentConnectionsContainer",
+                    ImVec2(main_window_width_default_ - 50.0f, 145.0f),
+                    ImGuiChildFlags_Border,
+                    ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+                        ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
+                        ImGuiWindowFlags_NoBringToFrontOnFocus |
+                        ImGuiWindowFlags_AlwaysHorizontalScrollbar |
+                        ImGuiWindowFlags_NoScrollbar |
+                        ImGuiWindowFlags_NoScrollWithMouse);
+  ImGui::PopStyleVar();
+  ImGui::PopStyleColor();
+  size_t recent_connections_count = recent_connections_.size();
+  int count = 0;
+  float button_width = 22;
+  float button_height = 22;
+  for (auto& it : recent_connections_) {
+    sub_containers_pos[it.first] = ImGui::GetCursorPos();
+    std::string recent_connection_sub_window_name =
+        "RecentConnectionsSubContainer" + it.first;
+    // recent connections sub container
+    ImGui::BeginChild(recent_connection_sub_window_name.c_str(),
+                      ImVec2(recent_connection_sub_container_width,
+                             recent_connection_sub_container_height),
+                      ImGuiChildFlags_None,
+                      ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+                          ImGuiWindowFlags_NoMove |
+                          ImGuiWindowFlags_NoTitleBar |
+                          ImGuiWindowFlags_NoBringToFrontOnFocus |
+                          ImGuiWindowFlags_NoScrollbar);
+    std::string connection_info = it.first;
+
+    // remote id length is 9
+    // password length is 6
+    // connection_info -> remote_id + 'Y' + host_name + '@' + password
+    //                 -> remote_id + 'N' + host_name
+    if ('Y' == connection_info[9] && connection_info.size() >= 16) {
+      size_t pos_y = connection_info.find('Y');
+      size_t pos_at = connection_info.find('@');
+
+      if (pos_y == std::string::npos || pos_at == std::string::npos ||
+          pos_y >= pos_at) {
+        LOG_ERROR("Invalid filename");
+        continue;
+      }
+
+      it.second.remote_id = connection_info.substr(0, pos_y);
+      it.second.remote_host_name =
+          connection_info.substr(pos_y + 1, pos_at - pos_y - 1);
+      it.second.password = connection_info.substr(pos_at + 1);
+      it.second.remember_password = true;
+    } else if ('N' == connection_info[9] && connection_info.size() >= 10) {
+      size_t pos_n = connection_info.find('N');
+      size_t pos_at = connection_info.find('@');
+
+      if (pos_n == std::string::npos) {
+        LOG_ERROR("Invalid filename");
+        continue;
+      }
+
+      it.second.remote_id = connection_info.substr(0, pos_n);
+      it.second.remote_host_name = connection_info.substr(pos_n + 1);
+      it.second.password = "";
+      it.second.remember_password = false;
+    } else {
+      it.second.remote_host_name = "unknown";
+    }
+
+    ImVec2 image_screen_pos = ImVec2(ImGui::GetCursorScreenPos().x + 5.0f,
+                                     ImGui::GetCursorScreenPos().y + 5.0f);
+    ImVec2 image_pos =
+        ImVec2(ImGui::GetCursorPosX() + 5.0f, ImGui::GetCursorPosY() + 5.0f);
+    ImGui::SetCursorPos(image_pos);
+    ImGui::Image((ImTextureID)(intptr_t)it.second.texture,
+                 ImVec2((float)recent_connection_image_width_,
+                        (float)recent_connection_image_height_));
+
+    // remote id display button
+    {
+      ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0.2f));
+      ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0, 0, 0, 0.2f));
+      ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0, 0, 0, 0.2f));
+
+      ImVec2 dummy_button_pos =
+          ImVec2(image_pos.x, image_pos.y + recent_connection_image_height_);
+      std::string dummy_button_name = "##DummyButton" + it.second.remote_id;
+      ImGui::SetCursorPos(dummy_button_pos);
+      ImGui::SetWindowFontScale(0.6f);
+      ImGui::Button(dummy_button_name.c_str(),
+                    ImVec2(recent_connection_image_width_ - 2 * button_width,
+                           button_height));
+      ImGui::SetWindowFontScale(1.0f);
+      ImGui::SetCursorPos(
+          ImVec2(dummy_button_pos.x + 2.0f, dummy_button_pos.y + 1.0f));
+      ImGui::SetWindowFontScale(0.65f);
+      ImGui::Text("%s", it.second.remote_id.c_str());
+      ImGui::SetWindowFontScale(1.0f);
+      ImGui::PopStyleColor(3);
+
+      if (ImGui::IsItemHovered()) {
+        ImGui::BeginTooltip();
+        ImGui::SetWindowFontScale(0.5f);
+        ImGui::Text("%s", it.second.remote_host_name.c_str());
+        ImGui::SetWindowFontScale(1.0f);
+        ImGui::EndTooltip();
+      }
+    }
+
+    ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0.2f));
+    ImGui::PushStyleColor(ImGuiCol_ButtonHovered,
+                          ImVec4(0.1f, 0.4f, 0.8f, 1.0f));
+    ImGui::PushStyleColor(ImGuiCol_ButtonActive,
+                          ImVec4(1.0f, 1.0f, 1.0f, 0.7f));
+    ImGui::SetWindowFontScale(0.5f);
+    // trash button
+    {
+      ImVec2 trash_can_button_pos = ImVec2(
+          image_pos.x + recent_connection_image_width_ - 2 * button_width,
+          image_pos.y + recent_connection_image_height_);
+      ImGui::SetCursorPos(trash_can_button_pos);
+      std::string trash_can = ICON_FA_TRASH_CAN;
+      std::string recent_connection_delete_button_name =
+          trash_can + "##RecentConnectionDelete" +
+          std::to_string(trash_can_button_pos.x);
+      if (ImGui::Button(recent_connection_delete_button_name.c_str(),
+                        ImVec2(button_width, button_height))) {
+        show_confirm_delete_connection_ = true;
+        delete_connection_name_ = it.first;
+      }
+
+      if (delete_connection_ && delete_connection_name_ == it.first) {
+        if (!thumbnail_->DeleteThumbnail(it.first)) {
+          reload_recent_connections_ = true;
+          delete_connection_ = false;
+        }
+      }
+    }
+
+    // connect button
+    {
+      ImVec2 connect_button_pos =
+          ImVec2(image_pos.x + recent_connection_image_width_ - button_width,
+                 image_pos.y + recent_connection_image_height_);
+      ImGui::SetCursorPos(connect_button_pos);
+      std::string connect = ICON_FA_ARROW_RIGHT_LONG;
+      std::string connect_to_this_connection_button_name =
+          connect + "##ConnectionTo" + it.first;
+      if (ImGui::Button(connect_to_this_connection_button_name.c_str(),
+                        ImVec2(button_width, button_height))) {
+        ConnectTo(it.second.remote_id, it.second.password.c_str(),
+                  it.second.remember_password);
+      }
+    }
+    ImGui::SetWindowFontScale(1.0f);
+    ImGui::PopStyleColor(3);
+
+    ImGui::EndChild();
+
+    if (count != recent_connections_count - 1) {
+      ImVec2 line_start =
+          ImVec2(image_screen_pos.x + recent_connection_image_width_ + 20.0f,
+                 image_screen_pos.y);
+      ImVec2 line_end = ImVec2(
+          image_screen_pos.x + recent_connection_image_width_ + 20.0f,
+          image_screen_pos.y + recent_connection_image_height_ + button_height);
+      ImGui::GetWindowDrawList()->AddLine(line_start, line_end,
+                                          IM_COL32(0, 0, 0, 122), 1.0f);
+    }
+
+    count++;
+    ImGui::SameLine(0, count != recent_connections_count ? 26.0f : 0.0f);
+  }
+
+  ImGui::EndChild();
+
+  if (show_confirm_delete_connection_) {
+    ConfirmDeleteConnection();
+  }
+
+  return 0;
+}
+
+int Render::ConfirmDeleteConnection() {
+  const ImGuiViewport* viewport = ImGui::GetMainViewport();
+  ImGui::SetNextWindowPos(ImVec2((viewport->WorkSize.x - viewport->WorkPos.x -
+                                  connection_status_window_width_) /
+                                     2,
+                                 (viewport->WorkSize.y - viewport->WorkPos.y -
+                                  connection_status_window_height_) /
+                                     2));
+
+  ImGui::SetNextWindowSize(ImVec2(connection_status_window_width_,
+                                  connection_status_window_height_));
+  ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
+  ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1.0, 1.0, 1.0, 1.0));
+  ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 1.0f);
+  ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 5.0f);
+
+  ImGui::Begin("ConfirmDeleteConnectionWindow", nullptr,
+               ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+                   ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
+                   ImGuiWindowFlags_NoSavedSettings);
+  ImGui::PopStyleVar(2);
+  ImGui::PopStyleColor();
+
+  std::string text =
+      localization::confirm_delete_connection[localization_language_index_];
+  ImGui::SetCursorPosX(connection_status_window_width_ * 6 / 19);
+  ImGui::SetCursorPosY(connection_status_window_height_ * 2 / 3);
+
+  // ok
+  ImGui::SetWindowFontScale(0.5f);
+  if (ImGui::Button(localization::ok[localization_language_index_].c_str()) ||
+      ImGui::IsKeyPressed(ImGuiKey_Enter)) {
+    delete_connection_ = true;
+    show_confirm_delete_connection_ = false;
+  }
+
+  ImGui::SameLine();
+  // cancel
+  if (ImGui::Button(
+          localization::cancel[localization_language_index_].c_str()) ||
+      ImGui::IsKeyPressed(ImGuiKey_Escape)) {
+    delete_connection_ = false;
+    show_confirm_delete_connection_ = false;
+  }
+
+  auto window_width = ImGui::GetWindowSize().x;
+  auto window_height = ImGui::GetWindowSize().y;
+
+  auto text_width = ImGui::CalcTextSize(text.c_str()).x;
+  ImGui::SetCursorPosX((window_width - text_width) * 0.5f);
+  ImGui::SetCursorPosY(window_height * 0.2f);
+  ImGui::Text("%s", text.c_str());
+  ImGui::SetWindowFontScale(1.0f);
+
+  ImGui::End();
+  ImGui::PopStyleVar();
+  return 0;
+}

src/gui/panels/remote_peer_panel.cpp

@@ -0,0 +1,181 @@
+#include "layout.h"
+#include "localization.h"
+#include "rd_log.h"
+#include "render.h"
+
+static int InputTextCallback(ImGuiInputTextCallbackData *data);
+
+int Render::RemoteWindow() {
+  ImGui::SetNextWindowPos(ImVec2(local_window_width_ + 1.0f, title_bar_height_),
+                          ImGuiCond_Always);
+  ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
+
+  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
+  ImGui::BeginChild("RemoteDesktopWindow",
+                    ImVec2(remote_window_width_, remote_window_height_),
+                    ImGuiChildFlags_None,
+                    ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+                        ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
+                        ImGuiWindowFlags_NoBringToFrontOnFocus);
+  ImGui::PopStyleColor();
+
+  ImGui::SetCursorPosY(ImGui::GetCursorPosY() + main_window_text_y_padding_);
+  ImGui::Indent(main_child_window_x_padding_ - 1.0f);
+
+  ImGui::TextColored(
+      ImVec4(0.0f, 0.0f, 0.0f, 0.5f), "%s",
+      localization::remote_desktop[localization_language_index_].c_str());
+
+  ImGui::Spacing();
+  {
+    ImGui::SetNextWindowPos(
+        ImVec2(local_window_width_ + main_child_window_x_padding_ - 1.0f,
+               title_bar_height_ + main_child_window_y_padding_),
+        ImGuiCond_Always);
+    ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(239.0f / 255, 240.0f / 255,
+                                                   242.0f / 255, 1.0f));
+    ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, 10.0f);
+
+    ImGui::BeginChild(
+        "RemoteDesktopWindow_1",
+        ImVec2(remote_child_window_width_, remote_child_window_height_),
+        ImGuiChildFlags_Border,
+        ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
+            ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
+            ImGuiWindowFlags_NoBringToFrontOnFocus);
+    ImGui::PopStyleVar();
+    ImGui::PopStyleColor();
+    {
+      ImGui::SetWindowFontScale(0.8f);
+      ImGui::Text(
+          "%s", localization::remote_id[localization_language_index_].c_str());
+
+      ImGui::Spacing();
+      ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH);
+      ImGui::SetWindowFontScale(1.0f);
+      ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
+      if (re_enter_remote_id_) {
+        ImGui::SetKeyboardFocusHere();
+        re_enter_remote_id_ = false;
+        memset(remote_id_display_, 0, sizeof(remote_id_display_));
+      }
+      bool enter_pressed = ImGui::InputText(
+          "##remote_id_", remote_id_display_, IM_ARRAYSIZE(remote_id_display_),
+          ImGuiInputTextFlags_CharsDecimal |
+              ImGuiInputTextFlags_EnterReturnsTrue |
+              ImGuiInputTextFlags_CallbackEdit,
+          InputTextCallback);
+
+      ImGui::PopStyleVar();
+      ImGui::SameLine();
+
+      std::string remote_id = remote_id_display_;
+      remote_id.erase(remove_if(remote_id.begin(), remote_id.end(),
+                                static_cast<int (*)(int)>(&isspace)),
+                      remote_id.end());
+      if (ImGui::Button(ICON_FA_ARROW_RIGHT_LONG, ImVec2(55, 38)) ||
+          enter_pressed) {
+        connect_button_pressed_ = true;
+        bool found = false;
+        for (auto &[id, props] : recent_connections_) {
+          if (id.find(remote_id) != std::string::npos) {
+            found = true;
+            if (client_properties_.find(remote_id) !=
+                client_properties_.end()) {
+              if (!client_properties_[remote_id]->connection_established_) {
+                ConnectTo(props.remote_id, props.password.c_str(), false);
+              } else {
+                // todo: show warning message
+                LOG_INFO("Already connected to [{}]", remote_id);
+              }
+            } else {
+              ConnectTo(props.remote_id, props.password.c_str(), false);
+            }
+          }
+        }
+
+        if (!found) {
+          ConnectTo(remote_id, "", false);
+        }
+      }
+
+      if (need_to_rejoin_) {
+        need_to_rejoin_ = false;
+        for (const auto &[_, props] : client_properties_) {
+          if (props->rejoin_) {
+            ConnectTo(props->remote_id_, props->remote_password_,
+                      props->remember_password_);
+          }
+        }
+      }
+    }
+    ImGui::EndChild();
+  }
+  ImGui::EndChild();
+  ImGui::PopStyleVar();
+
+  return 0;
+}
+
+static int InputTextCallback(ImGuiInputTextCallbackData *data) {
+  if (data->BufTextLen > 3 && data->Buf[3] != ' ') {
+    data->InsertChars(3, " ");
+  }
+
+  if (data->BufTextLen > 7 && data->Buf[7] != ' ') {
+    data->InsertChars(7, " ");
+  }
+
+  return 0;
+}
+
+int Render::ConnectTo(const std::string &remote_id, const char *password,
+                      bool remember_password) {
+  LOG_INFO("Connect to [{}]", remote_id);
+  focused_remote_id_ = remote_id;
+
+  if (client_properties_.find(remote_id) == client_properties_.end()) {
+    client_properties_[remote_id] =
+        std::make_shared<SubStreamWindowProperties>();
+    auto props = client_properties_[remote_id];
+    props->local_id_ = "C-" + std::string(client_id_);
+    props->remote_id_ = remote_id;
+    memcpy(&props->params_, &params_, sizeof(Params));
+    props->params_.user_id = props->local_id_.c_str();
+    props->peer_ = CreatePeer(&props->params_);
+    AddAudioStream(props->peer_, props->audio_label_.c_str());
+    AddDataStream(props->peer_, props->data_label_.c_str());
+
+    if (props->peer_) {
+      LOG_INFO("[{}] Create peer instance successful", props->local_id_);
+      Init(props->peer_);
+      LOG_INFO("[{}] Peer init finish", props->local_id_);
+    } else {
+      LOG_INFO("Create peer [{}] instance failed", props->local_id_);
+    }
+
+    props->connection_status_ = ConnectionStatus::Connecting;
+  }
+  int ret = -1;
+  auto props = client_properties_[remote_id];
+  if (!props->connection_established_) {
+    props->remember_password_ = remember_password;
+    if (strcmp(password, "") != 0 &&
+        strcmp(password, props->remote_password_) != 0) {
+      strncpy(props->remote_password_, password,
+              sizeof(props->remote_password_) - 1);
+      props->remote_password_[sizeof(props->remote_password_) - 1] = '\0';
+    }
+
+    std::string remote_id_with_pwd = remote_id + "@" + password;
+    ret = JoinConnection(props->peer_, remote_id_with_pwd.c_str());
+    if (0 == ret) {
+      props->rejoin_ = false;
+    } else {
+      props->rejoin_ = true;
+      need_to_rejoin_ = true;
+    }
+  }
+
+  return 0;
+}