@escalated-dev/escalated 0.8.0 → 0.11.1

package/src/pages/Admin/Settings/PublicTickets.vue

@@ -0,0 +1,163 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+/**
+ * What happens to a ticket raised by someone who is not signed in.
+ *
+ * The three modes are the guest policy: leave it unattached, attach it to a
+ * standing guest account, or ask the person to sign up before it is accepted.
+ * Each backend stores these as three settings, and the second and third each
+ * need one value alongside the mode.
+ */
+const props = defineProps({
+    settings: { type: Object, default: () => ({}) },
+});
+
+const MODES = [
+    {
+        value: 'unassigned',
+        label: 'Leave unattached',
+        description: 'The ticket is stored with the guest name and email and no user behind it.',
+    },
+    {
+        value: 'guest_user',
+        label: 'Attach to a guest account',
+        description: 'Every guest ticket is owned by one standing account, so agents see a consistent requester.',
+    },
+    {
+        value: 'prompt_signup',
+        label: 'Ask the guest to sign up',
+        description: 'The guest is sent to your sign-up page before the ticket is accepted.',
+    },
+];
+
+const form = useForm({
+    guest_policy_mode: props.settings?.guest_policy_mode ?? 'unassigned',
+    guest_policy_user_id: props.settings?.guest_policy_user_id ?? '',
+    guest_policy_signup_url_template: props.settings?.guest_policy_signup_url_template ?? '',
+});
+
+const needsUserId = computed(() => form.guest_policy_mode === 'guest_user');
+const needsSignupUrl = computed(() => form.guest_policy_mode === 'prompt_signup');
+
+function submit() {
+    form.post(route('escalated.admin.settings.public-tickets.update'));
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Public Tickets">
+        <div class="mx-auto max-w-2xl">
+            <div class="mb-6">
+                <Link
+                    :href="route('escalated.admin.settings')"
+                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    &larr; Back to Settings
+                </Link>
+            </div>
+
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <h2 class="text-lg font-semibold text-[var(--esc-panel-text-secondary)]">Public Tickets</h2>
+                <p class="mt-1 text-sm text-[var(--esc-panel-text-muted)]">
+                    How a ticket raised by someone who is not signed in is recorded.
+                </p>
+
+                <form class="mt-6 space-y-6" @submit.prevent="submit">
+                    <fieldset class="space-y-3">
+                        <legend class="mb-1.5 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            Guest policy
+                        </legend>
+
+                        <label
+                            v-for="mode in MODES"
+                            :key="mode.value"
+                            class="flex cursor-pointer gap-3 rounded-lg border p-3 transition-colors"
+                            :class="
+                                form.guest_policy_mode === mode.value
+                                    ? 'border-[var(--esc-panel-accent)]/40 bg-[var(--esc-panel-hover)]'
+                                    : 'border-[var(--esc-panel-border)] hover:bg-[var(--esc-panel-hover)]'
+                            "
+                        >
+                            <input
+                                v-model="form.guest_policy_mode"
+                                type="radio"
+                                name="guest_policy_mode"
+                                :value="mode.value"
+                                class="mt-1"
+                            />
+                            <span>
+                                <span class="block text-sm text-[var(--esc-panel-text-secondary)]">
+                                    {{ mode.label }}
+                                </span>
+                                <span class="block text-xs text-[var(--esc-panel-text-muted)]">
+                                    {{ mode.description }}
+                                </span>
+                            </span>
+                        </label>
+
+                        <p v-if="form.errors.guest_policy_mode" class="text-xs text-red-400">
+                            {{ form.errors.guest_policy_mode }}
+                        </p>
+                    </fieldset>
+
+                    <div v-if="needsUserId">
+                        <label
+                            class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            for="guest-user-id"
+                        >
+                            Guest account user ID
+                        </label>
+                        <input
+                            id="guest-user-id"
+                            v-model="form.guest_policy_user_id"
+                            type="number"
+                            min="1"
+                            required
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-accent)]/40 focus:outline-none"
+                        />
+                        <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                            The id of an existing user in your application. Every guest ticket is attached to it.
+                        </p>
+                        <p v-if="form.errors.guest_policy_user_id" class="mt-1 text-xs text-red-400">
+                            {{ form.errors.guest_policy_user_id }}
+                        </p>
+                    </div>
+
+                    <div v-if="needsSignupUrl">
+                        <label
+                            class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            for="signup-url"
+                        >
+                            Sign-up URL
+                        </label>
+                        <input
+                            id="signup-url"
+                            v-model="form.guest_policy_signup_url_template"
+                            type="text"
+                            maxlength="500"
+                            placeholder="/register?email={email}"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-accent)]/40 focus:outline-none"
+                        />
+                        <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                            <code>{email}</code> is replaced with the address the guest entered.
+                        </p>
+                        <p v-if="form.errors.guest_policy_signup_url_template" class="mt-1 text-xs text-red-400">
+                            {{ form.errors.guest_policy_signup_url_template }}
+                        </p>
+                    </div>
+
+                    <button
+                        type="submit"
+                        :disabled="form.processing"
+                        class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+                    >
+                        Save settings
+                    </button>
+                </form>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Settings/SsoSettings.vue

