my.home-assistant.io/src-11ty/redirect-page.html

126 lines
2.8 KiB
HTML

---
layout: base
javascript_source: my-redirect.js
pagination:
data: redirects
size: 1
alias: redirect
permalink: "redirect/{{ redirect.redirect }}/"
---
<style>
.ha-card {
min-height: 150px;
display: flex;
flex-direction: column;
border-top: 8px solid #03a9f4;
}
.card-content {
flex: 1;
}
.card-actions {
padding: 0 8px;
height: 60px;
}
.card-actions a {
text-decoration: none;
}
.fake-button {
padding: 0 24px;
line-height: 40px;
color: rgba(0, 0, 0, 0.38);
font-size: 14px;
font-weight: 500;
border: 1px solid rgba(0, 0, 0, 0.38);
border-radius: 9999px;
}
.instance-footer {
font-size: 14px;
padding: 16px 16px 0;
line-break: anywhere;
}
.instance-footer a {
text-decoration: none;
}
.instance-footer svg {
width: 16px;
height: 16px;
position: relative;
bottom: -3px;
}
.highlight {
display: none;
}
.warning {
position: relative;
padding: 8px;
display: flex;
}
.warning::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.12;
pointer-events: none;
content: "";
border-radius: 4px;
background-color: #ffa600;
}
svg {
z-index: 1;
color: #ffa600;
height: 24px;
margin-right: 8px;
}
</style>
<div class="ha-card">
{% if redirect.custom %}
<div class="warning">
<svg fill="#ffa600" viewBox="0 0 24 24">
<g><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></g>
</svg>
This link redirects to a custom integration.
</div>
{% endif %}
{% if redirect.redirect == "oauth" %}
<h1 class="card-header">Link account to Home Assistant?</h1>
<div class="card-content">
Linking your account will grant your Home Assistant instance access to your
account. All credentials are stored locally.
</div>
{% else %}
<h1 class="card-header">Open page in your Home Assistant?</h1>
<div class="card-content">
You've been linked to the page that will {{ redirect.description }}.
</div>
{% endif %}
<div class="highlight">
It looks like you came back to this page after you clicked the link. If the
link didn't work, make sure your instance URL below is correct and check
<a href="/faq#404">our troubleshooting steps</a>.
</div>
{% if redirect.redirect == "oauth" %}
<div class="card-actions">
<div class="fake-button decline-link">Decline</div>
<div class="fake-button open-link">Link account</div>
</div>
{% else %}
<div class="card-actions">
<div></div>
<div class="fake-button open-link">Open link</div>
</div>
{% endif %}
</div>
<div class="instance-footer"></div>
<script>
window.redirect = {{ redirect | stringify }};
</script>