Merge branch 'develop'

Tanaguru · Sep 5, 2024 · 5ab4d70 · 5ab4d70
2 parents cffa2e1 + b97528f
commit 5ab4d70
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -65,3 +65,6 @@ Improvements :
 ## 2.2.0
 - generate user token with free expiration date
 - many UX fixes (audit logs, user token, modules)
+
+## 2.2.1
+- improves user token UX
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tanaguru2020-webapp",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode development",

diff --git a/src/i18n/locales/en/user.json b/src/i18n/locales/en/user.json
@@ -12,8 +12,9 @@
 	"tokenGenerate": "Generate token",
 	"tokenRenew": "Renew token",
 	"tokenExpiration": "expires on",
-	"tokenExpirationLabel": "token expiration (required field, format: mm/dd/yyyy)",
-	"tokenExpirationErrorFormat": "Please enter a date in month/day/year format. For example: 31/12/2020.",
+	"tokenExpirationLegend": "Generate new token",
+	"tokenExpirationLabel": "Token expiration (required field)",
+	"tokenExpirationErrorFormat": "Please enter a valid date in month/day/year format. For example: 12/31/2020.",
 	"tokenExpirationErrorPeriod": "The date entered has already passed. Please enter a future date.",
 	"tokenExpirationError": "Something went wrong, please try again. If the problem persists, please contact an administrator."
 }
diff --git a/src/i18n/locales/fr/user.json b/src/i18n/locales/fr/user.json
@@ -12,8 +12,9 @@
 	"tokenGenerate": "Générer mon token",
 	"tokenRenew": "Renouveler mon token",
 	"tokenExpiration": "expire le",
-	"tokenExpirationLabel": "expiration du token (champ obligatoire, format: jj/mm/aaaa)",
-	"tokenExpirationErrorFormat": "Veuillez saisir une date au format jour/mois/année. Par exemple: 31/12/2020.",
+	"tokenExpirationLegend": "Générer un nouveau token",
+	"tokenExpirationLabel": "Expiration du token (champ obligatoire)",
+	"tokenExpirationErrorFormat": "Veuillez saisir une date valide au format jour/mois/année. Par exemple: 31/12/2020.",
 	"tokenExpirationErrorPeriod": "La date saisie est déjà passée. Veuillez saisir une date dans le futur.",
 	"tokenExpirationError": "Quelques chose s'est mal passé, merci de réessayer. Si le problème persiste, contactez un administrateur."
 }
diff --git a/src/services/user.service.js b/src/services/user.service.js
@@ -211,4 +211,17 @@ export default class UserService extends Service{
             error(err);
         });
     }
+
+    deleteToken(user_id, then, error){
+        return this.axios({
+            url: this.controllerName + '/token/' + user_id,
+            method: 'delete',
+        })
+        .then(resp => {
+            then()
+        })
+        .catch(err => {
+            error(err);
+        });
+    }
 }
diff --git a/src/views/User/UserDetail.vue b/src/views/User/UserDetail.vue
@@ -248,13 +248,23 @@
 				<div id="user-token-container" class="form-block" tabindex="-1">
 					<p aria-live="polite">
 						<span v-if="tokenValidity.expiration" class="user-token-expiration">
-							<span>token: ******</span>
+							<span>Token: ******</span>
+
 							<span>{{ $t("user.tokenExpiration") + " " + tokenValidity.expiration }}</span>
+
+							<button
+								class="btn btn--icon btn--nude btn-delete"
+								@click="deleteToken">
+								<icon-base-decorative>
+									<icon-delete/>
+								</icon-base-decorative>
+								<span>{{ $t('action.delete') }}</span>
+							</button>
 						</span>
 					</p>
 
 					<fieldset>
-						<legend>Générer un nouveau token</legend>
+						<legend>{{ $t("user.tokenExpirationLegend") }}</legend>
 
 						<div class="form-row form-token">
 							<div class="form-column">
@@ -266,7 +276,7 @@
 									<input
 										v-bind:class="{ 'has-error': tokenValidity.error}"
 										class="input"
-										type="text"
+										type="date"
 										name="token-validity"
 										id="token-validity"
 										v-model=" tokenValidity.computedExpiration"
@@ -368,6 +378,7 @@
 import IconBaseDecorative from "../../components//icons/IconBaseDecorative";
 import IconArrowBlue from "../../components//icons/IconArrowBlue";
 import IconPlus from "../../components/icons/IconPlus";
+import IconDelete from '@/components/icons/IconDelete'
 import Breadcrumbs from "../../components/Breadcrumbs";
 import ProfileContractTable from "./ProfileContractTable";
 import BackToTop from "../../components/BackToTop";
@@ -381,6 +392,7 @@ export default {
 		IconBaseDecorative,
 		IconArrowBlue,
 		IconPlus,
+		IconDelete,
 		ProfileContractTable,
 		Breadcrumbs,
 		BackToTop,
@@ -592,20 +604,11 @@ export default {
 		},
 		generateToken() {
 			this.userToken = null;
+			this.tokenTooltipDisplayed = false;
 			const now = Date.now();
 
 			try {
-				const targetDate = this.tokenValidity.computedExpiration.split(
-					"/"
-				);
-				const year = targetDate[2];
-				const month =
-					"fr" === this.$i18n.locale ? targetDate[1] : targetDate[0];
-				const day =
-					"fr" === this.$i18n.locale ? targetDate[0] : targetDate[1];
-				const expiration = new Date(
-					month + "/" + day + "/" + year + " 02:00:00"
-				);
+				const expiration = new Date(this.tokenValidity.computedExpiration);
 
 				if (isNaN(expiration)) {
 					this.tokenValidity.error = this.$i18n.t(
@@ -623,8 +626,7 @@ export default {
 							this.tokenValidity.error = null;
 							this.userToken = data;
 							this.getTokenExpiration();
-							this.tokenTooltipDisplayed = !this
-								.tokenTooltipDisplayed;
+							this.tokenTooltipDisplayed = true;
 							this.screenReaderInfo = "";
 							this.copyButtonText = this.$i18n.t("action.copy");
 
@@ -671,7 +673,6 @@ export default {
 		},
 		copyToken() {
 			let elementToken = document.getElementById("user_token");
-			elementToken.select();
 
 			try {
 				navigator.clipboard.writeText(elementToken.value);
@@ -682,18 +683,26 @@ export default {
 					"resultAudit.copyLink.sucessHelp"
 				);
 
-				setTimeout(() => {
-					this.tokenTooltipDisplayed = !this.tokenTooltipDisplayed;
-					this.userToken = "";
-				}, 400);
 			} catch (err) {
 				this.copyButtonText = this.$i18n.t("resultAudit.copyLink.fail");
 				this.screenReaderInfo = this.$i18n.t(
 					"resultAudit.copyLink.failHelp"
 				);
 			}
-
-			elementToken.closest("#user-token-container").focus();
+		},
+		deleteToken() {
+			if(this.tokenValidity.expiration) {
+				this.userService.deleteToken(
+					this.user.id,
+					data => {
+						this.tokenValidity.expiration = null;
+						this.tokenValidity.error = null;
+						this.userToken = null;
+						this.tokenTooltipDisplayed = false;
+					},
+					error => console.error(error)
+				);
+			}
 		},
 		loadContracts(page, size) {
 			this.contractService.findByUserId(
@@ -786,7 +795,9 @@ export default {
 	min-height: 50px;
 }
 
-.user-token-expiration span:first-child() {
-	margin-right: 1rem;
+.user-token-expiration {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 1rem;
 }
 </style>