@@ -8,14 +8,34 @@ const form = useForm({
     sso_provider: props.settings.sso_provider ?? 'none',
     sso_entity_id: props.settings.sso_entity_id ?? '',
     sso_url: props.settings.sso_url ?? '',
+    sso_login_url: props.settings.sso_login_url ?? props.settings.sso_url ?? '',
+    sso_logout_url: props.settings.sso_logout_url ?? '',
+    sso_metadata_url: props.settings.sso_metadata_url ?? '',
     sso_certificate: props.settings.sso_certificate ?? '',
     sso_attr_email: props.settings.sso_attr_email ?? 'email',
     sso_attr_name: props.settings.sso_attr_name ?? 'name',
     sso_attr_role: props.settings.sso_attr_role ?? 'role',
     sso_jwt_secret: props.settings.sso_jwt_secret ?? '',
     sso_jwt_algorithm: props.settings.sso_jwt_algorithm ?? 'HS256',
+    sso_oauth_authorize_url: props.settings.sso_oauth_authorize_url ?? '',
+    sso_oauth_token_url: props.settings.sso_oauth_token_url ?? '',
+    sso_oauth_userinfo_url: props.settings.sso_oauth_userinfo_url ?? '',
+    sso_oauth_client_id: props.settings.sso_oauth_client_id ?? '',
+    sso_oauth_client_secret: props.settings.sso_oauth_client_secret ?? '',
+    sso_oauth_scopes: props.settings.sso_oauth_scopes ?? 'openid profile email',
 });
 
+function readCertificate(event) {
+    const [file] = event.target.files ?? [];
+    if (!file) return;
+
+    const reader = new window.FileReader();
+    reader.onload = () => {
+        form.sso_certificate = typeof reader.result === 'string' ? reader.result : '';
+    };
+    reader.readAsText(file);
+}
+
 function submit() {
     form.post(route('escalated.admin.settings.sso.update'));
 }
