add: desktop password page

flutter/lib/desktop/pages/desktop_home_page.dart

@@ -22,6 +22,9 @@ class _DesktopHomePageState extends State<DesktopHomePage> {
               child: buildServerInfo(context),
               flex: 1,
             ),
+            SizedBox(
+              width: 16.0,
+            ),
             Flexible(
               child: buildServerBoard(context),
               flex: 4,
@@ -35,30 +38,40 @@ class _DesktopHomePageState extends State<DesktopHomePage> {
   buildServerInfo(BuildContext context) {
     return ChangeNotifierProvider.value(
       value: FFI.serverModel,
+      child: Container(
+        decoration: BoxDecoration(color: MyTheme.white),
         child: Column(
-        children: [buildIDBoard(context)],
+          children: [
+            buildTip(context),
+            buildIDBoard(context),
+            buildPasswordBoard(context),
+          ],
+        ),
       ),
     );
   }
 
   buildServerBoard(BuildContext context) {
-    return Center(
+    return Column(
-      child: ConnectionPage(key: null),
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        buildControlPanel(context),
+        buildRecentSession(context),
+        ConnectionPage()
+      ],
     );
   }
 
   buildIDBoard(BuildContext context) {
     final model = FFI.serverModel;
-    return Card(
+    return Container(
-      elevation: 0.5,
+      margin: EdgeInsets.symmetric(vertical: 4.0, horizontal: 16.0),
-      child: Container(
-        margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.baseline,
         textBaseline: TextBaseline.alphabetic,
         children: [
           Container(
-              width: 4,
+            width: 3,
             height: 70,
             decoration: BoxDecoration(color: MyTheme.accent),
           ),
@@ -70,27 +83,103 @@ class _DesktopHomePageState extends State<DesktopHomePage> {
                 children: [
                   Text(
                     translate("ID"),
-                      style:
+                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
-                          TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
                   ),
                   TextFormField(
                     controller: model.serverId,
                   ),
-                    Text(
-                      translate("Password"),
-                      style:
-                          TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
-                    ),
-                    TextField(
-                      controller: model.serverPasswd,
-                    )
                 ],
               ),
             ),
           ),
         ],
       ),
-      ),
     );
   }
+
+  buildPasswordBoard(BuildContext context) {
+    final model = FFI.serverModel;
+    return Container(
+      margin: EdgeInsets.symmetric(vertical: 4.0, horizontal: 16.0),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.baseline,
+        textBaseline: TextBaseline.alphabetic,
+        children: [
+          Container(
+            width: 3,
+            height: 70,
+            decoration: BoxDecoration(color: MyTheme.accent),
+          ),
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 8.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    translate("Password"),
+                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
+                  ),
+                  TextFormField(
+                    controller: model.serverPasswd,
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  buildTip(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            translate("Your Desktop"),
+            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+          ),
+          SizedBox(
+            height: 8.0,
+          ),
+          Text(
+            translate("desk_tip"),
+            overflow: TextOverflow.clip,
+            style: TextStyle(fontSize: 14),
+          )
+        ],
+      ),
+    );
+  }
+
+  buildControlPanel(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(10), color: MyTheme.white),
+      padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(translate("Control Remote Desktop")),
+          Form(
+              child: Column(
+            children: [
+              TextFormField(
+                controller: TextEditingController(),
+                inputFormatters: [],
+              )
+            ],
+          ))
+        ],
+      ),
+    );
+  }
+
+  buildRecentSession(BuildContext context) {
+    return Center(child: Text("waiting implementation"));
+  }
 }

flutter/lib/desktop/pages/desktop_remote_page.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+
+/// Remote Page, use it in multi window context
+class DesktopRemotePage extends StatefulWidget {
+  const DesktopRemotePage({Key? key}) : super(key: key);
+
+  @override
+  State<DesktopRemotePage> createState() => _DesktopRemotePageState();
+}
+
+class _DesktopRemotePageState extends State<DesktopRemotePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}