00f68eebcd
Replace the SF Symbol server.rack with the custom KisaniLogoMark extracted into a shared component used by both ConnectView and BackupView. Introduce ConnectStep enum (credentials → folder → ready) in ConnectViewModel. The primary CTA changes label and colour at each step: "Connect" → "Select Destination" → "Get Started". The folder row animates in only after successful authentication; its border goes green once a valid path is chosen. Status message updates live with the current step. Submitting the password field triggers verify(). Rename project.yml name to Kisani so xcodegen produces Kisani.xcodeproj. Co-Authored-By: Kutesir <kutesir@provoc.ug> Co-Authored-By: Sentry <sentry@provoc.ug>
296 lines
16 KiB
Swift
296 lines
16 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 — identical treatment to BackupView ──
|
|
VStack(spacing: 10) {
|
|
Text("kisani.")
|
|
.font(.system(size: 11, weight: .medium, design: .monospaced))
|
|
.foregroundStyle(AppTheme.ink)
|
|
.kerning(2)
|
|
.padding(.top, 52)
|
|
|
|
KisaniLogoMark(size: 66)
|
|
|
|
UGreenCompatibilityBadge(selectedProtocol: vm.selectedProtocol)
|
|
.padding(.top, 4)
|
|
}
|
|
.frame(maxWidth: .infinity)
|
|
.padding(.bottom, 28)
|
|
|
|
// ── Protocol picker ──
|
|
HStack(spacing: 0) {
|
|
ForEach(NASProtocol.allCases, id: \.self) { proto in
|
|
Button {
|
|
withAnimation(.spring(response: 0.25, dampingFraction: 0.8)) {
|
|
vm.selectedProtocol = proto
|
|
vm.isConnected = false
|
|
vm.verifyError = nil
|
|
}
|
|
} 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)
|
|
|
|
// ── Step 1: Host ──
|
|
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)
|
|
.submitLabel(.next)
|
|
.onSubmit { focused = .username }
|
|
if !vm.host.isEmpty {
|
|
Button { vm.host = "" } label: {
|
|
Image(systemName: "xmark.circle.fill")
|
|
.foregroundStyle(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)
|
|
|
|
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)
|
|
|
|
// ── Step 1: Credentials card ──
|
|
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)
|
|
.autocorrectionDisabled()
|
|
.textInputAutocapitalization(.never)
|
|
.focused($focused, equals: .username)
|
|
.submitLabel(.next)
|
|
.onSubmit { focused = .password }
|
|
if !vm.username.isEmpty {
|
|
Button { vm.username = "" } label: {
|
|
Image(systemName: "xmark.circle.fill")
|
|
.foregroundStyle(AppTheme.inkQuaternary)
|
|
}
|
|
}
|
|
}
|
|
.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)
|
|
.submitLabel(.go)
|
|
.onSubmit { Task { await vm.verify() } }
|
|
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.45) :
|
|
vm.verifyError != nil ? AppTheme.destructive.opacity(0.45) :
|
|
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)
|
|
|
|
// ── Step 2: Destination folder — slides in after auth ──
|
|
if vm.step != .credentials {
|
|
Button(action: { vm.showFolderBrowser = true }) {
|
|
HStack(spacing: 12) {
|
|
Image(systemName: vm.remotePath == "/" ? "folder" : "folder.fill")
|
|
.font(.system(size: 14, weight: .regular))
|
|
.foregroundStyle(vm.remotePath == "/" ? AppTheme.inkSecondary : AppTheme.positive)
|
|
.frame(width: 20)
|
|
Text(vm.remotePath == "/" ? "Select 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: "chevron.right")
|
|
.font(.system(size: 12, weight: .medium))
|
|
.foregroundStyle(AppTheme.inkQuaternary)
|
|
}
|
|
.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.step == .ready ? AppTheme.positive.opacity(0.45) : Color.clear,
|
|
lineWidth: 1
|
|
)
|
|
)
|
|
.shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2)
|
|
}
|
|
.buttonStyle(ScaleButtonStyle())
|
|
.padding(.horizontal, AppTheme.hPad)
|
|
.padding(.bottom, 12)
|
|
.transition(.opacity.combined(with: .move(edge: .top)))
|
|
.animation(.spring(response: 0.35, dampingFraction: 0.8), value: vm.step)
|
|
}
|
|
|
|
// ── Status message ──
|
|
HStack(spacing: 6) {
|
|
Image(systemName: vm.statusIsError ? "exclamationmark.circle" :
|
|
vm.statusIsPositive ? "checkmark.circle" : "circle.dotted")
|
|
.font(.system(size: 13))
|
|
Text(vm.statusMessage)
|
|
.font(AppTheme.caption())
|
|
}
|
|
.foregroundStyle(
|
|
vm.statusIsError ? AppTheme.destructive :
|
|
vm.statusIsPositive ? AppTheme.positive :
|
|
AppTheme.inkTertiary
|
|
)
|
|
.padding(.horizontal, AppTheme.hPad)
|
|
.padding(.bottom, 20)
|
|
.animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.step)
|
|
.animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.verifyError)
|
|
}
|
|
}
|
|
.safeAreaInset(edge: .bottom) {
|
|
VStack(spacing: 0) {
|
|
Button(action: {
|
|
focused = nil
|
|
if vm.step == .ready {
|
|
navigateToDashboard = true
|
|
} else {
|
|
Task { await vm.proceed() }
|
|
}
|
|
}) {
|
|
Group {
|
|
if vm.isVerifying {
|
|
ProgressView().tint(.white)
|
|
} else {
|
|
Text(ctaLabel)
|
|
}
|
|
}
|
|
.frame(maxWidth: .infinity)
|
|
}
|
|
.buttonStyle(PrimaryButtonStyle(color: ctaColor))
|
|
.padding(.horizontal, AppTheme.hPad)
|
|
.padding(.top, 12)
|
|
.padding(.bottom, 32)
|
|
.disabled(!vm.canProceed)
|
|
.animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.step)
|
|
}
|
|
.background(AppTheme.background)
|
|
}
|
|
}
|
|
.navigationBarHidden(true)
|
|
.navigationDestination(isPresented: $navigateToDashboard) { MainTabView() }
|
|
.sheet(isPresented: $vm.showFolderBrowser) {
|
|
if let conn = ConnectionStore.shared.savedConnection {
|
|
BrowseView(connection: conn, selectedPath: $vm.remotePath, isPickerMode: true)
|
|
.onDisappear {
|
|
if vm.remotePath != "/", var c = ConnectionStore.shared.savedConnection {
|
|
c.remotePath = vm.remotePath
|
|
ConnectionStore.shared.savedConnection = c
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
private var ctaLabel: String {
|
|
switch vm.step {
|
|
case .credentials: return "Connect"
|
|
case .folder: return "Select Destination"
|
|
case .ready: return "Get Started"
|
|
}
|
|
}
|
|
|
|
private var ctaColor: Color {
|
|
switch vm.step {
|
|
case .credentials: return AppTheme.ink
|
|
case .folder: return AppTheme.ink
|
|
case .ready: return AppTheme.positive
|
|
}
|
|
}
|
|
}
|