@@ -42,6 +62,7 @@ function submit() {
                             <option value="none">None (disabled)</option>
                             <option value="saml">SAML 2.0</option>
                             <option value="jwt">JWT</option>
+                            <option value="oauth">OAuth 2.0 / OIDC</option>
                         </select>
                     </div>
                 </div>
@@ -72,16 +93,48 @@ function submit() {
                         </div>
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">SSO URL</label>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Login URL</label
+                        >
                         <p class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]">The Single Sign-On URL endpoint</p>
                         <input
-                            v-model="form.sso_url"
+                            v-model="form.sso_login_url"
                             type="url"
                             placeholder="https://idp.example.com/sso"
                             class="mt-2 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
                         />
-                        <div v-if="form.errors.sso_url" class="mt-1 text-sm text-rose-400">
-                            {{ form.errors.sso_url }}
+                        <div v-if="form.errors.sso_login_url" class="mt-1 text-sm text-rose-400">
+                            {{ form.errors.sso_login_url }}
+                        </div>
+                    </div>
+                    <div class="grid gap-5 md:grid-cols-2">
+                        <div>
+                            <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Logout URL</label
+                            >
+                            <input
+                                v-model="form.sso_logout_url"
+                                type="url"
+                                placeholder="https://idp.example.com/logout"
+                                class="mt-2 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                            <div v-if="form.errors.sso_logout_url" class="mt-1 text-sm text-rose-400">
+                                {{ form.errors.sso_logout_url }}
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Metadata URL</label
+                            >
+                            <input
+                                v-model="form.sso_metadata_url"
+                                type="url"
+                                placeholder="https://idp.example.com/metadata"
+                                class="mt-2 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                            <div v-if="form.errors.sso_metadata_url" class="mt-1 text-sm text-rose-400">
+                                {{ form.errors.sso_metadata_url }}
+                            </div>
                         </div>
                     </div>
                     <div>
@@ -91,6 +144,12 @@ function submit() {
                         <p class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]">
                             X.509 certificate from your Identity Provider (PEM format)
                         </p>
+                        <input
+                            type="file"
+                            accept=".pem,.crt,.cer,.txt"
+                            class="mt-2 block text-xs text-[var(--esc-panel-text-muted)]"
+                            @change="readCertificate"
+                        />
                         <textarea
                             v-model="form.sso_certificate"
                             rows="6"
@@ -139,6 +198,8 @@ function submit() {
                             <option value="HS384">HS384</option>
                             <option value="HS512">HS512</option>
                             <option value="RS256">RS256</option>
+                            <option value="RS384">RS384</option>
+                            <option value="RS512">RS512</option>
                         </select>
                     </div>
                     <div>
@@ -156,6 +217,98 @@ function submit() {
                 </div>
             </div>
 
+            <div
+                v-if="form.sso_provider === 'oauth'"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
+            >
+                <h3 class="mb-5 text-sm font-semibold text-[var(--esc-panel-text)]">OAuth / OIDC Configuration</h3>
+                <div class="space-y-5">
+                    <div class="grid gap-5 md:grid-cols-2">
+                        <div>
+                            <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Authorize URL</label
+                            >
+                            <input
+                                v-model="form.sso_oauth_authorize_url"
+                                type="url"
+                                placeholder="https://idp.example.com/oauth/authorize"
+                                class="mt-2 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                            <div v-if="form.errors.sso_oauth_authorize_url" class="mt-1 text-sm text-rose-400">
+                                {{ form.errors.sso_oauth_authorize_url }}
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Token URL</label
+                            >
+                            <input
+                                v-model="form.sso_oauth_token_url"
+                                type="url"
+                                placeholder="https://idp.example.com/oauth/token"
+                                class="mt-2 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                            <div v-if="form.errors.sso_oauth_token_url" class="mt-1 text-sm text-rose-400">
+                                {{ form.errors.sso_oauth_token_url }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="grid gap-5 md:grid-cols-2">
+                        <div>
+                            <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Userinfo URL</label
+                            >
+                            <input
+                                v-model="form.sso_oauth_userinfo_url"
+                                type="url"
+                                placeholder="https://idp.example.com/oauth/userinfo"
+                                class="mt-2 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                            <div v-if="form.errors.sso_oauth_userinfo_url" class="mt-1 text-sm text-rose-400">
+                                {{ form.errors.sso_oauth_userinfo_url }}
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Scopes</label
+                            >
+                            <input
+                                v-model="form.sso_oauth_scopes"
+                                type="text"
+                                placeholder="openid profile email"
+                                class="mt-2 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                        </div>
+                    </div>
+                    <div class="grid gap-5 md:grid-cols-2">
+                        <div>
+                            <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Client ID</label
+                            >
+                            <input
+                                v-model="form.sso_oauth_client_id"
+                                type="text"
+                                placeholder="escalated-admin"
+                                class="mt-2 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                            <div v-if="form.errors.sso_oauth_client_id" class="mt-1 text-sm text-rose-400">
+                                {{ form.errors.sso_oauth_client_id }}
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Client Secret</label
+                            >
+                            <input
+                                v-model="form.sso_oauth_client_secret"
+                                type="password"
+                                class="mt-2 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- Attribute Mapping -->
             <div
                 v-if="form.sso_provider !== 'none'"

package/src/pages/Admin/Settings/TwoFactor.vue

@@ -12,6 +12,7 @@ defineProps({
 const page = usePage();
 const showSetup = ref(false);
 const setupData = computed(() => page.props.flash?.two_factor_setup);
+const confirmedData = computed(() => page.props.flash?.two_factor_confirmed);
 
 function startSetup() {
     router.post(
@@ -98,12 +99,37 @@ function disable() {
                 v-if="setupData && !enabled"
                 class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
             >
-                <TwoFactorSetup
-                    :qr-uri="setupData.qr_uri"
-                    :recovery-codes="setupData.recovery_codes"
-                    @confirm="confirmCode"
-                    @cancel="showSetup = false"
-                />
+                <TwoFactorSetup :qr-uri="setupData.qr_uri" @confirm="confirmCode" @cancel="showSetup = false" />
+            </div>
+
+            <div
+                v-if="confirmedData?.recovery_codes?.length"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
+            >
+                <div class="flex items-start justify-between gap-4">
+                    <div>
+                        <h3 class="text-sm font-semibold text-[var(--esc-panel-text)]">Recovery Codes</h3>
+                        <p class="mt-2 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            Save these codes now. Each one can be used once if you lose access to your authenticator.
+                        </p>
+                    </div>
+                    <button
+                        type="button"
+                        class="rounded-lg border border-[var(--esc-panel-border)] px-4 py-2 text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-surface-alt)]"
+                        @click="navigator.clipboard?.writeText(confirmedData.recovery_codes.join('\n'))"
+                    >
+                        Copy Codes
+                    </button>
+                </div>
+                <div class="mt-4 grid gap-2 md:grid-cols-2">
+                    <code
+                        v-for="code in confirmedData.recovery_codes"
+                        :key="code"
+                        class="rounded-lg bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-center text-sm font-mono text-[var(--esc-panel-text-secondary)]"
+                    >
+                        {{ code }}
+                    </code>
+                </div>
             </div>
         </div>
     </EscalatedLayout>