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.surfaceSunken.ignoresSafeArea() ScrollView { VStack(spacing: 0) { // Logo + title VStack(spacing: 10) { Image("nas_logo_clean") .resizable() .scaledToFit() .frame(width: 44, height: 44) .clipShape(RoundedRectangle(cornerRadius: 11, style: .continuous)) .padding(.top, 44) Text("NAS Connect") .font(.system(size: 26, weight: .semibold)) .foregroundStyle(AppTheme.ink) Text("Connect to your UGreen or any SMB / SFTP NAS") .font(AppTheme.caption()) .foregroundStyle(AppTheme.inkTertiary) .multilineTextAlignment(.center) } .padding(.bottom, 32) .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 ? Color.white : Color.clear) .shadow( color: vm.selectedProtocol == proto ? .black.opacity(0.06) : .clear, radius: 3, x: 0, y: 1 ) ) } .buttonStyle(PlainButtonStyle()) } } .padding(3) .background(Color.black.opacity(0.06)) .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(Color.white) .clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous)) .shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2) HStack(spacing: 20) { Text("IP Address, ex: 192.168.1.10") .font(AppTheme.micro(11)) .foregroundStyle(AppTheme.inkTertiary) Text("NAS Name, ex: 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(Color.white) .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(Color.white) .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) // Help Button { // future: show help sheet } label: { HStack(spacing: 6) { Image(systemName: "questionmark.circle") .font(.system(size: 13)) Text("Help") .font(AppTheme.caption()) } .foregroundStyle(AppTheme.inkTertiary) } .padding(.top, 20) .padding(.bottom, 48) } } } .navigationTitle("NAS Connect") .navigationBarTitleDisplayMode(.inline) .navigationDestination(isPresented: $navigateToDashboard) { MainTabView() } .sheet(isPresented: $vm.showFolderBrowser) { if let conn = ConnectionStore.shared.savedConnection { BrowseView(connection: conn, selectedPath: $vm.remotePath) } } } } }