feat: logo fix, session hierarchy, Switch User, lock vs signOut
Asset fix: - nas_logo_clean.imageset/Contents.json now registers the 512px PNG at all three scales (1x/2x/3x) so iOS uses it on every device type. Previously only 1x was wired causing the image to be missing on Retina. - Logo rendered with thin AppTheme.inkQuaternary ring overlay so its dark-background edge stays legible against any app background color. LoginView overhaul: - New hierarchy: Kisani title → 90pt logo → NAS displayName → username - Staggered spring entrance (0.06–0.32s delays, asymmetric ease) - "Switch User" replaces "More options" — calls store.signOut() to clear connection/session/onboarding and return to ConnectView. - MoreOptionsSheet removed (no longer needed). ConnectionStore: - Added lock() — ends session but preserves saved connection (returns to LoginView for Face ID re-auth without losing NAS credentials). - signOut() now clearly documented as clearing everything. - Removed duplicate sectionLabel() from SettingsView (canonical version lives in LANTriggerSection.swift as a top-level free function). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,10 +6,12 @@
|
|||||||
"scale" : "1x"
|
"scale" : "1x"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
"filename" : "nas_logo_clean.png",
|
||||||
"idiom" : "universal",
|
"idiom" : "universal",
|
||||||
"scale" : "2x"
|
"scale" : "2x"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
"filename" : "nas_logo_clean.png",
|
||||||
"idiom" : "universal",
|
"idiom" : "universal",
|
||||||
"scale" : "3x"
|
"scale" : "3x"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,6 +5,8 @@ struct LoginView: View {
|
|||||||
@StateObject private var vm = LoginViewModel()
|
@StateObject private var vm = LoginViewModel()
|
||||||
@State private var appeared = false
|
@State private var appeared = false
|
||||||
|
|
||||||
|
private var connection: NASConnection? { store.savedConnection }
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
ZStack {
|
ZStack {
|
||||||
AppTheme.background.ignoresSafeArea()
|
AppTheme.background.ignoresSafeArea()
|
||||||
@@ -12,46 +14,54 @@ struct LoginView: View {
|
|||||||
VStack(spacing: 0) {
|
VStack(spacing: 0) {
|
||||||
Spacer()
|
Spacer()
|
||||||
|
|
||||||
// Logo + wordmark
|
// ── App identity ──────────────────────────
|
||||||
VStack(spacing: 20) {
|
VStack(spacing: 6) {
|
||||||
Image("nas_logo_clean")
|
Text("Kisani")
|
||||||
.resizable()
|
.font(.system(size: 34, weight: .bold, design: .default))
|
||||||
.scaledToFit()
|
.foregroundStyle(AppTheme.ink)
|
||||||
.frame(width: 80, height: 80)
|
|
||||||
.clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
|
|
||||||
.shadow(color: .black.opacity(0.12), radius: 20, x: 0, y: 6)
|
|
||||||
.scaleEffect(appeared ? 1 : 0.85)
|
|
||||||
.opacity(appeared ? 1 : 0)
|
.opacity(appeared ? 1 : 0)
|
||||||
.animation(.spring(response: 0.5, dampingFraction: 0.72).delay(0.08), value: appeared)
|
.offset(y: appeared ? 0 : 8)
|
||||||
|
.animation(.spring(response: 0.44, dampingFraction: 0.82).delay(0.06), value: appeared)
|
||||||
VStack(spacing: 6) {
|
|
||||||
Text("Kisani")
|
|
||||||
.font(.system(size: 32, weight: .bold, design: .default))
|
|
||||||
.foregroundStyle(AppTheme.ink)
|
|
||||||
.opacity(appeared ? 1 : 0)
|
|
||||||
.animation(.spring(response: 0.45, dampingFraction: 0.8).delay(0.16), value: appeared)
|
|
||||||
|
|
||||||
Text("Your NAS, always in sync.")
|
|
||||||
.font(.system(size: 15, weight: .regular))
|
|
||||||
.foregroundStyle(AppTheme.inkTertiary)
|
|
||||||
.opacity(appeared ? 1 : 0)
|
|
||||||
.animation(.spring(response: 0.45, dampingFraction: 0.8).delay(0.22), value: appeared)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Spacer().frame(height: 52)
|
Spacer().frame(height: 28)
|
||||||
|
|
||||||
// Auth button + error
|
// ── Logo ──────────────────────────────────
|
||||||
VStack(spacing: 12) {
|
logoView
|
||||||
|
.scaleEffect(appeared ? 1 : 0.88)
|
||||||
|
.opacity(appeared ? 1 : 0)
|
||||||
|
.animation(.spring(response: 0.48, dampingFraction: 0.74).delay(0.12), value: appeared)
|
||||||
|
|
||||||
|
Spacer().frame(height: 24)
|
||||||
|
|
||||||
|
// ── Session context ───────────────────────
|
||||||
|
if let conn = connection {
|
||||||
|
VStack(spacing: 5) {
|
||||||
|
Text(conn.displayName)
|
||||||
|
.font(.system(size: 17, weight: .semibold))
|
||||||
|
.foregroundStyle(AppTheme.ink)
|
||||||
|
Text(conn.username)
|
||||||
|
.font(.system(size: 14, weight: .regular))
|
||||||
|
.foregroundStyle(AppTheme.inkTertiary)
|
||||||
|
}
|
||||||
|
.opacity(appeared ? 1 : 0)
|
||||||
|
.offset(y: appeared ? 0 : 6)
|
||||||
|
.animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.18), value: appeared)
|
||||||
|
}
|
||||||
|
|
||||||
|
Spacer().frame(height: 44)
|
||||||
|
|
||||||
|
// ── Auth ──────────────────────────────────
|
||||||
|
VStack(spacing: 14) {
|
||||||
Button(action: { vm.authenticateWithFaceID() }) {
|
Button(action: { vm.authenticateWithFaceID() }) {
|
||||||
HStack(spacing: 8) {
|
HStack(spacing: 9) {
|
||||||
if vm.isAuthenticating {
|
if vm.isAuthenticating {
|
||||||
ProgressView()
|
ProgressView()
|
||||||
.tint(AppTheme.inkInverse)
|
.tint(AppTheme.inkInverse)
|
||||||
.scaleEffect(0.85)
|
.scaleEffect(0.85)
|
||||||
} else {
|
} else {
|
||||||
Image(systemName: "faceid")
|
Image(systemName: "faceid")
|
||||||
.font(.system(size: 17, weight: .medium))
|
.font(.system(size: 18, weight: .medium))
|
||||||
Text("Sign in with Face ID")
|
Text("Sign in with Face ID")
|
||||||
.font(.system(size: 15, weight: .semibold))
|
.font(.system(size: 15, weight: .semibold))
|
||||||
}
|
}
|
||||||
@@ -61,107 +71,59 @@ struct LoginView: View {
|
|||||||
.padding(.horizontal, AppTheme.hPad)
|
.padding(.horizontal, AppTheme.hPad)
|
||||||
.disabled(vm.isAuthenticating)
|
.disabled(vm.isAuthenticating)
|
||||||
.opacity(appeared ? 1 : 0)
|
.opacity(appeared ? 1 : 0)
|
||||||
.animation(.spring(response: 0.45, dampingFraction: 0.8).delay(0.28), value: appeared)
|
.animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.24), value: appeared)
|
||||||
|
|
||||||
if let error = vm.authError {
|
if let error = vm.authError {
|
||||||
HStack(spacing: 5) {
|
HStack(spacing: 5) {
|
||||||
Image(systemName: "exclamationmark.circle")
|
Image(systemName: "exclamationmark.circle")
|
||||||
.font(.system(size: 12))
|
.font(.system(size: 12, weight: .regular))
|
||||||
Text(error)
|
Text(error)
|
||||||
.font(AppTheme.caption())
|
.font(AppTheme.caption())
|
||||||
}
|
}
|
||||||
.foregroundStyle(AppTheme.destructive)
|
.foregroundStyle(AppTheme.destructive)
|
||||||
.transition(.opacity.combined(with: .move(edge: .top)))
|
.transition(.asymmetric(
|
||||||
|
insertion: .opacity.combined(with: .move(edge: .top)),
|
||||||
|
removal: .opacity
|
||||||
|
))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.authError != nil)
|
.animation(.spring(response: 0.3, dampingFraction: 0.85), value: vm.authError != nil)
|
||||||
|
|
||||||
Spacer()
|
Spacer()
|
||||||
|
|
||||||
// More options
|
// ── Switch user ───────────────────────────
|
||||||
Button("More options") { vm.showMoreSheet = true }
|
Button(action: { store.signOut() }) {
|
||||||
.font(.system(size: 13, weight: .regular))
|
Text("Switch User")
|
||||||
.foregroundStyle(AppTheme.inkTertiary)
|
.font(.system(size: 13, weight: .regular))
|
||||||
.padding(.bottom, 48)
|
.foregroundStyle(AppTheme.inkTertiary)
|
||||||
.opacity(appeared ? 1 : 0)
|
}
|
||||||
.animation(.spring(response: 0.45, dampingFraction: 0.8).delay(0.36), value: appeared)
|
.buttonStyle(ScaleButtonStyle())
|
||||||
|
.padding(.bottom, 52)
|
||||||
|
.opacity(appeared ? 1 : 0)
|
||||||
|
.animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.32), value: appeared)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.sheet(isPresented: $vm.showMoreSheet) {
|
|
||||||
MoreOptionsSheet(isPresented: $vm.showMoreSheet) {
|
|
||||||
vm.showMoreSheet = false
|
|
||||||
store.isSessionActive = true
|
|
||||||
}
|
|
||||||
.presentationDetents([.height(200)])
|
|
||||||
.modifier(SheetCornerRadius(20))
|
|
||||||
}
|
|
||||||
.onAppear {
|
.onAppear {
|
||||||
vm.onAuthenticated = { store.isSessionActive = true }
|
vm.onAuthenticated = { store.isSessionActive = true }
|
||||||
appeared = true
|
appeared = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
struct MoreOptionsSheet: View {
|
// MARK: — Logo
|
||||||
@Binding var isPresented: Bool
|
|
||||||
var onAuthenticated: (() -> Void)?
|
|
||||||
|
|
||||||
var body: some View {
|
private var logoView: some View {
|
||||||
VStack(spacing: 0) {
|
ZStack {
|
||||||
Capsule()
|
// Subtle ring so logo edge is always legible against any background
|
||||||
.fill(AppTheme.inkQuaternary)
|
RoundedRectangle(cornerRadius: 24, style: .continuous)
|
||||||
.frame(width: 32, height: 4)
|
.stroke(AppTheme.inkQuaternary, lineWidth: 0.5)
|
||||||
.padding(.top, 12)
|
.frame(width: 92, height: 92)
|
||||||
.padding(.bottom, 20)
|
|
||||||
|
|
||||||
VStack(spacing: 0) {
|
Image("nas_logo_clean")
|
||||||
sheetRow("Password", weight: .medium) { }
|
.resizable()
|
||||||
Divider().padding(.leading, 16)
|
.scaledToFit()
|
||||||
sheetRow("Another account") {
|
.frame(width: 90, height: 90)
|
||||||
isPresented = false
|
.clipShape(RoundedRectangle(cornerRadius: 22, style: .continuous))
|
||||||
onAuthenticated?()
|
|
||||||
}
|
|
||||||
Divider().padding(.leading, 16)
|
|
||||||
sheetRow("Cancel", color: AppTheme.inkTertiary) { isPresented = false }
|
|
||||||
}
|
|
||||||
.background(AppTheme.surfaceRaised)
|
|
||||||
.clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous))
|
|
||||||
.overlay(
|
|
||||||
RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous)
|
|
||||||
.stroke(AppTheme.ink.opacity(0.08), lineWidth: 0.5)
|
|
||||||
)
|
|
||||||
.padding(.horizontal, AppTheme.hPad)
|
|
||||||
.padding(.bottom, 16)
|
|
||||||
}
|
|
||||||
.background(AppTheme.background)
|
|
||||||
}
|
|
||||||
|
|
||||||
private func sheetRow(
|
|
||||||
_ title: String,
|
|
||||||
weight: Font.Weight = .regular,
|
|
||||||
color: Color = AppTheme.ink,
|
|
||||||
action: @escaping () -> Void
|
|
||||||
) -> some View {
|
|
||||||
Button(action: action) {
|
|
||||||
Text(title)
|
|
||||||
.font(.system(size: 15, weight: weight))
|
|
||||||
.foregroundStyle(color)
|
|
||||||
.frame(maxWidth: .infinity, alignment: .leading)
|
|
||||||
.padding(.horizontal, 16)
|
|
||||||
.padding(.vertical, 14)
|
|
||||||
}
|
|
||||||
.buttonStyle(ScaleButtonStyle())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private struct SheetCornerRadius: ViewModifier {
|
|
||||||
let radius: CGFloat
|
|
||||||
init(_ radius: CGFloat) { self.radius = radius }
|
|
||||||
func body(content: Content) -> some View {
|
|
||||||
if #available(iOS 16.4, *) {
|
|
||||||
content.presentationCornerRadius(radius)
|
|
||||||
} else {
|
|
||||||
content
|
|
||||||
}
|
}
|
||||||
|
.shadow(color: .black.opacity(0.14), radius: 20, x: 0, y: 6)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -345,10 +345,4 @@ struct SettingsView: View {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private func sectionLabel(_ text: String) -> some View {
|
|
||||||
Text(text)
|
|
||||||
.font(AppTheme.micro())
|
|
||||||
.foregroundStyle(AppTheme.inkTertiary)
|
|
||||||
.padding(.leading, 4)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -104,6 +104,12 @@ final class ConnectionStore: ObservableObject {
|
|||||||
UserDefaults.standard.removeObject(forKey: "historyEntries")
|
UserDefaults.standard.removeObject(forKey: "historyEntries")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Locks the screen — keeps the saved connection but requires Face ID again.
|
||||||
|
func lock() {
|
||||||
|
isSessionActive = false
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Clears everything: connection, session, and onboarding state. Returns to ConnectView.
|
||||||
func signOut() {
|
func signOut() {
|
||||||
isSessionActive = false
|
isSessionActive = false
|
||||||
onboardingPhotoShown = false
|
onboardingPhotoShown = false
|
||||||
|
|||||||
Reference in New Issue
Block a user