From 4132faebe14ec74ae10b64805b170c0b31c8c862 Mon Sep 17 00:00:00 2001
From: IllusionMan1212 <hisham.abourgheba@gmail.com>
Date: Tue, 25 Jan 2022 00:05:34 +0200
Subject: [PATCH] fix: make the login screen layout adapt to resizes

---
 ui/app/app.go      |  1 +
 ui/login/login.go  | 38 +++++++++++++++++++++++++-------------
 ui/login/styles.go | 18 +++++++++++-------
 ui/styles.go       |  7 -------
 4 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/ui/app/app.go b/ui/app/app.go
index ff5b05a..6690140 100644
--- a/ui/app/app.go
+++ b/ui/app/app.go
@@ -78,6 +78,7 @@ func (s State) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			Width(msg.Width).
 			Height(msg.Height)
 
+		s.UI.Login.SetSize(msg.Width, msg.Height)
 		s.UI.MainScreen.SetSize(msg.Width, msg.Height)
 
 		return s, nil
diff --git a/ui/login/login.go b/ui/login/login.go
index e246b02..8616b80 100644
--- a/ui/login/login.go
+++ b/ui/login/login.go
@@ -28,18 +28,24 @@ import (
 )
 
 type State struct {
-	FocusIndex int
-	Inputs     []textinput.Model
-	TLS        bool
+	FocusIndex      int
+	Inputs          []textinput.Model
+	TLS             bool
+	DialogStyle     lipgloss.Style
+	WelcomeMsgStyle lipgloss.Style
+	Style           lipgloss.Style
 }
 
 func NewLogin() State {
-	ls := State{
-		Inputs: make([]textinput.Model, 5),
+	state := State{
+		Inputs:          make([]textinput.Model, 5),
+		DialogStyle:     DialogStyle.Copy(),
+		WelcomeMsgStyle: WelcomeMsgStyle.Copy(),
+		Style:           ui.MainStyle.Copy(),
 	}
 
 	var t textinput.Model
-	for i := range ls.Inputs {
+	for i := range state.Inputs {
 		t = textinput.New()
 		t.CursorStyle = ui.CursorStyle
 		t.Prompt = "| "
@@ -66,10 +72,10 @@ func NewLogin() State {
 			t.EchoCharacter = '•'
 		}
 
-		ls.Inputs[i] = t
+		state.Inputs[i] = t
 	}
 
-	return ls
+	return state
 }
 
 func (s State) Update(msg tea.Msg) (State, tea.Cmd) {
@@ -78,7 +84,7 @@ func (s State) Update(msg tea.Msg) (State, tea.Cmd) {
 		key := msg.String()
 		switch key {
 		case " ", "enter":
-			// run the newClient cmd when pressing "enter" while focused on the connect button
+			// run the Connect cmd when pressing "enter" while focused on the connect button
 			if key == "enter" && s.FocusIndex == len(s.Inputs)+1 {
 				return s, cmds.Connect
 			}
@@ -134,6 +140,14 @@ func (s *State) updateInputs(msg tea.Msg) tea.Cmd {
 	return tea.Batch(cmds...)
 }
 
+func (s *State) SetSize(width, height int) {
+	s.DialogStyle = s.DialogStyle.Copy().Width(width - s.DialogStyle.GetHorizontalFrameSize())
+	s.DialogStyle = s.DialogStyle.Copy().Height(height*5/10 - s.DialogStyle.GetVerticalFrameSize())
+
+	s.WelcomeMsgStyle = s.WelcomeMsgStyle.Copy().Width(width)
+	s.WelcomeMsgStyle = s.WelcomeMsgStyle.Copy().Height(height * 5 / 10)
+}
+
 func (s State) View() string {
 	var sb strings.Builder
 
@@ -167,9 +181,7 @@ func (s State) View() string {
 	}
 	fmt.Fprintf(&sb, "\n%s\n", *button)
 
-	screen := lipgloss.JoinVertical(0, WelcomeMsgStyle.Render(WelcomeMsg), ui.DialogStyle.Render(sb.String()))
+	screen := lipgloss.JoinVertical(lipgloss.Center, s.WelcomeMsgStyle.Render(WelcomeMsg), s.DialogStyle.Render(sb.String()))
 
-	final := lipgloss.Place(ui.MainStyle.GetWidth(), ui.MainStyle.GetHeight(), lipgloss.Center, lipgloss.Top, screen)
-
-	return ui.MainStyle.Render(final)
+	return ui.MainStyle.Render(screen)
 }
diff --git a/ui/login/styles.go b/ui/login/styles.go
index a9b59e7..8380be5 100644
--- a/ui/login/styles.go
+++ b/ui/login/styles.go
@@ -16,7 +16,9 @@
 
 package login
 
-import "github.com/charmbracelet/lipgloss"
+import (
+	"github.com/charmbracelet/lipgloss"
+)
 
 const WelcomeMsg = `                                        
                                         
@@ -33,19 +35,15 @@ const WelcomeMsg = `
 `
 
 var (
-	WelcomeMsgStyle = lipgloss.NewStyle().
-			Padding(0, 5).
-			MarginBottom(5)
-
 	FocusedButton = lipgloss.NewStyle().
 			Background(lipgloss.Color("105")).
-			Foreground(lipgloss.Color("255")).
+			Foreground(lipgloss.Color("#000")).
 			MarginTop(1).
 			Padding(0, 2).
 			Align(lipgloss.Center).
 			Render("Connect")
 	BlurredButton = lipgloss.NewStyle().
-			Background(lipgloss.Color("#809070")).
+			Background(lipgloss.Color("#505050")).
 			Foreground(lipgloss.Color("#EEEEEE")).
 			MarginTop(1).
 			Padding(0, 2).
@@ -71,4 +69,10 @@ var (
 				Foreground(lipgloss.Color("#EEEEEE")).
 				MarginTop(1).
 				Render("[x] Enable TLS")
+
+	DialogStyle = lipgloss.NewStyle().
+			Align(lipgloss.Center)
+
+	WelcomeMsgStyle = lipgloss.NewStyle().
+			Align(lipgloss.Center)
 )
diff --git a/ui/styles.go b/ui/styles.go
index af62749..3652581 100644
--- a/ui/styles.go
+++ b/ui/styles.go
@@ -23,13 +23,6 @@ var (
 			Width(0).
 			Height(0)
 
-	DialogStyle = lipgloss.NewStyle().
-			Border(lipgloss.RoundedBorder(), true).
-			Align(lipgloss.Center).
-			Width(50).
-			Padding(3, 6).
-			BorderForeground(lipgloss.Color("105"))
-
 	CursorStyle  = lipgloss.NewStyle().Foreground(lipgloss.Color("105"))
 	FocusedStyle = lipgloss.NewStyle().Foreground(lipgloss.Color("105"))
 	NoStyle      = lipgloss.NewStyle()