step2 compiled

client/src/components/auth/login.rs

@@ -16,6 +16,7 @@ pub fn render_login(
     area: Rect,
     theme: &Theme,
     state: &AuthState,
+    is_edit_mode: bool,
 ) {
     // Main container
     let block = Block::default()
@@ -43,75 +44,33 @@ pub fn render_login(
         .split(inner_area);
 
     // --- FORM RENDERING ---
-    let fields = &["Username/Email", "Password"];
-    let inputs = &[&state.username, &state.password];
-    let current_field = state.current_field;
-
-    // Create input container (store the inner area before rendering)
     let input_block = Block::default()
         .borders(Borders::ALL)
-        .border_style(if !state.return_selected {
+        .border_style(if is_edit_mode {
             Style::default().fg(theme.accent)
         } else {
             Style::default().fg(theme.border)
         })
         .style(Style::default().bg(theme.bg));
 
-    // Calculate inner area before consuming input_block
+    // Calculate inner area BEFORE rendering
     let input_area = input_block.inner(chunks[0]);
     
-    // Now render the widget
     f.render_widget(input_block, chunks[0]);
 
-    let input_layout = Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
-        .split(input_area);
+    // Use the canvas renderer for fields
+    crate::components::handlers::canvas::render_canvas(
+        f,
+        input_area,  // Use the pre-calculated area
+        state,
+        &["Username/Email", "Password"],
+        &state.current_field,
+        &[&state.username, &state.password],
+        theme,
+        is_edit_mode,
+    );
 
-    // Render field labels
-    for (i, field) in fields.iter().enumerate() {
-        f.render_widget(
-            Paragraph::new(Line::from(Span::styled(
-                format!("{}:", field),
-                Style::default().fg(theme.fg),
-            ))),
-            Rect {
-                x: input_layout[0].x,
-                y: input_layout[0].y + i as u16,
-                width: input_layout[0].width,
-                height: 1,
-            },
-        );
-    }
-
-    // Render input fields
-    let input_rows = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints(vec![Constraint::Length(1); fields.len()])
-        .split(input_layout[1]);
-
-    for (i, input) in inputs.iter().enumerate() {
-        let is_active = i == current_field;
-        let mut style = Style::default().fg(theme.fg);
-        if is_active {
-            style = style.fg(theme.highlight);
-        }
-
-        f.render_widget(
-            Paragraph::new(input.as_str()).style(style),
-            input_rows[i],
-        );
-
-        // Set cursor position if active
-        if is_active {
-            f.set_cursor_position((
-                input_rows[i].x + state.current_cursor_pos as u16,
-                input_rows[i].y,
-            ));
-        }
-    }
-
-    // --- BUTTONS ---
+    // --- BUTTONS --- (Keep this unchanged)
     let button_chunks = Layout::default()
         .direction(Direction::Horizontal)
         .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])

client/src/ui/handlers/render.rs

@@ -47,7 +47,7 @@ pub fn render_ui(
         // Use app_state's intro_state directly
         app_state.ui.intro_state.render(f, main_content_area, theme);
     }else if app_state.ui.show_login {
-        render_login(f, main_content_area, theme, auth_state);
+        render_login(f, main_content_area, theme, auth_state, false);
     } else if app_state.ui.show_admin {
         // Create temporary AdminPanelState for rendering
         let mut admin_state = AdminPanelState::new(