package templates
import (
"github.com/chasefleming/elem-go"
"github.com/chasefleming/elem-go/attrs"
)
// headscaleLogo returns the Headscale SVG logo as raw HTML
func headscaleLogo() elem.Node {
return elem.Raw(``)
}
// checkboxIcon returns the success checkbox SVG icon as raw HTML
func checkboxIcon() elem.Node {
return elem.Raw(``)
}
// externalLinkIcon returns the external link SVG icon as raw HTML
func externalLinkIcon() elem.Node {
return elem.Raw(``)
}
// oidcCallbackStyles returns the CSS styles for the OIDC callback page
func oidcCallbackStyles() *elem.Element {
return elem.Style(nil, elem.Text(`
body {
font-size: 14px;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
}
hr {
border-color: #fdfdfe;
margin: 24px 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 70vh;
}
#logo {
display: block;
margin-left: -20px;
margin-bottom: 16px;
}
.message {
display: flex;
min-width: 40vw;
background: #fafdfa;
border: 1px solid #c6e9c9;
margin-bottom: 12px;
padding: 12px 16px 16px 12px;
position: relative;
border-radius: 2px;
font-size: 14px;
}
.message-content {
margin-left: 4px;
}
.message #checkbox {
fill: #2eb039;
}
.message .message-title {
color: #1e7125;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.message .message-body {
border: 0;
margin-top: 4px;
}
.message p {
font-size: 12px;
margin: 0;
padding: 0;
color: #17421b;
}
a {
display: block;
margin: 8px 0;
color: #1563ff;
text-decoration: none;
font-weight: 600;
}
a:hover {
color: black;
}
a svg {
fill: currentcolor;
}
.icon {
align-items: center;
display: inline-flex;
justify-content: center;
height: 21px;
width: 21px;
vertical-align: middle;
}
h1 {
font-size: 17.5px;
font-weight: 700;
margin-bottom: 0;
}
h1 + p {
margin: 8px 0 16px 0;
}
`))
}
// OIDCCallback renders the OIDC authentication success callback page
func OIDCCallback(user, verb string) *elem.Element {
return elem.Html(attrs.Props{attrs.Lang: "en"},
elem.Head(nil,
elem.Meta(attrs.Props{attrs.Charset: "UTF-8"}),
elem.Meta(attrs.Props{
attrs.HTTPequiv: "X-UA-Compatible",
attrs.Content: "IE=edge",
}),
elem.Meta(attrs.Props{
attrs.Name: "viewport",
attrs.Content: "width=device-width, initial-scale=1.0",
}),
elem.Title(nil, elem.Text("Headscale Authentication Succeeded")),
oidcCallbackStyles(),
),
elem.Body(attrs.Props{"translate": "no"},
elem.Div(attrs.Props{attrs.Class: "container"},
elem.Div(nil,
headscaleLogo(),
elem.Div(attrs.Props{attrs.Class: "message is-success"},
checkboxIcon(),
elem.Div(attrs.Props{attrs.Class: "message-content"},
elem.Div(attrs.Props{attrs.Class: "message-title"},
elem.Text("Signed in via your OIDC provider"),
),
elem.P(attrs.Props{attrs.Class: "message-body"},
elem.Text(verb),
elem.Text(" as "),
elem.Text(user),
elem.Text(", you can now close this window."),
),
),
),
elem.Hr(nil),
elem.H1(nil, elem.Text("Not sure how to get started?")),
elem.P(attrs.Props{attrs.Class: "learn"},
elem.Text("Check out beginner and advanced guides on, or read more in the documentation."),
),
elem.A(attrs.Props{
attrs.Href: "https://github.com/juanfont/headscale/tree/main/docs",
attrs.Rel: "noreferrer noopener",
attrs.Target: "_blank",
},
elem.Span(attrs.Props{attrs.Class: "icon"},
externalLinkIcon(),
),
elem.Text("View the headscale documentation"),
),
elem.A(attrs.Props{
attrs.Href: "https://tailscale.com/kb/",
attrs.Rel: "noreferrer noopener",
attrs.Target: "_blank",
},
elem.Span(attrs.Props{attrs.Class: "icon"},
externalLinkIcon(),
),
elem.Text("View the tailscale documentation"),
),
),
),
),
)
}