TD-64: Error Banner on Login Problems

scenes/login.tscn

@@ -1,10 +1,14 @@
-[gd_scene load_steps=4 format=3 uid="uid://dtaaw31x3n22f"]
+[gd_scene load_steps=6 format=3 uid="uid://dtaaw31x3n22f"]
 
 [ext_resource type="Script" path="res://scripts/ui/login.gd" id="1_12w35"]
+[ext_resource type="Script" path="res://scripts/ui/show_banner_on_error.gd" id="1_41hxt"]
 [ext_resource type="Resource" uid="uid://cdixdbu3sqgjn" path="res://config/api_config.tres" id="2_60hb8"]
 
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_d0bbp"]
 
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_bdovr"]
+bg_color = Color(0.74463, 0.147328, 0, 1)
+
 [node name="Login" type="Control"]
 layout_mode = 3
 anchors_preset = 15
@@ -22,22 +26,48 @@ grow_horizontal = 2
 grow_vertical = 2
 theme_override_styles/panel = SubResource("StyleBoxFlat_d0bbp")
 
-[node name="VBoxContainer" type="VBoxContainer" parent="Panel"]
+[node name="Container" type="VBoxContainer" parent="Panel"]
 layout_mode = 1
-anchors_preset = 8
+anchors_preset = 15
-anchor_left = 0.5
+anchor_right = 1.0
-anchor_top = 0.5
+anchor_bottom = 1.0
-anchor_right = 0.5
-anchor_bottom = 0.5
-offset_left = -150.0
-offset_top = -108.0
-offset_right = 150.0
-offset_bottom = 108.0
 grow_horizontal = 2
 grow_vertical = 2
+
+[node name="Banner" type="PanelContainer" parent="Panel/Container" node_paths=PackedStringArray("login", "text")]
+layout_mode = 2
+script = ExtResource("1_41hxt")
+login = NodePath("../CenterContainer/VBoxContainer/Button")
+text = NodePath("CenterContainer/MarginContainer/RichTextLabel")
+
+[node name="Panel" type="Panel" parent="Panel/Container/Banner"]
+layout_mode = 2
+theme_override_styles/panel = SubResource("StyleBoxFlat_bdovr")
+
+[node name="CenterContainer" type="CenterContainer" parent="Panel/Container/Banner"]
+layout_mode = 2
+
+[node name="MarginContainer" type="MarginContainer" parent="Panel/Container/Banner/CenterContainer"]
+layout_mode = 2
+theme_override_constants/margin_top = 8
+theme_override_constants/margin_bottom = 8
+
+[node name="RichTextLabel" type="RichTextLabel" parent="Panel/Container/Banner/CenterContainer/MarginContainer"]
+layout_mode = 2
+text = "Keine Verbindung"
+fit_content = true
+autowrap_mode = 0
+
+[node name="CenterContainer" type="CenterContainer" parent="Panel/Container"]
+layout_mode = 2
+size_flags_vertical = 3
+
+[node name="VBoxContainer" type="VBoxContainer" parent="Panel/Container/CenterContainer"]
+custom_minimum_size = Vector2(500, 0)
+layout_mode = 2
 theme_override_constants/separation = 16
 
-[node name="Header" type="RichTextLabel" parent="Panel/VBoxContainer"]
+[node name="Header" type="RichTextLabel" parent="Panel/Container/CenterContainer/VBoxContainer"]
 layout_mode = 2
 theme_override_font_sizes/normal_font_size = 30
 text = "Login"
@@ -45,37 +75,41 @@ fit_content = true
 scroll_active = false
 autowrap_mode = 0
 
-[node name="InputContainer" type="VBoxContainer" parent="Panel/VBoxContainer"]
+[node name="InputContainer" type="VBoxContainer" parent="Panel/Container/CenterContainer/VBoxContainer"]
 layout_mode = 2
 theme_override_constants/separation = 8
 
-[node name="UsernameContainer" type="VBoxContainer" parent="Panel/VBoxContainer/InputContainer"]
+[node name="UsernameContainer" type="VBoxContainer" parent="Panel/Container/CenterContainer/VBoxContainer/InputContainer"]
 layout_mode = 2
 
-[node name="UsernameLabel" type="RichTextLabel" parent="Panel/VBoxContainer/InputContainer/UsernameContainer"]
+[node name="UsernameLabel" type="RichTextLabel" parent="Panel/Container/CenterContainer/VBoxContainer/InputContainer/UsernameContainer"]
 layout_mode = 2
 text = "Username:
 "
 fit_content = true
 scroll_active = false
+autowrap_mode = 0
 
-[node name="UsernameInput" type="LineEdit" parent="Panel/VBoxContainer/InputContainer/UsernameContainer"]
+[node name="UsernameInput" type="LineEdit" parent="Panel/Container/CenterContainer/VBoxContainer/InputContainer/UsernameContainer"]
+layout_mode = 2
+placeholder_text = "username"
+
+[node name="PasswordContainer" type="VBoxContainer" parent="Panel/Container/CenterContainer/VBoxContainer/InputContainer"]
 layout_mode = 2
 
