Display unhashed client secret

front/src/components/auth/ApplicationEdit.vue

@@ -7,6 +7,7 @@ import axios from 'axios'
 import ApplicationForm from '~/components/auth/ApplicationForm.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
+import { useStore } from '~/store'
 
 interface Props {
   id: number
@@ -50,6 +51,10 @@ const refreshToken = async () => {
 }
 
 fetchApplication()
+
+const store = useStore()
+const secret = store.state.auth.applicationSecret
+store.state.auth.applicationSecret = undefined
 </script>
 
 <template>
@@ -89,11 +94,27 @@ fetchApplication()
                 :value="application.client_id"
               />
             </div>
-            <div class="field">
+            <div
+              v-if="secret"
+              class="field"
+            >
+              <div class="ui small warning message">
+                <h3 class="header">
+                  <translate translate-context="*/*/*">
+                    Please, note this token
+                  </translate>
+                </h3>
+                <p>
+                  <translate translate-context="*/*/*">
+                    It won't be possible to view it again.
+                  </translate>
+                </p>
+              </div>
+
               <label for="copy-secret"><translate translate-context="Content/Applications/Label">Application secret</translate></label>
               <copy-input
                 id="copy-secret"
-                :value="application.client_secret"
+                :value="secret"
               />
             </div>
             <div

front/src/components/auth/ApplicationNew.vue

@@ -2,6 +2,9 @@
 import ApplicationForm from '~/components/auth/ApplicationForm.vue'
 import { computed, reactive } from 'vue'
 import { useGettext } from 'vue3-gettext'
+import { useRouter } from 'vue-router'
+import type { Application } from '~/types'
+import { useStore } from '~/store'
 
 interface Props {
   name?: string
@@ -25,6 +28,20 @@ const { $pgettext } = useGettext()
 const labels = computed(() => ({
   title: $pgettext('Content/Settings/Button.Label', 'Create a new application')
 }))
+
+const router = useRouter()
+const store = useStore()
+
+const created = (application: Application) => {
+  store.state.auth.applicationSecret = application.client_secret
+  console.log(application)
+  return router.push({
+    name: 'settings.applications.edit',
+    params: {
+      id: application.client_id
+    }
+  })
+}
 </script>
 
 <template>
@@ -46,7 +63,7 @@ const labels = computed(() => ({
         </h2>
         <application-form
           :defaults="defaults"
-          @created="$router.push({name: 'settings.applications.edit', params: {id: $event.client_id}})"
+          @created="created"
         />
       </section>
     </div>

front/src/store/auth.ts

@@ -16,6 +16,8 @@ export interface State {
   profile: null | User
   oauth: OAuthTokens
   scopedTokens: ScopedTokens
+
+  applicationSecret: string | undefined
 }
 
 interface ScopedTokens {
@@ -71,7 +73,9 @@ const store: Module<State, RootState> = {
     },
     profile: null,
     oauth: getDefaultOauth(),
-    scopedTokens: getDefaultScopedTokens()
+    scopedTokens: getDefaultScopedTokens(),
+
+    applicationSecret: undefined
   },
   getters: {
     header: state => {
@@ -93,6 +97,8 @@ const store: Module<State, RootState> = {
         library: false,
         moderation: false
       }
+
+      state.applicationSecret = undefined
     },
     profile: (state, value) => {
       state.profile = value

front/src/types.ts

@@ -496,6 +496,7 @@ export interface Application {
   name: string
   redirect_uris: string
   scopes: string
+  client_secret: string
 
   // This is actually a date string
   created: string