-
Notifications
You must be signed in to change notification settings - Fork 7
/
login.tmpl
117 lines (112 loc) · 4.05 KB
/
login.tmpl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unikorn Identity</title>
<link rel="icon" href="https://assets.unikorn-cloud.org/images/logos/light-on-dark/icon.svg">
<link rel="stylesheet" href="https://assets.unikorn-cloud.org/css/base.css">
<style>
body {
background-image: var(--background-image);
background-size: cover;
height: 100vh;
}
#container {
height: 100vh;
margin: auto;
max-width: 400px;
background-color: var(--overlay-light);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--padding);
backdrop-filter: blur(--padding);
box-shadow: 0 0 var(--radius) var(--shadow);
}
header {
color: white;
padding: var(--padding);
}
header > img {
height: 2.2em;
width: auto;
}
main {
padding: var(--padding);
display: flex;
flex-direction: column;
gap: var(--padding);
flex-grow: 1;
}
main > p {
text-align: center;
font-weight: bold;
}
footer {
color: var(--mid-grey);
padding: var(--padding);
display: flex;
flex-direction: column;
gap: var(--padding);
font-size: 0.75em;
text-align: center;
}
form {
display: flex;
flex-direction: column;
gap: 2rem;
}
section {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media only screen and (min-width: 720px) {
#container {
margin-left: 100px;
}
}
</style>
<script>
function submitWithProvider(provider) {
const providerInput = document.getElementById('provider');
providerInput.value = provider;
const form = document.getElementById('form');
form.submit();
}
</script>
</head>
<body>
<div id="container">
<header>
<img src="https://assets.unikorn-cloud.org/images/logos/light-on-dark/logo.svg" />
</header>
<main>
<form id="form" method="post" action="/oauth2/v2/login">
<!-- Use this to hold state across the dialog -->
<input id="state" name="state" type="hidden" value="{{ .state }}" />
<!-- Use this to cummuncate the provider to use -->
<input id="provider" name="provider" type="hidden" value=""/>
<section>
<p>Enter your e-mail address to continue if using a domain login</p>
<input id="email" name="email" type="email" placeholder="[email protected]" autocomplete="email" required />
<input id="input" type="submit" value="Login" />
</section>
<section>
<p>or login with your provider</p>
<button onclick="submitWithProvider('google')">
<svg xmlns="http://www.w3.org/2000/svg" width="0.98em" height="1em" viewBox="0 0 256 262"><path fill="#4285f4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"/><path fill="#34a853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"/><path fill="#fbbc05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"/><path fill="#eb4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"/></svg>
<span>Google</span>
</button>
<button onclick="submitWithProvider('microsoft')">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"/><path fill="#80cc28" d="M256 121.666H134.335V0H256z"/><path fill="#00adef" d="M121.663 256.002H0V134.336h121.663z"/><path fill="#fbbc09" d="M256 256.002H134.335V134.336H256z"/></svg>
<span>Microsoft</span>
</button>
</section>
</form>
</main>
<footer>
<p>Copyright © 2024 the Unikorn Authors.</p>
</footer>
</div>
</body>
</html>