Aligned welcome with design

OpenConext · Sep 29, 2023 · ee2a6f4 · ee2a6f4
1 parent 4d64206
commit ee2a6f4
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 67 deletions.
diff --git a/client/src/locale/en.js b/client/src/locale/en.js
@@ -41,12 +41,12 @@ const en = {
         home: "Home",
         applications: "Applications",
         users: "Users",
-        maintainers: "Maintainers",
-        guests: "Guests",
+        maintainers: "Role managers and inviters",
+        guests: "Guest with this role",
         invitations: "Invitations",
-        roles: "Roles",
+        roles: "Access roles",
         profile: "Profile",
-        userRoles: "Maintainers",
+        userRoles: "Role managers and inviters",
         guestRoles: "Guests",
         cron: "Cron",
         invite: "Invite"
@@ -179,7 +179,7 @@ const en = {
         expired: "Expired",
         enforceEmailEquality: "Email equality",
         eduIDOnly: "eduID only",
-        new: "Invite maintainer",
+        new: "Invite manager or inviter",
         newInvite: "New invite",
         newGuest: "Invite guest",
         invitees: "Invitees",

diff --git a/client/src/locale/nl.js b/client/src/locale/nl.js
@@ -41,12 +41,12 @@ const nl = {
         home: "Home",
         applications: "Applicaties",
         users: "Gebruikers",
-        maintainers: "Beheerders",
-        guests: "Gasten",
+        maintainers: "Rol managers en uitnodigers",
+        guests: "Gasten met deze rol",
         invitations: "Uitnodigingen",
-        roles: "Rollen",
+        roles: "Toegangsrollen",
         profile: "Profiel",
-        userRoles: "Beheerders",
+        userRoles: "Rol managers en uitnodigers",
         guestRoles: "Gasten",
         cron: "Cron",
         invite: "Uitnodiging"
@@ -65,7 +65,7 @@ const nl = {
     },
     access: {
         SUPER_USER: "Super User",
-        INSTITUTION_ADMIN: "Instellings beheerder",
+        INSTITUTION_ADMIN: "Instellings manager",
         MANAGER: "Manager",
         INVITER: "Uitnodiger",
         GUEST: "Gast",
@@ -91,7 +91,7 @@ const nl = {
         roles: "Rollen",
         applications: "Applicaties",
         noRolesInfo: "Je hebt geen rollen (je bent een super-user)",
-        noRolesInstitutionAdmin: "Als een instellingsbeheerder heb je geen rollen (maar je hebt wel toegang tot je applicaties)",
+        noRolesInstitutionAdmin: "Als een instellingsmanager heb je geen rollen (maar je hebt wel toegang tot je applicaties)",
         rolesInfo: "Je hebt de volgende rollen",
         applicationsInfo: "Je hebt toegang tot de volgende applicaties",
         noRolesFound: "Geen rollen gevonden.",
@@ -179,7 +179,7 @@ const nl = {
         expired: "Verlopen",
         enforceEmailEquality: "E-mailadres moet overeenkomen",
         eduIDOnly: "Uitsluitend voor eduID",
-        new: "Nodig beheerder uit",
+        new: "Nodig manager of uitnodiger uit",
         newInvite: "Nieuwe uitnodiging",
         newGuest: "Gast uitnodigen",
         invitees: "Genodigden",
@@ -283,7 +283,7 @@ const nl = {
         history: "Uitnodigingen"
     },
     institutionAdmin: {
-        welcome: "Welkom Instellings beheerder van {{name}}! Je kan nu je eerste rol aanmaken en managers daarvoor uitnodigen.",
+        welcome: "Welkom Instellings admin van {{name}}! Je kan nu je eerste rol aanmaken en managers daarvoor uitnodigen.",
         create: "Create access role"
     },
     tooltips: {

diff --git a/client/src/pages/Role.js b/client/src/pages/Role.js
@@ -66,20 +66,20 @@ export const Role = () => {
                                    guests={true}
                                    userRoles={res[1].filter(userRole => userRole.authority === "GUEST")}/>
                     </Page>,
+                    <Page key="invitations"
+                          name="invitations"
+                          label={I18n.t("tabs.invitations")}
+                          Icon={InvitationLogo}>
+                        <Invitations role={res[0]}
+                                     preloadedInvitations={res[2]}/>
+                    </Page>,
                     <Page key="maintainers"
                           name="maintainers"
                           label={I18n.t("tabs.userRoles")}
                           Icon={UserLogo}>
                         <UserRoles role={res[0]}
                                    guests={false}
                                    userRoles={res[1].filter(userRole => userRole.authority !== "GUEST")}/>
-                    </Page>,
-                    <Page key="invitations"
-                          name="invitations"
-                          label={I18n.t("tabs.invitations")}
-                          Icon={InvitationLogo}>
-                        <Invitations role={res[0]}
-                                     preloadedInvitations={res[2]}/>
                     </Page>
                 ];
                 setTabs(newTabs.filter(tab => tab !== null));

diff --git a/welcome/src/components/RoleCard.jsx b/welcome/src/components/RoleCard.jsx
@@ -5,7 +5,7 @@ import I18n from "../locale/I18n";
 import {MoreLessText} from "./MoreLessText";
 import {Button, Card, CardType, Chip, ChipType} from "@surfnet/sds";
 
-export const RoleCard = ({role, index, isNew = false}) => {
+export const RoleCard = ({role, index, isNew = false, skipLaunch= false}) => {
 
     const application = role.application;
     const logo = role.application.data.metaDataFields["logo:0:url"];
@@ -17,11 +17,11 @@ export const RoleCard = ({role, index, isNew = false}) => {
                 <h3>{role.name}</h3>
                 <MoreLessText txt={role.description}/>
             </section>
-            <div className={"launch"}>
+            {!skipLaunch && <div className={"launch"}>
                 <Button txt={I18n.t("proceed.launch")} onClick={() => {
                     window.location.href = role.landingPage;
                 }}/>
-            </div>
+            </div>}
 
         </div>;
     return (

diff --git a/welcome/src/locale/en.js b/welcome/src/locale/en.js
@@ -93,6 +93,10 @@ const en = {
         infoLoginAgain: "To accept the invitation you'll need to login again.",
         login: "Login",
         loginWithSub: "Login",
+        access: "Access granted",
+        applicationInfo: "This application is added to your SURF-invite homepage.",
+        applicationInfoMultiple: "These applicationa added added to your SURF-invite homepage.",
+        continue: "Continue",
         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."
     },

diff --git a/welcome/src/locale/nl.js b/welcome/src/locale/nl.js
@@ -93,6 +93,10 @@ const nl = {
         infoLoginAgain: "Om de uitnodiging te accepteren moet je opnieuw inloggen.",
         login: "Login",
         loginWithSub: "Login",
+        access: "Toegang verleend",
+        applicationInfo: "Deze applicatie is toegevoegd aan je SURF-invite startpagina.",
+        applicationInfoMultiple:"Deze applicaties zijn toegevoegd aan je SURF-invite startpagina.",
+        continue: "Doorgaan",
         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."
     },

diff --git a/welcome/src/pages/Invitation.js b/welcome/src/pages/Invitation.js
@@ -14,6 +14,7 @@ import {useAppStore} from "../stores/AppStore";
 import {splitListSemantically} from "../utils/Utils";
 import ConfirmationDialog from "../components/ConfirmationDialog";
 import {organisationName} from "../utils/Manage";
+import HighFive from "../icons/high-five.svg";
 
 const MAY_ACCEPT = "mayAccept";
 
@@ -148,6 +149,9 @@ export const Invitation = ({authenticated}) => {
         const expiredMessage = I18n.t("invitationAccept.expired", {expiryDate: expiryDate});
         return (
             <>
+                <div className="welcome-logo">
+                    <img src={HighFive} alt={I18n.t("notFound.alt")}/>
+                </div>
                 {!expired && <h1>{I18n.t("invitationAccept.hi", {name: authenticated ? ` ${user.name}` : ""})}</h1>}
                 {expired &&
                     <p className="expired"><ErrorIndicator msg={expiredMessage}/></p>}
@@ -156,24 +160,28 @@ export const Invitation = ({authenticated}) => {
                 {!expired && <>
                     <Toaster toasterType={ToasterType.Info} message={html}/>
                 </>}
-                {!expired && <section className="step-container">
-                    <div className="step">
-                        <div className="circle two-quarters">
-                            <span>{I18n.t("invitationAccept.progress")}</span>
+                {!expired &&
+                    <section className="step-container">
+                        <div className="step">
+                            <div className="circle two-quarters">
+                                <span>{I18n.t("invitationAccept.progress")}</span>
+                            </div>
+                            <div className="step-actions">
+                                <h4>{I18n.t("invitationAccept.login")}</h4>
+                                <span>{I18n.t("invitationAccept.nextStep")}</span>
+                            </div>
                         </div>
-                        <div className="step-actions">
-                            <h4>{I18n.t("invitationAccept.login")}</h4>
-                            <span>{I18n.t("invitationAccept.nextStep")}</span>
+                        <div className={"info-block"}>
+                            {!authenticated &&
+                                <span dangerouslySetInnerHTML={{__html: `${I18n.t("invitationAccept.info")} `}}/>}
+                            {invitation.eduIDOnly && <span>{I18n.t("invitationAccept.infoLoginEduIDOnly")}</span>}
+                            {!invitation.eduIDOnly &&
+                                <span>{I18n.t(`invitationAccept.${authenticated ? "infoLoginAgain" : "infoLogin"}`)}</span>}
                         </div>
-                    </div>
-                    {!authenticated && <p className="info"
-                                          dangerouslySetInnerHTML={{__html: I18n.t("invitationAccept.info")}}/>}
-                    {invitation.eduIDOnly && <p className="info">{I18n.t("invitationAccept.infoLoginEduIDOnly")}</p>}
-                    {!invitation.eduIDOnly && <p className="info">{I18n.t(`invitationAccept.${authenticated ? "infoLoginAgain" : "infoLogin"}`)}</p>}
-                    <Button onClick={proceed}
-                            txt={I18n.t(`invitationAccept.${authenticated ? "login" : "loginWithSub"}`)}
-                            centralize={true}/>
-                </section>}
+                        <Button onClick={proceed}
+                                txt={I18n.t(`invitationAccept.${authenticated ? "login" : "loginWithSub"}`)}
+                                centralize={true}/>
+                    </section>}
             </>
         )
     }

diff --git a/welcome/src/pages/Invitation.scss b/welcome/src/pages/Invitation.scss
@@ -2,7 +2,7 @@
 
 .mod-user-invitation {
     max-width: 570px;
-    margin: 25px auto 40px auto;
+    margin: 0 auto 40px auto;
     width: 100%;
 
     @media (max-width: 680px) {
@@ -11,14 +11,39 @@
 
     .invitation-container {
         margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .welcome-logo img {
+            margin: 25px 0;
+            width: 185px;
+            height: auto;
+            border: 4px solid var(--sds--color--blue--400);
+            padding: 10px 20px;
+            border-radius: 50%;
+        }
 
         .sds--toaster {
             max-width: initial;
-            margin: 25px 0;
+            margin: 25px 0 40px 0;
         }
 
-        p.info {
-            margin: 25px 0;
+        .step-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            button {
+                min-width: 160px;
+            }
+        }
+
+        div.info-block {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 15px 0 40px 0;
         }
 
         .expired {

diff --git a/welcome/src/pages/Proceed.js b/welcome/src/pages/Proceed.js
@@ -1,24 +1,26 @@
 import React, {useEffect, useState} from "react";
 import I18n from "../locale/I18n";
 import "./Proceed.scss";
+import "./Profile.scss";
 import "../styles/circle.scss";
 import DOMPurify from "dompurify";
-import {Loader, Toaster, ToasterType} from "@surfnet/sds";
+import {Loader, Modal, Toaster, ToasterType, Tooltip} from "@surfnet/sds";
 import {useAppStore} from "../stores/AppStore";
-import {isEmpty, splitListSemantically} from "../utils/Utils";
-import {organisationName} from "../utils/Manage";
+import {isEmpty, stopEvent} from "../utils/Utils";
 import {getParameterByName} from "../utils/QueryParameters";
 import {invitationByHash} from "../api";
 import {login} from "../utils/Login";
 import {RoleCard} from "../components/RoleCard";
 import {User} from "../components/User";
+import HighFive from "../icons/high-five.svg";
 
 
 export const Proceed = () => {
 
     const {user, invitation, config} = useAppStore(state => state);
     const [loading, setLoading] = useState(true);
     const [reloadedInvitation, setReloadedInvitation] = useState(null);
+    const [showModal, setShowModal] = useState(true);
 
     useEffect(() => {
         if (isEmpty(user)) {
@@ -36,37 +38,44 @@ export const Proceed = () => {
         }
     }, [invitation, user, config]);
 
-    const renderInvitationRole = (invitationRole, index, isNew) => {
+    const doLogin = e => {
+        stopEvent(e);
+        login(config, true);
+    }
+
+    const renderInvitationRole = (invitationRole, index, isNew, skipLaunch=false) => {
         const role = invitationRole.role;
         return (
-            <RoleCard role={role} index={index} isNew={isNew}/>
+            <RoleCard role={role} index={index} isNew={isNew} skipLaunch={skipLaunch}/>
         );
     }
 
     const renderProceedStep = () => {
-        const html = DOMPurify.sanitize(I18n.t("proceed.info", {
-            plural: reloadedInvitation.roles.length === 1 ? I18n.t("invitationAccept.role") : I18n.t("invitationAccept.roles"),
-            roles: splitListSemantically(reloadedInvitation.roles.map(invitationRole => `<strong>${invitationRole.role.name}</strong>${organisationName(invitationRole)}`), I18n.t("forms.and"))
-        }));
+        const toasterChildren = <div>
+            <span>{I18n.t("profile.toaster", {institution: user.schacHomeOrganization})}</span>
+            <a href="/logout" onClick={doLogin}>{I18n.t("profile.changeThis")}</a>
+            <span>)</span>
+        </div>
         return (
             <>
-                <h1>{I18n.t("invitationAccept.hi", {name: ` ${user.name}`})}</h1>
-                <>
-                    <Toaster toasterType={ToasterType.Info} message={html}/>
-                </>
-                <section className="step-container">
-                    <div className="step">
-                        <div className="circle full">
-                            <span>{I18n.t("proceed.progress")}</span>
-                        </div>
-                        <div className="step-actions">
-                            <h4>{I18n.t("proceed.goto")}</h4>
-                            <span>{I18n.t("proceed.nextStep")}</span>
-                        </div>
+                <div className="profile-container">
+                    <div className="welcome-logo">
+                        <img src={HighFive} alt={I18n.t("notFound.alt")}/>
+                    </div>
+                    <h2>{I18n.t("profile.welcome", {name: user.name})}</h2>
+                    <div>
+                    <span className={"info"}
+                          dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(I18n.t("profile.info"))}}/>
+                        <Tooltip tip={I18n.t("profile.tooltipApps")}/>
                     </div>
+
+                    <Toaster toasterType={ToasterType.Info}
+                             large={true}
+                             children={toasterChildren}/>
                     {reloadedInvitation.roles.map((invitationRole, index) => renderInvitationRole(invitationRole, index, true))}
                     <User user={user} invitationRoles={invitation.roles}/>
-                </section>
+                </div>
+
             </>
         )
     }
@@ -76,7 +85,15 @@ export const Proceed = () => {
     }
 
     return (
-        <div className="mod-proceed">
+        <div className="mod-proceed mod-profile">
+            {showModal &&
+                <Modal confirm={() => setShowModal(false)}
+                       confirmationButtonLabel={I18n.t("invitationAccept.continue")}
+                       full={true}
+                       title={I18n.t("invitationAccept.access")}>
+                    {reloadedInvitation.roles.map((invitationRole, index) => renderInvitationRole(invitationRole, index, false, true))}
+                    <p>{I18n.t(`invitationAccept.applicationInfo${reloadedInvitation.roles.length > 1 ? "Multiple" : ""}`)}</p>
+                </Modal>}
             <div className="proceed-container">
                 {renderProceedStep()}
             </div>