-
Notifications
You must be signed in to change notification settings - Fork 146
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WIP: start moving the access button to a react component
- Loading branch information
Showing
3 changed files
with
150 additions
and
86 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
133 changes: 133 additions & 0 deletions
133
...nio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/AccessRequestForm.js
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,133 @@ | ||
| // This file is part of InvenioRDM | ||
| // Copyright (C) 2023 TU Wien. | ||
| // | ||
| // Invenio RDM Records is free software; you can redistribute it and/or modify it | ||
| // under the terms of the MIT License; see LICENSE file for more details. | ||
|
|
||
| import React from "react"; | ||
| import { http } from "react-invenio-forms"; | ||
| import PropTypes from "prop-types"; | ||
| import { Form, Icon, Segment } from "semantic-ui-react"; | ||
|
|
||
| export class AccessRequestForm extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| email: null, | ||
| fullName: null, | ||
| message: "", | ||
| submitEnabled: true, | ||
| }; | ||
| } | ||
|
|
||
| submitRequest = () => { | ||
| const { userEmail, recid } = this.props; | ||
| const { message, email, fullName } = this.state; | ||
| const isGuest = userEmail === "guest"; | ||
| const requestData = isGuest ? { message, email, full_name: fullName } : { message }; | ||
| const endpoint = isGuest ? "request/guest" : "request"; | ||
|
|
||
| // don't reject the promise because of a status code other than 2XX | ||
| const extraConfig = { | ||
| validateStatus: null, | ||
| }; | ||
|
|
||
| http | ||
| .post(`/api/records/${recid}/access/${endpoint}`, requestData, extraConfig) | ||
| .then((result) => { | ||
| if (result.status === 200) { | ||
| this.setState({ submitEnabled: false }); | ||
|
|
||
| if (!isGuest) { | ||
| // TODO it would be nicer to have the backend report the proper | ||
| // `links.self_html` instead of constructing the URL here | ||
| const url = `/me/requests/${result.data.id}`; | ||
|
|
||
| // redirection here because opening in new tab might be blocked as popup | ||
| window.location.href = url; | ||
| } else { | ||
| // for the guest-based workflow, just display the message | ||
| alert(result.data.message); // TODO something nicer than an `alert`? | ||
| } | ||
| } else { | ||
| alert(`Could not create the access request: ${result.data.message}`); // TODO something nicer than an `alert`? | ||
| } | ||
| }) | ||
| .catch((error) => { | ||
| alert(error); // TODO something nicer than an `alert`? | ||
| }); | ||
| }; | ||
|
|
||
| render = () => { | ||
| const { userEmail, loginUrl, logoutUrl } = this.props; | ||
| const { submitEnabled } = this.state; | ||
| const isGuest = userEmail === "guest"; | ||
|
|
||
| const authNote = isGuest ? ( | ||
| <Segment> | ||
| <Icon name="user secret" /> | ||
| You are currently <strong>not logged in</strong>. Do you have an account?{" "} | ||
| <a href={loginUrl}>Log in</a> | ||
| </Segment> | ||
| ) : ( | ||
| <Segment> | ||
| <Icon name="user" /> | ||
| You are logged in as <strong>{userEmail}</strong>. Not you?{" "} | ||
| <a href={logoutUrl}>Log out</a> | ||
| </Segment> | ||
| ); | ||
|
|
||
| const guestFields = ( | ||
| <Form.Group widths="equal"> | ||
| <Form.Field> | ||
| <Form.Input | ||
| id="access-request-email-address" | ||
| label="Your email address" | ||
| icon="at" | ||
| iconPosition="left" | ||
| placeholder="Email address" | ||
| onChange={(_event, { value }) => this.setState({ email: value })} | ||
| required | ||
| /> | ||
| </Form.Field> | ||
| <Form.Field> | ||
| <Form.Input | ||
| id="access-request-full-name" | ||
| label="Your full name" | ||
| icon="address card" | ||
| iconPosition="left" | ||
| placeholder="Full name" | ||
| onChange={(_event, { value }) => this.setState({ fullName: value })} | ||
| required | ||
| /> | ||
| </Form.Field> | ||
| </Form.Group> | ||
| ); | ||
|
|
||
| return ( | ||
| <Form onSubmit={this.submitRequest}> | ||
| {authNote} | ||
| {isGuest && guestFields} | ||
| <Form.Field> | ||
| <Form.TextArea | ||
| id="access-request-message" | ||
| label="Request message" | ||
| placeholder="Please describe why you need access here" | ||
| onChange={(_event, { value }) => this.setState({ message: value })} | ||
| required | ||
| /> | ||
| </Form.Field> | ||
| <Form.Button type="submit" disabled={!submitEnabled}> | ||
| Request access | ||
| </Form.Button> | ||
| </Form> | ||
| ); | ||
| }; | ||
| } | ||
|
|
||
| AccessRequestForm.propTypes = { | ||
| loginUrl: PropTypes.string.isRequired, | ||
| logoutUrl: PropTypes.string.isRequired, | ||
| userEmail: PropTypes.string.isRequired, | ||
| recid: PropTypes.string.isRequired, | ||
| }; |
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