fix

resources/css/app.css

@@ -21,7 +21,7 @@ input[type="checkbox"] {
     @apply toggle toggle-warning toggle-xs rounded;
 }
 input {
-    @apply input input-sm h-7 outline-none placeholder:text-neutral-700 text-white rounded-none;
+    @apply input input-sm h-7 outline-none placeholder:text-neutral-700 text-white rounded;
 }
 input[type="text"],
 [type="number"],
@@ -35,10 +35,10 @@ label {
 }
 
 textarea {
-    @apply textarea placeholder:text-neutral-700 text-white rounded-none scrollbar;
+    @apply textarea placeholder:text-neutral-700 text-white rounded scrollbar;
 }
 select {
-    @apply select select-sm text-sm disabled:bg-coolgray-200 border-none disabled:opacity-50 font-normal placeholder:text-neutral-700 text-white rounded-none;
+    @apply select select-sm text-sm disabled:bg-coolgray-200 border-none disabled:opacity-50 font-normal placeholder:text-neutral-700 text-white rounded;
 }
 .loading {
     @apply w-4 text-warning;
@@ -79,7 +79,7 @@ .icon:hover {
     @apply text-white;
 }
 .box {
-    @apply flex items-center justify-center text-sm rounded-none min-h-12 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white p-2 hover:no-underline transition-colors;
+    @apply flex items-center justify-center text-sm rounded min-h-12 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white p-2 hover:no-underline transition-colors;
 }
 
 /* .main-menu {
@@ -93,7 +93,7 @@ .magic-badge {
     @apply min-w-fit px-2 rounded text-center border border-dotted border-primary text-white text-xs;
 }
 .magic-input {
-    @apply input input-sm w-80 xl:w-96 placeholder:text-neutral-700 text-sm rounded-none;
+    @apply input input-sm w-80 xl:w-96 placeholder:text-neutral-700 text-sm rounded;
 }
 .magic-items {
     @apply absolute top-12 mt-2 w-[24rem] bg-coolgray-200 rounded  z-50;

resources/js/components/MagicBar.vue

@@ -503,7 +503,6 @@ async function redirect() {
     let targetUrl = new URL(window.location.origin)
     const selected = sequenceState.value.selected
     const { main, destination = null, project = null, environment = null, server = null } = selected
-    console.log({ main })
     switch (main) {
         case 1:
             targetUrl.pathname = `/project/${project}/${environment}/new`

resources/views/components/forms/input.blade.php

@@ -35,11 +35,32 @@ class="w-4 h-4 stroke-current">
             </span>
         </label>
     @endif
+    @if ($type === 'password')
+        <div class="join" x-data>
+            <input class="w-full border-r-0 rounded-l join-item" type={{ $type }}
+                @if ($id) id={{ $id }} name={{ $id }} wire:model.defer={{ $id }} @endisset
+        @if ($disabled !== null) disabled @endif
+                @if ($required !== null) required @endif @if ($readonly !== null) readonly @endif
+                @if (!$noDirty && $id) wire:dirty.class="input-warning" @endif {{ $attributes }} />
+            @if ($type === 'password')
+                <span x-on:click="changeType('{{ $id }}')" x-cloak
+                    class="border-l-0 rounded-r no-animation h-7 btn join-item btn-xs bg-coolgray-200 "><svg
+                        xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                        <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+                    </svg></span>
+            @endif
+        </div>
+    @else
         <input type={{ $type }}
             @if ($id) name={{ $id }} wire:model.defer={{ $id }} @endisset
         @if ($disabled !== null) disabled @endif
             @if ($required !== null) required @endif @if ($readonly !== null) readonly @endif
             @if (!$noDirty && $id) wire:dirty.class="input-warning" @endif {{ $attributes }} />
+    @endif
+
     @error($id)
         <label class="label">
             <span class="text-red-500 label-text-alt">{{ $message }}</span>

resources/views/components/layout.blade.php

@@ -38,6 +38,17 @@
     <x-version class="fixed left-2 bottom-1" />
     @auth
         <script>
+            function changeType(id) {
+                console.log(id)
+                const input = document.getElementById(id);
+                console.log(input)
+                if (input.type === 'password') {
+                    input.type = 'text';
+                } else {
+                    input.type = 'password';
+                }
+            }
+
             function copyToClipboard(text) {
                 navigator.clipboard.writeText(text);
                 Livewire.emit('message', 'Copied to clipboard.');

resources/views/livewire/source/github/change.blade.php

@@ -71,7 +71,7 @@
             <div class="flex gap-2">
                 <x-forms.input id="github_app.client_id" label="Client Id" type="password" disabled />
                 <x-forms.input id="github_app.client_secret" label="Client Secret" type="password" disabled />
-                <x-forms.input id="github_app.webhook_secret" label="Webhook Secret" type="password" disabled />
+                <x-forms.input id="github_app.webhook_secret" label="Webhook Secret" type="password" />
             </div>
             <x-forms.checkbox noDirty label="System Wide?"
                 helper="If checked, this GitHub App will be available for everyone in this Coolify instance."