updated styling and installation steps

tui/steps/user.go

@@ -2,19 +2,20 @@ package steps
 
 import (
 	"miasma-installer/tui/styles"
+	"strings"
 
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 )
 
 type UserModel struct {
-	Username        string
-	Password        string
-	usernameInput   textinput.Model
-	passwordInput   textinput.Model
-	confirmInput    textinput.Model
-	focusIndex      int
-	Finished        bool
+	Username      string
+	Password      string
+	usernameInput textinput.Model
+	passwordInput textinput.Model
+	confirmInput  textinput.Model
+	focusIndex    int
+	Finished      bool
 }
 
 func NewUserModel() UserModel {
@@ -22,14 +23,17 @@ func NewUserModel() UserModel {
 	ui.Placeholder = "username"
 	ui.Focus()
 	ui.CharLimit = 32
+	ui.Width = 40
 
 	pi := textinput.New()
 	pi.Placeholder = "password"
 	pi.EchoMode = textinput.EchoPassword
+	pi.Width = 40
 
 	ci := textinput.New()
 	ci.Placeholder = "confirm password"
 	ci.EchoMode = textinput.EchoPassword
+	ci.Width = 40
 
 	return UserModel{
 		usernameInput: ui,
@@ -103,23 +107,53 @@ func (m UserModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (m UserModel) View() string {
-	s := styles.TitleStyle.Render("User Account")
-	s += "\n\n"
-	s += "Create your user account:\n\n"
-	s += "Username:\n"
-	s += m.usernameInput.View() + "\n\n"
-	s += "Password:\n"
-	s += m.passwordInput.View() + "\n\n"
-	s += "Confirm Password:\n"
-	s += m.confirmInput.View() + "\n\n"
+	var content strings.Builder
+
+	content.WriteString(styles.TitleStyle.Render("👤 User Account"))
+	content.WriteString("\n\n")
+
+	info := "Create your user account.\nThis user will have sudo privileges."
+	content.WriteString(styles.InfoBoxStyle.Render(info))
+	content.WriteString("\n\n")
+
+	content.WriteString(styles.LabelStyle.Render("Username:"))
+	content.WriteString("\n")
+	usernameStyle := styles.InputStyle
+	if m.focusIndex == 0 {
+		usernameStyle = styles.FocusedInputStyle
+	}
+	content.WriteString(usernameStyle.Render(m.usernameInput.View()))
+	content.WriteString("\n\n")
+
+	content.WriteString(styles.LabelStyle.Render("Password:"))
+	content.WriteString("\n")
+	passwordStyle := styles.InputStyle
+	if m.focusIndex == 1 {
+		passwordStyle = styles.FocusedInputStyle
+	}
+	content.WriteString(passwordStyle.Render(m.passwordInput.View()))
+	content.WriteString("\n\n")
+
+	content.WriteString(styles.LabelStyle.Render("Confirm Password:"))
+	content.WriteString("\n")
+	confirmStyle := styles.InputStyle
+	if m.focusIndex == 2 {
+		confirmStyle = styles.FocusedInputStyle
+	}
+	content.WriteString(confirmStyle.Render(m.confirmInput.View()))
+	content.WriteString("\n\n")
 
 	if m.passwordInput.Value() != "" && m.confirmInput.Value() != "" {
 		if m.passwordInput.Value() != m.confirmInput.Value() {
-			s += styles.HelpStyle.Render("Passwords do not match\n")
+			content.WriteString(styles.ErrorStyle.Render("✗ Passwords do not match"))
+			content.WriteString("\n\n")
+		} else {
+			content.WriteString(styles.SuccessStyle.Render("✓ Passwords match"))
+			content.WriteString("\n\n")
 		}
 	}
 
-	s += styles.HelpStyle.Render("[Tab] Switch fields  [Enter] Continue")
+	content.WriteString(styles.RenderHelp("Tab", "Switch fields", "Enter", "Continue"))
 
-	return styles.MainStyle.Render(s)
+	return styles.AppStyle.Render(content.String())
 }