import React from 'react';
-import UserContext from '../contexts/user';
-import { Image } from 'antd'
-import {useContext} from 'react';
-
-/**
- * @function
- * @name Account
- * Function that shows the user informations
- * @param {object} props - Gets the user information if logged in
- * @returns {object} Returns the data of the user
-*/
-function Account(props) {
- const context = useContext(UserContext);
- const user = context.user;
- console.log("current user in UserContext is", user);
-
- const [profile, setProfile] = React.useState({});
-
- if (!user.loggedIn) {
- alert("Please log in")
- }
-
- if (!profile.username) {
- let headers = new Headers();
- headers.append('Authorization', 'Basic ' + btoa(user.username + ":" + user.password));
-
- fetch(user.links.self, {headers:headers})
- .then(response => {
- if (response.ok) {
- return response.json();
- } else {
- throw new Error(response.text());
- }
- })
- .then(data => {
- console.log(data);
- setProfile(data);
- })
- .catch(err => console.error(err));
- }
-
-/** Returns the data about the user */
- return (
- <>
- <h1>Account</h1>
- <Image width={200} alt="avatarURL" src={user.avatarURL} />
- <p>Username: {user.username} </p>
- <p>Email: {user.email}</p>
- {Object.keys(profile).map(key => <li key={key}>{key}: {profile[key]}</li>)}
- </>
- );
-}
-
-export default Account;
-import React from 'react';
-import { withRouter } from 'react-router';
-import { Image, Row, Col, Typography, Space, Button, Form } from 'antd';
-import { status, json } from '../utilities/requestHandlers';
-import Select from 'react-select';
-
-import UserContext from '../contexts/user';
-
-const { Title, Paragraph } = Typography;
-
-class Application extends React.Component {
-
- static contextType = UserContext;
-
- constructor(props) {
- super(props);
- this.deleteHandler = this.deleteHandler.bind(this)
- this.edit = this.edit.bind(this)
- this.state = {
- application: {}
- }
- }
-
-/**
- * @function
- * @name componentDidMount
- * Function to get the data of an application by providing its id
- * @returns {object} the object containing the application information
-*/
- componentDidMount() {
- const id = this.props.match.params.id; // available using withRouter()
- const username = this.context.user.username
- const password = this.context.user.password
- fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${id}`, {
- method: 'GET',
- headers: {
- "Authorization": "Basic " + btoa(username + ":" + password)
- },
- })
- .then(status)
- .then(json)
- .then(application => {
- this.setState({application:application})
- })
- .catch(err => {
- console.log(`Fetch error for application ${id}`)
- });
- };
-
-/**
- * @function
- * @name edit
- * Function to edit an application status
- * @param {string} values - The status value that is going to change
- * @returns {object} The values of the application that was edited
-*/
- edit(values){ //Edit application
- if (this.context.user.loggedIn){
- const id = this.props.match.params.id;
- const username=this.context.user.username
- const password=this.context.user.password
- console.log(values)
- const {status}=values
- values.userID=this.context.user.ID
- const { confirm, ...data } = values;
- fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${id}`, {
- method: "PUT",
- body: data,
- headers:{
- "Authorization": "Basic " + btoa(username + ":" + password)
- }
- })
- .then(status)
- .then(json)
- .then(data => {
- console.log("updated succesfully");
- console.log(data)
- this.setState({redirect:"/"})
- })
- .catch(errorResponse => {
- console.log('Update failed');
- alert(`Error: ${JSON.stringify(errorResponse)}`);
- });
- };
- };
-
-/**
- * @function
- * @name deleteHandler
- * Function that deletes the application using its id
- * @returns {object} the information that the application was deleted
-*/
- deleteHandler() {
- const username = this.context.user.username
- const password = this.context.user.password
- console.log(`deleting application: ${this.state.application.ID}`)
- fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${this.state.application.ID}`, {
- method: "DELETE",
- headers: {
- "Authorization": "Basic " + btoa(username + ":" + password)
- }
- })
- .then(status)
- .then(user => {
- console.log(`Deleted application ${this.state.application.ID}`);
- this.props.history.push('/')
- })
- .catch(error => {
- console.log('Delete failed' + error);
- });
- }
-
-/** Renders all the structure with the data */
-render() {
- if (!this.state.application) {
- return <h3>Loading application...</h3>
- }
- const application = this.state.application;
-
- //Error Here!! Change the user.role to a valid verification
- let adminSpace = <Space></Space>
- if(this.context.user.loggedIn){ //Add user.role so that only admins can change it!
- adminSpace = <Space>
- <Button onClick={this.deleteHandler}>Delete application</Button>
- <Button onClick={this.edit}>Update application</Button>
- </Space>
- }
-
- const options = [
- { value: 'pending', label: 'Pending' },
- { value: 'accepted', label: 'Accepted' },
- { value: 'rejected', label: 'Rejected' },
- ]
-
-/** Returns the data about the application */
- return(
- <div>
- <Row type="flex" justify="space-around" align="middle">
- <Col span={6} align="center">
- <Image width={200} alt="Application" src={application.imageURL} />
- </Col>
- <Col span={12}>
- <Title>{application.companyName}</Title>
- <Paragraph>Company Registration Number: {application.crn}</Paragraph>
- <Paragraph>Address: {application.address}</Paragraph>
- <Paragraph>Email: {application.email}</Paragraph>
- <Paragraph>Founded in: {application.dateFunded}</Paragraph>
- <Paragraph>Created In: {application.dateCreated}</Paragraph>
- <Paragraph>Status: {application.status}</Paragraph>
- <Form name="update" onFinish={this.edit} >
- <Form.Item name="status" label="Update Application Status">
- <Select options={options} />
- </Form.Item>
- </Form>
- </Col>
- <Col span={6} align="center">
- {adminSpace}
- </Col>
- </Row>
- </div>
-
- );
- }
-
-}
-
-export default withRouter(Application);
-import React from 'react';
-import { Card } from 'antd';
-import NavImage from './navimage';
-import {Link} from "react-router-dom";
-
-const { Meta } = Card;
-
-class ApplicationCard extends React.Component {
-
-/** Renders all the structure with the data using the application ID */
- render() {
- const imagesrc = "https://animal-hello-3000.codio-box.uk/api/v1/applications" + this.props.image
- console.log(this.props.image)
- const applicationID = this.props.ID;
- const companyName = this.props.companyName
- return (
- <Link to={`/application/${applicationID}`}>
- <Card
- style={{ width: 320, textAlign: "center", paddingTop: "50px"}}
- cover={<NavImage src={this.props.imageURL} to={`/applications/${applicationID}`} />}
- hoverable={true}>
-
- <Meta title={this.props.companyName} description={this.props.status} />
- </Card>
- </Link>
- );
- }
-}
-
-export default ApplicationCard;
-import React from 'react';
-import { withRouter } from 'react-router';
-import { Image, Row, Col, Typography } from 'antd';
-import { status, json } from '../utilities/requestHandlers';
-
-import UserContext from '../contexts/user';
-
-window.$name = ""
-
-
-const { Title, Paragraph } = Typography;
-
-class ApplicationForUsers extends React.Component {
-
- static contextType = UserContext;
-
- constructor(props) {
- super(props);
- this.state = {
- application: {}
- }
- }
-
-/**
- * @function
- * @name componentDidMount
- * Function to get the data of the application associatied to the user
- * @returns {object} The data about the application that is associated to the user
-*/
- componentDidMount() {
- const id = this.props.match.params.id; // available using withRouter()
- const username = this.context.user.username
- const password = this.context.user.password
- fetch(`https://animal-hello-3000.codio-box.uk/api/v1/applications/myapplications/${id}`, {
- method: 'GET',
- headers: {
- "Authorization": "Basic " + btoa(username + ":" + password)
- },
- })
- .then(status)
- .then(json)
- .then(application => {
- window.$id = id;
- const id_user = id;
- module.exports ={id_user};
- this.setState({application:application})
- })
- .catch(err => {
- console.log(`Fetch error for application ${id}`)
- });
- };
-
-/** Renders all the structure with the data */
-render() {
- if (!this.state.application) {
- return <h3>Loading application...</h3>
- }
- const application = this.state.application;
-
-/** Returns the data about the application */
- return(
- <div>
- <Row type="flex" justify="space-around" align="middle">
- <Col span={6} align="center">
- <Image width={200} alt="Application" src={application.imageURL} />
- </Col>
- <Col span={12}>
- <Title>{application.companyName}</Title>
- <Paragraph>Company Registration Number: {application.crn}</Paragraph>
- <Paragraph>Address: {application.address}</Paragraph>
- <Paragraph>Email: {application.email}</Paragraph>
- <Paragraph>Founded in: {application.dateFunded}</Paragraph>
- <Paragraph>Created In: {application.dateCreated}</Paragraph>
- <Paragraph>Status: {application.status}</Paragraph>
- </Col>
- <Col span={6} align="center">
- </Col>
- </Row>
- </div>
-
- );
- }
-
-}
-
-
-export default withRouter(ApplicationForUsers);
-import {Form, Input, Button, Row, Col, Select} from 'antd'
-import { Redirect } from 'react-router-dom'
-import {status,json} from '../utilities/requestHandlers'
-import UserContext from '../contexts/user'
-import React from 'react'
-const { TextArea } = Input
-const formItemLayout = {
- labelCol: { xs: { span: 24 }, sm: { span: 6 } },
- wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
- }
-const tailFormItemLayout = {
-wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
-}
-class EditApplication extends React.Component{
- constructor(props){
- super(props)
- this.state={
- imageURL:null
- }
- this._onFinish =this._onFinish.bind(this)
- this._onCancel =this._onCancel.bind(this)
- }
- static contextType = UserContext
-
-/**
- * @param {object} e event to hanldle (file upload in this case)
- * @return {null} nothing return but component state is changes
-*/
- handleFile =(e)=>{
- let files = e.target.files[0]
- // console.log(files)
- this.setState({upload:e.target.files[0]})
- }
- _onCancel(values) {
- console.log(`Recieved values ${values}`)
- this.setState({redirect:'/'})
- }
- _onFinish(values) {
- console.log(values)
- const {companyName,crn,address,email,dateFunded}=values
- values={companyName:companyName,crn:crn,address:address,email:email,dateFunded:dateFunded}
- console.log("Before IF -statement ")
- console.log(values)
- values.id=this.context.ID
- if (!companyName===true) {
- values.companyName=this.context.companyName
- }
- if (!crn===true) {
- values.crn=this.context.crn
- }
- if (!address===true) {
- values.address=this.context.address
- }
- if (!email===true) {
- values.email=this.context.email
- }
- if (!dateFunded===true) {
- values.dateFunded=this.context.dateFunded
- }
- console.log("after if statement")
- console.log(values)
- this.context.application(values)
-
- const formData= new FormData
- formData.append('id',values.id)
- formData.append('companyName',values.companyName)
- formData.append('crn',values.crn)
- formData.append('address',values.address)
- formData.append('email',values.email)
- formData.append('dateFunded',values.dateFunded)
- if (this.state.imageURL) {
- formData.append('imageURL',this.state.imageURL)
- }
-
-
- fetch('https://animal-hello-3000.codio-box.uk/api/v1/applications',{
- method:"PUT",
- body:formData,
- headers:{
- "Authorization": "Basic " + btoa(this.context.user.username + ":" + this.context.user.password)
- }
- })
- .then(status)
- .then(json)
- .then(()=>{
- this.setState({redirect:`/{this.context.id}`})
- alert("Successfully updated application")
- })
- .catch(console.error())
-
- }
-
-/** Form to get the input values to edit the application */
- render(){
- return(
- <>
- <Row type="flex" justify="space-around" align="middle">
- <Col>
- <h1>Update Application</h1>
- </Col>
- </Row>
- <Form {...formItemLayout} onFinish={this._onFinish}>
- <Form.Item name="companyName" label="Name of the Company">
- <Input defaultValue={this.context.companyName}></Input>
- </Form.Item>
- <Form.Item name="crn" label="Company Reference Number">
- <Input defaultValue={this.context.crn}></Input>
- </Form.Item>
- <Form.Item name="address" label="Address">
- <TextArea defaultValue={this.context.address}></TextArea>
- </Form.Item>
- <Form.Item name="email" label="Email">
- <TextArea defaultValue={this.context.email}></TextArea>
- </Form.Item>
- <Form.Item name="dateFunded" label="Foundation Date">
- <TextArea defaultValue={this.context.dateFunded}></TextArea>
- </Form.Item>
- /* Add select for the application status
-
- <Select>
- <Select.Option value="accepted">Yes</Select.Option>
- <Select.Option value="rejected">No</Select.Option>
- </Select>
- */
- <Form.Item name="imageURL" label="Application Image">
- <Input type="file" onChange={this.handleFile} accept="image/png, image/jpeg"/>
- </Form.Item>
- <Form.Item {...tailFormItemLayout}>
- <Row>
- <Col>
- <Form.Item >
- {/* <Button htmlType="submit" type="danger" onClick={_onFinish}>Update</Button> */}
- <Button htmlType="submit" type="danger">Update</Button>
- </Form.Item>
- </Col>
- <Col>
- <Form.Item >
- <Button type="primary" onClick={this._onCancel}>Cancel</Button>
- </Form.Item>
- </Col>
- </Row>
- </Form.Item>
-
- </Form>
- </>
- )
- }
-}
-export default EditApplication| Name | - - -Type | - - - - - -Description | -
|---|---|---|
response |
-
-
- - - -object - - - - | - - - - - -the Response() object to process | -
| Name | - - -Type | - - - - - -Description | -
|---|---|---|
response |
-
-
- - - -object - - - - | - - - - - -the Response() object to process | -
import React, { useState } from 'react';
-import { PageHeader, Input } from 'antd';
-import HomeGrid from './homegrid';
-import { Image } from 'antd'
-import Icon from './icon.png';
-
-const { Search } = Input;
-
-/**
- * @function
- * @name Home
- * Function to show the main page
- * @param {object} props
- * @returns {object} Page Structure
-*/
-function Home(props) {
-
- const [search, setSearch] = useState(undefined);
-
- /**
- * @function
- * @name searchHandler
- * Function to handle the search query
- * @param {object} value - Query for the search
- * @returns {object} Output from the search
-*/
- function searchHandler(value) {
- console.log("setting query" + value)
- setSearch(value)
- }
-
- return (
- <div className="site-layout-content">
- <div style={{ padding: '2% 20%' }}>
- <Image width={200} alt="TLD" src={Icon} />
- <PageHeader className="site-page-header"
- title="Trading License Department"
- subTitle="Here businesses can apply for trading licenses."/>
- <Search placeholder="Search Applications"
- allowClear
- enterButton="Search"
- size="large"
- onSearch={searchHandler}/>
- </div>
- <HomeGrid key={search} query={search}/>
- </div>
- );
-}
-
-export default Home;
-import React from 'react';
-import { Col, Row } from 'antd';
-import ApplicationCard from './applicationcard';
-import { status, json } from '../utilities/requestHandlers';
-import { withRouter } from 'react-router-dom';
-import UserContext from '../contexts/user';
-
-
-class HomeGrid extends React.Component {
-
- static contextType = UserContext;
-
- constructor(props) {
- super(props);
- this.state = {
- applications: []
- }
- }
-
- /**
- * @function
- * @name componentDidMount
- * Function to get all the applications in the DB
- * @returns {object} Clickable Application Cards with their data
-*/
- componentDidMount() {
- const username = this.context.user.username
- const password = this.context.user.password
- let url = "https://animal-hello-3000.codio-box.uk/api/v1/applications"
- if (this.props.query) {url = `https://animal-hello-3000.codio-box.uk/api/v1/applications?query=${this.props.query}`}
- fetch(url, {
- method: "GET",
- headers: {
- "Authorization": "Basic " + btoa(username + ":" + password)
- },
- })
- .then(status)
- .then(json)
- .then(data => {
- this.setState({ applications: data })
- })
- .catch(err => {
- console.log("Not found")
- console.log(err)
- console.log(err.status)
- this.context.errorCode = err.status
- this.setState({ found: false})
-
- });
- }
-
-/** Renders the page using Application Card */
- render() {
- console.log(this.context.errorCode)
- if (!this.state.applications.length) {
- return <h3>Loading applications...</h3>
- }
- const applicationList = this.state.applications.map(application => {
- return (
- <div style={{padding:"10px"}} key={application.ID}>
- <Col span={6}>
- <ApplicationCard {...application} />
- </Col>
- </div>
- )
- });
- return (
- <Row type="flex" justify="space-around">
- {applicationList}
- </Row>
- );
- }
-}
-
-export default withRouter(HomeGrid);
-import React from 'react';
-import { Form, Input, Button } from 'antd';
-import { status, json } from '../utilities/requestHandlers';
-import UserContext from '../contexts/user';
-import { Redirect, Link } from 'react-router-dom';
-
-// add some layout to keep the form organised on different screen sizes
-const formItemLayout = {
- labelCol: { xs: { span: 24 }, sm: { span: 6 } },
- wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
-};
-const tailFormItemLayout = {
- wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
-};
-
-// define validation rules for the form fields
-const passwordRules = [
- { required: true, message: 'Please input your password!' }
-];
-
-const usernameRules = [
- { required: true, message: 'Please input your username!', whitespace: true }
-]
-
-/**
- * Login form component for app signup.
-*/
-class LoginForm extends React.Component {
-
- constructor(props) {
- super(props);
- this.login = this.login.bind(this);
- }
-
- state = {redirect: null}
-
- static contextType = UserContext;
-
-/**
- * @function
- * @name login
- * Function to login the user
- * @param {object} values - Values of the username and password
- * @returns {object} Redirects to the main page with the user logged in
-*/
- login(values) {
- const {username, password} = values;
- console.log(`logging in user: ${username}`)
- fetch('https://animal-hello-3000.codio-box.uk/api/v1/users/login', {
- method: "POST",
- headers: {
- "Authorization": "Basic " + btoa(username + ":" + password)
- }
- })
- .then(status)
- .then(json)
- .then(user => {
- console.log('Logged in successfully');
- console.log(user);
- user.password = password; // store in context for future API calls
- this.context.login(user);
- alert('Hello ' + username + '!')
- if (user.role === "admin"){
- this.setState({redirect:'/'});
- }
- else{
- this.setState({redirect:`/myapplication/${this.context.user.id}`});
- }
- })
- .catch(error => {
- alert('Wrong username or password!!')
- console.log('Login failed');
- });
- }
-
-/** Renders all the structure using the data */
- render() {
- if (this.state.redirect) {
- return <Redirect to={this.state.redirect} />
- }
- return (
- <Form {...formItemLayout} name="login" onFinish={this.login} scrollToFirstError >
- <Form.Item name="username" label="Username" rules={usernameRules} >
- <Input />
- </Form.Item>
- <Form.Item name="password" label="Password" rules={passwordRules} hasFeedback >
- <Input.Password />
- </Form.Item>
- <Form.Item {...tailFormItemLayout}>
- <Button type="primary" htmlType="submit">Login</Button>
- </Form.Item>
- <Form.Item {...tailFormItemLayout}>
- <Button> <Link to ='/register'>Create an accout here!</Link> </Button>
- </Form.Item>
- </Form>
-
- );
- };
-};
-
-export default LoginForm;
-import react, { useContext } from 'react'
-import {Form, Input, Button} from 'antd'
-import { Redirect } from 'react-router-dom'
-import {status,json} from '../utilities/requestHandlers'
-import UserContext from '../contexts/user'
-const { TextArea } = Input
-// Form formating :
-const formItemLayout = {
- labelCol: { xs: { span: 24 }, sm: { span: 6 } },
- wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
- }
-const tailFormItemLayout = {
-wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
-}
-
-function _onFinish(values) {
- const {msg}=values
- console.log(`Recieved values ${values}`)
-}
-/**
- * Contact form regarding lisiting
-*/
-function Messages(props) {
- const context = useContext(UserContext)
- console.log(context)
- const _form =(
- <Form{...formItemLayout}>
-
- <Form.Item name="message" label="Message">
- <TextArea showCount={true} maxLength={500} placeholder={`Enter you message...`}/>
- </Form.Item>
- <Form.Item {...tailFormItemLayout}>
- <Button htmlType="submit" type="primary">Contact</Button>
- {/* {buttons} */}
- </Form.Item>
- </Form>
- )
- return(
- <Form {...formItemLayout} onFinish={_onFinish}>
- {_form}
- </Form>
- )
-}
-
-export default Messages;import React from 'react';
-import { Menu } from 'antd';
-import { Link } from "react-router-dom";
-import UserContext from '../contexts/user';
-import { withRouter } from 'react-router';
-
-import ApplicationForUsers from './applicationsForUsers' //Not being used
-
-/** Class that creates the menu and links to the rest of the pages */
-class Nav extends React.Component {
-
- static contextType = UserContext;
-
- //Change the new application section for admins only!!
- render() {
- const { id_user } = require('./applicationsForUsers.js')
- console.log(this.context.user.id)
- const applicationID = this.props.ID;
- console.log(applicationID)
- return (
- <>
- <div className="logo" />
- <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
- <Menu.Item key="1" disabled={!this.context.user.loggedIn}><Link to="/">Home</Link></Menu.Item>
- <Menu.Item key="8" disabled={!this.context.user.loggedIn}><Link to={`/myapplication/${applicationID}`}>App</Link></Menu.Item>
- <Menu.Item key="2" disabled={this.context.user.loggedIn}><Link to="/login">Login</Link></Menu.Item>
- <Menu.Item key="3" disabled={this.context.user.loggedIn}><Link to="/register">Register</Link></Menu.Item>
- <Menu.Item key="4" disabled={!this.context.user.loggedIn}><Link to="/messages">Messages</Link></Menu.Item>
- <Menu.Item key="5" disabled={!this.context.user.loggedIn}><Link to="/account">Account</Link></Menu.Item>
- <Menu.Item key="6" disabled={!this.context.user.loggedIn}><Link to="/newapplication">Add Application</Link></Menu.Item>
- <Menu.Item key="7" disabled={!this.context.user.loggedIn} onClick={this.context.logout}> <Link to="/">Logout</Link></Menu.Item>
- </Menu>
- </>
- )
- };
-};
-
-export default Nav;import React from 'react'
-import UserContext from '../contexts/user'
-import { Form, Input, Button, Row,Col, DatePicker } from 'antd'
-import { status, json } from '../utilities/requestHandlers'
-
-const formItemLayout = {
- labelCol: { xs: { span: 24 }, sm: { span: 6 } },
- wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
- }
-const tailFormItemLayout = {
-wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
-}
-const { TextArea } = Input
-// Field Rules for input validation in accordance with server-side schema:
-const titleRule=[
- {required:true,message:'Please type the name of the compnay.',whitespace:false, min:5,max:150}
-]
-const crnRule=[
- {required:true,message:'Please type the company reference number.',whitespace:false, min:8,max:8}
-]
-const addressRule=[
- {required:true,message:'Please enter the address where the company is located.',whitespace:false, min:5,max:32}
-]
-const emailRule=[
- {required:true,message:'Please enter the company email.',whitespace:false, min:5,max:32}
-]
-const dateFoundedRule=[
- {required:true,message:'Please enter the foundation date of the company.',whitespace:false}
-]
-/**
- * Form to add new application:
- */
-class NewApplication extends React.Component{
-
- constructor(props){
- super(props)
- this.state={
- companyName:"",
- crn:"",
- address:"",
- email:"",
- dateFunded:"",
- imageURL:""
- }
- this.handleSubmit =this.handleSubmit.bind(this)
- this.handleFile =this.handleFile.bind(this)
- }
- static contextType = UserContext
-
-/**
- * @function
- * @name handleSubmit
- * Function that handles the input of the user and passes that data to the DB
- * @param {object} values - Values obtained from form fields
- * @returns {object} Redirects user to the main page and creates the application
-*/
- handleSubmit =(values)=>{
- // creating form-data object
- const formData =new FormData()
- const {companyName,crn,address,email,dateFunded}=values
- console.log(values)
- const username=this.context.user.username
- const password=this.context.user.password
- console.log(values)
- this.setState({companyName:companyName})
- this.setState({crn:crn})
- this.setState({address:address})
- this.setState({email:email})
- this.setState({dateFunded:dateFunded})
- formData.append('companyName',this.state.companyName)
- formData.append('crn',this.state.crn)
- formData.append('address',this.state.address)
- formData.append('email',this.state.email)
- formData.append('dateFunded',this.state.dateFunded)
- formData.append('imageURL',this.state.imageURL)
- fetch('https://animal-hello-3000.codio-box.uk/api/v1/applications',{
- method:"POST",
- body:formData,
- headers:{
- "Authorization": "Basic " + btoa(username + ":" + password),
- }
- })
- .then(status)
- .then(json)
- .then(application=>{
- alert("Successfully added new application")
- this.setState({application:application})
- this.setState({redirect:"/"})// change this to all users applications pages
- })
- .catch(err => {
- alert("Error trying to add new application")
- console.log(err)
- })
- }
-
-/**
- * @function
- * @name handleFile
- * @param {object} e event to hanldle (file upload in this case)
- * @return {null} nothing return but component state is changes
-*/
- handleFile =(e)=>{
- let files = e.target.files[0]
- console.log(files)
- this.setState({upload:e.target.files[0]})
- }
-
-/** Form to get the input values to create the application */
- render(){
- return(
- <>
- <Row type="flex" justify="space-around" align="middle">
- <Col>
- <h1>Create New Application</h1>
- </Col>
- </Row>
- <Form {... formItemLayout} onFinish={this.handleSubmit}>
- <Form.Item name="companyName" label="Name of the Company" rules={titleRule}>
- <Input />
- </Form.Item>
- <Form.Item name="crn" label="Company Reference Number" rules={crnRule}>
- <TextArea showCount={true} maxLength={8}/>
- </Form.Item>
- <Form.Item name="address" label="Address" rules={addressRule}>
- <TextArea showCount={true} maxLength={500}/>
- </Form.Item>
- <Form.Item name="email" label="Email" rules={emailRule}>
- <TextArea showCount={true} maxLength={500}/>
- </Form.Item>
- <Form.Item name="dateFunded" label="Foundation Date">
- <DatePicker onChange={this.state.dateFunded} name="dateFunded" label="Foundation Date" rules={dateFoundedRule} />
- </Form.Item>
- <Form.Item name="imageURL" label="Application Image">
- <Input type="file" onChange={this.handleFile} accept="image/png, image/jpeg"/>
- </Form.Item>
- <Form.Item {...tailFormItemLayout}>
- <Button type="primary" htmlType="submit">Add new Application</Button>
- </Form.Item>
- </Form>
- </>
- )
- }
-}
-
-export default NewApplicationimport React from 'react';
-import { Form, Input, Button } from 'antd';
-import { status, json } from '../utilities/requestHandlers';
-
-// add some layout to keep the form organised on different screen sizes
-const formItemLayout = {
- labelCol: { xs: { span: 24 }, sm: { span: 6 } },
- wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
-};
-const tailFormItemLayout = {
- wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
-};
-
-// define validation rules for the form fields
-const firstNameRules = [
- {required: false, message: 'Please enter your First Name!' }
-];
-
-const lastNameRules = [
- {required: false, message: 'Please enter your Last Name!' }
-];
-
-const emailRules = [
- {type: 'email', message: 'The input is not valid E-mail!'},
- {required: true, message: 'Please input your E-mail!' }
-];
-
-const passwordRules = [
- { required: true, message: 'Please input your password!' },
- ({ getFieldValue }) => ({
- validator(rule, value) {
- if (!value.length || getFieldValue('password').length >= 6 ) {
- return Promise.resolve();
- }
- return Promise.reject('Password must contain 6 or more characters');
- }
- })
-];
-
-const confirmRules = [
- { required: true, message: 'Please confirm your password!' },
- // rules can include function handlers in which you can apply additional logic
- ({ getFieldValue }) => ({
- validator(rule, value) {
- if (!value || getFieldValue('password') === value) {
- return Promise.resolve();
- }
- return Promise.reject('The two passwords that you entered do not match!');
- }
- })
-];
-
-const usernameRules = [
- { required: true, message: 'Please input your username!', whitespace: true },
- ({ getFieldValue }) => ({
- validator(rule, value) {
- if (!value.length || getFieldValue('username').length >= 3 ) {
- return Promise.resolve();
- }
- return Promise.reject('Username must contain 3 or more characters');
- }
- })
-];
-
-/**
- * Registration form component for app signup.
- */
-class RegistrationForm extends React.Component {
-
- constructor(props) {
- super(props);
- this.onFinish = this.onFinish.bind(this);
- }
-
- /**
- * @function
- * @name onFinish
- * Function that posts the user inputs to the DB
- * @param {object} values - Values obtained from form fields
- * @return {object} Redirects to the login page and creates the user
-*/
-
- onFinish = (values) => {
- console.log('Received values of form: ', values);
- const { confirm, ...data } = values; // ignore the 'confirm' value in data sent
- fetch('https://animal-hello-3000.codio-box.uk/api/v1/users', {
- method: "POST",
- body: JSON.stringify(data),
- headers: {
- "Content-Type": "application/json"
- }
- })
- .then(status)
- .then(json)
- .then(data => {
- console.log(data);
- alert("User added!")
- this.setState({redirect:"/login"})
- })
- .catch(err => {
- alert("Error adding user!");
- console.log('Register failed');
- });
- };
-
-/** Form to get the input values to create the application */
- render() {
- return (
- <Form {...formItemLayout} name="register" onFinish={this.onFinish} scrollToFirstError >
-
- <Form.Item name="firstName" label="First Name" rules={firstNameRules} >
- <Input />
- </Form.Item>
-
- <Form.Item name="lastName" label="Last Name" rules={lastNameRules} >
- <Input />
- </Form.Item>
-
- <Form.Item name="email" label="E-mail" rules={emailRules} >
- <Input />
- </Form.Item>
-
- <Form.Item name="username" label="Username" rules={usernameRules} >
- <Input />
- </Form.Item>
-
- <Form.Item name="password" label="Password" rules={passwordRules} hasFeedback >
- <Input.Password />
- </Form.Item>
-
- <Form.Item name="confirm" label="Confirm Password" dependencies={['password']}
- hasFeedback rules={confirmRules}>
- <Input.Password />
- </Form.Item>
-
- <Form.Item {...tailFormItemLayout}>
- <Button type="primary" htmlType="submit">
- Register
- </Button>
- </Form.Item>
- </Form>
- );
- };
-};
-
-export default RegistrationForm;
-/**
- * @function
- * @name status
- * Check the HTTP status code and resolve or reject accordingly
- * @param {object} response - the Response() object to process
- */
-export function status(response) {
- if (response.status >= 200 && response.status < 407) {
- return response;
- } else {
- return new Promise((resolve, reject) => {
- return reject(response);
- });
- }
-}
-
-/**
- * @function
- * @name json
- * Extract the response body for further processing
- * @param {object} response - the Response() object to process
- */
-export function json(response) {
- return response.json();
-}
-import React from 'react';
-import { Upload, message, Button } from 'antd';
-import UploadOutlined from '@ant-design/icons/UploadOutlined';
-import UserContext from '../contexts/user';
-import {useContext} from 'react';
-
-
-/**
- * @function
- * @name Uploader
- * @param {object} props - Upload of the image by the user
- * @return {null} nothing return but component state is changes
-*/
-function Uploader(props) {
-
- // Note: we could use the passed in props below if we wanted (e.g. to change the URI 'action' endpoint)
- // but for the example we just use a fixed set of props for the ant.design component.
- const context = useContext(UserContext);
- const user = context.user;
-
- const uploadProps = {
- name: 'upload',
- action: 'https://animal-hello-3000.codio-box.uk/api/v1/images',
- headers: {
- authorization: 'Basic ' + btoa(user.username + ":" + user.password) //Not hardcoded credentials
-
- },
- onChange(info) {
- if (info.file.status !== 'uploading') {
- console.log(info.file, info.fileList);
- }
- if (info.file.status === 'done') {
- message.success(`${info.file.name} file uploaded successfully`);
- console.log(`The SPA can now access the image via API path ${info.file.response.links.path}`);
- } else if (info.file.status === 'error') {
- message.error(`${info.file.name} file upload failed.`);
- }
- },
- };
-
-/** Form to get the input values to create the application */
- return (
- <>
- <h1>Upload</h1>
-
- <p>This is a bare-bones upload interface. It is simply to illustrate connecting to a multipart-form aware API route.</p>
- <p>You will need to wire any realistic upload component into one of your app's forms (such as for applications or users).</p>
- <p>In addition you will need to ensure that the upload is correctly authenticated if appropriate, using the 'headers' prop.</p>
-
- <Upload {...uploadProps}>
- <Button icon={<UploadOutlined />}>Click to Upload</Button>
- </Upload>
-
- </>
- );
-}
-
-export default Uploader;
-