Client - display client secret after creation

fittrackee_client/src/components/User/UserApps/UserApp.vue

@@ -8,9 +8,16 @@
       @cancelAction="updateDisplayModal(false)"
     />
     <div v-if="client && client.client_id">
+      <div class="info-box success-message" v-if="afterCreation">
+        {{ $t('oauth2.APP_CREATED_SUCCESSFULLY') }}
+      </div>
       <dl>
         <dt>{{ $t('oauth2.APP.CLIENT_ID') }}:</dt>
         <dd>{{ client.client_id }}</dd>
+        <dt v-if="afterCreation && client.client_secret">
+          {{ $t('oauth2.APP.CLIENT_SECRET') }}:
+        </dt>
+        <dd>{{ client.client_secret }}</dd>
         <dt>{{ capitalize($t('oauth2.APP.ISSUE_AT')) }}:</dt>
         <dd>
           {{
@@ -68,6 +75,7 @@
     toRefs,
     ref,
     onUnmounted,
+    withDefaults,
   } from 'vue'
   import { useRoute } from 'vue-router'
 
@@ -79,13 +87,15 @@
 
   interface Props {
     authUser: IAuthUserProfile
+    afterCreation?: boolean
   }
-  const props = defineProps<Props>()
-
+  const props = withDefaults(defineProps<Props>(), {
+    afterCreation: false,
+  })
   const route = useRoute()
   const store = useStore()
 
-  const { authUser } = toRefs(props)
+  const { afterCreation, authUser } = toRefs(props)
   const client: ComputedRef<IOAuth2Client> = computed(
     () => store.getters[OAUTH2_STORE.GETTERS.CLIENT]
   )
@@ -96,11 +106,13 @@
   })
 
   function loadClient() {
-    if (route.params.clientId && typeof route.params.clientId === 'string') {
-      store.dispatch(
-        OAUTH2_STORE.ACTIONS.GET_CLIENT_BY_ID,
-        +route.params.clientId
-      )
+    // after creation, client is already in store
+    if (
+      !afterCreation.value &&
+      route.params.id &&
+      typeof route.params.id === 'string'
+    ) {
+      store.dispatch(OAUTH2_STORE.ACTIONS.GET_CLIENT_BY_ID, +route.params.id)
     }
   }
   function deleteClient(clientId: number) {

fittrackee_client/src/components/User/UserApps/UserAppsList.vue

@@ -3,7 +3,7 @@
     <p class="apps-list">{{ $t('oauth2.APPS_LIST') }}</p>
     <ul v-if="clients.length > 0">
       <li v-for="client in clients" :key="client.client_id">
-        <router-link :to="{ name: 'UserApp', params: { clientId: client.id } }">
+        <router-link :to="{ name: 'UserApp', params: { id: client.id } }">
           {{ client.name }}
         </router-link>
         <span class="app-issued-at">

fittrackee_client/src/locales/en/oauth2.json

@@ -1,7 +1,8 @@
 {
   "ADD_A_NEW_APP": "Add a new OAuth2 application",
   "APP": {
-    "CLIENT_ID": "Client ID",
+    "CLIENT_ID": "Id",
+    "CLIENT_SECRET": "Secret",
     "DESCRIPTION": "Application description",
     "ISSUE_AT": "issue at",
     "NAME": "Application name",
@@ -14,6 +15,7 @@
     "URL": "Application URI"
   },
   "APP_DELETION_CONFIRMATION": "Are you sure you want to delete this app?",
+  "APP_CREATED_SUCCESSFULLY": "Application created successfully. Make sure to copy the secret now, it won't show up again.",
   "APPS_LIST": "OAuth2 applications",
   "DELETE_APP": "Delete application",
   "NEW_APP": "New OAuth App",

fittrackee_client/src/locales/fr/oauth2.json

@@ -1,7 +1,8 @@
 {
   "ADD_A_NEW_APP": "Ajouter une nouvelle application OAuth2",
   "APP": {
-    "CLIENT_ID": "Identifiant client",
+    "CLIENT_ID": "Identifiant",
+    "CLIENT_SECRET": "Secret",
     "DESCRIPTION": "Application description",
     "ISSUE_AT": "créée le",
     "NAME": "Nom de l'application",
@@ -14,6 +15,7 @@
     "URL": "URL de l'application"
   },
   "APP_DELETION_CONFIRMATION": "Êtes-vous sûr de vouloir supprimer cette application ?",
+  "APP_CREATED_SUCCESSFULLY": "Application créée avec succès. Assurez-vous de copier le secret maintenant, il ne s'affichera plus.",
   "APPS_LIST": "Applications OAuth2",
   "DELETE_APP": "Supprimer l'application",
   "NEW_APP": "Ajouter une App OAuth",

fittrackee_client/src/router/index.ts

@@ -159,10 +159,16 @@ const routes: Array<RouteRecordRaw> = [
                 component: UserAppsList,
               },
               {
-                path: ':clientId',
+                path: ':id',
                 name: 'UserApp',
                 component: UserApp,
               },
+              {
+                path: ':id/created',
+                name: 'CreatedUserApp',
+                component: UserApp,
+                props: { afterCreation: true },
+              },
               {
                 path: 'new',
                 name: 'AddUserApp',

fittrackee_client/src/store/modules/oauth2/actions.ts

@@ -18,9 +18,11 @@ export const actions: ActionTree<IOAuth2State, IRootState> & IOAuth2Actions = {
       .post('oauth/apps', payload)
       .then((res) => {
         if (res.data.status === 'created') {
-          context
-            .dispatch(OAUTH2_STORE.ACTIONS.GET_CLIENTS)
-            .then(() => router.push('/profile/apps'))
+          context.commit(
+            OAUTH2_STORE.MUTATIONS.SET_CLIENT,
+            res.data.data.client
+          )
+          router.push(`/profile/apps/${res.data.data.client.id}/created`)
         } else {
           handleError(context, null)
         }