Init

src/ui/login.rs

@@ -0,0 +1,176 @@
+use ratatui::Frame;
+use ratatui::layout::{Alignment, Constraint, Flex, Layout, Rect};
+use ratatui::style::{Color, Style};
+use ratatui::text::Line;
+use ratatui::widgets::{Block, Paragraph, Wrap};
+
+use super::theme;
+use crate::app::state::{LoginField, LoginForm, LoginMode};
+
+pub fn draw(frame: &mut Frame, form: &LoginForm) {
+    match form.mode {
+        LoginMode::Form => draw_form(frame, form),
+        LoginMode::SsoPending => draw_sso_pending(frame, form),
+    }
+}
+
+fn draw_form(frame: &mut Frame, form: &LoginForm) {
+    let area = centered(frame.area(), 52, 19);
+    let block = Block::bordered()
+        .title(" Sign in to furumi ")
+        .title_style(theme::header())
+        .border_style(theme::accent());
+    let inner = block.inner(area);
+    frame.render_widget(block, area);
+
+    // SSO is the primary path: server URL + SSO button up top, the rarely
+    // used password fallback below a separator.
+    let [server, sso_button, separator, username, password, signin_button, message, hint] =
+        Layout::vertical([
+            Constraint::Length(3),
+            Constraint::Length(1),
+            Constraint::Length(1),
+            Constraint::Length(3),
+            Constraint::Length(3),
+            Constraint::Length(1),
+            Constraint::Length(2),
+            Constraint::Length(1),
+        ])
+        .areas(inner);
+
+    draw_field(frame, server, "Server URL", &form.server_url, false,
+        form.focus == LoginField::ServerUrl);
+    draw_button(frame, sso_button, "[ Continue with SSO ]",
+        form.focus == LoginField::SsoButton);
+    frame.render_widget(
+        Paragraph::new(Line::styled("── or sign in with password ──", theme::dim()))
+            .alignment(Alignment::Center),
+        separator,
+    );
+    draw_field(frame, username, "Username", &form.username, false,
+        form.focus == LoginField::Username);
+    draw_field(frame, password, "Password", &form.password, true,
+        form.focus == LoginField::Password);
+    draw_button(frame, signin_button, "[ Sign in ]",
+        form.focus == LoginField::SignInButton);
+
+    draw_message(frame, message, form);
+    frame.render_widget(
+        Paragraph::new(Line::styled(
+            "tab/↑↓ move · enter submit · ctrl-c quit",
+            theme::dim(),
+        ))
+        .alignment(Alignment::Center),
+        hint,
+    );
+}
+
+fn draw_sso_pending(frame: &mut Frame, form: &LoginForm) {
+    let area = centered(frame.area(), 64, 16);
+    let block = Block::bordered()
+        .title(" Continue with SSO ")
+        .title_style(theme::header())
+        .border_style(theme::accent());
+    let inner = block.inner(area);
+    frame.render_widget(block, area);
+
+    let [steps, url, _, paste, message, hint] = Layout::vertical([
+        Constraint::Length(4),
+        Constraint::Length(3),
+        Constraint::Length(1),
+        Constraint::Length(3),
+        Constraint::Length(2),
+        Constraint::Length(1),
+    ])
+    .areas(inner);
+
+    let lines = if let Some(port) = form.sso_port {
+        vec![
+            Line::raw("1. Finish signing in, in the browser window."),
+            Line::raw("2. Sign-in completes here automatically."),
+            Line::styled(format!("   (waiting on 127.0.0.1:{port})"), theme::dim()),
+            Line::raw("3. If it doesn't, paste the code from the page below."),
+        ]
+    } else {
+        vec![
+            Line::raw("1. Finish signing in, in the browser window."),
+            Line::raw("2. Copy the code shown on the final page"),
+            Line::raw("   (or right-click \"Open Furumi\" and copy its link)."),
+            Line::raw("3. Paste it below and press Enter."),
+        ]
+    };
+    frame.render_widget(Paragraph::new(lines), steps);
+
+    frame.render_widget(
+        Paragraph::new(Line::styled(form.sso_url.clone(), theme::dim()))
+            .wrap(Wrap { trim: true })
+            .block(Block::bordered().title("If the browser didn't open, visit").border_style(theme::dim())),
+        url,
+    );
+
+    draw_field(frame, paste, "Link or code", &form.sso_paste, false, true);
+    draw_message(frame, message, form);
+    frame.render_widget(
+        Paragraph::new(Line::styled("enter submit · esc back · ctrl-c quit", theme::dim()))
+            .alignment(Alignment::Center),
+        hint,
+    );
+}
+
+fn draw_field(frame: &mut Frame, area: Rect, label: &str, value: &str, mask: bool, focused: bool) {
+    let border = if focused { theme::accent() } else { theme::dim() };
+    let block = Block::bordered().title(label).border_style(border);
+    let shown = if mask {
+        "•".repeat(value.chars().count())
+    } else {
+        value.to_string()
+    };
+    // Keep the tail visible when the value overflows the field.
+    let width = block.inner(area).width.saturating_sub(1) as usize;
+    let mut text: String = shown
+        .chars()
+        .skip(shown.chars().count().saturating_sub(width))
+        .collect();
+    if focused {
+        text.push('█');
+    }
+    frame.render_widget(Paragraph::new(text).block(block), area);
+}
+
+fn draw_button(frame: &mut Frame, area: Rect, label: &str, focused: bool) {
+    let style = if focused {
+        theme::tab_active()
+    } else {
+        theme::dim()
+    };
+    frame.render_widget(
+        Paragraph::new(Line::styled(label, style)).alignment(Alignment::Center),
+        area,
+    );
+}
+
+fn draw_message(frame: &mut Frame, area: Rect, form: &LoginForm) {
+    let line = if form.busy {
+        Line::styled("signing in…", theme::accent())
+    } else if let Some(error) = &form.error {
+        Line::styled(error.clone(), Style::new().fg(Color::Red))
+    } else {
+        Line::default()
+    };
+    frame.render_widget(
+        Paragraph::new(line)
+            .wrap(Wrap { trim: true })
+            .alignment(Alignment::Center),
+        area,
+    );
+}
+
+fn centered(area: Rect, width: u16, height: u16) -> Rect {
+    let [rect] = Layout::horizontal([Constraint::Length(width.min(area.width))])
+        .flex(Flex::Center)
+        .areas(area);
+    let [rect] = Layout::vertical([Constraint::Length(height.min(area.height))])
+        .flex(Flex::Center)
+        .areas(rect);
+    rect
+}