Show/hide password

ShowPass.swift

//  Created by Inncoder.
//  Copyright © 2020 Inncoder AS. All rights reserved.

import SwiftUI

struct ShowPass: View {
    
    @State private var password = ""
    @State private var showPass = false
    
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: cornerRadius)
                .frame(width: roundedRectangleSize, height: roundedRectangleSize / 5)
                .foregroundColor(color)
            Rectangle()
                .frame(width: roundedRectangleSize - (roundedRectangleSize / 7.5), height: roundedRectangleSize / 14)
                .offset(x: -(roundedRectangleSize / 7.5)/2)
                .foregroundColor(.white)
                .shadow(color: Color.white, radius: 5, x: 0, y: 0)
                .opacity(showPass ? 0.8 : 0)
            HStack {
                Image(systemName: "lock.fill")
                    .frame(width: roundedRectangleSize / 12, height: roundedRectangleSize / 12)
                    .foregroundColor(showPass ? Color(UIColor.darkGray) : .gray)
                    .padding()
                if showPass {
                    TextField("Password", text: $password)
                        .foregroundColor(Color(UIColor.darkGray))
                } else {
                    SecureField("Password", text: $password)
                        .foregroundColor(.gray)
                }
                Image(systemName: showPass ? "flashlight.on.fill" : "flashlight.off.fill")
                    .resizable()
                    .frame(width: roundedRectangleSize / 14, height: roundedRectangleSize / 10)
                    .foregroundColor(.gray)
                    .rotationEffect(.degrees(-90))
                    .onTapGesture {
                        withAnimation(.easeInOut(duration: 0.3)) {
                            showPass.toggle()
                        }
                    }
                    .padding()
            }
            .frame(width: roundedRectangleSize, height: roundedRectangleSize / 5)
        }
    }
    
    //MARK: - Drawing Constants
    let roundedRectangleSize: CGFloat = 300
    let cornerRadius: CGFloat = 15
    let color: Color = Color(red: 0.189, green: 0.187, blue: 0.256)
}