WIP for new design

client/src/components/Entities.jsx

@@ -79,11 +79,11 @@ export const Entities = ({
     }
 
     const renderSearch = () => {
-        const filterClassName = !hideTitle && filters ? "filters-with-title" : `${modelName}-search-filters`;
+        const filterClassName = (!hideTitle && filters) ? "filters-with-title" : `${modelName}-search-filters`;
         return (
             <section className="entities-search">
                 {!hideTitle && <h2>{title || `${I18n.t(`${modelName}.title`)} (${entities.length})`}</h2>}
-                <div className={filterClassName}>{filters}</div>
+                <div className={`${filterClassName} search-filter`}>{filters}</div>
                 <div className={`search ${showNew ? "" : "standalone"}`}>
                     {(!isEmpty(searchAttributes) || customSearch) &&
                         <div className={"sds--text-field sds--text-field--has-icon"}>

client/src/components/Entities.scss

@@ -42,28 +42,29 @@
             }
 
         }
+        .search-filter {
+            display: flex;
+            width: 290px;
+            @media (max-width: $medium) {
+                flex-direction: column;
+                margin: 15px 0;
+            }
+        }
 
         div.filter-select__value-container {
             min-height: 46px;
         }
 
         div.filter-select__control {
             min-height: 46px;
+            min-width: 240px;
             border-color: var(--sds--color--gray--400);
         }
 
-        div.filters-with-title {
-            margin-left: auto;
-        }
-
         .search {
             position: relative;
             display: flex;
 
-            &.standalone {
-                margin-left: auto;
-            }
-
             @media (max-width: $medium) {
                 margin-left: 0;
                 margin-top: 20px;

client/src/components/RoleCard.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import "./RoleCard.scss";
+import Logo from "./Logo";
+import I18n from "../locale/I18n";
+import {MoreLessText} from "./MoreLessText";
+import {Button, Card, CardType, Checkbox, Chip, ChipType} from "@surfnet/sds";
+import {useNavigate} from "react-router-dom";
+import {isEmpty} from "../utils/Utils";
+
+export const RoleCard = ({role, index, invitationSelected, invitationSelectCallback, isNew = false }) => {
+    const navigate = useNavigate();
+
+    const application = role.application;
+    const logo = role.application.data.metaDataFields["logo:0:url"];
+
+    const children =
+        <div key={index} className="user-role">
+            {!isEmpty(invitationSelected) &&
+                <Checkbox name={"invitationSelected"} value={invitationSelected} onChange={invitationSelectCallback}/>}
+            <Logo src={logo} alt={"provider"} className={"provider"}/>
+            <section className={"user-role-info"}>
+                <p>{application.data.metaDataFields[`name:${I18n.locale}`]} ({application.data.metaDataFields[`OrganizationName:${I18n.locale}`]})</p>
+                <h3>{role.name}</h3>
+                <MoreLessText txt={role.description}/>
+            </section>
+            {isEmpty(invitationSelected) && <div className={"launch"}>
+                    <Button txt={I18n.t("inviter.details")} onClick={() => navigate(`/roles/${role.id}`)}/>
+            </div>}
+
+        </div>;
+    return (
+        <div className={`card-container  ${isNew ? "is-new" : ""}`}>
+            {isNew &&
+                <Chip label={I18n.t("proceed.new")} type={ChipType.Status_error}/>
+            }
+            <Card key={index} cardType={CardType.Big} children={children}/>
+        </div>
+    );
+}

client/src/components/RoleCard.scss

@@ -0,0 +1,74 @@
+@import "../styles/vars";
+
+.card-container {
+
+    button.sds--chips {
+        background-color: #FFD700;
+    }
+
+    &.is-new {
+        position: relative;
+
+        .sds--chips {
+            position: absolute;
+            top: -16px;
+            left: -22px;
+        }
+
+        @keyframes glow {
+            0% {
+                box-shadow: 1px 0.13rem 0.13rem 0 #FFD700;
+                border: 0.0625rem solid #FFD700;
+            }
+            50% {
+                box-shadow: 1px 0.16rem 0.16rem 0 #eac602;
+                border: 0.0625rem solid #eac602;
+            }
+            100% {
+                box-shadow: 1px 0.13rem 0.13rem 0 #FFD700;
+                border: 0.0625rem solid #FFD700;
+            }
+        }
+
+        .sds--card {
+            animation: glow 2.5s infinite;
+        }
+
+    }
+
+    .user-role {
+        display: flex;
+        align-items: center;
+
+        @media (max-width: 680px) {
+            flex-direction: column;
+        }
+
+        img, svg {
+            height: 56px;
+            width: auto;
+            margin: 0 35px auto 0;
+            border-radius: $br;
+
+            @media (max-width: 680px) {
+                margin: 0 auto 20px 0;
+            }
+        }
+
+        .launch {
+            margin-left: auto;
+
+            @media (max-width: 680px) {
+                margin: 20px auto 0 0;
+            }
+
+        }
+
+
+        .user-role-info {
+            h3 {
+                margin: 10px 0;
+            }
+        }
+    }
+}

client/src/index.scss

@@ -18,4 +18,15 @@ body:after {
     transform: rotate(45deg);
 }
 
+$min-width-pixels: 620px;
+
+.sds--card--big {
+    min-width: $min-width-pixels;
+    @media (max-width: 680px) {
+        min-width: initial;
+    }
+}
+
+
+
 

client/src/locale/en.js

@@ -48,7 +48,8 @@ const en = {
         profile: "Profile",
         userRoles: "Maintainers",
         guestRoles: "Guests",
-        cron: "Cron"
+        cron: "Cron",
+        invite: "Invite"
     },
     home: {
         access: "SURFconext Invite",
@@ -203,7 +204,12 @@ const en = {
         deleteFlash: "Invitation(s) have been deleted",
         deleteConfirmation: "Are you sure you want to delete this invitation(s)?",
         resendConfirmation: "Are you sure you want to resend this invitation(s)?",
-        resendFlash: "Invitation(s) have been resent"
+        resendFlash: "Invitation(s) have been resent",
+        statuses: {
+            all: "All ({{nbr}})",
+            open: "Open",
+            accepted: "Accepted"
+        }
     },
     forms: {
         none: "None",
@@ -212,6 +218,7 @@ const en = {
         yes: "Yes",
         no: "No",
         ok: "Ok",
+        or: "or ",
         edit: "Edit",
         cancel: "Cancel",
         save: "Save",
@@ -264,7 +271,15 @@ const en = {
         loginWithSub: "Login",
         emailMismatch: "The inviter has indicated that you must accept this invitation with the email {{email}}, " +
             "but you have logged in with an account with a different email. Please login in with a different account."
-
+    },
+    inviter: {
+        welcome: "Welcome, {{name}}",
+        info: "Manage who gets access to the <strong>educational applications</strong> at <strong>your institution</strong>.",
+        sendInvite: "Send new invite",
+        viewHistory: "view history",
+        manage: "You can manage guests and send invites for",
+        details: "Show details",
+        history: "Invitation History"
     },
     tooltips: {
         userIcon: "User {{name}} provisioned at {{createdAt}} with last activity on {{lastActivity}}",
@@ -285,6 +300,7 @@ const en = {
         inviteesTooltip: "Add email addresses separated by comma, space or semi-colon or one-by-one using the enter key. You can also copy & paste a csv file with line-separated email addresses.",
         removeInvitation: "Delete all selected invitations",
         resendInvitation: "Resend all selected invitations",
+        inviter: "Send invitations to persons who will - once accepted - become guest users for the application"
     },
     confirmationDialog: {
         title: "Confirm",

client/src/locale/nl.js

@@ -48,7 +48,8 @@ const nl = {
         profile: "Profiel",
         userRoles: "Beheerders",
         guestRoles: "Gasten",
-        cron: "Cron"
+        cron: "Cron",
+        invite: "Uitnodiging"
     },
     home: {
         access: "SURFconext Invite",
@@ -112,8 +113,8 @@ const nl = {
     },
     roles: {
         title: "Toegangsrollen",
-        applicationName:"Applicatie",
-        accessRole:"Naam",
+        applicationName: "Applicatie",
+        accessRole: "Naam",
         name: "Naam",
         namePlaceHolder: "Naam van de rol",
         shortName: "Korte naam",
@@ -203,7 +204,12 @@ const nl = {
         deleteFlash: "Uitnodiging(en) verwijderd",
         deleteConfirmation: "Weet je zeker dat je deze uitnodiging(en) wilt verwijderen?",
         resendConfirmation: "Weet je zeker dat je deze uitnodigingen opnieuw wilt versturen?",
-        resendFlash: "Uitnodiging(en) opnieuw verstuurd."
+        resendFlash: "Uitnodiging(en) opnieuw verstuurd.",
+        statuses: {
+            all: "All ({{nbr}})",
+            open: "Open",
+            accepted: "Accepted"
+        }
     },
     forms: {
         none: "Geen",
@@ -212,6 +218,7 @@ const nl = {
         yes: "Ja",
         no: "Nee",
         ok: "Ok",
+        or: "of ",
         edit: "Bewerken",
         cancel: "Annuleren",
         save: "Opslaan",
@@ -265,6 +272,15 @@ const nl = {
         emailMismatch: "De uitnodiger heeft aangegeven dat je de uitnodiging dient te accepteren met e-mailadres {{email}}, " +
             "maar je bent ingelogd met een account met een ander mailadres. Log opnieuw in met een ander account."
     },
+    inviter: {
+        welcome: "Welcome, {{name}}",
+        info: "Manage who gets access to the <strong>educational applications</strong> at <strong>your institution</strong>.",
+        sendInvite: "Send new invite",
+        viewHistory: "view history",
+        manage: "You can manage guests and send inviter for",
+        details: "Show details",
+        history: "Uitnodigingen"
+    },
     tooltips: {
         userIcon: "Gebruiker {{name}} geprovisioned op {{createdAt}} laatst actief op {{lastActivity}}",
         impersonateIcon: "Doe gebruiker {{name}} na",
@@ -283,7 +299,8 @@ const nl = {
         intendedAuthorityTooltip: "De autoriteit geeft de rechten aan die de genodigde verwerft na het accepteren van de uitnodiging",
         inviteesTooltip: "Geef e-mailadressen op, gescheiden door komma, spaties of puntkomma, of een voor een met gebruik van de enter-toets. Je kunt ook een csv-bestand plakken met daarin op elke regel een e-mailadres.",
         removeInvitation: "Verwijder al de geselecteerde uitnodigingen",
-        resendInvitation: "Stuur al de geselecteerde uitnodigingen opnieuw"
+        resendInvitation: "Stuur al de geselecteerde uitnodigingen opnieuw",
+        inviter: "Send invitations to persons who will - once accepted - become guest users for the application"
     },
     confirmationDialog: {
         title: "Bevestig",

client/src/pages/App.js

@@ -23,6 +23,8 @@ import {InvitationForm} from "./InvitationForm";
 import {isEmpty} from "../utils/Utils";
 import {MissingAttributes} from "./MissingAttributes";
 import {System} from "./System";
+import {Inviter} from "./Inviter";
+import {Invitations} from "../tabs/Invitations";
 
 
 export const App = () => {
@@ -94,6 +96,8 @@ export const App = () => {
                         <Route path="profile/:id?" element={<Profile/>}/>
                         <Route path="role/:id" element={<RoleForm/>}/>
                         <Route path="invitation/:id" element={<InvitationForm/>}/>
+                        <Route path="invitations" element={<Invitations standAlone={true} history={true}/>}/>
+                        <Route path="inviter" element={<Inviter/>}/>
                         <Route path="roles/:id/:tab?" element={<Role/>}/>
                         <Route path="invitation/accept"
                                element={<Invitation authenticated={true}/>}/>

client/src/pages/Home.js

@@ -13,16 +13,24 @@ import {Users} from "../tabs/Users";
 import {Page} from "../components/Page";
 import {Roles} from "../tabs/Roles";
 import Applications from "../tabs/Applications";
+import {AUTHORITIES, highestAuthority} from "../utils/UserRole";
+import {Loader} from "@surfnet/sds";
 
 export const Home = () => {
     const {tab = "roles"} = useParams();
     const [currentTab, setCurrentTab] = useState(tab);
     const [tabs, setTabs] = useState([]);
+    const [loading, setLoading] = useState(true);
+
     const user = useAppStore((state) => state.user)
     const navigate = useNavigate();
 
     useEffect(() => {
         if (user) {
+            if (highestAuthority(user) === AUTHORITIES.INVITER) {
+                navigate("/inviter");
+                return;
+            }
             useAppStore.setState({
                 breadcrumbPath: [
                     {path: "/home", value: I18n.t("tabs.home")},
@@ -56,13 +64,17 @@ export const Home = () => {
             );
         }
         setTabs(newTabs);
-    }, [currentTab, user]);
+        setLoading(false);
+    }, [currentTab, user]);// eslint-disable-line react-hooks/exhaustive-deps
 
     const tabChanged = (name) => {
         setCurrentTab(name);
         navigate(`/home/${name}`);
     }
 
+    if (loading) {
+        return <Loader/>
+    }
     return (
         <div className="home">
             <div className="mod-home-container">