workspace extends ../model.dsl {
    name "Ignite : Web Frontend System."
    description "A cutting-edge gamification experience seamlessly integrated into the existing E-Centive platform. This application is specifically tailored to energize the sales workforce by creating an intrinsically motivating environment. It's crafted to aid sales teams in achieving their organizational goals. The core feature of the Ignite frontend app is its ability to facilitate individuals in multi-store or franchise-type businesses in enhancing their personal and store's social capital. This functionality is underpinned by established principles from leading behavioral psychology studies, indicating that such empowerment of the workforce can significantly elevate a business's performance. The user-friendly interface of the application ensures an engaging and productive experience for the users, promoting a culture of achievement and recognition within the sales teams."

    model {
        !ref igniteWebFESystem {
            igniteWebApplication = container "Ignite Web Application" "Nuxt and Vue pages delivering browser view" "Nuxt/Vue" "Web Browser" 
            igniteServerAuthAPI = container "Server Auth API" {
                login = component "Login Enpoint" "Allows users to login in to the Ignite Website."
                forgotPassword = component "Forgot/Reset Password Endpoint" "Allows users to reset their passwords."
                refreshToken = component "Refresh Token Endpoint" "Allows for refresh of the eoken between pages."
                authComposable = component "Auth Composable" "Composable for user authentication."
                tags "Ignite Group"
            } 
            cognito = container "AWS Cognito" "Manages User Authentication inclusive of notifications." "AWS" {
                tags "Cognito"
            }

        }   
        
        salesAgent -> igniteWebApplication
        manager -> igniteWebApplication
        franchisee -> igniteWebApplication
        graphql -> igniteWebApplication
        igniteWebApplication -> igniteServerAuthAPI
        igniteWebApplication -> login
        igniteWebApplication -> forgotPassword
        login -> refreshToken 
        refreshToken -> forgotPassword
        login -> authComposable
        forgotPassword -> authComposable
        refreshToken -> authComposable
        authComposable -> cognito
    }

    views {
        systemcontext igniteWebFESystem "SystemContext" {
            include *
            animation {
                igniteWebFESystem
                salesAgent Manager Franchisee
                graph
            }
            autoLayout tb
            description "The system context diagram for Ignite web Frontend System."
            properties {
                structurizr.groups false
            }
        }
        container igniteWebFESystem "Containers" {
            include *
            animation {
                salesAgent franchisee manager graph
                igniteWebApplication
                igniteServerAuthAPI 
                Cognito
            }
            description "The container diagram for the Ignite Web Frontend System."
        }
        component igniteServerAuthAPI "Components" {
            include *
            animation {
                igniteWebApplication cognito
                login 
                refreshToken 
                forgotPassword 
                authComposable
            }
            description "The component diagram for the Ignite Server Auth API."
        }
        styles {
            element "Person" {
                background #a3a3a3 
                color #ffffff
                shape Person    
                fontSize 35
            }
            element "Web Browser" {
                shape WebBrowser
            }
            element "Cognito" {
                shape Pipe
            }
            element "Component" {
                background #01CDCA
                color #000000
            }
            element "Ignite Group" {
                background #01CDCA 
                color #ffffff
                shape RoundedBox
            }
        }
    }
}