ae38f6e417
- Rename app to Kisani in all UI text and Face ID prompt - Replace flat 2-state RootView with 5-step flow: ConnectView → LoginView → FolderSetupView → PhotoPermissionView → MainTabView - Remove NavigationStack from LoginView (was causing nested-stack crash); drive navigation via ConnectionStore.isSessionActive - Add FolderSetupView and PhotoPermissionView onboarding screens with step indicator (2/3, 3/3), spring entrance animations, and UGreen connection chip - Fix dark mode button invisibility: PrimaryButtonStyle and PillButtonStyle now use AppTheme.inkInverse; GhostButtonStyle border uses ink.opacity(0.25) - Add AppTheme.inkInverse adaptive token (dark bg ink on dark, white on light) - Add ConnectionStore.isSessionActive (non-persisted) and onboardingPhotoShown (UserDefaults-persisted) - Add os_log logging in LoginViewModel at auth start/success/failure - Remove dead Help button from ConnectView - UGreenCompatibilityBadge, KeychainStore, SavedConnections, extensions, PrivacyInfo.xcprivacy, unit test target and test stubs - AppTheme: full UIColor dynamic provider tokens for dark/light adaptive color - AppearanceMode enum + segmented picker in SettingsView - BackupView: enlarged ring, removed options card and linear progress bar - HistoryView: duration and bytes formatting, improved typography hierarchy Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
270 lines
14 KiB
Swift
270 lines
14 KiB
Swift
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: 20) {
|
|
// App icon
|
|
Image("nas_logo_clean")
|
|
.resizable()
|
|
.scaledToFit()
|
|
.frame(width: 52, height: 52)
|
|
.clipShape(RoundedRectangle(cornerRadius: 13, style: .continuous))
|
|
.shadow(color: .black.opacity(0.08), radius: 14, x: 0, y: 4)
|
|
.padding(.top, 44)
|
|
|
|
// Title
|
|
VStack(spacing: 6) {
|
|
Text("Kisani")
|
|
.font(.system(size: 26, weight: .semibold))
|
|
.foregroundStyle(AppTheme.ink)
|
|
|
|
// UGreen NAS compatibility badge
|
|
UGreenCompatibilityBadge()
|
|
}
|
|
}
|
|
.padding(.bottom, 28)
|
|
.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)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|