Playing and polishing indexView

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBarLinks.kt

@@ -2,6 +2,7 @@
 
 package com.saveourtool.save.frontend.components.topbar
 
+import com.saveourtool.save.frontend.utils.isIndex
 import com.saveourtool.save.frontend.utils.isVuln
 import com.saveourtool.save.validation.FrontendRoutes
 
@@ -46,10 +47,10 @@ private val vulnTopbarLinks = sequenceOf(
 val topBarLinks: FC<TopBarLinksProps> = FC { props ->
     ul {
         className = ClassName("navbar-nav mx-auto")
-        if (props.location.isVuln()) {
-            vulnTopbarLinks
-        } else {
-            saveTopbarLinks
+        when {
+            props.location.isVuln() -> vulnTopbarLinks
+            props.location.isIndex() -> vulnTopbarLinks
+            else -> saveTopbarLinks
         }
             .forEach { elem ->
                 li {

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBarUserField.kt

@@ -128,7 +128,7 @@ val topBarUserField: FC<TopBarUserFieldProps> = FC { props ->
                     }
                     dropdownEntry(
                         faCity,
-                        "My organizations"
+                        "Manage organizations"
                     ) { attrs ->
                         attrs.onClick = {
                             navigate(to = "/$name/${FrontendRoutes.SETTINGS_ORGANIZATIONS}")

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/index/CardAboutUs.kt

@@ -0,0 +1,80 @@
+/**
+ * Just info about us on welcome page
+ */
+
+package com.saveourtool.save.frontend.components.views.index
+
+import com.saveourtool.save.frontend.utils.buttonBuilder
+import com.saveourtool.save.validation.FrontendRoutes
+import js.core.jso
+import react.FC
+import react.dom.html.ReactHTML
+import react.dom.html.ReactHTML.div
+import react.dom.html.ReactHTML.p
+import react.router.Navigate
+import react.router.dom.Link
+import web.cssom.ClassName
+import web.cssom.TextAlign
+
+// FixMe: Add links to our projects save-cloud, save-cli with logo (to Github)
+
+private const val WHO_ARE_WE = """
+    We are just a group of several developers working on this community project. 
+    Our main idea is that we can unify together all routine work that is done in the area of code analysis and help 
+    developers of analyzers focus on their primary work: find bugs in code.
+"""
+
+val cardAboutUs: FC<IndexViewProps> = FC { props ->
+    div {
+        className = ClassName("col-3 mx-2 mt-2")
+        div {
+            className = ClassName("row d-flex justify-content-center")
+            cardImage("img/icon3.png")
+        }
+
+        div {
+            className = ClassName("row d-flex justify-content-center text-gray-900 mt-2")
+
+            ReactHTML.h5 {
+                style = jso {
+                    textAlign = TextAlign.center
+                }
+                +"About Us"
+            }
+        }
+
+        div {
+            className = ClassName("row d-flex justify-content-center")
+            div {
+                className = ClassName("col-6")
+                p {
+                    +WHO_ARE_WE
+                }
+                div {
+                    className = ClassName("row d-flex justify-content-center mt-1")
+                    buttonBuilder(
+                        "About us",
+                        style = "secondary rounded-pill",
+                        isOutline = false
+                    ) {
+                        Navigate {
+                            to = "/${FrontendRoutes.ABOUT_US}"
+                        }
+                    }
+                }
+            }
+
+            div {
+                className = ClassName("col-6")
+                p {
+                    +"We kindly ask you not to break this service and report any problems that you will find to our Github. Please also read our"
+                    Link {
+                        +" Terms of Usage"
+                        to = "/${FrontendRoutes.TERMS_OF_USE}"
+                    }
+                    +"."
+                }
+            }
+        }
+    }
+}

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/index/CardServiceInfo.kt

@@ -0,0 +1,57 @@
+/**
+ * This card provides a global information about SaveOurTool
+ */
+
+package com.saveourtool.save.frontend.components.views.index
+
+import js.core.jso
+import react.FC
+import react.dom.html.ReactHTML
+import react.dom.html.ReactHTML.div
+import react.dom.html.ReactHTML.p
+import web.cssom.ClassName
+import web.cssom.TextAlign
+
+// FixMe: all links with descriptions in pretty format
+
+private const val SERVICES = """
+    SaveOurTool provides Intelligent Services for developers of code analysis tools. Our two main directions:
+    1. SAVE - a platform for a distributed Cloud CI of code analyzers with a special test framework. With SAVE you can:
+    quickly establish testing and CI of your analyzer, share your tests with community to compare other tools with your tool
+    using your benchmarks. Using SAVE you can even create an online demo for your analyzer and setup it for your community.
+    2. VULN - a platform for reporting, aggregation and dedublication of 1-day Vulerabilities.
+
+    Also we establish contests in the area of code analysis where you can propose your automated solutions for 
+    finding bugs and compete with other projects.
+"""
+
+val cardServiceInfo: FC<IndexViewProps> = FC { props ->
+    div {
+        className = ClassName("col-3 mx-2 mt-2")
+        div {
+            className = ClassName("row d-flex justify-content-center")
+            cardImage("img/icon2.png")
+        }
+
+        div {
+            className = ClassName("row d-flex justify-content-center text-gray-900 mt-2")
+
+            ReactHTML.h5 {
+                style = jso {
+                    textAlign = TextAlign.center
+                }
+                +"Multiple different services"
+            }
+        }
+
+        div {
+            className = ClassName("row")
+            div {
+                className = ClassName("col-12")
+                p {
+                    +SERVICES
+                }
+            }
+        }
+    }
+}

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/index/CardUser.kt

@@ -0,0 +1,139 @@
+/**
+ * On Index view we should have a small personal feed for the user with all useful links. It will be implemented here.
+ */
+
+package com.saveourtool.save.frontend.components.views.index
+
+import com.saveourtool.save.frontend.components.topbar.logoSize
+import com.saveourtool.save.frontend.utils.AVATAR_PLACEHOLDER
+import com.saveourtool.save.frontend.utils.AVATAR_PROFILE_PLACEHOLDER
+import com.saveourtool.save.frontend.utils.buttonBuilder
+import com.saveourtool.save.frontend.utils.useStateFromProps
+import com.saveourtool.save.v1
+import com.saveourtool.save.validation.FrontendRoutes
+import js.core.jso
+import react.FC
+import react.dom.html.ReactHTML.b
+import react.dom.html.ReactHTML.div
+import react.dom.html.ReactHTML.h5
+import react.dom.html.ReactHTML.img
+import react.dom.html.ReactHTML.p
+import react.router.Navigate
+import web.cssom.ClassName
+import web.cssom.TextAlign
+
+// FixMe: List of organizations where user included, if not - link to creation of organization
+// FixMe: Current Rating in Vulnerabilities
+// FixMe: Link to settings where user can install avatars
+// FixMe: Latest notifications - for example: your Vuln was accepted or Change requested
+// FixMe: Some statistics: may be how many users used your demo or how many contests you created,
+// FixMe: How many vuln were submitted and accepted, ranking in TOP ratings: for contests and more
+// FixMe: Statistics about demo
+// FixMe: Registration date
+
+private const val REGISTER_NOW = """
+    For the better User Experience we recommend you to register or sign into the SaveOurTool platform 
+    using one of the supported Oauth Providers. Anyway, you can proceed without registration, 
+    but functionality will be limited.
+"""
+
+private const val START_NOW = """
+    The easiest way to start working with our Ecosystem is to create your organization, invite collaborators and 
+    start working with services that you like. 
+"""
+
+val cardUser: FC<IndexViewProps> = FC { props ->
+    val (avatar, setAvatar) = useStateFromProps("/api/$v1/avatar${props.userInfo?.avatar}")
+
+    div {
+        className = ClassName("col-3 mx-2 mt-2")
+        div {
+            className = ClassName("row d-flex justify-content-center")
+            cardImage("img/icon1.png")
+        }
+
+        div {
+            className = ClassName("row d-flex justify-content-center text-gray-900 mt-2")
+            h5 {
+                style = jso {
+                    textAlign = TextAlign.center
+                }
+                +"Welcome${props.userInfo?.name?.let { ", " } ?: ""}"
+                b {
+                    +(props.userInfo?.name?.let { " @$it " } ?: "")
+                }
+                +"!"
+            }
+        }
+
+        div {
+            className = ClassName("row d-flex justify-content-center")
+            div {
+                className = ClassName("col-3")
+                img {
+                    className =
+                            ClassName("ml-2 align-self-center avatar avatar-user width-full border color-bg-default rounded-circle fas mr-2")
+                    src = props.userInfo?.avatar?.let { avatar } ?: AVATAR_PROFILE_PLACEHOLDER
+                    style = logoSize
+                    onError = {
+                        setAvatar { AVATAR_PLACEHOLDER }
+                    }
+                }
+            }
+
+            div {
+                className = ClassName("col-9")
+                props.userInfo?.let {
+                    p {
+                        +START_NOW
+                    }
+
+                    div {
+                        className = ClassName("row d-flex justify-content-center mt-1")
+                        buttonBuilder(
+                            "Profile Settings",
+                            style = "primary rounded-pill",
+                            isOutline = false
+                        ) {
+                            Navigate {
+                                to = "/${FrontendRoutes.SETTINGS_PROFILE}"
+                            }
+                        }
+                    }
+                }
+                    ?: run {
+                        p {
+                            +REGISTER_NOW
+                        }
+
+                        div {
+                            className = ClassName("row d-flex justify-content-center")
+
+                            buttonBuilder(
+                                "Vulnerabilities Archive",
+                                style = "primary rounded-pill",
+                                isOutline = false
+                            ) {
+                                Navigate {
+                                    to = "/${FrontendRoutes.VULNERABILITIES}"
+                                }
+                            }
+                        }
+
+                        div {
+                            className = ClassName("row d-flex justify-content-center mt-1")
+                            buttonBuilder(
+                                "Save Cloud Platform",
+                                style = "primary rounded-pill",
+                                isOutline = false
+                            ) {
+                                Navigate {
+                                    to = "/${FrontendRoutes.PROJECTS}"
+                                }
+                            }
+                        }
+                    }
+            }
+        }
+    }
+}