import SwiftUI struct ConnectView: View { @StateObject private var vm = ConnectViewModel() @State private var navigateToDashboard = false @State private var showPassword = false @FocusState private var focused: ConnectField? var body: some View { NavigationStack { ZStack { AppTheme.background.ignoresSafeArea() ScrollView { VStack(spacing: 0) { // Header VStack(spacing: 12) { // "kisani." wordmark Text("kisani.") .font(.system(size: 13, weight: .bold, design: .monospaced)) .foregroundStyle(AppTheme.inkTertiary) .kerning(1.2) .padding(.top, 44) // UGREEN logo mark ZStack { RoundedRectangle(cornerRadius: 18, style: .continuous) .fill(Color(red: 0.12, green: 0.64, blue: 0.38)) .frame(width: 72, height: 72) Image(systemName: "externaldrive.fill") .font(.system(size: 26, weight: .medium)) .foregroundStyle(.white.opacity(0.92)) } .shadow(color: Color(red: 0.12, green: 0.64, blue: 0.38).opacity(0.3), radius: 12, x: 0, y: 4) // UGreen NAS compatibility badge UGreenCompatibilityBadge() } .padding(.bottom, 24) .padding(.horizontal, AppTheme.hPad) // Protocol picker HStack(spacing: 0) { ForEach(NASProtocol.allCases, id: \.self) { proto in Button { withAnimation(.spring(response: 0.25, dampingFraction: 0.8)) { vm.selectedProtocol = proto } } label: { Text(proto.rawValue) .font(.system(size: 12, weight: .medium)) .foregroundStyle(vm.selectedProtocol == proto ? AppTheme.ink : AppTheme.inkTertiary) .frame(maxWidth: .infinity) .padding(.vertical, 7) .background( RoundedRectangle(cornerRadius: 7, style: .continuous) .fill(vm.selectedProtocol == proto ? AppTheme.surfaceRaised : Color.clear) .shadow( color: vm.selectedProtocol == proto ? .black.opacity(0.06) : .clear, radius: 3, x: 0, y: 1 ) ) } .buttonStyle(PlainButtonStyle()) } } .padding(3) .background(AppTheme.surfaceSunken) .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous)) .padding(.horizontal, AppTheme.hPad) .padding(.bottom, 20) // IP field (standalone) VStack(alignment: .leading, spacing: 8) { HStack(spacing: 12) { Image(systemName: "network") .font(.system(size: 14, weight: .regular)) .foregroundStyle(AppTheme.inkSecondary) .frame(width: 20) TextField("IP address or hostname", text: $vm.host) .font(AppTheme.body()) .foregroundStyle(AppTheme.ink) .keyboardType(.URL) .autocorrectionDisabled() .textInputAutocapitalization(.never) .focused($focused, equals: .host) if !vm.host.isEmpty { Button { vm.host = "" } label: { Image(systemName: "xmark.circle.fill") .foregroundStyle(AppTheme.inkQuaternary) .font(.system(size: 16)) } } } .padding(.horizontal, 16) .padding(.vertical, 14) .background(AppTheme.surfaceRaised) .clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous)) .shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2) Text("e.g. 192.168.1.10 or MY_NAS") .font(AppTheme.micro(11)) .foregroundStyle(AppTheme.inkTertiary) .padding(.leading, 4) } .padding(.horizontal, AppTheme.hPad) .padding(.bottom, 12) // Credentials card (username + password combined) VStack(spacing: 0) { HStack(spacing: 12) { Image(systemName: "person") .font(.system(size: 14, weight: .regular)) .foregroundStyle(AppTheme.inkSecondary) .frame(width: 20) TextField("Username", text: $vm.username) .font(AppTheme.body()) .foregroundStyle(AppTheme.ink) .keyboardType(.emailAddress) .autocorrectionDisabled() .textInputAutocapitalization(.never) .focused($focused, equals: .username) if !vm.username.isEmpty { Button { vm.username = "" } label: { Image(systemName: "xmark.circle.fill") .foregroundStyle(AppTheme.inkQuaternary) .font(.system(size: 16)) } } } .padding(.horizontal, 16) .padding(.vertical, 14) Rectangle() .fill(AppTheme.separator) .frame(height: 0.5) .padding(.leading, 44) HStack(spacing: 12) { Image(systemName: "lock") .font(.system(size: 14, weight: .regular)) .foregroundStyle(AppTheme.inkSecondary) .frame(width: 20) Group { if showPassword { TextField("Password", text: $vm.password) } else { SecureField("Password", text: $vm.password) } } .font(AppTheme.body()) .foregroundStyle(AppTheme.ink) .focused($focused, equals: .password) Button { showPassword.toggle() } label: { Image(systemName: showPassword ? "eye.slash" : "eye") .font(.system(size: 14)) .foregroundStyle(AppTheme.inkTertiary) } } .padding(.horizontal, 16) .padding(.vertical, 14) } .background(AppTheme.surfaceRaised) .clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous)) .overlay( RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous) .stroke( vm.isConnected ? AppTheme.positive.opacity(0.4) : vm.verifyError != nil ? AppTheme.destructive.opacity(0.4) : Color.clear, lineWidth: 1 ) ) .shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2) .padding(.horizontal, AppTheme.hPad) .padding(.bottom, 12) .animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.isConnected) .animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.verifyError != nil) // Path field Button(action: { if vm.isConnected { vm.showFolderBrowser = true } }) { HStack(spacing: 12) { Image(systemName: "folder") .font(.system(size: 14, weight: .regular)) .foregroundStyle(vm.isConnected ? AppTheme.inkSecondary : AppTheme.inkQuaternary) .frame(width: 20) Text(vm.remotePath == "/" ? "Destination folder" : vm.remotePath) .font(AppTheme.body()) .foregroundStyle(vm.remotePath == "/" ? AppTheme.inkTertiary : AppTheme.ink) .lineLimit(2) .multilineTextAlignment(.leading) .frame(maxWidth: .infinity, alignment: .leading) Image(systemName: "folder.badge.plus") .font(.system(size: 16)) .foregroundStyle(vm.isConnected ? AppTheme.inkSecondary : AppTheme.inkQuaternary) } .padding(.horizontal, 16) .padding(.vertical, 14) .background(AppTheme.surfaceRaised) .clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous)) .shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2) } .buttonStyle(ScaleButtonStyle()) .padding(.horizontal, AppTheme.hPad) .padding(.bottom, 20) // Feedback Group { if let error = vm.verifyError { HStack(spacing: 6) { Image(systemName: "exclamationmark.circle") .font(.system(size: 13)) Text(error) .font(AppTheme.caption()) } .foregroundStyle(AppTheme.destructive) .padding(.horizontal, AppTheme.hPad) .transition(.opacity.combined(with: .move(edge: .top))) } else if vm.isConnected { HStack(spacing: 6) { Image(systemName: "checkmark.circle") .font(.system(size: 13)) Text("Connected successfully") .font(AppTheme.caption()) } .foregroundStyle(AppTheme.positive) .padding(.horizontal, AppTheme.hPad) .transition(.opacity.combined(with: .move(edge: .top))) } } .animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.verifyError) .animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.isConnected) .padding(.bottom, 16) // Connect / Continue button Button(action: { if vm.isConnected { navigateToDashboard = true } else { Task { await vm.verify() } } }) { Group { if vm.isVerifying { ProgressView().tint(.white) } else { Text(vm.isConnected ? "Continue" : "Connect") } } } .buttonStyle(PrimaryButtonStyle( color: vm.isConnected ? AppTheme.positive : AppTheme.ink )) .padding(.horizontal, AppTheme.hPad) .disabled(!vm.canConnect) .animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.isConnected) Spacer().frame(height: 48) } } } .navigationBarHidden(true) .navigationDestination(isPresented: $navigateToDashboard) { MainTabView() } .sheet(isPresented: $vm.showFolderBrowser) { if let conn = ConnectionStore.shared.savedConnection { BrowseView(connection: conn, selectedPath: $vm.remotePath) } } } } }