Admin UI: Login page

AdminUi/apps/admin_ui/lib/core/app_config.dart

@@ -0,0 +1,5 @@
+class AppConfig {
+  final String baseUrl;
+
+  AppConfig({required this.baseUrl});
+}

AdminUi/apps/admin_ui/lib/core/constants.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/widgets.dart';
+
+class Gaps {
+  Gaps._();
+
+  static const SizedBox h4 = SizedBox(height: 4);
+  static const SizedBox h8 = SizedBox(height: 8);
+  static const SizedBox h16 = SizedBox(height: 16);
+  static const SizedBox h24 = SizedBox(height: 24);
+  static const SizedBox h32 = SizedBox(height: 32);
+  static const SizedBox h40 = SizedBox(height: 40);
+
+  static const SizedBox w4 = SizedBox(width: 4);
+  static const SizedBox w8 = SizedBox(width: 8);
+  static const SizedBox w16 = SizedBox(width: 16);
+  static const SizedBox w24 = SizedBox(width: 24);
+  static const SizedBox w32 = SizedBox(width: 32);
+  static const SizedBox w40 = SizedBox(width: 40);
+}

AdminUi/apps/admin_ui/lib/core/core.dart

@@ -0,0 +1,4 @@
+export 'app_config.dart';
+export 'constants.dart';
+export 'extensions.dart';
+export 'widgets/widgets.dart';

AdminUi/apps/admin_ui/lib/core/extensions.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:get_it/get_it.dart';
+
+import 'theme/theme.dart';
+
+extension UnregisterIfRegistered on GetIt {
+  Future<void> unregisterIfRegistered<T extends Object>() async {
+    if (!isRegistered<T>()) return;
+
+    await unregister<T>();
+  }
+}
+
+extension GetCustomColors on BuildContext {
+  CustomColors get customColors => Theme.of(this).extension<CustomColors>()!;
+}

AdminUi/apps/admin_ui/lib/core/theme/theme.dart

@@ -0,0 +1,2 @@
+export 'color_schemes.dart';
+export 'custom_colors.dart';

