feat: Kisani rebrand, step-based onboarding flow, dark mode fixes
- 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>
This commit is contained in:
Robin Kutesa
@@ -1,108 +1,94 @@
|
||||
import SwiftUI
|
||||
|
||||
struct LoginView: View {
|
||||
@EnvironmentObject var store: ConnectionStore
|
||||
@StateObject private var vm = LoginViewModel()
|
||||
@State private var navigateToDashboard = false
|
||||
@State private var logoAppeared = false
|
||||
|
||||
var body: some View {
|
||||
NavigationStack {
|
||||
ZStack {
|
||||
Color.white.ignoresSafeArea()
|
||||
ZStack {
|
||||
AppTheme.background.ignoresSafeArea()
|
||||
|
||||
VStack(spacing: 0) {
|
||||
Spacer()
|
||||
VStack(spacing: 0) {
|
||||
Spacer()
|
||||
|
||||
// Logo
|
||||
Image("nas_logo_clean")
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.frame(width: 72, height: 72)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
|
||||
.shadow(color: .black.opacity(0.08), radius: 16, x: 0, y: 4)
|
||||
.scaleEffect(logoAppeared ? 1 : 0.8)
|
||||
.opacity(logoAppeared ? 1 : 0)
|
||||
.animation(.spring(response: 0.5, dampingFraction: 0.7).delay(0.1), value: logoAppeared)
|
||||
|
||||
Spacer().frame(height: 32)
|
||||
|
||||
// Device + account
|
||||
VStack(spacing: 6) {
|
||||
Text("Forge")
|
||||
.font(.system(size: 22, weight: .semibold))
|
||||
.foregroundStyle(AppTheme.ink)
|
||||
|
||||
HStack(spacing: 8) {
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(AppTheme.surfaceSunken)
|
||||
.frame(width: 28, height: 28)
|
||||
Text("AB")
|
||||
.font(.system(size: 10, weight: .semibold))
|
||||
.foregroundStyle(AppTheme.inkSecondary)
|
||||
}
|
||||
Text("Albert")
|
||||
.font(AppTheme.caption())
|
||||
.foregroundStyle(AppTheme.inkSecondary)
|
||||
}
|
||||
}
|
||||
// Logo
|
||||
Image("nas_logo_clean")
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.frame(width: 72, height: 72)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
|
||||
.shadow(color: .black.opacity(0.08), radius: 16, x: 0, y: 4)
|
||||
.scaleEffect(logoAppeared ? 1 : 0.8)
|
||||
.opacity(logoAppeared ? 1 : 0)
|
||||
.animation(.spring(response: 0.5, dampingFraction: 0.7).delay(0.2), value: logoAppeared)
|
||||
.animation(.spring(response: 0.5, dampingFraction: 0.7).delay(0.1), value: logoAppeared)
|
||||
|
||||
Spacer().frame(height: 40)
|
||||
Spacer().frame(height: 32)
|
||||
|
||||
// Face ID button
|
||||
Button(action: { vm.authenticateWithFaceID() }) {
|
||||
HStack(spacing: 8) {
|
||||
if vm.isAuthenticating {
|
||||
ProgressView()
|
||||
.tint(.white)
|
||||
.scaleEffect(0.8)
|
||||
} else {
|
||||
Image(systemName: "faceid")
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
Text("Sign in with Face ID")
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonStyle(PrimaryButtonStyle())
|
||||
.padding(.horizontal, AppTheme.hPad)
|
||||
.disabled(vm.isAuthenticating)
|
||||
.opacity(logoAppeared ? 1 : 0)
|
||||
.animation(.spring(response: 0.5, dampingFraction: 0.7).delay(0.3), value: logoAppeared)
|
||||
|
||||
if let error = vm.authError {
|
||||
Text(error)
|
||||
.font(AppTheme.caption())
|
||||
.foregroundStyle(AppTheme.destructive)
|
||||
.padding(.top, 12)
|
||||
.transition(.opacity.combined(with: .move(edge: .top)))
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
// More
|
||||
Button("More options") { vm.showMoreSheet = true }
|
||||
.font(.system(size: 13, weight: .regular))
|
||||
// Title + account
|
||||
VStack(spacing: 5) {
|
||||
Text("Kisani")
|
||||
.font(.system(size: 22, weight: .semibold))
|
||||
.foregroundStyle(AppTheme.ink)
|
||||
Text("Sign in to continue")
|
||||
.font(AppTheme.caption())
|
||||
.foregroundStyle(AppTheme.inkTertiary)
|
||||
.padding(.bottom, 44)
|
||||
.opacity(logoAppeared ? 1 : 0)
|
||||
.animation(.spring(response: 0.5, dampingFraction: 0.7).delay(0.4), value: logoAppeared)
|
||||
}
|
||||
}
|
||||
.navigationDestination(isPresented: $navigateToDashboard) { MainTabView() }
|
||||
.sheet(isPresented: $vm.showMoreSheet) {
|
||||
MoreOptionsSheet(isPresented: $vm.showMoreSheet) {
|
||||
vm.showMoreSheet = false
|
||||
navigateToDashboard = true
|
||||
.opacity(logoAppeared ? 1 : 0)
|
||||
.animation(.spring(response: 0.5, dampingFraction: 0.7).delay(0.2), value: logoAppeared)
|
||||
|
||||
Spacer().frame(height: 40)
|
||||
|
||||
// Face ID button
|
||||
Button(action: { vm.authenticateWithFaceID() }) {
|
||||
HStack(spacing: 8) {
|
||||
if vm.isAuthenticating {
|
||||
ProgressView()
|
||||
.tint(AppTheme.inkInverse)
|
||||
.scaleEffect(0.8)
|
||||
} else {
|
||||
Image(systemName: "faceid")
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
Text("Sign in with Face ID")
|
||||
}
|
||||
}
|
||||
}
|
||||
.presentationDetents([.height(200)])
|
||||
.modifier(SheetCornerRadius(20))
|
||||
.buttonStyle(PrimaryButtonStyle())
|
||||
.padding(.horizontal, AppTheme.hPad)
|
||||
.disabled(vm.isAuthenticating)
|
||||
.opacity(logoAppeared ? 1 : 0)
|
||||
.animation(.spring(response: 0.5, dampingFraction: 0.7).delay(0.3), value: logoAppeared)
|
||||
|
||||
if let error = vm.authError {
|
||||
Text(error)
|
||||
.font(AppTheme.caption())
|
||||
.foregroundStyle(AppTheme.destructive)
|
||||
.padding(.top, 12)
|
||||
.transition(.opacity.combined(with: .move(edge: .top)))
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
// More
|
||||
Button("More options") { vm.showMoreSheet = true }
|
||||
.font(.system(size: 13, weight: .regular))
|
||||
.foregroundStyle(AppTheme.inkTertiary)
|
||||
.padding(.bottom, 44)
|
||||
.opacity(logoAppeared ? 1 : 0)
|
||||
.animation(.spring(response: 0.5, dampingFraction: 0.7).delay(0.4), value: logoAppeared)
|
||||
}
|
||||
.onAppear {
|
||||
vm.onAuthenticated = { navigateToDashboard = true }
|
||||
logoAppeared = true
|
||||
}
|
||||
.sheet(isPresented: $vm.showMoreSheet) {
|
||||
MoreOptionsSheet(isPresented: $vm.showMoreSheet) {
|
||||
vm.showMoreSheet = false
|
||||
store.isSessionActive = true
|
||||
}
|
||||
.presentationDetents([.height(200)])
|
||||
.modifier(SheetCornerRadius(20))
|
||||
}
|
||||
.onAppear {
|
||||
vm.onAuthenticated = { store.isSessionActive = true }
|
||||
logoAppeared = true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -138,7 +124,7 @@ struct MoreOptionsSheet: View {
|
||||
.padding(.horizontal, AppTheme.hPad)
|
||||
.padding(.bottom, 16)
|
||||
}
|
||||
.background(Color.white)
|
||||
.background(AppTheme.background)
|
||||
}
|
||||
|
||||
private func sheetRow(
|
||||
|
||||
Reference in New Issue
Block a user