Speichern Sie Ihre Daten sicher ab.

The secret tresor application

{loginValues.email === '' ? 'No user logged in' : 'user:' + loginValues.email}

Secrets +

my secrets
new credential
new credit-card
new note

User +

Admin +

All users
Add user
Edit user
All secrets

+ About +

+ + ) +}; + +export default Layout; \ No newline at end of file diff --git a/183_12_2_tresorfrontend_rupe-master/src/pages/NoPage.js b/183_12_2_tresorfrontend_rupe-master/src/pages/NoPage.js new file mode 100644 index 0000000..20f0dca --- /dev/null +++ b/183_12_2_tresorfrontend_rupe-master/src/pages/NoPage.js @@ -0,0 +1,16 @@ +import '../App.css'; + +/** + * NoPage + * @author Peter Rutschmann + */ +const NoPage = () => { + return( +

404

Page currently not supported.

+ ) +}; + +export default NoPage; \ No newline at end of file diff --git a/183_12_2_tresorfrontend_rupe-master/src/pages/secret/NewCredential.js b/183_12_2_tresorfrontend_rupe-master/src/pages/secret/NewCredential.js new file mode 100644 index 0000000..bdd127e --- /dev/null +++ b/183_12_2_tresorfrontend_rupe-master/src/pages/secret/NewCredential.js @@ -0,0 +1,85 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import {postSecret} from "../../comunication/FetchSecrets"; + +/** + * NewCredential + * @author Peter Rutschmann + */ +function NewCredential({loginValues}) { + const initialState = { + kindid: 1, + kind:"credential", + userName: "", + password: "", + url: "" + }; + const [credentialValues, setCredentialValues] = useState(initialState); + const [errorMessage, setErrorMessage] = useState(''); + + const navigate = useNavigate(); + + const handleSubmit = async (e) => { + e.preventDefault(); + setErrorMessage(''); + console.log(loginValues) + try { + const content = credentialValues; + await postSecret({loginValues, content}); + setCredentialValues(initialState); + navigate('/secret/secrets'); + } catch (error) { + console.error('Failed to fetch to server:', error.message); + setErrorMessage(error.message); + } + }; + + return ( +

Add new credential secret

+ username: + + setCredentialValues(prevValues => ({...prevValues, userName: e.target.value}))} + required + placeholder="Please enter username" + /> +

+ password: + + setCredentialValues(prevValues => ({...prevValues, password: e.target.value}))} + required + placeholder="Please enter password" + /> +

+ url: + + setCredentialValues(prevValues => ({...prevValues, url: e.target.value}))} + required + placeholder="Please enter url" + /> +

+ + {errorMessage &&

{errorMessage}

} +

+ ); +} + +export default NewCredential; diff --git a/183_12_2_tresorfrontend_rupe-master/src/pages/secret/NewCreditCard.js b/183_12_2_tresorfrontend_rupe-master/src/pages/secret/NewCreditCard.js new file mode 100644 index 0000000..5cc5521 --- /dev/null +++ b/183_12_2_tresorfrontend_rupe-master/src/pages/secret/NewCreditCard.js @@ -0,0 +1,103 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import {postSecret} from "../../comunication/FetchSecrets"; + +/** + * NewCreditCard + * @author Peter Rutschmann + */ +function NewCreditCard({loginValues}) { + const initialState = { + kindid: 2, + kind:"creditcard", + cardtype: "", + cardnumber: "", + expiration: "", + cvv: "" + }; + const [creditCardValues, setCreditCardValues] = useState(initialState); + const [errorMessage, setErrorMessage] = useState(''); + + const navigate = useNavigate(); + + const handleSubmit = async (e) => { + e.preventDefault(); + setErrorMessage(''); + try { + const content = creditCardValues; + await postSecret({loginValues, content}); + setCreditCardValues(initialState); + navigate('/secret/secrets'); + } catch (error) { + console.error('Failed to fetch to server:', error.message); + setErrorMessage(error.message); + } + }; + + return ( +

Add new credit-card secret

+ card type: + +

+ cardnumber: + + setCreditCardValues(prevValues => ({...prevValues, cardnumber: e.target.value}))} + required + placeholder="Please enter cardnumber" + /> +

+ expiration (mm/yy): + + setCreditCardValues(prevValues => ({...prevValues, expiration: e.target.value}))} + required + placeholder="Please enter expiration" + /> +

