element-ios/RiotSwiftUI/Modules/Authentication/Common/AuthenticationSSOButton.swift

//
// Copyright 2022 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

import SwiftUI

/// A button that displays the icon and name of an SSO provider.
struct AuthenticationSSOButton: View {
    // MARK: - Constants
    
    enum Brand: String {
        case apple, facebook, github, gitlab, google, twitter
    }
    
    // MARK: - Private
    
    @Environment(\.theme) private var theme
    @ScaledMetric private var iconSize = 24
    
    private var renderingMode: Image.TemplateRenderingMode? {
        provider.brand == Brand.apple.rawValue || provider.brand == Brand.github.rawValue ? .template : nil
    }
    
    // MARK: - Public
    
    let provider: SSOIdentityProvider
    let action: () -> Void
    
    // MARK: - Views
    
    var body: some View {
        Button(action: action) {
            HStack {
                icon
                    .frame(maxWidth: .infinity, alignment: .leading)
                
                Text(VectorL10n.socialLoginButtonTitleContinue(provider.name))
                    .foregroundColor(theme.colors.primaryContent)
                    .multilineTextAlignment(.center)
                    .layoutPriority(1)
                
                icon
                    .frame(minWidth: 0, maxWidth: .infinity, alignment: .trailing)
                    .opacity(0)
            }
            .frame(maxWidth: .infinity)
            .fixedSize(horizontal: false, vertical: true)
            .contentShape(RoundedRectangle(cornerRadius: 8))
        }
        .buttonStyle(SecondaryActionButtonStyle(customColor: theme.colors.quinaryContent))
    }
    
    /// The icon with appropriate rendering mode and size for dynamic type.
    var icon: some View {
        iconImage.map { image in
            image
                .renderingMode(renderingMode)
                .resizable()
                .scaledToFit()
                .frame(width: iconSize, height: iconSize)
                .foregroundColor(renderingMode == .template ? theme.colors.primaryContent : nil)
        }
    }
    
    /// The image to be shown in the icon.
    var iconImage: Image? {
        switch provider.brand {
        case Brand.apple.rawValue:
            return Image(Asset.Images.authenticationSsoIconApple.name)
        case Brand.facebook.rawValue:
            return Image(Asset.Images.authenticationSsoIconFacebook.name)
        case Brand.github.rawValue:
            return Image(Asset.Images.authenticationSsoIconGithub.name)
        case Brand.gitlab.rawValue:
            return Image(Asset.Images.authenticationSsoIconGitlab.name)
        case Brand.google.rawValue:
            return Image(Asset.Images.authenticationSsoIconGoogle.name)
        case Brand.twitter.rawValue:
            return Image(Asset.Images.authenticationSsoIconTwitter.name)
        default:
            return nil
        }
    }
}

struct AuthenticationSSOButton_Previews: PreviewProvider {
    static var matrixDotOrg = AuthenticationHomeserverViewData.mockMatrixDotOrg
    
    static var buttons: some View {
        VStack {
            ForEach(matrixDotOrg.ssoIdentityProviders) { provider in
                AuthenticationSSOButton(provider: provider) { }
            }
            AuthenticationSSOButton(provider: SSOIdentityProvider(id: "", name: "SAML", brand: nil, iconURL: nil)) { }
        }
        .padding()
    }
    
    static var previews: some View {
        buttons
            .theme(.light).preferredColorScheme(.light)
            .environment(\.sizeCategory, .accessibilityLarge)
        buttons
            .theme(.dark).preferredColorScheme(.dark)
    }
}