Better Password Field

ContentView.swift

//
//  ContentView.swift
//  BetterPasswordField
//
//  Created by Paul Stamatiou on 1/3/22.
//  Idea from https://twitter.com/Stammy/status/1478108590066089987
//

import SwiftUI

enum FocusableField: Hashable {
    case password
}

struct ContentView: View {
    @State var countdown: Int = 5
    @State var showPassword: Bool = false
    @State var password: String = ""
    @FocusState private var focus: FocusableField?

    var timer = Timer.publish(every: 0.45, on: .main, in: .common).autoconnect()
    
    var focusedBG: Color {
        if focus == .password {
            return Color.black.opacity(0.08)
        } else {
            return Color.clear
        }
    }
    
    var pwdView: some View {
        HStack(spacing: 0) { 
            ForEach(0..<matchedStr.count, id: \.self) { _ in
                Text("•")
                    .font(.system(size: 22, weight: .medium).monospaced())
            }
        }
    }
    
    var matchedStr: String {
        let limit: Int = countdown > 5 ? 5 : countdown
        let charCount: Int = password.count < (limit + 1) ? 0 : password.count - limit
        return String(password.prefix(charCount))
    }
     
    var body: some View {
        VStack(alignment: .center, spacing: 8) {
                HStack(spacing: 5) {
                    ZStack {
                        pwdView
                            .frame(width: 240, height: 38, alignment: .leading)
                            .opacity(showPassword ? 0 : 1)
                        
                        TextField("Password", text: $password)
                            .focused($focus, equals: .password)
                            .textInputAutocapitalization(.none)
                            .disableAutocorrection(true)
                            .font(.system(size: 22, weight: .medium).monospaced())
                            .frame(width: 240, height: 38, alignment: .leading)
                            .foregroundColor(showPassword ? Color.black : password.count > 0 ? Color.clear : Color.black)
                    
                        Text(password) { string in
                            string.foregroundColor = Color.black//.opacity(0.1)
                            string.font = .system(size: 22, weight: .medium).monospaced()

                            // what you hide
                            if let range = string.range(of: matchedStr) {
                                string[range].foregroundColor = .clear
                            }
                        }
                        .frame(width: 240, height: 38, alignment: .leading)
                        .opacity(showPassword ? 0 : 1)
                        .onReceive(timer) { _ in
                            if (countdown > 0) {
                                countdown -= 1
                            }
                        }
                        .onChange(of: password) { _ in
                            // for every new char typed, reset timer logic
                            countdown = 6
                        }
                    }
                    
                    Button(action: { showPassword.toggle() }) {
                        Image(systemName: showPassword ? "eye" : "eye.slash")
                            .resizable()
                            .font(.system(size: 16, weight: .medium))
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 24, height: 16)
                            .foregroundColor(Color.black.opacity(0.5))
                            .padding(.horizontal, 6)
                    }
                    .buttonStyle(Scaler())
                    .contentShape(Rectangle())
                    .opacity(password.count > 0 ? 1 : 0)
                }
                .padding(.vertical, 12)
                .padding(.horizontal, 16)
                .background(focusedBG)
                .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
                .padding(.horizontal, 24)
                .onTapGesture {
                    focus = .password
                }
                .task {
                    // focus on load.. added delay required or it won't focus
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                        focus = .password
                    }
                }
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
        .edgesIgnoringSafeArea(.all)
        .statusBar(hidden: true)
    }
}

struct Scaler: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .scaleEffect(configuration.isPressed ? 0.90 : 1.0)
            .animation(Animation.spring(response: 0.45, dampingFraction: 0.6, blendDuration: 0), value: configuration.isPressed)
    }
}

extension Text {
    init(_ string: String, configure: ((inout AttributedString) -> Void)) {
        var attributedString = AttributedString(string)
        configure(&attributedString)
        self.init(attributedString)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}