+ cvv: + + setCreditCardValues(prevValues => ({...prevValues, cvv: e.target.value}))} + required + placeholder="Please enter cvv" + /> +

+ + {errorMessage &&

{errorMessage}

} +

+ ); +} + +export default NewCreditCard; diff --git a/183_12_2_tresorfrontend_rupe-master/src/pages/secret/NewNote.js b/183_12_2_tresorfrontend_rupe-master/src/pages/secret/NewNote.js new file mode 100644 index 0000000..5fa7915 --- /dev/null +++ b/183_12_2_tresorfrontend_rupe-master/src/pages/secret/NewNote.js @@ -0,0 +1,79 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import {postSecret} from "../../comunication/FetchSecrets"; + +/** + * NewNote + * @author Peter Rutschmann + */ +function NewNote({loginValues}) { + const initialState = { + kindid: 3, + kind:"note", + title: "", + content: "", + }; + const [noteValues, setNoteValues] = useState(initialState); + const [errorMessage, setErrorMessage] = useState(''); + + const navigate = useNavigate(); + + const handleSubmit = async (e) => { + e.preventDefault(); + setErrorMessage(''); + try { + const content = noteValues; + await postSecret({loginValues, content}); + setNoteValues(initialState); + navigate('/secret/secrets'); + } catch (error) { + console.error('Failed to fetch to server:', error.message); + setErrorMessage(error.message); + } + }; + + return ( +

Add new note secret

+ title: + + setNoteValues(prevValues => ({...prevValues, title: e.target.value}))} + required + placeholder="Please enter a title *" + /> +

+ content: +

+                                    setNoteValues(prevValues =>
+                                        ({...prevValues, content: e.target.value}))}
+                                required
+                                placeholder="Please enter a content *"
+                            />
+                        </div>
+                        <button type="submit">Save secret</button>
+                        {errorMessage && <p style={{color: 'red'}}>{errorMessage}</p>}
+                    </aside>
+                </section>
+            </form>
+        </div>
+    );
+}
+
+export default NewNote;
diff --git a/183_12_2_tresorfrontend_rupe-master/src/pages/secret/Secrets.js b/183_12_2_tresorfrontend_rupe-master/src/pages/secret/Secrets.js
new file mode 100644
index 0000000..547ffee
--- /dev/null
+++ b/183_12_2_tresorfrontend_rupe-master/src/pages/secret/Secrets.js
@@ -0,0 +1,70 @@
+import '../../App.css';
+import React, {useEffect, useState} from 'react';
+import {getSecretsforUser} from "../../comunication/FetchSecrets";
+
+/**
+ * Secrets
+ * @author Peter Rutschmann
+ */
+const Secrets = ({loginValues}) => {
+    const [secrets, setSecrets] = useState([]);
+    const [errorMessage, setErrorMessage] = useState('');
+
+    useEffect(() => {
+        const fetchSecrets = async () => {
+            setErrorMessage('');
+            if( ! loginValues.email){
+                console.error('Secrets: No valid email, please do login first:' + loginValues);
+                setErrorMessage("No valid email, please do login first.");
+            } else {
+                try {
+                    const data = await getSecretsforUser(loginValues);
+                    console.log(data);
+                    setSecrets(data);
+                } catch (error) {
+                    console.error('Failed to fetch to server:', error.message);
+                    setErrorMessage(error.message);
+                }
+            }
+        };
+        fetchSecrets();
+    }, [loginValues]);
+
+    return (
+        <>
+            <h1>my secrets</h1>
+            {errorMessage && <p style={{color: 'red'}}>{errorMessage}</p>}
+             <form>
+                <h2>secrets</h2>
+                <table border="1">
+                    <thead>
+                    <tr>
+                        <th>secret id</th>
+                        <th>user id</th>
+                        <th>content</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {secrets?.length > 0 ? (
+                        secrets.map(secret => (
+                            <tr key={secret.id}>
+                                <td>{secret.id}</td>
+                                <td>{secret.userId}</td>
+                                <td>
+                                    <pre>{JSON.stringify(secret.content, null, 2)}</pre>
+                                </td>
+                            </tr>
+                        ))
+                    ) : (
+                        <tr>
+                            <td colSpan="3">No secrets available</td>
+                        </tr>
+                    )}
+                    </tbody>
+                </table>
+            </form>
+        </>
+    );
+};
+
+export default Secrets;
\ No newline at end of file
diff --git a/183_12_2_tresorfrontend_rupe-master/src/pages/user/LoginUser.js b/183_12_2_tresorfrontend_rupe-master/src/pages/user/LoginUser.js
new file mode 100644
index 0000000..72aaa8b
--- /dev/null
+++ b/183_12_2_tresorfrontend_rupe-master/src/pages/user/LoginUser.js
@@ -0,0 +1,52 @@
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * LoginUser
+ * @author Peter Rutschmann
+ */
+function LoginUser({loginValues, setLoginValues}) {
+    const navigate = useNavigate();
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        console.log(loginValues);
+        navigate('/')
+    };
+
+    return (
+        <div>
+            <h2>Login user</h2>
+            <form onSubmit={handleSubmit}>
+                <section>
+                    <aside>
+                        <div>
+                            <label>Email:</label>
+                            <input
+                                type="text"
+                                value={loginValues.email}
+                                onChange={(e) =>
+                                    setLoginValues(prevValues => ({...prevValues, email: e.target.value}))}
+                                required
+                                placeholder="Please enter your email *"
+                            />
+                        </div>
+                        <div>
+                            <label>Password:</label>
+                            <input
+                                type="text"
+                                value={loginValues.password}
+                                onChange={(e) =>
+                                    setLoginValues(prevValues => ({...prevValues, password: e.target.value}))}
+                                required
+                                placeholder="Please enter your password *"
+                            />
+                        </div>
+                    </aside>
+                </section>
+                <button type="submit">Login</button>
+            </form>
+        </div>
+    );
+}
+
+export default LoginUser;
\ No newline at end of file
diff --git a/183_12_2_tresorfrontend_rupe-master/src/pages/user/RegisterUser.js b/183_12_2_tresorfrontend_rupe-master/src/pages/user/RegisterUser.js
new file mode 100644
index 0000000..f8a866c
--- /dev/null
+++ b/183_12_2_tresorfrontend_rupe-master/src/pages/user/RegisterUser.js
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {postUser} from "../../comunication/FetchUser";
+
+/**
+ * RegisterUser
+ * @author Peter Rutschmann
+ */
+function RegisterUser({loginValues, setLoginValues}) {
+    const navigate = useNavigate();
+
+    const initialState = {
+        firstName: "",
+        lastName: "",
+        email: "",
+        password: "",
+        passwordConfirmation: "",
+        errorMessage: ""
+    };
+    const [credentials, setCredentials] = useState(initialState);
+    const [errorMessage, setErrorMessage] = useState('');
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setErrorMessage('');
+
+        //validate
+        if(credentials.password !== credentials.passwordConfirmation) {
+            console.log("password != passwordConfirmation");
+            setErrorMessage('Password and password-confirmation are not equal.');
+            return;
+        }
+
+        try {
+            await postUser(credentials);
+            setLoginValues({userName: credentials.email, password: credentials.password});
+            setCredentials(initialState);
+            navigate('/');
+        } catch (error) {
+            console.error('Failed to fetch to server:', error.message);
+            setErrorMessage(error.message);
+        }
+    };
+
+    return (
+        <div>
+            <h2>Register user</h2>
+            <form onSubmit={handleSubmit}>
+                <section>
+                <aside>
+                    <div>
+                        <label>Firstname:</label>
+                        <input
+                            type="text"
+                            value={credentials.firstName}
+                            onChange={(e) =>
+                                setCredentials(prevValues => ({...prevValues, firstName: e.target.value}))}
+                            required
+                            placeholder="Please enter your firstname *"
+                        />
+                    </div>
+                    <div>
+                        <label>Lastname:</label>
+                        <input
+                            type="text"
+                            value={credentials.lastName}
+                            onChange={(e) =>
+                                setCredentials(prevValues => ({...prevValues, lastName: e.target.value}))}
+                            required
+                            placeholder="Please enter your lastname *"
+                        />
+                    </div>
+                    <div>
+                        <label>Email:</label>
+                        <input
+                            type="text"
+                            value={credentials.email}
+                            onChange={(e) =>
+                                setCredentials(prevValues => ({...prevValues, email: e.target.value}))}
+                            required
+                            placeholder="Please enter your email"
+                        />
+                    </div>
+                </aside>
+                    <aside>
+                        <div>
+                            <label>Password:</label>
+                            <input
+                                type="text"
+                                value={credentials.password}
+                                onChange={(e) =>
+                                    setCredentials(prevValues => ({...prevValues, password: e.target.value}))}
+                                required
+                                placeholder="Please enter your pwd *"
+                            />
+                        </div>
+                        <div>
+                            <label>Password confirmation:</label>
+                            <input
+                                type="text"
+                                value={credentials.passwordConfirmation}
+                                onChange={(e) =>
+                                    setCredentials(prevValues => ({...prevValues, passwordConfirmation: e.target.value}))}
+                                required
+                                placeholder="Please confirm your pwd *"
+                            />
+                        </div>
+                    </aside>
+                </section>
+                <button type="submit">Register</button>
+                {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+            </form>
+        </div>
+    );
+}
+
+export default RegisterUser;
diff --git a/183_12_2_tresorfrontend_rupe-master/src/pages/user/Users.js b/183_12_2_tresorfrontend_rupe-master/src/pages/user/Users.js
new file mode 100644
index 0000000..151f310
--- /dev/null
+++ b/183_12_2_tresorfrontend_rupe-master/src/pages/user/Users.js
@@ -0,0 +1,40 @@
+import '../../App.css';
+import React, {useEffect, useState} from "react";
+import {getUsers} from "../../comunication/FetchUser";
+
+/**
+ * Users
+ * @author Peter Rutschmann
+ */
+const Users = ({loginValues}) => {
+    const [users, setUsers] = useState([]);
+    const [errorMessage, setErrorMessage] = useState('');
+
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                const users = await getUsers();
+                console.log(users);
+                setUsers(users);
+            } catch (error) {
+                console.error('Failed to fetch to server:', error.message);
+                setErrorMessage(error.message);
+            }
+        };
+        fetchUsers();
+    }, [loginValues]);
+
+    return (
+        <>
+            <h1>Client list</h1>
+            <ul>
+                {users.map(user => (
+                    <li key={user.id}>{user.id} {user.firstName} {user.lastName} - {user.email} - {user.password}</li>
+                ))}
+            </ul>
+            {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+        </>
+    );
+};
+
+export default Users;
\ No newline at end of file
diff --git a/183_12_2_tresorfrontend_rupe-master/src/reportWebVitals.js b/183_12_2_tresorfrontend_rupe-master/src/reportWebVitals.js
new file mode 100644
index 0000000..5253d3a
--- /dev/null
+++ b/183_12_2_tresorfrontend_rupe-master/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/183_12_2_tresorfrontend_rupe-master/src/setupTests.js b/183_12_2_tresorfrontend_rupe-master/src/setupTests.js
new file mode 100644
index 0000000..8f2609b
--- /dev/null
+++ b/183_12_2_tresorfrontend_rupe-master/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';