Delete account view

frontend/src/api/accountApi.js

@@ -0,0 +1,13 @@
+import axios from "axios";
+import { Constants } from "../config/constants";
+
+const api = axios.create({
+  baseURL: `${Constants.idpUrl}/api`
+});
+
+const AccountApi = {
+  deleteAccount: (user, password) =>
+    api.post("/DeleteAccount", { Username: user, Password: password })
+};
+
+export default AccountApi;

frontend/src/api/auth.js

@@ -56,3 +56,5 @@ export const getUserToken = async () => {
   }
   return user.access_token;
 };
+
+export const removeUser = () => userManager.removeUser();

frontend/src/components/DeleteAccount/index.js

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import SidebarLayout from "../SidebarLayout";
+import AccountApi from "../../api/accountApi";
+import "./style.scss";
+import { removeUser } from "../../api/auth";
+const DeleteAccount = () => {
+  const [user, setUser] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [errorDeleting, setErrorDeleting] = useState(false);
+
+  const fieldsFilled = user && password;
+
+  const updateUser = event => setUser(event.target.value);
+  const updatePassword = event => setPassword(event.target.value);
+
+  const deleteProfile = () => {
+    setLoading(true);
+    AccountApi.deleteAccount(user, password)
+      .then(() => {
+        setLoading(false);
+      })
+      .then(removeUser)
+      .catch(() => {
+        setErrorDeleting(true);
+        setLoading(false);
+      });
+  };
+
+  const buttonClasses = "button is-danger" + (loading ? " is-loading" : "");
+  return (
+    <SidebarLayout>
+      <div>
+        Contul tău va fi șters. Pentru a putea reutiliza această aplicație va
+        trebui să îți refaci contul de utilizator. Informațiile pe care le-ai
+        transmis pana acum prin intermediul aplicație vor rămâne stocate în baza
+        de date. Dacă dorești ca toate informațiile sa fie eliminate din baza de
+        date te rugam sa adresezi aceasta cerere către:
+        <p>Adresa: Strada Italiană, nr. 22, Sector 2, 020976, București</p>
+        <p>E-mail: [email protected]</p>
+      </div>
+      <form onSubmit={() => {}}>
+        <div className="field">
+          <label className="label">Email</label>
+          <input
+            className="input is-medium"
+            type="text"
+            placeholder="Email"
+            value={user}
+            onChange={updateUser}
+          />
+        </div>
+        <div className="field">
+          <label className="label">Parola</label>
+          <input
+            className="input is-medium"
+            type="password"
+            placeholder="Parola"
+            value={password}
+            onChange={updatePassword}
+          />
+        </div>
+        <div className="field">
+          <button
+            className={buttonClasses}
+            onClick={deleteProfile}
+            disabled={!fieldsFilled || loading}
+          >
+            Șterge cont
+          </button>
+        </div>
+      </form>
+      <div className="notification is-warning" hidden={!errorDeleting}>
+        <button className="delete" onClick={() => setErrorDeleting(false)} />
+        Încercarea de ștergere a eșuat!
+      </div>
+    </SidebarLayout>
+  );
+};
+
+export default DeleteAccount;

frontend/src/components/DeleteAccount/style.scss

@@ -0,0 +1,3 @@
+.notification {
+  margin-top: 1em;
+}

frontend/src/components/Header/ProfileItems.js

@@ -17,6 +17,7 @@ const ProfileItems = () => {
           <NavLink to="/account">Contul meu</NavLink>
           <div className="account-separator" />
           <button onClick={handleLogout}>Logout</button>
+          <NavLink to="/delete-account">Ștergere cont</NavLink>
         </>
       ) : (
         <>

frontend/src/routes.js

@@ -5,6 +5,7 @@ import UpdateProfile from "./components/UpdateProfile";
 import Evaluation from "./components/Evaluation";
 import Account from "./components/Account";
 import TermsAndConditions from "./components/TermsAndConditions";
+import DeleteAccount from "./components/DeleteAccount";
 
 import {
   redirectSilentSignin,
@@ -75,6 +76,10 @@ export const ROUTES = {
     updateprofile: {
       path: "/update-profile",
       component: UpdateProfile
+    },
+    deleteaccount: {
+      path: "/delete-account",
+      component: DeleteAccount
     }
   }
 };

frontend/src/styles/base.scss

@@ -3,6 +3,8 @@
 @import "~bulma/sass/utilities/_all.sass";
 @import "~bulma/sass/base/_all.sass";
 @import "~bulma/sass/elements/container.sass";
+@import "~bulma/sass/elements/notification.sass";
+@import "~bulma/sass/elements/other.sass";
 @import "~bulma/sass/grid/columns.sass";
 
 @import "~bulma/sass/components/tabs";