fix(front): authorize page

front/src/components/auth/Authorize.vue

@@ -10,6 +10,7 @@ import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useScopes from '~/composables/auth/useScopes'
 import useFormData from '~/composables/useFormData'
 import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
 
 interface Props {
   clientId: string
@@ -113,29 +114,26 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
 </script>
 
 <template>
-  <main
+  <layout main
     v-title="labels.title"
     class="main"
   >
     <section class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>
-          <i class="lock open icon" />{{ t('components.auth.Authorize.header.authorize') }}
+          <i class="bi bi-unlock-fill" />{{ t('components.auth.Authorize.header.authorize') }}
         </h2>
-        <div
+        <Alert red
           v-if="errors.length > 0"
           role="alert"
-          class="ui negative message"
         >
           <h4
             v-if="application"
-            class="header"
           >
             {{ t('components.auth.Authorize.header.authorizeFailure') }}
           </h4>
           <h4
             v-else
-            class="header"
           >
             {{ t('components.auth.Authorize.header.fetchFailure') }}
           </h4>
@@ -147,13 +145,11 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
               {{ error }}
             </li>
           </ul>
-        </div>
-        <div
+        </Alert>
+        <Loader
           v-if="isLoading"
           class="ui inverted active dimmer"
-        >
-          <div class="ui loader" />
-        </div>
+        />
         <form
           v-else-if="application && !code"
           :class="['ui', {loading: isLoading}, 'form']"
@@ -172,7 +168,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
               v-if="topic.write && !topic.read"
               :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
             >
-              <i class="pencil icon" />
+              <i class="bi bi-pencil" />
               {{ t('components.auth.Authorize.header.writeOnly') }}
             </span>
             <span
@@ -185,10 +181,10 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
               v-else-if="topic.write && topic.read"
               :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
             >
-              <i class="pencil icon" />
+              <i class="bi bi-pencil" />
               {{ t('components.auth.Authorize.header.allScopes') }}
             </span>
-            <i :class="[topic.icon, 'icon']" />
+            <i :class="[topic.icon, 'bi']" />
             <div class="content">
               {{ topic.label }}
               <div class="sub header">
@@ -230,5 +226,5 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
         </div>
       </div>
     </section>
-  </main>
+  </layout>
 </template>