From 216e8304087f81b0f904909aa79c3621e31fafd5 Mon Sep 17 00:00:00 2001 From: Tor-Einar Skog <tor-einar.skog@nibio.no> Date: Fri, 28 Apr 2023 11:51:23 +0200 Subject: [PATCH] Delete account from app --- src/components/CommonUtil.vue | 1 + src/components/DeleteUserForm.vue | 100 ++++++++++++++++++++++++++++ src/components/LoginSystem.vue | 24 +++---- src/components/RegisterUserForm.vue | 1 - src/components/Welcome.vue | 8 --- src/locales/en.json | 5 ++ src/locales/nb.json | 5 ++ src/main.js | 6 +- src/router/index.js | 29 ++------ 9 files changed, 134 insertions(+), 45 deletions(-) create mode 100644 src/components/DeleteUserForm.vue diff --git a/src/components/CommonUtil.vue b/src/components/CommonUtil.vue index adbe1e7..ecff902 100644 --- a/src/components/CommonUtil.vue +++ b/src/components/CommonUtil.vue @@ -51,6 +51,7 @@ CONST_URL_SYNC_UPDATE_OBSERVATION: '/rest/observation/syncobservationfromapp', CONST_URL_REGISTER_NEW_USER: '/rest/user/register', + CONST_URL_DELETE_USER: '/rest/user/deleteme', CONST_URL_SYNC_UPDATE_POI: '/rest/poi/syncpoifromapp', diff --git a/src/components/DeleteUserForm.vue b/src/components/DeleteUserForm.vue new file mode 100644 index 0000000..c0571ec --- /dev/null +++ b/src/components/DeleteUserForm.vue @@ -0,0 +1,100 @@ +<!-- + + Copyright (c) 2023 NIBIO <http://www.nibio.no/>. + + This file is part of VIPSObservationApp. + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <https://www.gnu.org/licenses/>. + + Author: Tor-Einar Skog <tor-einar.skog@nibio.no> + Created : 2023-04-25 + +--> + +<template> + <div > + <form @submit="handleDeleteUser" v-if="step==1"> + <div v-if="step==1"> + <h2>{{ $t("deleteuser.button.label") }}</h2> + <p>{{ $t("deleteuserform.description") }}</p> + <div class="form-group form-check"> + <input type="checkbox" checked class="form-check-input" v-model="keepData"> + <label class="form-check-label" for="keepData">{{ $t("deleteuserform.keepdata.label") }}</label> + </div> + <button type="submit" class="btn btn-danger"">{{ $t("deleteuserform.submit.label") }}</button> + </div> + </form> + </div> +</template> + +<script> + import CommonUtil from '@/components/CommonUtil'; + + export default { + name: 'DeleteUserForm', + data() { + return { + keepData: true, + step: 1 + }; + }, + methods: { + handleDeleteUser: function(e) { + e.preventDefault(); + if(confirm(this.$i18n.t("deleteuserform.submit.confirm.msg"))) + { + // Delete the user + this.deleteUser(); + } + else + { + // Navigate back to front page + this.$router.push("/"); + } + }, + deleteUser: async function(){ + const response = await fetch( + CommonUtil.CONST_URL_DOMAIN + CommonUtil.CONST_URL_DELETE_USER + "?keepData=" + this.keepData, + { + method: "DELETE", + headers: { + "Authorization": this.$root.sharedState.uuid + } + } + ); + + const data = await response.text(); + + if(response.status != 204) + { + if(data["errorMessages"] != null) + { + this.errors = data["errorMessages"]; + } + else + { + alert("Something went wrong. Status code = " + response.status + ". Please contact your system administrator"); + } + return false; + } + + // Log the deleted user out. + this.autoLogout(); + }, + autoLogout: function() { + this.$root.$emit("autoLogout"); + console.info("AutoLogout!") + } + } + } +</script> \ No newline at end of file diff --git a/src/components/LoginSystem.vue b/src/components/LoginSystem.vue index afa04c9..e062597 100644 --- a/src/components/LoginSystem.vue +++ b/src/components/LoginSystem.vue @@ -28,6 +28,7 @@ v-text="userLoggedInName"></span> <br /> <a class="btn btn-primary" v-on:click="handleLogout()">{{ $t("logout.button.label")}}</a> + <router-link to="/DeleteUserForm" class="btn btn-danger" onclick="$('.offcanvas-collapse').toggleClass('open')">{{ $t("deleteuser.button.label") }}</router-link> </div> <div v-else> <form class="my-2 my-lg-0"> @@ -108,8 +109,11 @@ this.$root.sharedState.user.lastName = user.lastName; this.userLoggedInName = this.$root.sharedState.user.firstName + " " + this.$root.sharedState.user.lastName; } - /** Firing event to parent (main.js) */ - //this.$emit(CommonUtil.CONST_EVENT_LOGIN_USER_DETAIL,user.userUuid, user.firstName,user.lastName); + /** Show the observation list instead of welcome page if user is logged in */ + if(this.$root.sharedState.uuid) + { + this.$router.push("/"); + } }, /** Check uuid first */ @@ -140,8 +144,6 @@ { this.username = credentials["username"]; this.password = credentials["password"]; - console.info("handleAutoLogin!"); - console.info(credentials); this.handleLogin(); }, /** Login process . sending user credential */ @@ -264,13 +266,6 @@ localStorage.removeItem(CommonUtil.CONST_STORAGE_VISIBILITY_POLYGON); /* Remove from IndexedDB */ - //let dbRequest = null; - /*dbRequest = indexedDB.open(CommonUtil.CONST_DB_NAME, CommonUtil.CONST_DB_VERSION); - dbRequest.onsuccess = function (evt) { - let db = evt.target.result; - db.close(); - } - */ let delReq = indexedDB.deleteDatabase(CommonUtil.CONST_DB_NAME); delReq.onsuccess = function() { CommonUtil.logInfo("Database was successfully deleted!"); @@ -294,10 +289,15 @@ this.getUserFromStorage(); } - // Attempting to listen to events from RegisterUserForm + // Listening to events from RegisterUserForm (via App) this.$root.$on("autoLogin", (credentials) => { this.handleAutoLogin(credentials); }); + + // Listening to events from DeleteUserForm (via App) + this.$root.$on("autoLogout", () => { + this.handleLogout(); + }); }, }; </script> diff --git a/src/components/RegisterUserForm.vue b/src/components/RegisterUserForm.vue index 555d202..16119c1 100644 --- a/src/components/RegisterUserForm.vue +++ b/src/components/RegisterUserForm.vue @@ -176,7 +176,6 @@ }, autoLogin: function() { this.$root.$emit("autoLogin", {"username":this.username, "password":this.password}); - console.info("AutoLogin!") } } } diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue index 6303fb4..47cac01 100644 --- a/src/components/Welcome.vue +++ b/src/components/Welcome.vue @@ -49,8 +49,6 @@ </style> <script> - import CommonUtil from '@/components/CommonUtil' - export default ({ data() { return { @@ -61,12 +59,6 @@ }, mounted() { - //this.isMounted = true; - //this.uuid = localStorage.getItem(localStorage.removeItem(CommonUtil.CONST_STORAGE_UUID)); - //CommonUtil.logInfo('uuid : '+this.uuid); - } - - }) </script> \ No newline at end of file diff --git a/src/locales/en.json b/src/locales/en.json index d635af3..e583f7a 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -87,5 +87,10 @@ "registeruserform.step_2.heading": "Your user information was successfully submitted.", "registeruserform.step_2.description": "To be able to log in, you need to confirm your email. VIPS (noreply@logic.vips.nibio.no) has sent an email to the mail address that you provided. Please check your inbox and all spam folders and filters, and reply accordingly. After that, press the login button to start using the app.", "registeruserform.step_2.emailConfirmationDeclaration": "Yes, I have confirmed my email", + "deleteuser.button.label": "Delete my account", + "deleteuserform.description": "When deleting your account, you will be logged out, and you will not be able to restore your data. You can optionally let VIPS keep your field observations, they will then be transferred to a system default user account.", + "deleteuserform.keepdata.label": "Yes, VIPS may keep my field observations.", + "deleteuserform.submit.label": "Delete my account", + "deleteuserform.submit.confirm.msg": "Are you absolutely sure you want to delete your account?", "copy" : "Copy" } \ No newline at end of file diff --git a/src/locales/nb.json b/src/locales/nb.json index 9709e99..526944b 100644 --- a/src/locales/nb.json +++ b/src/locales/nb.json @@ -87,5 +87,10 @@ "registeruserform.step_2.heading": "Din brukerinformasjon ble registrert.", "registeruserform.step_2.description": "For å kunne logge deg inn, må du bekrefte din e-postadresse. VIPS (noreply@logic.vips.nibio.no) har sendt en e-post til din oppgitte e-postadresse. Vennligst sjekk din innboks og alle spamfiltre, og svar på e-posten ihht instruksjonene. Etter dette kan du klikke på login-knappen nedenfor for å starte å bruke appen.", "registeruserform.step_2.emailConfirmationDeclaration": "Ja, jeg har bekreftet min e-postadresse", + "deleteuser.button.label": "Slett min konto", + "deleteuserform.description": "Når kontoen din slettes, blir du logget ut og dataene dine blir slettet. Du kan velge å la VIPS beholde feltobservasjonene dine. De blir da overført til en anonym VIPS-konto.", + "deleteuserform.keepdata.label": "Ja, VIPS kan beholde mine feltobservasjoner", + "deleteuserform.submit.label": "Slett min konto", + "deleteuserform.submit.confirm.msg": "Er du helt sikker på at du vil slette kontoen din?", "copy" : "Kopi" } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 2b34c3f..166f1a4 100644 --- a/src/main.js +++ b/src/main.js @@ -84,6 +84,11 @@ const init = () => { this.$on("autoLogin", (credentials) => { vipsObsAppMenu.$emit("autoLogin", credentials); }); + // Emitted from DeleteUserForm, meant for LoginSystem + this.$on("autoLogout", () => { + vipsObsAppMenu.$emit("autoLogout"); + }); + } }); @@ -107,7 +112,6 @@ const vipsObsAppMenu = new Vue({ components : { LoginSystem, - Welcome }, methods: { diff --git a/src/router/index.js b/src/router/index.js index 98a9088..7475b72 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -10,6 +10,7 @@ import MapObservation from '@/components/MapObservation' import MapPOI from '@/components/MapPOI' import Quantification from '@/components/Quantification' import RegisterUserForm from '@/components/RegisterUserForm' +import DeleteUserForm from '@/components/DeleteUserForm' Vue.use(Router) @@ -67,6 +68,11 @@ const router = new Router({ name : 'RegisterUserForm', component : RegisterUserForm }, + { + path : '/DeleteUserForm', + name : 'DeleteUserForm', + component : DeleteUserForm + }, { path : '/logout', name : 'Logout', @@ -78,26 +84,3 @@ const router = new Router({ export default router; -/*router.beforeEach((to,from,next) => { - //console.info(this.sharedState); - - //console.info(router.app.$root.sharedState); - //console.info(router.app.$root.sharedState.uuid); - //console.info(from); - - //console.info("uuid=" + router.app.$root.sharedState.uuid); - - console.info("to.name=" + to.name); - console.info(router.app.sharedState) - //var isLoggedIn = router.app.$root.sharedState.uuid != undefined && router.app.$root.sharedState.uuid != ""; - - if(!isLoggedIn && ["RegisterUserForm","Welcome"].indexOf(to.name) < 0) - { - next({name:"Welcome"}); - } - else { - next(); - } -}); -*/ - -- GitLab