-[node name="PasswordContainer" type="VBoxContainer" parent="Panel/VBoxContainer/InputContainer"]
+[node name="PaswordLabel" type="RichTextLabel" parent="Panel/Container/CenterContainer/VBoxContainer/InputContainer/PasswordContainer"]
-layout_mode = 2
-
-[node name="PaswordLabel" type="RichTextLabel" parent="Panel/VBoxContainer/InputContainer/PasswordContainer"]
 layout_mode = 2
 text = "Password:"
 fit_content = true
 scroll_active = false
+autowrap_mode = 0
 
-[node name="PasswordInput" type="LineEdit" parent="Panel/VBoxContainer/InputContainer/PasswordContainer"]
+[node name="PasswordInput" type="LineEdit" parent="Panel/Container/CenterContainer/VBoxContainer/InputContainer/PasswordContainer"]
 layout_mode = 2
+placeholder_text = "password"
 secret = true
 
-[node name="Button" type="Button" parent="Panel/VBoxContainer" node_paths=PackedStringArray("username_field", "password_field")]
+[node name="Button" type="Button" parent="Panel/Container/CenterContainer/VBoxContainer" node_paths=PackedStringArray("username_field", "password_field")]
 layout_mode = 2
 text = "Login"
 script = ExtResource("1_12w35")
@@ -83,4 +117,4 @@ username_field = NodePath("../InputContainer/UsernameContainer/UsernameInput")
 password_field = NodePath("../InputContainer/PasswordContainer/PasswordInput")
 api_config = ExtResource("2_60hb8")
 
-[node name="HTTPRequest" type="HTTPRequest" parent="Panel/VBoxContainer/Button"]
+[node name="HTTPRequest" type="HTTPRequest" parent="Panel/Container/CenterContainer/VBoxContainer/Button"]

scripts/ui/login.gd

@@ -2,6 +2,7 @@ class_name Login
 extends Button
 
 signal login_successful(session: PlayerLoginSession)
+signal login_error(error: ApiError)
 
 @export var username_field: LineEdit
 @export var password_field: LineEdit
@@ -41,4 +42,4 @@ func on_success(response: ApiResponse) -> void:
 
 
 func on_error(error: ApiError) -> void:
-	print("Error: ", error.message)
+	login_error.emit(error)

scripts/ui/show_banner_on_error.gd

@@ -0,0 +1,45 @@
+extends Control
+
+@export var login: Login
+@export var text: RichTextLabel
+
+
+func _ready() -> void:
+	if not login:
+		push_error("No Login connectd")
+		return
+	if not text:
+		push_error("No Text label connectd")
+		return
+	login.connect("login_successful", on_successful)
+	login.connect("login_error", on_error)
+	hide_banner()
+
+
+func on_successful(_session: PlayerLoginSession) -> void:
+	hide_banner()
+
+
+func on_error(error: ApiError) -> void:
+	if error.identifier == "apibee.request.no_response":
+		return
+
+	show_banner()
+	var msg: String = ""
+
+	if error.identifier == "apibee.connect_to_host.status_failure":
+		msg = "Server nicht ereichbar"
+	if error.response_code == HTTPClient.RESPONSE_UNAUTHORIZED:
+		msg = "Falscher Benutzername oder Passwort"
+
+	if msg == "":
+		msg = error.message
+	text.text = msg
+
+
+func hide_banner() -> void:
+	self.modulate = Color.TRANSPARENT
+
+
+func show_banner() -> void:
+	self.modulate = Color.WHITE

ui/theme.tres

@@ -16,6 +16,7 @@ Button/colors/icon_normal_color = Color(1, 1, 1, 0)
 Button/colors/icon_pressed_color = Color(1, 1, 1, 1)
 Button/constants/h_separation = 4
 Button/constants/icon_max_width = 8
+Button/font_sizes/font_size = 32
 Button/icons/icon = ExtResource("1_2gn16")
 Button/styles/focus = ExtResource("2_deyos")
 Button/styles/hover = ExtResource("3_nfsuc")
@@ -42,3 +43,10 @@ ColorPickerButton/styles/hover = ExtResource("3_nfsuc")
 ColorPickerButton/styles/hover_pressed = ExtResource("6_vlfw3")
 ColorPickerButton/styles/normal = ExtResource("4_wi0tw")
 ColorPickerButton/styles/pressed = ExtResource("5_kgc35")
+Label/font_sizes/font_size = 32
+LineEdit/font_sizes/font_size = 32
+RichTextLabel/font_sizes/normal_font_size = 32
+TabBar/font_sizes/font_size = 32
+TabContainer/font_sizes/font_size = 32
+TextEdit/font_sizes/font_size = 32
+Tree/font_sizes/font_size = 32