149 lines
5.1 KiB
TypeScript
149 lines
5.1 KiB
TypeScript
import InputError from '@/components/input-error';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Link, router, useForm } from '@inertiajs/react';
|
|
import React, { ChangeEvent, ReactNode } from 'react';
|
|
import timezones from './data/timezones';
|
|
import Layout from './Partials/Layout';
|
|
import StepNavigator from './Partials/StepNavigator';
|
|
|
|
interface Props {
|
|
// APP_NAME: string;
|
|
APP_ENV: string;
|
|
APP_DEBUG: string;
|
|
APP_KEY: string;
|
|
APP_TIMEZONE: string;
|
|
APP_URL: string;
|
|
}
|
|
|
|
const Step2 = (props: Props) => {
|
|
const { APP_ENV, APP_DEBUG, APP_KEY, APP_TIMEZONE } = props;
|
|
|
|
const { data, errors, post, setData } = useForm({
|
|
// app_name: APP_NAME.replaceAll('"', '') || '',
|
|
app_env: APP_ENV || 'local',
|
|
app_debug: JSON.stringify(APP_DEBUG) || 'true',
|
|
app_key: APP_KEY || '',
|
|
app_timezone: APP_TIMEZONE.replaceAll('"', '') || '',
|
|
app_url: window.location.origin,
|
|
});
|
|
|
|
const onHandleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const target = event.target as HTMLInputElement;
|
|
setData({
|
|
...data,
|
|
[target.name]: target.value,
|
|
});
|
|
};
|
|
|
|
const handleGenerateKey = () => {
|
|
router.get(route('generate-app-key'));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
post(route('install.store-step2'));
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<StepNavigator step1="fill" step2="active" />
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="mb-6">
|
|
<Label>App Environment</Label>
|
|
|
|
<Select name="app_env" value={data.app_env} onValueChange={(value) => setData('app_env', value)}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select the app environment" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="local">Local</SelectItem>
|
|
<SelectItem value="testing">Testing</SelectItem>
|
|
<SelectItem value="production">Production</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<Label>App Debug Mode</Label>
|
|
|
|
<Select name="app_debug" value={data.app_debug} onValueChange={(value) => setData('app_debug', value)}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select the app environment" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="true">True</SelectItem>
|
|
<SelectItem value="false">False</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<Label>App URL/Domain</Label>
|
|
|
|
<Input type="text" name="app_url" value={data.app_url} onChange={onHandleChange} placeholder="Enter your url/domain" />
|
|
|
|
<InputError message={errors.app_url} />
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<Label>App Timezone</Label>
|
|
|
|
<Select name="app_timezone" value={data.app_timezone} onValueChange={(value) => setData('app_timezone', value)}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select the app timezone" />
|
|
</SelectTrigger>
|
|
|
|
<SelectContent>
|
|
{timezones.map((timezone) => (
|
|
<SelectItem key={timezone} value={timezone}>
|
|
{timezone}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="mb-12">
|
|
<div>
|
|
<Label>App Key</Label>
|
|
|
|
<Input type="text" name="app_key" value={data.app_key} onChange={onHandleChange} placeholder="Click button to generate key" />
|
|
|
|
<InputError message={errors.app_key} />
|
|
</div>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="mt-4 border border-orange-500 !bg-transparent !text-orange-500"
|
|
onClick={handleGenerateKey}
|
|
>
|
|
Generate Key
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-4">
|
|
<Link href={route('install.index')}>
|
|
<Button type="button" variant="outline" className="border border-orange-500 !bg-transparent !text-orange-500 uppercase">
|
|
Previous Step
|
|
</Button>
|
|
</Link>
|
|
|
|
<Button type="submit" className="bg-orange-500 px-6 py-3 text-white uppercase hover:bg-orange-600/90">
|
|
Next Step
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Step2.layout = (page: ReactNode) => <Layout children={page} />;
|
|
|
|
export default Step2;
|