AdminUi/apps/admin_ui/lib/core/widgets/app_title.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+import '../constants.dart';
+
+class AppTitle extends StatelessWidget {
+  const AppTitle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        SvgPicture.asset(
+          'assets/logo.svg',
+          width: 30,
+          height: 30,
+        ),
+        Gaps.w8,
+        RichText(
+          text: TextSpan(
+            children: [
+              TextSpan(
+                text: 'enmeshed',
+                style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  color: Theme.of(context).colorScheme.scrim,
+                  fontSize: 25,
+                ),
+              ),
+              TextSpan(
+                text: ' Admin UI',
+                style: TextStyle(
+                  color: Theme.of(context).colorScheme.scrim,
+                  fontSize: 25,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

AdminUi/apps/admin_ui/lib/core/widgets/widgets.dart

@@ -0,0 +1 @@
+export 'app_title.dart';

AdminUi/apps/admin_ui/lib/main.dart

@@ -1,20 +1,17 @@
-import 'package:admin_ui/theme/colors/color_schemes.dart';
-import 'package:admin_ui/theme/colors/custom_colors.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
+import 'core/theme/theme.dart';
 import 'home/home.dart';
-import 'pages/pages.dart';
+import 'screens/screens.dart';
 import 'setup/setup_desktop.dart' if (dart.library.html) 'setup/setup_web.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
   await setup();
 
-  runApp(
-    const AdminUiApp(),
-  );
+  runApp(const AdminUiApp());
 }
 
 final _rootNavigatorKey = GlobalKey<NavigatorState>();

AdminUi/apps/admin_ui/lib/pages/home_page.dart → AdminUi/apps/admin_ui/lib/screens/home_screen.dart

@@ -1,9 +1,11 @@
+import 'package:admin_api_sdk/admin_api_sdk.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get_it/get_it.dart';
 import 'package:go_router/go_router.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
+import '/core/core.dart';
+
 class HomeScreen extends StatefulWidget {
   final Widget child;
   final String location;
@@ -21,14 +23,7 @@ class _HomeScreenState extends State<HomeScreen> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            SvgPicture.asset('assets/logo.svg', width: 30, height: 30),
-            const SizedBox(width: 10),
-            const Text('Enmeshed Admin UI'),
-          ],
-        ),
+        title: const AppTitle(),
         leading: IconButton(
           icon: const Icon(Icons.menu),
           onPressed: () {
@@ -39,7 +34,7 @@ class _HomeScreenState extends State<HomeScreen> {
         ),
         actions: [
           IconButton(icon: const Icon(Icons.logout), onPressed: _logout),
-          const SizedBox(width: 10),
+          Gaps.w8,
         ],
       ),
       body: Row(
@@ -85,7 +80,8 @@ class _HomeScreenState extends State<HomeScreen> {
   Future<void> _logout() async {
     final sp = await SharedPreferences.getInstance();
     await sp.remove('api_key');
-    await GetIt.I.reset();
+    await GetIt.I.unregisterIfRegistered<AdminApiClient>();
+
     if (mounted) context.go('/login');
   }
 }

AdminUi/apps/admin_ui/lib/screens/login_screen.dart

@@ -0,0 +1,113 @@
+import 'package:admin_api_sdk/admin_api_sdk.dart';
+import 'package:flutter/material.dart';
+import 'package:get_it/get_it.dart';
+import 'package:go_router/go_router.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+import '/core/core.dart';
+
+class LoginScreen extends StatefulWidget {
+  const LoginScreen({super.key});
+
+  @override
+  State<LoginScreen> createState() => _LoginScreenState();
+}
+
+class _LoginScreenState extends State<LoginScreen> {
+  final _apiKeyController = TextEditingController();
+  final _apiKeyFocusNode = FocusNode();
+
+  bool? _isApiKeyValid;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _apiKeyFocusNode.requestFocus();
+  }
+
+  @override
+  void dispose() {
+    _apiKeyController.dispose();
+    _apiKeyFocusNode.dispose();
+
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const AppTitle(),
+        leading: const SizedBox(
+          width: 40,
+        ),
+      ),
+      body: Center(
+        child: SizedBox(
+          width: 400,
+          child: Card(
+            child: Padding(
+              padding: const EdgeInsets.all(25),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  SizedBox(
+                    height: 100,
+                    child: TextField(
+                      controller: _apiKeyController,
+                      focusNode: _apiKeyFocusNode,
+                      decoration: InputDecoration(
+                        labelText: 'API Key',
+                        border: const OutlineInputBorder(),
+                        errorText: (_isApiKeyValid == false) ? 'Invalid API Key' : null,
+                      ),
+                      obscureText: true,
+                      onChanged: (text) {
+                        if (_isApiKeyValid != null) return;
+
+                        setState(() {
+                          _isApiKeyValid = null;
+                        });
+                      },
+                      onSubmitted: (_) => _login(),
+                    ),
+                  ),
+                  Gaps.h16,
+                  SizedBox(
+                    height: 40,
+                    width: double.infinity,
+                    child: FilledButton(
+                      onPressed: _apiKeyController.text.isNotEmpty ? _login : null,
+                      child: const Text('Login'),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+    );
+  }
+
+  Future<void> _login() async {
+    final apiKey = _apiKeyController.text.trim();
+    if (apiKey.isEmpty) return;
+
+    final baseUrl = GetIt.I<AppConfig>().baseUrl;
+    final isApiKeyValid = await AdminApiClient.validateApiKey(baseUrl: baseUrl, apiKey: apiKey);
+
+    if (!mounted) return;
+
+    if (!isApiKeyValid) return setState(() => _isApiKeyValid = false);
+
+    final sp = await SharedPreferences.getInstance();
+    await sp.setString('api_key', apiKey);
+
+    await GetIt.I.unregisterIfRegistered<AdminApiClient>();
+    GetIt.I.registerSingleton(await AdminApiClient.create(baseUrl: baseUrl, apiKey: apiKey));
+    if (mounted) context.go('/dashboard');
+  }
+}

AdminUi/apps/admin_ui/lib/screens/screens.dart

@@ -0,0 +1,3 @@
+export 'home_screen.dart';
+export 'login_screen.dart';
+export 'splash_screen.dart';