Skip to content

Commit

Permalink
Merge pull request #308 from kevinaboos/login_screen_improvements
Browse files Browse the repository at this point in the history 
Improve login screen: allow scrolling, better layout
  • Loading branch information
@kevinaboos
kevinaboos authored Dec 30, 2024
2 parents 7ebc6d3 + ff76fef commit 5645e28
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 5645e28

Please sign in to comment.