Skip to content

Commit 20e3478

Browse files
RangarajanSF4077RangarajanSF4077
committed
ES-FileChange - Added jsx file
1 parent ac89ea9 commit 20e3478

3 files changed

Lines changed: 406 additions & 0 deletions

File tree

‎Client-side/src/Authentication.jsx‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
// Import necessary hooks and components
2+
import { useState, useEffect } from "react";
3+
import { registerLicense } from '@syncfusion/ej2-base';
4+
import DocumentEditorMain from "./DocumentEditor";
5+
6+
// Register the Syncfusion license key
7+
registerLicense("Ngo9BigBOggjHTQxAR8/V1NNaF5cXGhIfEx1RHxQdld5ZFRHallYTnNWUj0eQnxTdEBjWH1ecXxWRWVbUExyVklfag==");
8+
9+
const hostURL = "https://localhost:44310/api/authentication";
10+
11+
// Authenticating the users with the credentials like Email ID and password. Registering new users.
12+
function Authentication() {
13+
// State hooks for managing authentication
14+
const [user, setUser] = useState(null);
15+
const [isRegister, setIsRegister] = useState(false);
16+
const [message, setMessage] = useState("");
17+
const [username, setUsername] = useState("");
18+
19+
// Effect to load user from localStorage on component mount
20+
useEffect(() => {
21+
const saved = localStorage.getItem("user");
22+
if (saved) {
23+
setUser(JSON.parse(saved));
24+
}
25+
}, []);
26+
27+
// Logout user and clear state
28+
const handleLogout = () => {
29+
localStorage.removeItem("user");
30+
setUser(null);
31+
};
32+
33+
// Validate email format using a regular expression
34+
const validateEmail = (email) => /\S+@\S+\.\S+/.test(email);
35+
36+
// Handle login form submission
37+
const handleLogin = async (event) => {
38+
event.preventDefault();
39+
setMessage("");
40+
41+
const form = event.currentTarget;
42+
const email = form.elements.email.value.trim();
43+
const password = form.elements.password.value.trim();
44+
45+
if (!validateEmail(email)) {
46+
setMessage("❌ Please enter a valid email.");
47+
return;
48+
}
49+
50+
try {
51+
// Make a POST request to the login API
52+
const response = await fetch(`${hostURL}/login`, {
53+
method: "POST",
54+
headers: { "Content-Type": "application/json" },
55+
body: JSON.stringify({ email, password }),
56+
});
57+
58+
if (response.ok) {
59+
const userData = await response.json();
60+
localStorage.setItem("user", JSON.stringify(userData));
61+
setUser(userData); // Update user state directly
62+
} else {
63+
setMessage("❌ Invalid email or password.");
64+
}
65+
} catch (error) {
66+
setMessage("⚠️ Server error during login.");
67+
}
68+
};
69+
70+
// Handle registration form submission
71+
const handleRegister = async (e) => {
72+
e.preventDefault();
73+
setMessage("");
74+
75+
const form = e.currentTarget;
76+
const username = form.elements.username.value;
77+
const email = form.elements.email.value;
78+
const password = form.elements.password.value;
79+
80+
if (!validateEmail(email)) {
81+
setMessage("❌ Please enter a valid email.");
82+
return;
83+
}
84+
85+
try {
86+
// Make a POST request to the registration API
87+
const register = await fetch(`${hostURL}/register`, {
88+
method: "POST",
89+
headers: { "Content-Type": "application/json" },
90+
body: JSON.stringify({ username, email, password }),
91+
});
92+
93+
const data = await register.json();
94+
if (register.ok) {
95+
setMessage("✅ Registration successful. You can now log in.");
96+
setIsRegister(false);
97+
setUsername("");
98+
} else {
99+
setMessage(`❌ ${data.message || "Registration failed"}`);
100+
}
101+
} catch {
102+
setMessage("⚠️ Server error during registration.");
103+
}
104+
};
105+
106+
// Render authentication form if not logged in
107+
const renderAuthForm = () => {
108+
return (
109+
<div className="auth-container">
110+
<h2 className="auth-title">{isRegister ? "Register" : "Login"}</h2>
111+
<form onSubmit={isRegister ? handleRegister : handleLogin}>
112+
{isRegister && (
113+
<>
114+
<label className="auth-label" htmlFor="username">Username:</label>
115+
<input
116+
id="username"
117+
type="text"
118+
name="username"
119+
value={username}
120+
onChange={(e) => setUsername(e.target.value)}
121+
required
122+
className="auth-input"
123+
placeholder="Your username"
124+
/>
125+
</>
126+
)}
127+
<label className="auth-label" htmlFor="email">Email:</label>
128+
<input
129+
id="email"
130+
type="email"
131+
name="email"
132+
required
133+
className="auth-input"
134+
placeholder="you@example.com"
135+
/>
136+
<label className="auth-label" htmlFor="password">Password:</label>
137+
<input
138+
id="password"
139+
type="password"
140+
name="password"
141+
required
142+
className="auth-input"
143+
placeholder="Your password"
144+
/>
145+
<button
146+
type="submit"
147+
className="auth-button primary"
148+
>
149+
{isRegister ? "Register" : "Login"}
150+
</button>
151+
</form>
152+
<button
153+
className="auth-button secondary"
154+
onClick={() => {
155+
setIsRegister(!isRegister);
156+
setMessage("");
157+
setUsername("");
158+
}}
159+
style={{ marginTop: 12, cursor: "pointer" }}
160+
>
161+
{isRegister ? "Already have an account? Log in" : "Don't have an account? Register"}
162+
</button>
163+
{message && <p className="auth-message" style={{ marginTop: 12 }}>{message}</p>}
164+
</div>
165+
);
166+
};
167+
168+
// Render DocumentEditorMain if user is authenticated, otherwise render auth form
169+
return user ? (
170+
<DocumentEditorMain user={user} onLogout={handleLogout} />
171+
) : (
172+
renderAuthForm()
173+
);
174+
}
175+
176+
export default Authentication;

