cory/tildefriends
4
5
Fork 1
Code Issues 31 Pull Requests 1 Actions Releases 24 Wiki Activity

Consolidate the acount/login navigation bar options to try to save some space on mobile.

Browse Source
This commit is contained in:
Cory McWilliams 2024-06-20 20:41:27 -04:00
parent 0f3be229e6
commit 3630cdbfe0
2 changed files with 97 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
core/client.js
View File

@ -118,28 +118,6 @@ class TfNavigationElement extends LitElement {
return this.spark_lines[key]; return this.spark_lines[key];
} }
/**
* TODOC
* @returns
*/
render_login() {
if (this?.credentials?.session?.name) {
return html`<a
class="w3-bar-item w3-right"
id="login"
href="/login/logout?return=${url() + hash()}"
>logout ${this.credentials.session.name}</a
>`;
} else {
return html`<a
class="w3-bar-item w3-right"
id="login"
href="/login?return=${url() + hash()}"
>login</a
>`;
}
}
set_active_identity(id) { set_active_identity(id) {
send({action: 'setActiveIdentity', identity: id}); send({action: 'setActiveIdentity', identity: id});
this.renderRoot.getElementById('id_dropdown').classList.remove('w3-show'); this.renderRoot.getElementById('id_dropdown').classList.remove('w3-show');
@ -159,66 +137,102 @@ class TfNavigationElement extends LitElement {
window.location.href = '/~core/ssb/#' + this.identity; window.location.href = '/~core/ssb/#' + this.identity;
} }
logout() {
window.location.href = `/login/logout?return=${encodeURIComponent(url() + hash())}`;
}
render_identity() { render_identity() {
let self = this; let self = this;
if (this.identities?.length) {
return html` if (this?.credentials?.session?.name) {
<link type="text/css" rel="stylesheet" href="/static/w3.css" /> if (this.identities?.length) {
<div class="w3-dropdown-click w3-right" style="max-width: 100%"> return html`
<button <link type="text/css" rel="stylesheet" href="/static/w3.css" />
class="w3-button w3-rest w3-cyan" <div class="w3-dropdown-click w3-right" style="max-width: 100%">
style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%"
@click=${self.toggle_id_dropdown}
>
${self.names[this.identity]}▾
</button>
<div
id="id_dropdown"
class="w3-dropdown-content w3-bar-block w3-card-4"
style="max-width: 100%; right: 0"
>
<button <button
class="w3-bar-item w3-button w3-border" class="w3-button w3-rest w3-cyan"
@click=${() => (window.location.href = '/~core/identity')} style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%"
id="identity"
@click=${self.toggle_id_dropdown}
> >
Manage Identities... ${self.names[this.identity]}▾
</button> </button>
<button <div
class="w3-bar-item w3-button w3-border" id="id_dropdown"
@click=${self.edit_profile} class="w3-dropdown-content w3-bar-block w3-card-4"
style="max-width: 100%; right: 0"
> >
Edit Profile... <button
</button> class="w3-bar-item w3-button w3-border"
${this.identities.map( @click=${() => (window.location.href = '/~core/identity')}
(x) => html` >
<button Manage Identities...
class="w3-bar-item w3-button ${x === self.identity </button>
? 'w3-cyan' <button
: ''}" class="w3-bar-item w3-button w3-border"
@click=${() => self.set_active_identity(x)} @click=${self.edit_profile}
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap" >
> Edit Profile...
${self.names[x]}${self.names[x] === x ? '' : html` - ${x}`} </button>
</button> ${this.identities.map(
` (x) => html`
)} <button
class="w3-bar-item w3-button ${x === self.identity
? 'w3-cyan'
: ''}"
@click=${() => self.set_active_identity(x)}
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
>
${self.names[x]}${self.names[x] === x ? '' : html` - ${x}`}
</button>
`
)}
<button
class="w3-bar-item w3-button w3-border"
id="logout"
@click=${self.logout}
>Logout ${this.credentials.session.name}</button
>
</div>
</div> </div>
</div> `;
`; } else if (
} else if ( this.credentials?.session?.name &&
this.credentials?.session?.name && this.credentials.session.name !== 'guest'
this.credentials.session.name !== 'guest' ) {
) { return html`
return html` <link type="text/css" rel="stylesheet" href="/static/w3.css" />
<link type="text/css" rel="stylesheet" href="/static/w3.css" /> <button
<button class="w3-bar-item w3-right w3-cyan"
id="create_identity" id="logout"
@click=${this.create_identity} @click=${self.logout}
class="w3-button w3-mobile w3-blue w3-right" >Logout ${this.credentials.session.name}</button
> >
Create an Identity <button
</button> id="create_identity"
`; @click=${this.create_identity}
class="w3-button w3-mobile w3-cyan w3-right"
>
Create an Identity
</button>
`;
} else {
return html`
<button
class="w3-bar-item w3-button w3-right w3-cyan"
id="logout"
@click=${self.logout}
>Logout ${this.credentials.session.name}</button
>
`;
}
} else {
return html`<a
class="w3-bar-item w3-cyan w3-right"
id="login"
href="/login?return=${url() + hash()}"
>login</a
>`;
} }
} }
@ -358,7 +372,7 @@ class TfNavigationElement extends LitElement {
${Object.keys(this.spark_lines) ${Object.keys(this.spark_lines)
.sort() .sort()
.map((x) => this.spark_lines[x])} .map((x) => this.spark_lines[x])}
${this.render_login()} ${this.render_identity()} ${this.render_identity()}
</div> </div>
${this.status?.is_error ${this.status?.is_error
? html` ? html`

17
tools/autotest.py
View File

@ -125,7 +125,8 @@ try:
driver.switch_to.default_content() driver.switch_to.default_content()
driver.find_element(By.ID, 'allow').click() driver.find_element(By.ID, 'allow').click()
driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.LINK_TEXT, 'logout testuser').click() driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.ID, 'identity').click()
driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.ID, 'logout').click()
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'login_label').click() driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'login_label').click()
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'name').send_keys('testuser') driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'name').send_keys('testuser')
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'password').send_keys('test_password') driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'password').send_keys('test_password')
@ -133,13 +134,8 @@ try:
wait.until(expected_conditions.presence_of_element_located((By.ID, 'content'))) wait.until(expected_conditions.presence_of_element_located((By.ID, 'content')))
# NoSuchElementException driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.ID, 'identity').click()
while True: driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.ID, 'logout').click()
try:
driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.LINK_TEXT, 'logout testuser').click()
break
except:
pass
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'guest_label').click() driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'guest_label').click()
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'guestButton').click() driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'guestButton').click()
@ -148,7 +144,7 @@ try:
wait.until(expected_conditions.presence_of_element_located((By.TAG_NAME, 'tf-app'))).shadow_root wait.until(expected_conditions.presence_of_element_located((By.TAG_NAME, 'tf-app'))).shadow_root
driver.switch_to.default_content() driver.switch_to.default_content()
driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.LINK_TEXT, 'logout guest').click() driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.ID, 'logout').click()
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'login_label').click() driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'login_label').click()
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'name').send_keys('testuser') driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'name').send_keys('testuser')
@ -189,7 +185,8 @@ try:
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'confirm').send_keys('new_password') driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'confirm').send_keys('new_password')
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'loginButton').click() driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'loginButton').click()
wait.until(expected_conditions.presence_of_element_located((By.ID, 'document'))) wait.until(expected_conditions.presence_of_element_located((By.ID, 'document')))
driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.LINK_TEXT, 'logout testuser').click() driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.ID, 'identity').click()
driver.find_element(By.TAG_NAME, 'tf-navigation').shadow_root.find_element(By.ID, 'logout').click()
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'login_label').click() driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'login_label').click()
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'name').send_keys('testuser') driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'name').send_keys('testuser')
driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'password').send_keys('test_password') driver.find_element(By.TAG_NAME, 'tf-auth').shadow_root.find_element(By.ID, 'password').send_keys('test_password')