Skip to content

Commit

Permalink
Improve login screen: allow scrolling, better layout
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@kevinaboos
kevinaboos committed Dec 30, 2024
1 parent 7ebc6d3 commit ff76fef
Showing 1 changed file with 78 additions and 39 deletions.
117 changes: 78 additions & 39 deletions src/login/login_screen.rs
View file
Original file line number Diff line number Diff line change
@@ -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};

Expand All @@ -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::*;

Expand Down Expand Up @@ -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 {
Expand All @@ -127,7 +130,7 @@ live_design! {
}
}

pub LoginScreen = {{LoginScreen}} {
pub LoginScreen = {{LoginScreen}}<ScrollXYView> {
width: Fill, height: Fill
show_bg: true,
draw_bg: {
Expand Down Expand Up @@ -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)
}
Expand All @@ -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")
Expand Down Expand Up @@ -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> {}
Expand All @@ -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 {
Expand Down Expand Up @@ -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) }
Expand Down

0 comments on commit ff76fef

Please sign in to comment.