Device Manager: Rename Session (#6826)

* Publish the user sessions overview data. * Add UserSessionName screen. * Update logout action to match Figma more closely.
2026-04-21 00:52:43 +02:00 · 2022-10-11 13:11:15 +01:00
parent 969c51db1e
commit efaf98fe6a
29 changed files with 765 additions and 123 deletions
@@ -0,0 +1,78 @@
+import SwiftUI
+
+struct UserSessionName: View {
+    @Environment(\.theme) private var theme: ThemeSwiftUI
+    
+    @ObservedObject var viewModel: UserSessionNameViewModel.Context
+    
+    var body: some View {
+        List {
+            SwiftUI.Section {
+                TextField(VectorL10n.manageSessionName, text: $viewModel.sessionName)
+                    .autocapitalization(.words)
+                    .listRowBackground(theme.colors.background)
+                    .introspectTextField {
+                        $0.becomeFirstResponder()
+                        $0.clearButtonMode = .whileEditing
+                    }
+            } header: {
+                Text(VectorL10n.manageSessionName)
+                    .foregroundColor(theme.colors.secondaryContent)
+            } footer: {
+                textFieldFooter
+            }
+        }
+        .background(theme.colors.system.ignoresSafeArea())
+        .frame(maxHeight: .infinity)
+        .listStyle(.grouped)
+        .listBackgroundColor(theme.colors.system)
+        .navigationTitle(VectorL10n.manageSessionRename)
+        .navigationBarTitleDisplayMode(.inline)
+        .toolbar { toolbar }
+        .accentColor(theme.colors.accent)
+    }
+    
+    private var textFieldFooter: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            Text(VectorL10n.manageSessionNameHint)
+                .foregroundColor(theme.colors.secondaryContent)
+            
+            InlineTextButton(VectorL10n.manageSessionNameInfo("%@"),
+                             tappableText: VectorL10n.manageSessionNameInfoLink) {
+                viewModel.send(viewAction: .learnMore)
+            }
+            .foregroundColor(theme.colors.secondaryContent)
+        }
+    }
+    
+    @ToolbarContentBuilder
+    private var toolbar: some ToolbarContent {
+        ToolbarItem(placement: .cancellationAction) {
+            Button(VectorL10n.cancel) {
+                viewModel.send(viewAction: .cancel)
+            }
+        }
+        
+        ToolbarItem(placement: .confirmationAction) {
+            Button(VectorL10n.done) {
+                viewModel.send(viewAction: .done)
+            }
+            .disabled(!viewModel.viewState.canUpdateName)
+        }
+    }
+}
+
+// MARK: - Previews
+
+struct UserSessionName_Previews: PreviewProvider {
+    static let stateRenderer = MockUserSessionNameScreenState.stateRenderer
+    
+    static var previews: some View {
+        stateRenderer.screenGroup(addNavigation: true)
+            .theme(.light)
+            .preferredColorScheme(.light)
+        stateRenderer.screenGroup(addNavigation: true)
+            .theme(.dark)
+            .preferredColorScheme(.dark)
+    }
+}