123 lines
4.2 KiB
JavaScript
123 lines
4.2 KiB
JavaScript
"use client";
|
|
import React, { useRef, useState } from "react";
|
|
import globalStyle from "../../globalStyle.module.css";
|
|
import TopHeader from "@/app/components/topHeader/TopHeader";
|
|
import styles from "./styles.module.css";
|
|
import Image from "next/image";
|
|
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
|
|
import TextField from "@/app/components/fields/textfield";
|
|
import Alert from "@/app/components/alerts/Alert";
|
|
import Prompts from "@/app/components/prompts/Prompts";
|
|
const AddCredentials = () => {
|
|
const [triggerAlert, setTriggerAlert] = useState(false);
|
|
const inputRef = useRef();
|
|
const [error, setError] = useState(false);
|
|
const HandleSubmit = (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!inputRef.current.value.trim()) {
|
|
setError(true);
|
|
console.log("alsdjfakjhsks"); // triggers red border
|
|
return;
|
|
}
|
|
|
|
setError(false);
|
|
setTriggerAlert(true);
|
|
};
|
|
|
|
return (
|
|
<div className={globalStyle.section}>
|
|
{triggerAlert && (
|
|
<Alert
|
|
setTriggerAlert={setTriggerAlert}
|
|
onClick={() => setEditState(true)}
|
|
title="Create Organization"
|
|
/>
|
|
)}
|
|
<div className={globalStyle.mainContainer}>
|
|
<div className={globalStyle.container}>
|
|
<TopHeader
|
|
buttonText="Save"
|
|
cancelButtonText="Cancel"
|
|
topbarTitle="Create New Organization"
|
|
requiredButtons={["title", "save"]}
|
|
/>
|
|
<div className={styles.contentContainer}>
|
|
<TopToolTip />
|
|
<form
|
|
className={styles.createOrganizationFormContainer}
|
|
id="form"
|
|
onSubmit={HandleSubmit}
|
|
>
|
|
<div className={styles.organizationBadgeContainer}>
|
|
<div className={styles.organizationBadge}>
|
|
<div className={styles.organizationBadgeDetails}>
|
|
<div className={styles.relativeContainer}>
|
|
<div className={styles.imageContainer}>
|
|
<Image
|
|
src="/images/BadgeImage.png"
|
|
width={48}
|
|
height={48}
|
|
alt="badge image"
|
|
/>
|
|
</div>
|
|
<input type="file" id="file" hidden accept="image/*" />
|
|
<label className={styles.addIconContainer} htmlFor="file">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={20}
|
|
height={20}
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M10 4.41016V15.5907"
|
|
stroke="white"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M4.41016 10H15.5907"
|
|
stroke="white"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className={styles.labels}>
|
|
<p>
|
|
Organization Badge<span>(Optional)</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.inputGroup}>
|
|
<div className={styles.inputLabel}>
|
|
<p>
|
|
Organization Name <span>*</span>
|
|
</p>
|
|
</div>
|
|
<div className={styles.inputField}>
|
|
<TextField
|
|
placeHolder="Enter organization name"
|
|
required
|
|
ref={inputRef}
|
|
hasError={error}
|
|
/>
|
|
<Prompts show={true} />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddCredentials;
|