admin.tsx (2306B)
1 import m from 'mithril'; 2 import { getSession, signOut, type ApiError, type SessionInfo } from '../util/api'; 3 4 export const Admin: m.Component = { 5 session: null as SessionInfo | null, 6 error: null as Error | null, 7 pending: false, 8 9 oninit(this: any) { 10 this.load(); 11 }, 12 13 async load(this: any) { 14 try { 15 this.session = await getSession(); 16 document.title = this.session.realm?.display_name || 'Identity'; 17 } catch (e) { 18 const error = e as ApiError; 19 if (error.status === 401) { 20 m.route.set('/oidc/admin/login'); 21 return; 22 } 23 this.error = error; 24 } 25 m.redraw(); 26 }, 27 28 async signOut(this: any) { 29 this.pending = true; 30 this.error = null; 31 try { 32 await signOut(); 33 m.route.set('/oidc/admin/login'); 34 } catch (e) { 35 this.error = e as Error; 36 this.pending = false; 37 m.redraw(); 38 } 39 }, 40 41 view(this: any) { 42 const session = this.session; 43 const branding = session?.realm?.branding || {}; 44 const primary = typeof branding.primary_color === 'string' ? branding.primary_color : '#25A'; 45 const style = { '--realm-primary': primary } as any; 46 47 if (!session) { 48 return ( 49 <div class="auth-page" style={style}> 50 <div class="auth-card"> 51 <h1>Admin</h1> 52 {this.error ? <p class="auth-error">{this.error.message}</p> : <p class="auth-note">Loading</p>} 53 </div> 54 </div> 55 ); 56 } 57 58 return ( 59 <div class="auth-page" style={style}> 60 <div class="auth-card"> 61 <h1>{session.realm?.display_name || 'Identity'}</h1> 62 <p class="auth-identifier"> 63 Signed in as {session.user.display_name || session.user.username} 64 </p> 65 <p class="auth-note">{session.user.username}</p> 66 <p class="auth-note"> 67 {session.roles.length > 0 ? `Roles: ${session.roles.join(', ')}` : 'No realm roles'} 68 </p> 69 {this.error ? <p class="auth-error">{this.error.message}</p> : null} 70 <div class="auth-actions"> 71 <button class="auth-button" type="button" disabled={this.pending} onclick={() => this.signOut()}> 72 {this.pending ? 'Signing out' : 'Sign out'} 73 </button> 74 </div> 75 </div> 76 </div> 77 ); 78 }, 79 };