-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add verified organisation badge and claim organisation button
- Loading branch information
1 parent
6e20407
commit f1ad4d9
Showing
7 changed files
with
340 additions
and
217 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center) | ||
| // SPDX-FileCopyrightText: 2023 Netherlands eScience Center | ||
| // | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| type OrganisationSignUpButtonProps = { | ||
| onClick: (open: boolean) => void | ||
| minWidth: string | ||
| label: string | ||
| } | ||
|
|
||
| export default function OrganisationSignUpButton({onClick,minWidth,label}:OrganisationSignUpButtonProps) { | ||
| return ( | ||
| <button | ||
| aria-describedby="Sign up button" | ||
| onClick={()=>onClick(true)} | ||
| > | ||
| <div className="relative group"> | ||
| <div | ||
| className="absolute -inset-1 bg-gradient-to-r from-glow-start to-glow-end rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-300"/> | ||
| <div | ||
| className="flex gap-3 text-base-900 relative px-8 py-3 bg-base-100 ring-1 ring-base-800 rounded leading-none items-center justify-center space-x-2" | ||
| style={{ | ||
| minWidth | ||
| }} | ||
| > | ||
| <span className="space-y-2 text-xl font-medium whitespace-nowrap"> | ||
| {label} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </button> | ||
| ) | ||
| } |
164 changes: 164 additions & 0 deletions
164
frontend/components/home/rsd/OrganisationSignUpDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center) | ||
| // SPDX-FileCopyrightText: 2023 Netherlands eScience Center | ||
| // | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import Dialog from '@mui/material/Dialog' | ||
| import useTheme from '@mui/material/styles/useTheme' | ||
| import useMediaQuery from '@mui/material/useMediaQuery' | ||
|
|
||
| import {useForm} from 'react-hook-form' | ||
|
|
||
| import {config,organisationSignUp} from './config' | ||
| import useRsdSettings from '~/config/useRsdSettings' | ||
| import MailOutlineOutlined from '@mui/icons-material/MailOutlineOutlined' | ||
|
|
||
| type OrganisationSignUpDialogProps = { | ||
| title: string | ||
| reason?: string | ||
| open: boolean | ||
| onClose: () => void | ||
| initOrg?: string | ||
| } | ||
|
|
||
| type SignUpOrganisation = { | ||
| name: string, | ||
| organisation: string, | ||
| role: string, | ||
| description: string | ||
| } | ||
|
|
||
| const inputClasses='mb-4 placeholder:text-base-500 outline-0 p-2 w-full text-sm bg-transparent text-base-100 border border-base-600 rounded-sm' | ||
|
|
||
| export default function OrganisationSignUpDialog({ | ||
| title, open, onClose, initOrg, | ||
| reason='I would like to add my organisation to RSD!' | ||
| }: OrganisationSignUpDialogProps) { | ||
| const theme = useTheme() | ||
| const fullScreen = useMediaQuery(theme.breakpoints.down('sm')) | ||
| const {host} = useRsdSettings() | ||
|
|
||
| const {register, watch, reset} = useForm<SignUpOrganisation>({ | ||
| mode: 'onChange', | ||
| defaultValues: { | ||
| name:'', | ||
| organisation: initOrg ?? '', | ||
| role:'', | ||
| description: '' | ||
| } | ||
| }) | ||
|
|
||
| const [name,organisation,role,description] = watch(['name','organisation','role','description']) | ||
|
|
||
| function mailBody(): string | undefined { | ||
| return encodeURIComponent(`Hi RSD team, | ||
| ${reason} | ||
| ------------------------- | ||
| Name: ${name} | ||
| Organisation: ${organisation} | ||
| Professional role: ${role} | ||
| ------------------------- | ||
| ${description} | ||
| `) | ||
| } | ||
|
|
||
|
|
||
| function closeAndReset() { | ||
| onClose() | ||
| // reset form after all processes settled | ||
| // we need to wait for mailBody function | ||
| setTimeout(() => { | ||
| reset() | ||
| },0) | ||
| } | ||
|
|
||
|
|
||
| return ( | ||
| <Dialog | ||
| fullScreen={fullScreen} | ||
| open={open} | ||
| onClose={(e, reason) => { | ||
| if (reason === 'backdropClick' || reason === 'escapeKeyDown') { | ||
| // console.log('do nothing') | ||
| } else { | ||
| closeAndReset() | ||
| } | ||
| }} | ||
| disableEscapeKeyDown | ||
| aria-labelledby="responsive-dialog-title" | ||
| > | ||
| <div className="h-full w-full bg-[#232323] p-6"> | ||
| <div className="mx-auto"> | ||
| <div className="text-base-100 text-xl mb-4"> | ||
| {title} | ||
| </div> | ||
| <div className="text-sm text-[#B7B7B7] pb-4"> | ||
| You can find more information about registering your organisation in our <u><a href="https://research-software-directory.github.io/documentation/register-organization.html" target="_blank" rel="noreferrer">documentation</a></u>. | ||
| </div> | ||
| {/* INPUTS */} | ||
| <input type="text" | ||
| autoFocus={true} | ||
| autoComplete="off" | ||
| className={inputClasses} | ||
| placeholder={organisationSignUp.name.label} | ||
| {...register('name')} | ||
| /> | ||
| <input type="text" | ||
| autoComplete="off" | ||
| className={inputClasses} | ||
| placeholder={organisationSignUp.organisation.label} | ||
| {...register('organisation')} | ||
| /> | ||
| <input type="text" | ||
| autoComplete="off" | ||
| className={inputClasses} | ||
| placeholder={organisationSignUp.role.label} | ||
| {...register('role')} | ||
| /> | ||
| <textarea | ||
| rows={5} | ||
| className={inputClasses} | ||
| placeholder={organisationSignUp.description.label} | ||
| {...register('description')} | ||
| > | ||
| </textarea> | ||
| {/* NOTIFICATIONS */} | ||
| <div className="text-sm text-[#B7B7B7] pb-4"> | ||
| {organisationSignUp.notification[0]} <br/> | ||
| {organisationSignUp.notification[1]} | ||
| </div> | ||
| {/* NAVIGATION */} | ||
| <div className="flex justify-end items-center gap-4 my-2"> | ||
| <button | ||
| className="text-sm text-base-100 border border-base-500 text-opacity-60 rounded px-4 py-1 hover:opacity-90 active:opacity-95" | ||
| onClick={(e) => { | ||
| // stop click propagation | ||
| e.preventDefault() | ||
| // call close and reset fn | ||
| closeAndReset() | ||
| }}> | ||
| Cancel | ||
| </button> | ||
| <a | ||
| role="button" | ||
| type="submit" | ||
| onClick={(e) => { | ||
| // e.preventDefault() | ||
| closeAndReset() | ||
| }} | ||
| className="text-sm text-base-100 hover:text-base-100 bg-primary px-4 py-1 rounded hover:opacity-90 active:opacity-95" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| href={`mailto:${host.email}?subject=${encodeURIComponent(config.button.register.label)}&body=${mailBody()}`} | ||
| > | ||
| <MailOutlineOutlined/> Create email * | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Dialog> | ||
| ) | ||
| } |
Oops, something went wrong.