From ff76fefdad2b3d7a8c2516daea441ad897b4ff64 Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Sun, 29 Dec 2024 17:16:26 -0800
Subject: [PATCH] Improve login screen: allow scrolling, better layout

Also, don't perform an early check for UserID validity,
since we also want to allow the user to entire a partial UserID
(with just the local part) that we can then auto-append the
homeserver URL to in the backend before submitting the login request.
---
 src/login/login_screen.rs | 117 +++++++++++++++++++++++++-------------
 1 file changed, 78 insertions(+), 39 deletions(-)

diff --git a/src/login/login_screen.rs b/src/login/login_screen.rs
index 9b19dfa3..f6d0f018 100644
--- a/src/login/login_screen.rs
+++ b/src/login/login_screen.rs
@@ -1,7 +1,7 @@
 use std::ops::Not;
 
 use makepad_widgets::*;
-use matrix_sdk::ruma::{api::client::session::get_login_types::v3::IdentityProvider, UserId};
+use matrix_sdk::ruma::api::client::session::get_login_types::v3::IdentityProvider;
 
 use crate::sliding_sync::{submit_async_request, LoginByPassword, LoginRequest, MatrixRequest};
 
@@ -10,6 +10,7 @@ live_design! {
     use link::shaders::*;
     use link::widgets::*;
 
+    use crate::shared::helpers::*;
     use crate::shared::styles::*;
     use crate::shared::icon_button::*;
 
@@ -106,16 +107,18 @@ live_design! {
         width: Fit,
         height: Fit,
         cursor: Hand,
-        visible: false,
-        padding: 10.0,
+        visible: true,
+        padding: 10,
+        // margin: 10,
+        margin: { left: 15.5, right: 15.5, top: 10, bottom: 10}
         draw_bg: {
-            border_width: 1.0,
+            border_width: 0.5,
             border_color: (#6c6c6c),
             color: (COLOR_PRIMARY)
         }
     }
     SsoImage = <Image> {
-        width: 21, height: 21
+        width: 30, height: 30,
         draw_bg:{
             uniform mask: 0.0
             fn pixel(self) -> vec4 {
@@ -127,7 +130,7 @@ live_design! {
         }
     }
 
-    pub LoginScreen = {{LoginScreen}} {
+    pub LoginScreen = {{LoginScreen}}<ScrollXYView> {
         width: Fill, height: Fill
         show_bg: true,
         draw_bg: {
@@ -173,39 +176,63 @@ live_design! {
                 empty_message: "Password"
                 draw_text: { text_style: { is_secret: true } }
             }
+
             <View> {
-                width: Fit, height: Fit,
+                width: 250, height: Fit,
+                align: {x: 0.5}
                 flow: Right,
-                homeserver_input = <LoginTextInput> {
-                    width: 220, height: 40
-                    margin: {bottom: -10}
-                    empty_message: "matrix.org"
-                    draw_text: {
-                        text_style: <TITLE_TEXT>{font_size: 9.0}
+                <View> {
+                    width: 215, height: Fit,
+                    flow: Down,
+
+                    homeserver_input = <LoginTextInput> {
+                        width: 215, height: 30,
+                        empty_message: "matrix.org"
+                        draw_text: {
+                            text_style: <TITLE_TEXT>{font_size: 10.0}
+                        }
                     }
+
+                    <View> {
+                        width: 215,
+                        height: Fit,
+                        flow: Right,
+                        padding: {top: 3, left: 2, right: 2}
+                        spacing: 0.0,
+                        align: {x: 0.5, y: 0.5} // center horizontally and vertically
+
+                        left_line = <LineH> {
+                            draw_bg: { color: #C8C8C8 }
+                        }
+
+                        <Label> {
+                            width: Fit, height: Fit
+                            draw_text: {
+                                color: #8C8C8C
+                                text_style: <REGULAR_TEXT>{font_size: 9}
+                            }
+                            text: "Homeserver URL (optional)"
+                        }
+
+                        right_line = <LineH> {
+                            draw_bg: { color: #C8C8C8 }
+                        }
+                    }
+
                 }
                 sso_search_button = <RobrixIconButton> {
-                    width: 25, height: 25,
-                    margin: {top: 5, left: 5 }
+                    width: 28, height: 28,
+                    margin: { left: 5, top: 1}
                     draw_icon: {
                         svg_file: (ICON_SEARCH)
                     }
                     icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
                 }
             }
-            
-            <Label> {
-                width: Fit, height: Fit
-                draw_text: {
-                    color: #x8c8c8c
-                    text_style: <REGULAR_TEXT>{font_size: 9}
-                }
-                text: "Homeserver (optional)"
-            }
 
             login_button = <RobrixIconButton> {
                 width: 250, height: 40
-                margin: {top: 15}
+                margin: {top: 5, bottom: 10}
                 draw_bg: {
                     color: (COLOR_SELECTED_PRIMARY)
                 }
@@ -216,10 +243,24 @@ live_design! {
                 text: "Login"
             }
 
+            left_line = <LineH> {
+                margin: {bottom: -5}
+                draw_bg: { color: #C8C8C8 }
+            }
+            <Label> {
+                width: Fit, height: Fit
+                draw_text: {
+                    color: (COLOR_TEXT)
+                    text_style: <TITLE_TEXT>{font_size: 11.0}
+                }
+                text: "Or, login with an SSO provider:"
+            }
+
             sso_view = <View> {
-                spacing: 20,
-                width: Fit, height: Fit,
-                flow: Right,
+                align: {x: 0.5}
+                width: 250, height: Fit,
+                margin: {left: 5, right: 5} // make the inner view 240 pixels wide
+                flow: RightWrap,
                 apple_button = <SsoButton> {
                     image = <SsoImage> {
                         source: dep("crate://self/resources/img/apple.png")
@@ -253,10 +294,9 @@ live_design! {
             }
                 
             
-            
             status_label = <Label> {
-                width: 250, height: Fit
-                padding: {left: 5, right: 5, top: 10, bottom: 10}
+                width: 250, height: Fit,
+                padding: {left: 5, right: 5, bottom: 10}
                 draw_text: {
                     color: (MESSAGE_TEXT_COLOR)
                     text_style: <REGULAR_TEXT> {}
@@ -274,7 +314,8 @@ live_design! {
             }
             signup_button = <Button> {
                 width: Fit, height: Fit
-                margin: {top: -5}
+                margin: {top: -10}
+                padding: {left: 15, right: 15, top: 10, bottom: 10}
                 draw_text: {
                     // color: (MESSAGE_TEXT_COLOR)
                     fn get_color(self) -> vec4 {
@@ -338,21 +379,19 @@ impl MatchEvent for LoginScreen {
             let _ = robius_open::Uri::new(MATRIX_SIGN_UP_URL).open();
         }
 
-        if login_button.clicked(actions) || user_id_input.returned(actions).is_some() || password_input.returned(actions).is_some() || homeserver_input.returned(actions).is_some(){
+        if login_button.clicked(actions)
+            || user_id_input.returned(actions).is_some()
+            || password_input.returned(actions).is_some()
+            || homeserver_input.returned(actions).is_some()
+        {
             let user_id = user_id_input.text();
             let password = password_input.text();
             let homeserver = homeserver_input.text();
-            let is_valid_user_id = UserId::parse(&user_id).is_ok();
             if user_id.is_empty() || password.is_empty() {
                 status_label.apply_over(cx, live!{
                     draw_text: { color: (COLOR_DANGER_RED) }
                 });
                 status_label.set_text("Please enter both User ID and Password.");
-            } else if !is_valid_user_id {
-                status_label.apply_over(cx, live!{
-                    draw_text: { color: (COLOR_DANGER_RED) }
-                });
-                status_label.set_text("User ID is invalid");
             } else {
                 status_label.apply_over(cx, live!{
                     draw_text: { color: (MESSAGE_TEXT_COLOR) }