From ee2a6f4e1895b693b4686f4b560cbca978f006ca Mon Sep 17 00:00:00 2001 From: Okke Harsta Date: Fri, 29 Sep 2023 11:03:55 +0200 Subject: [PATCH] Aligned welcome with design --- client/src/locale/en.js | 10 ++--- client/src/locale/nl.js | 16 +++---- client/src/pages/Role.js | 14 +++---- welcome/src/components/RoleCard.jsx | 6 +-- welcome/src/locale/en.js | 4 ++ welcome/src/locale/nl.js | 4 ++ welcome/src/pages/Invitation.js | 40 +++++++++++------- welcome/src/pages/Invitation.scss | 33 +++++++++++++-- welcome/src/pages/Proceed.js | 65 ++++++++++++++++++----------- 9 files changed, 125 insertions(+), 67 deletions(-) diff --git a/client/src/locale/en.js b/client/src/locale/en.js index 4d3f85d3..a7afedad 100644 --- 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 index 2f3bee8a..4eecc5a1 100644 --- 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 index 2cc81354..6aaf01c5 100644 --- a/client/src/pages/Role.js +++ b/client/src/pages/Role.js @@ -66,6 +66,13 @@ export const Role = () => { guests={true} userRoles={res[1].filter(userRole => userRole.authority === "GUEST")}/> , + + + , { userRole.authority !== "GUEST")}/> - , - - ]; setTabs(newTabs.filter(tab => tab !== null)); diff --git a/welcome/src/components/RoleCard.jsx b/welcome/src/components/RoleCard.jsx index 6548668b..7bee23e9 100644 --- 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}) => {

{role.name}

-
+ {!skipLaunch &&
+
} ; return ( diff --git a/welcome/src/locale/en.js b/welcome/src/locale/en.js index 983fb2a5..f5ee7c6b 100644 --- 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 index f6b66bfc..045857db 100644 --- 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 index 875732c5..b6f17f81 100644 --- 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 ( <> +
+ {I18n.t("notFound.alt")}/ +
{!expired &&

{I18n.t("invitationAccept.hi", {name: authenticated ? ` ${user.name}` : ""})}

} {expired &&

} @@ -156,24 +160,28 @@ export const Invitation = ({authenticated}) => { {!expired && <> } - {!expired &&
-
-
- {I18n.t("invitationAccept.progress")} + {!expired && +
+
+
+ {I18n.t("invitationAccept.progress")} +
+
+

{I18n.t("invitationAccept.login")}

+ {I18n.t("invitationAccept.nextStep")} +
-
-

{I18n.t("invitationAccept.login")}

- {I18n.t("invitationAccept.nextStep")} +
+ {!authenticated && + } + {invitation.eduIDOnly && {I18n.t("invitationAccept.infoLoginEduIDOnly")}} + {!invitation.eduIDOnly && + {I18n.t(`invitationAccept.${authenticated ? "infoLoginAgain" : "infoLogin"}`)}}
-
- {!authenticated &&

} - {invitation.eduIDOnly &&

{I18n.t("invitationAccept.infoLoginEduIDOnly")}

} - {!invitation.eduIDOnly &&

{I18n.t(`invitationAccept.${authenticated ? "infoLoginAgain" : "infoLogin"}`)}

} -
} +
} ) } diff --git a/welcome/src/pages/Invitation.scss b/welcome/src/pages/Invitation.scss index 9b3bdf72..ce5ff34e 100644 --- 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 index 465d910c..8c3510df 100644 --- a/welcome/src/pages/Proceed.js +++ b/welcome/src/pages/Proceed.js @@ -1,17 +1,18 @@ 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 = () => { @@ -19,6 +20,7 @@ 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 ( - + ); } 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 => `${invitationRole.role.name}${organisationName(invitationRole)}`), I18n.t("forms.and")) - })); + const toasterChildren =
+ {I18n.t("profile.toaster", {institution: user.schacHomeOrganization})} + {I18n.t("profile.changeThis")} + ) +
return ( <> -

{I18n.t("invitationAccept.hi", {name: ` ${user.name}`})}

- <> - - -
-
-
- {I18n.t("proceed.progress")} -
-
-

{I18n.t("proceed.goto")}

- {I18n.t("proceed.nextStep")} -
+
+
+ {I18n.t("notFound.alt")}/ +
+

{I18n.t("profile.welcome", {name: user.name})}

+
+ +
+ + {reloadedInvitation.roles.map((invitationRole, index) => renderInvitationRole(invitationRole, index, true))} -
+ + ) } @@ -76,7 +85,15 @@ export const Proceed = () => { } return ( -
+
+ {showModal && + setShowModal(false)} + confirmationButtonLabel={I18n.t("invitationAccept.continue")} + full={true} + title={I18n.t("invitationAccept.access")}> + {reloadedInvitation.roles.map((invitationRole, index) => renderInvitationRole(invitationRole, index, false, true))} +

{I18n.t(`invitationAccept.applicationInfo${reloadedInvitation.roles.length > 1 ? "Multiple" : ""}`)}

+ }
{renderProceedStep()}