smokesignal.events
+6
-14
templates/en-us/login.bare.html
+6
-14
templates/en-us/login.bare.html
···
2
2
{% block content %}
3
3
<section class="section is-fullheight">
4
4
<div class="container is-max-tablet">
5
-
6
5
<div class="box content">
7
-
8
-
<article class="message is-success">
9
-
<div class="message-body">
10
-
<p>
11
-
Log in to Smoke Signal using your AT-Handle, it looks like "@ngerakines.me" or "@alice.bsky.social".
12
-
</p>
13
-
</div>
14
-
</article>
15
-
6
+
<div class="has-text-centered mb-5">
7
+
<h1 class="title is-3 mb-2">Sign in to Smoke Signal</h1>
8
+
<p class="subtitle is-6 has-text-grey">Sign in or create an account in the Atmosphere to get started.</p>
9
+
</div>
16
10
{% include 'en-us/login.partial.html' %}
17
-
18
11
</div>
19
12
20
-
<div class="box content">
13
+
<div class="box content">
21
14
<article class="message is-info">
22
15
<div class="message-header">
23
16
<p>OAuth Permissions Requested</p>
···
33
26
<p class="mt-3"><small>These permissions allow Smoke Signal to function as your decentralized event management tool while keeping your data under your control.</small></p>
34
27
</div>
35
28
</article>
36
-
37
29
</div>
38
30
</div>
39
31
</section>
40
-
{% endblock %}
32
+
{% endblock %}
+5
-8
templates/en-us/login.html
+5
-8
templates/en-us/login.html
···
5
5
<section class="section is-fullheight">
6
6
<div class="container is-max-tablet">
7
7
<div class="box content">
8
-
<article class="message is-primary">
9
-
<div class="message-body">
10
-
<p>
11
-
Log in to Smoke Signal using your AT-Handle, it looks like "@ngerakines.me" or "@alice.bsky.social".
12
-
</p>
13
-
</div>
14
-
</article>
8
+
<div class="has-text-centered mb-5">
9
+
<h1 class="title is-3 mb-2">Sign in to Smoke Signal</h1>
10
+
<p class="subtitle is-6 has-text-grey">Sign in or create an account in the Atmosphere to get started.</p>
11
+
</div>
15
12
{% include 'en-us/login.partial.html' %}
16
13
</div>
17
14
</div>
18
15
</section>
19
-
{% endblock %}
16
+
{% endblock %}
+123
-14
templates/en-us/login.partial.html
+123
-14
templates/en-us/login.partial.html
···
2
2
{% if destination %}
3
3
<input type="hidden" name="destination" value="{{ destination }}">
4
4
{% endif %}
5
+
5
6
<div class="field">
6
-
<label class="label" for="loginHandleInput">Handle</label>
7
7
<div class="control has-icons-left{% if handle_error %} has-icons-right{% endif %}" data-loading-class="is-loading">
8
-
<input class="input{% if handle_error %} is-danger{% endif %}" type="text" id="loginHandleInput" name="handle" required="required" autocomplete="handle" {% if handle_input %}
9
-
value="{{ handle_input }}" {% endif %} placeholder="you.bsky.social" data-loading-disable>
8
+
<input class="input{% if handle_error %} is-danger{% endif %}"
9
+
type="text"
10
+
id="loginHandleInput"
11
+
name="handle"
12
+
required="required"
13
+
autocomplete="handle"
14
+
{% if handle_input %}value="{{ handle_input }}"{% endif %}
15
+
placeholder="alice.bsky.social"
16
+
data-loading-disable>
10
17
<span class="icon is-small is-left">
11
18
<i class="fas fa-at"></i>
12
19
</span>
13
-
{% if handle_error %}<span class="icon is-small is-right">
20
+
{% if handle_error %}
21
+
<span class="icon is-small is-right">
14
22
<i class="fas fa-exclamation-triangle"></i>
15
-
</span>{% endif %}
23
+
</span>
24
+
{% endif %}
16
25
</div>
17
26
{% if handle_error %}<p class="help is-danger">{{ message }}</p>{% endif %}
18
27
</div>
28
+
19
29
<div class="field">
20
30
<div class="control">
21
-
<button hx-post="/oauth/login" hx-swap="outerHTML" hx-target="#loginForm" type="submit" id="loginSubmit" class="button is-primary" name="submit" value="Submit" data-loading-disable>Sign-In</button>
31
+
<button hx-post="/oauth/login"
32
+
hx-swap="outerHTML"
33
+
hx-target="#loginForm"
34
+
type="submit"
35
+
id="loginSubmit"
36
+
class="button is-primary is-fullwidth"
37
+
name="submit"
38
+
value="Submit"
39
+
data-loading-disable>
40
+
Continue with internet handle
41
+
</button>
22
42
</div>
23
43
</div>
24
-
<p><a target="_blank" href="https://discourse.smokesignal.events/t/login-troubleshooting/82">Trouble signing in?</a></p>
25
-
<hr/>
44
+
26
45
<div class="field">
27
46
<div class="control">
28
-
<button hx-post="/oauth/login" hx-swap="outerHTML" hx-target="#loginForm" class="button is-info" type="submit" name="submit" value="Submit" hx-vals='{ "handle": "{{ "https://bsky.social" }}" }' data-loading-disable>
29
-
<span class="icon">
30
-
<i class="fab fa-bluesky"></i>
31
-
</span>
32
-
<span>Register on bsky.social</span>
47
+
<button hx-post="/oauth/login"
48
+
hx-swap="outerHTML"
49
+
hx-target="#loginForm"
50
+
type="submit"
51
+
class="button is-fullwidth is-outlined"
52
+
name="submit"
53
+
value="Submit"
54
+
hx-vals='{ "handle": "{{ "https://bsky.social" }}" }'
55
+
data-loading-disable>
56
+
Create an account on bsky.social
33
57
</button>
34
58
</div>
35
59
</div>
36
-
<p><a target="_blank" href="https://discourse.smokesignal.events/t/account-registration-guide/87">Learn more about account registration</a></p>
60
+
61
+
<hr class="my-4">
62
+
63
+
<details class="login-help-section">
64
+
<summary class="login-help-summary">
65
+
<span class="login-help-title">What is an internet handle?</span>
66
+
<span class="icon is-small login-help-chevron">
67
+
<i class="fas fa-chevron-down"></i>
68
+
</span>
69
+
</summary>
70
+
<div class="login-help-content mt-3">
71
+
<p>
72
+
Some open social apps, such as Bluesky, set you up with
73
+
a free domain and open social hosting when you sign up.
74
+
You might not have realized that, but if you sign up on
75
+
one of those services, the username you get is a domain,
76
+
such as you.bsky.social. That's an internet handle.
77
+
</p>
78
+
<p class="mt-3">
79
+
If you don't have one, choose "Create an account on bsky.social"
80
+
or use the URL of a PDS in the form.
81
+
</p>
82
+
<p class="mt-3">
83
+
Read more at <a href="https://internethandle.org" target="_blank" rel="noopener">internethandle.org <i class="fas fa-external-link-alt fa-xs"></i></a>.
84
+
</p>
85
+
</div>
86
+
</details>
87
+
88
+
<details class="login-help-section mt-3">
89
+
<summary class="login-help-summary">
90
+
<span class="login-help-title">What is my PDS?</span>
91
+
<span class="icon is-small login-help-chevron">
92
+
<i class="fas fa-chevron-down"></i>
93
+
</span>
94
+
</summary>
95
+
<div class="login-help-content mt-3">
96
+
<p>
97
+
Your Personal Data Server (PDS) is a service that stores
98
+
your social data and allows you to interact with open social
99
+
apps on AT Protocol.
100
+
</p>
101
+
</div>
102
+
</details>
37
103
</form>
104
+
105
+
<style>
106
+
.login-help-section {
107
+
border-bottom: 1px solid #dbdbdb;
108
+
padding-bottom: 0.75rem;
109
+
}
110
+
111
+
.login-help-summary {
112
+
display: flex;
113
+
justify-content: space-between;
114
+
align-items: center;
115
+
cursor: pointer;
116
+
list-style: none;
117
+
padding: 0.5rem 0;
118
+
}
119
+
120
+
.login-help-summary::-webkit-details-marker {
121
+
display: none;
122
+
}
123
+
124
+
.login-help-title {
125
+
font-weight: 600;
126
+
color: #363636;
127
+
}
128
+
129
+
.login-help-chevron {
130
+
transition: transform 0.2s ease;
131
+
}
132
+
133
+
details[open] .login-help-chevron {
134
+
transform: rotate(180deg);
135
+
}
136
+
137
+
.login-help-content {
138
+
color: #4a4a4a;
139
+
font-size: 0.95rem;
140
+
line-height: 1.6;
141
+
}
142
+
143
+
.login-help-content p {
144
+
margin-bottom: 0;
145
+
}
146
+
</style>