mocksaml/pages/apps/index.tsx
2022-02-17 14:51:19 +05:30

61 lines
1.8 KiB
TypeScript

import axios from 'axios';
import type { NextPage } from 'next';
import { ChangeEvent, FormEvent, useState } from 'react';
import Router from 'next/router';
const Apps: NextPage = () => {
const [formData, setFormData] = useState({
name: null,
acs_url: null,
entity_id: null,
});
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value.trim()
});
}
const createApp = async (e: FormEvent) => {
e.preventDefault();
const { data: app } = await axios.post('/api/apps', {
...formData
});
await Router.push(`/apps/${app.id}`);
};
return (
<div>
<form onSubmit={createApp} className="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">
<div className="mb-4">
<label className="block mb-2 text-sm">
App Name
<input type="text" name="name" onChange={handleInputChange} required className="w-full px-3 py-2 border rounded" placeholder="App Name" />
</label>
</div>
<div className="mb-4">
<label className="block mb-2 text-sm">
ACS URL
<input type="text" name="acs_url" onChange={handleInputChange} required className="w-full px-3 py-2 border rounded" placeholder="ACS URL" />
</label>
</div>
<div className="mb-4">
<label className="block mb-2 text-sm">
Entity ID
<input type="text" name="entity_id" onChange={handleInputChange} required className="w-full px-3 py-2 border rounded" placeholder="Entity ID" />
</label>
</div>
<button type="submit" className="px-4 py-2 text-white bg-blue-500 rounded">Create App</button>
</form>
</div>
);
};
export default Apps;