354 lines
11 KiB
Swift
354 lines
11 KiB
Swift
import SwiftUI
|
|
|
|
struct LoginRootView: View {
|
|
@ObservedObject var model: AppViewModel
|
|
|
|
#if !os(macOS)
|
|
@State private var isNFCSheetPresented = false
|
|
#endif
|
|
|
|
var body: some View {
|
|
#if os(macOS)
|
|
MacPairingView(model: model)
|
|
#else
|
|
NavigationStack {
|
|
PairingWelcomeView(
|
|
model: model,
|
|
onScanRequested: {
|
|
model.isScannerPresented = true
|
|
},
|
|
onNFCRequested: {
|
|
isNFCSheetPresented = true
|
|
}
|
|
)
|
|
.fullScreenCover(isPresented: $model.isScannerPresented) {
|
|
QRScannerSheet(
|
|
title: "Scan pairing QR",
|
|
description: "Open pairing in your idp.global web session, then scan the QR shown there to link this iPhone.",
|
|
navigationTitle: "Link Passport"
|
|
) { payload in
|
|
model.manualPairingPayload = payload
|
|
Task {
|
|
await model.signIn(with: payload, transport: .qr)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sheet(isPresented: $isNFCSheetPresented) {
|
|
NFCSheet(
|
|
title: "Hold near pairing tag",
|
|
message: "Use a supported idp.global NFC tag to link this iPhone and attach a signed location proof.",
|
|
actionTitle: "Link device"
|
|
) { request in
|
|
await model.signIn(with: request)
|
|
}
|
|
}
|
|
#endif
|
|
}
|
|
}
|
|
|
|
#if !os(macOS)
|
|
private struct PairingWelcomeView: View {
|
|
@ObservedObject var model: AppViewModel
|
|
let onScanRequested: () -> Void
|
|
let onNFCRequested: () -> Void
|
|
|
|
var body: some View {
|
|
AppScrollScreen(compactLayout: true, bottomPadding: 170) {
|
|
PairingHero()
|
|
|
|
PairingStepsCard()
|
|
|
|
PairingChecklistCard()
|
|
}
|
|
.navigationTitle("")
|
|
.toolbar(.hidden, for: .navigationBar)
|
|
.safeAreaInset(edge: .bottom) {
|
|
PairingActionDock(
|
|
isAuthenticating: model.isAuthenticating,
|
|
onScanRequested: onScanRequested,
|
|
onNFCRequested: onNFCRequested
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
private struct PairingHero: View {
|
|
var body: some View {
|
|
VStack(alignment: .leading, spacing: 18) {
|
|
HeroGlyph()
|
|
|
|
VStack(alignment: .leading, spacing: 10) {
|
|
Text("Your passport, in your pocket")
|
|
.font(.system(size: 30, weight: .bold, design: .default))
|
|
.fixedSize(horizontal: false, vertical: true)
|
|
|
|
Text("Link this iPhone to your idp.global web session to approve sign-ins, receive security alerts, and prove your identity with NFC.")
|
|
.font(.subheadline)
|
|
.foregroundStyle(Color.idpMutedForeground)
|
|
.fixedSize(horizontal: false, vertical: true)
|
|
}
|
|
}
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
.padding(.top, 8)
|
|
}
|
|
}
|
|
|
|
private struct HeroGlyph: View {
|
|
var body: some View {
|
|
ZStack {
|
|
RoundedRectangle(cornerRadius: 26, style: .continuous)
|
|
.fill(
|
|
LinearGradient(
|
|
colors: [
|
|
IdP.tint,
|
|
IdP.tint.opacity(0.78)
|
|
],
|
|
startPoint: .topLeading,
|
|
endPoint: .bottomTrailing
|
|
)
|
|
)
|
|
.frame(width: 76, height: 76)
|
|
.shadow(color: IdP.tint.opacity(0.35), radius: 18, x: 0, y: 10)
|
|
|
|
RoundedRectangle(cornerRadius: 26, style: .continuous)
|
|
.stroke(Color.white.opacity(0.22), lineWidth: 1)
|
|
.frame(width: 76, height: 76)
|
|
|
|
Image(systemName: "shield.lefthalf.filled")
|
|
.font(.system(size: 34, weight: .semibold))
|
|
.foregroundStyle(.white)
|
|
}
|
|
}
|
|
}
|
|
|
|
private struct PairingStepsCard: View {
|
|
var body: some View {
|
|
AppPanel(compactLayout: true, radius: 22) {
|
|
VStack(alignment: .leading, spacing: 4) {
|
|
Text("How pairing works")
|
|
.font(.headline)
|
|
Text("Three quick steps to finish setup.")
|
|
.font(.footnote)
|
|
.foregroundStyle(Color.idpMutedForeground)
|
|
}
|
|
|
|
VStack(spacing: 0) {
|
|
PairingStepRow(
|
|
number: 1,
|
|
title: "Start from the web",
|
|
message: "Open idp.global in your browser and begin a new device pairing."
|
|
)
|
|
|
|
StepDivider()
|
|
|
|
PairingStepRow(
|
|
number: 2,
|
|
title: "Scan the pairing QR",
|
|
message: "Point this iPhone at the QR shown by that browser session."
|
|
)
|
|
|
|
StepDivider()
|
|
|
|
PairingStepRow(
|
|
number: 3,
|
|
title: "Approve future sign-ins",
|
|
message: "Once linked, this phone receives approval requests and alerts."
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
private struct PairingChecklistCard: View {
|
|
var body: some View {
|
|
AppPanel(compactLayout: true, radius: 22) {
|
|
VStack(alignment: .leading, spacing: 4) {
|
|
Text("Before you scan")
|
|
.font(.headline)
|
|
Text("A few quick checks help the link complete cleanly.")
|
|
.font(.footnote)
|
|
.foregroundStyle(Color.idpMutedForeground)
|
|
}
|
|
|
|
VStack(alignment: .leading, spacing: 12) {
|
|
PairingNoteRow(
|
|
icon: "safari",
|
|
text: "Keep the pairing page open in your browser until this phone confirms the link."
|
|
)
|
|
PairingNoteRow(
|
|
icon: "camera.fill",
|
|
text: "Grant camera access when prompted so the QR can be read directly."
|
|
)
|
|
PairingNoteRow(
|
|
icon: "doc.on.clipboard",
|
|
text: "No camera? The scanner also accepts a pasted pairing link."
|
|
)
|
|
PairingNoteRow(
|
|
icon: "wave.3.right",
|
|
text: "Organizations using NFC tags can link with NFC instead of QR."
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
private struct PairingActionDock: View {
|
|
let isAuthenticating: Bool
|
|
let onScanRequested: () -> Void
|
|
let onNFCRequested: () -> Void
|
|
|
|
var body: some View {
|
|
VStack(spacing: 10) {
|
|
Button(action: onScanRequested) {
|
|
HStack(spacing: 10) {
|
|
if isAuthenticating {
|
|
ProgressView()
|
|
.progressViewStyle(.circular)
|
|
.tint(Color.idpPrimaryForeground)
|
|
} else {
|
|
Image(systemName: "qrcode.viewfinder")
|
|
}
|
|
|
|
Text(isAuthenticating ? "Linking device..." : "Scan pairing QR")
|
|
}
|
|
}
|
|
.buttonStyle(PrimaryActionStyle())
|
|
.disabled(isAuthenticating)
|
|
|
|
Button(action: onNFCRequested) {
|
|
Label("Use NFC tag instead", systemImage: "wave.3.right")
|
|
}
|
|
.buttonStyle(SecondaryActionStyle())
|
|
.disabled(isAuthenticating)
|
|
}
|
|
.padding(.horizontal, 16)
|
|
.padding(.top, 12)
|
|
.padding(.bottom, 14)
|
|
.background(
|
|
Rectangle()
|
|
.fill(.regularMaterial)
|
|
.ignoresSafeArea()
|
|
.overlay(alignment: .top) {
|
|
Rectangle()
|
|
.fill(Color.idpSeparator.opacity(0.5))
|
|
.frame(height: 0.5)
|
|
}
|
|
)
|
|
}
|
|
}
|
|
|
|
private struct PairingStepRow: View {
|
|
let number: Int
|
|
let title: String
|
|
let message: String
|
|
|
|
var body: some View {
|
|
HStack(alignment: .top, spacing: 14) {
|
|
ZStack {
|
|
Circle()
|
|
.fill(IdP.tint.opacity(0.14))
|
|
Text("\(number)")
|
|
.font(.subheadline.weight(.bold))
|
|
.foregroundStyle(IdP.tint)
|
|
}
|
|
.frame(width: 30, height: 30)
|
|
|
|
VStack(alignment: .leading, spacing: 3) {
|
|
Text(title)
|
|
.font(.subheadline.weight(.semibold))
|
|
Text(message)
|
|
.font(.footnote)
|
|
.foregroundStyle(Color.idpMutedForeground)
|
|
.fixedSize(horizontal: false, vertical: true)
|
|
}
|
|
|
|
Spacer(minLength: 0)
|
|
}
|
|
.padding(.vertical, 10)
|
|
}
|
|
}
|
|
|
|
private struct StepDivider: View {
|
|
var body: some View {
|
|
HStack(spacing: 14) {
|
|
Rectangle()
|
|
.fill(Color.idpSeparator.opacity(0.6))
|
|
.frame(width: 1, height: 10)
|
|
.padding(.leading, 14)
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|
|
|
|
private struct PairingNoteRow: View {
|
|
let icon: String
|
|
let text: String
|
|
|
|
var body: some View {
|
|
HStack(alignment: .top, spacing: 12) {
|
|
Image(systemName: icon)
|
|
.font(.system(size: 13, weight: .semibold))
|
|
.foregroundStyle(IdP.tint)
|
|
.frame(width: 26, height: 26)
|
|
.background(IdP.tint.opacity(0.12), in: RoundedRectangle(cornerRadius: 8, style: .continuous))
|
|
|
|
Text(text)
|
|
.font(.footnote)
|
|
.foregroundStyle(Color.idpForeground.opacity(0.82))
|
|
.fixedSize(horizontal: false, vertical: true)
|
|
|
|
Spacer(minLength: 0)
|
|
}
|
|
}
|
|
}
|
|
#endif
|
|
|
|
#if os(macOS)
|
|
private struct MacPairingView: View {
|
|
@ObservedObject var model: AppViewModel
|
|
|
|
var body: some View {
|
|
VStack(alignment: .leading, spacing: 18) {
|
|
HStack(spacing: 12) {
|
|
Image(systemName: "shield.lefthalf.filled")
|
|
.font(.title2)
|
|
.foregroundStyle(IdP.tint)
|
|
|
|
VStack(alignment: .leading, spacing: 2) {
|
|
Text("Set up idp.global")
|
|
.font(.headline)
|
|
Text("Use the demo payload or paste a pairing link.")
|
|
.font(.subheadline)
|
|
.foregroundStyle(.secondary)
|
|
}
|
|
}
|
|
|
|
TextEditor(text: $model.manualPairingPayload)
|
|
.font(.footnote.monospaced())
|
|
.scrollContentBackground(.hidden)
|
|
.frame(minHeight: 140)
|
|
.padding(10)
|
|
.background(Color.idpSecondaryGroupedBackground, in: RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous))
|
|
|
|
VStack(spacing: 10) {
|
|
Button("Use demo payload") {
|
|
Task {
|
|
await model.signInWithSuggestedPayload()
|
|
}
|
|
}
|
|
.buttonStyle(PrimaryActionStyle())
|
|
|
|
Button("Link with payload") {
|
|
Task {
|
|
await model.signInWithManualPayload()
|
|
}
|
|
}
|
|
.buttonStyle(SecondaryActionStyle())
|
|
}
|
|
}
|
|
.padding(20)
|
|
}
|
|
}
|
|
#endif
|