‎Client-side/src/DocumentEditor.jsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { useEffect, useRef } from "react";
2+
import { DocumentEditorContainerComponent, Toolbar as DocumentEditorToolbar } from "@syncfusion/ej2-react-documenteditor";
3+
import TitleBar from "./Titlebar";
4+
5+
// Inject the toolbar to the document editor component
6+
DocumentEditorContainerComponent.Inject(DocumentEditorToolbar);
7+
8+
function DocumentEditor({ user, onLogout }) {
9+
let defaultDocument = '';
10+
// Configure toolbar items based on user role
11+
const toolbarConfig = {
12+
Lawyer: ["New", "Open", "Separator", "Undo", "Redo", "Separator", "Image", "Table", "Hyperlink", "Bookmark", "TableOfContents", "Separator", "Header", "Footer", "PageSetup", "PageNumber", "Break", "InsertFootnote", "InsertEndnote", "Separator", "Find", "Separator", "Comments", "TrackChanges", "LocalClipboard", "RestrictEditing", "Separator", "FormFields", "UpdateFields", "ContentControl", "XML Mapping"],
13+
Paralegal: ["New", "Open", "Separator", "Undo", "Redo", "Separator", "Image", "Table", "Hyperlink", "Bookmark", "TableOfContents", "Separator", "Header", "Footer", "PageSetup", "PageNumber", "Break", "InsertFootnote", "InsertEndnote", "Separator", "Find", "Separator", "Comments", "TrackChanges", "LocalClipboard", "RestrictEditing", "Separator", "FormFields", "UpdateFields", "ContentControl", "XML Mapping"],
14+
Client: ["Comments", "Find"],
15+
Reviewer: ["Comments", "Find", "TrackChanges"],
16+
Admin: ["New", "Open", "Separator", "Undo", "Redo", "Separator", "Image", "Table", "Hyperlink", "Bookmark", "TableOfContents", "Separator", "Header", "Footer", "PageSetup", "PageNumber", "Break", "InsertFootnote", "InsertEndnote", "Separator", "Find", "Separator", "Comments", "TrackChanges", "LocalClipboard", "RestrictEditing", "Separator", "FormFields", "UpdateFields", "ContentControl", "XML Mapping"]
17+
};
18+
19+
// Create references for title bar and container
20+
const titleBarRef = useRef(null);
21+
const containerRef = useRef(null);
22+
23+
// Effect to initialize or update the document editor when the user changes
24+
useEffect(() => {
25+
if (user && containerRef.current) {
26+
convertDocxToSfdt();
27+
containerRef.current.documentEditor.documentName = "Document";
28+
containerRef.current.documentEditor.currentUser = user.email;
29+
30+
// Update document title when changes are made
31+
containerRef.current.documentChange = () => {
32+
titleBarRef.current.updateDocumentTitle();
33+
containerRef.current.documentEditor.focusIn();
34+
};
35+
if (!titleBarRef.current) {
36+
titleBarRef.current = new TitleBar(document.getElementById("documenteditor_titlebar"), containerRef.current.documentEditor, true);
37+
titleBarRef.current.updateDocumentTitle();
38+
}
39+
containerRef.current.toolbarItems = toolbarConfig[user.username];
40+
}
41+
}, [user]);
42+
43+
// Convert GitHub Raw document to SFDT and load in Editor.
44+
const convertDocxToSfdt = async () => {
45+
try {
46+
const docxResponse = await fetch('https://raw.githubusercontent.com/SyncfusionExamples/Role-Based-Toolbar-Customization-in-Syncfusion-Document-Editor-for-Legal-Workflows/master/Client-side/public/docs/Legal_Notice.docx');
47+
const docxBlob = await docxResponse.blob();
48+
49+
const formData = new FormData();
50+
formData.append('files', docxBlob, 'Legal_Notice.docx');
51+
52+
const importResponse = await fetch('https://ej2services.syncfusion.com/production/web-services/api/documenteditor/Import', {
53+
method: 'POST',
54+
body: formData,
55+
});
56+
57+
if (importResponse.ok) {
58+
defaultDocument = await importResponse.text();
59+
containerRef.current.documentEditor.open(defaultDocument);
60+
} else {
61+
console.error(`Failed to import document: ${importResponse.statusText}`);
62+
}
63+
} catch (error) {
64+
console.error('Error converting document:', error);
65+
}
66+
};
67+
68+
return (
69+
<div>
70+
<div className="main-titlebar" style={{ display: "flex", justifyContent: "space-between", padding: "8px 12px", alignItems: "center", background: "#f0f0f0" }}>
71+
<p className="welcome-text" style={{ margin: 0 }}>Welcome, {user.username || user.email}</p>
72+
<button className="logout-btn" onClick={onLogout}>Logout</button>
73+
</div>
74+
<div id="documenteditor_titlebar" className="e-de-ctn-title"></div>
75+
<style>
76+
{`.e-toolbar-items {
77+
display: flex !important;
78+
justify-content: center !important;
79+
}`}
80+
</style>
81+
<DocumentEditorContainerComponent
82+
ref={containerRef}
83+
id="container"
84+
height="calc(100vh - 92px)"
85+
enableToolbar={true}
86+
/>
87+
</div>
88+
);
89+
}
90+
91+
export default DocumentEditor;

0 commit comments

Comments
 (0)