Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(www): add alternate link in farsi #1442

Merged
merged 7 commits into from
Oct 25, 2022
Merged

feat(www): add alternate link in farsi #1442

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6c0c2a4
add alternative access message in farsi
ohnorobo Oct 24, 2022
aafb17f
add osx exclusion
ohnorobo Oct 24, 2022
7ba28ae
pass computed property instead of language and platform
ohnorobo Oct 24, 2022
b37122a
use dom-if templates in servers_view
ohnorobo Oct 24, 2022
64051cf
remove remaining uses of hidden
ohnorobo Oct 25, 2022
d854db6
update farsi string
ohnorobo Oct 25, 2022
a51bb29
nit
ohnorobo Oct 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/www/messages/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,9 @@
"server-added": "Added server “{serverName}”!",
"server-connected": "Connected to “{serverName}”",
"server-create-your-own": "Don’t have an access key?<br>Create your own at {openLink}our website{closeLink}.",
"server-create-your-own-access": "Don’t have an access key?<br>Create your own at {openLink}our website{closeLink} or<br>request an {openLink2}access key{closeLink}.",
"server-create-your-own-zero-state": "Don’t have a server?<br>Create your own at {openLink}our website{closeLink}.",
"server-create-your-own-zero-state-access": "Don’t have a server?<br>Create your own at {openLink}our website{closeLink} or<br>request an {openLink2}access key{closeLink}.",
"server-default-name": "Proxy Server",
"server-default-name-outline": "Outline Server",
"server-detected": "Please confirm that you want to add this server.",
Expand Down
2 changes: 2 additions & 0 deletions src/www/messages/fa.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,9 @@
"server-added": "سرور «{serverName}» اضافه شد!",
"server-connected": "به «{serverName}» وصل شدید",
"server-create-your-own": "کلید دسترسی ندارید؟<br>کلید دسترسی خودتان را در {openLink}وبسایت ما{closeLink} ایجاد کنید.",
"server-create-your-own-access": "کلید دسترسی ندارید؟<br>کلید دسترسی خودتان را در {openLink}وبسایت ما{closeLink} ایجاد کنید یا <br>یک {openLink2}کلید دسترسی{closeLink} درخواست کنید.",
"server-create-your-own-zero-state": "سرور ندارید؟<br>سرور خودتان را در {openLink}وبسایت ما{closeLink} ایجاد کنید.",
"server-create-your-own-zero-state-access": "سرور ندارید؟<br>سرور خود را در {openLink}وب سایت ما {closeLink}ایجاد کنید یا <br>یک {openLink2}کلید دسترسی{closeLink} درخواست کنید.",
"server-default-name": "سرور پراکسی",
"server-default-name-outline": "سرور Outline",
"server-detected": "لطفاً تأیید کنید که می‌خواهید این سرور اضافه شود.",
Expand Down
54 changes: 41 additions & 13 deletions src/www/ui_components/add-server-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,15 +163,24 @@ Polymer({
<iron-icon icon="communication:vpn-key" slot="suffix"></iron-icon>
</paper-input>
<div class="footer center top-divider">
<div
id="addServerFooter"
inner-h-t-m-l="[[localize('server-create-your-own', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html>', 'closeLink', '</a>')]]"
></div>
<div
id="invalidAccessKeyFooter"
hidden=""
inner-h-t-m-l="[[localize('server-add-invalid', 'openLine', '<span class=input-invalid>', 'closeLine', '</span><br/>')]]"
></div>
<template is="dom-if" if="[[shouldShowNormalAccessMessage]]">
<div
id="addServerFooter"
inner-h-t-m-l="[[localize('server-create-your-own', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html>', 'closeLink', '</a>')]]"
></div>
</template>
<template is="dom-if" if="[[shouldShowAltAccessMessage]]">
<div
id="addServerFooterAlt"
inner-h-t-m-l="[[localize('server-create-your-own-access', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html>', 'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>', 'closeLink', '</a>')]]"
></div>
</template>
<template is="dom-if" if="[[invalidAccessKeyInput]]">
<div
id="invalidAccessKeyFooter"
inner-h-t-m-l="[[localize('server-add-invalid', 'openLine', '<span class=input-invalid>', 'closeLine', '</span><br/>')]]"
></div>
</template>
</div>
</paper-dialog>

Expand Down Expand Up @@ -201,10 +210,23 @@ Polymer({

properties: {
localize: Function,
useAltAccessMessage: Boolean,
invalidAccessKeyInput: {
Boolean,
value: false,
},
accessKey: {
type: String,
observer: '_accessKeyChanged',
},
shouldShowNormalAccessMessage: {
type: Boolean,
computed: '_computeShouldShowNormalAccessMessage(useAltAccessMessage, invalidAccessKeyInput)',
},
shouldShowAltAccessMessage: {
type: Boolean,
computed: '_computeShouldShowAltAccessMessage(useAltAccessMessage, invalidAccessKeyInput)',
},
},

ready: function() {
Expand Down Expand Up @@ -298,15 +320,21 @@ Polymer({
var input = event.target;
input.toggleClass('input-invalid', input.invalid);
if (input.invalid) {
this.$.addServerFooter.hidden = true;
this.$.invalidAccessKeyFooter.hidden = false;
this.invalidAccessKeyInput = true;
Copy link
Contributor

@jyyi1 jyyi1 Oct 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor this.invalidAccessKeyInput = input.invalid

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

} else {
this.$.addServerFooter.hidden = false;
this.$.invalidAccessKeyFooter.hidden = true;
this.invalidAccessKeyInput = false;
}
},

_disallowScroll: function(event) {
event.preventDefault();
},

_computeShouldShowNormalAccessMessage(useAltAccessMessage, invalidAccessKeyInput) {
return !useAltAccessMessage && !invalidAccessKeyInput;
},

_computeShouldShowAltAccessMessage(useAltAccessMessage, invalidAccessKeyInput) {
return useAltAccessMessage && !invalidAccessKeyInput;
},
});
13 changes: 11 additions & 2 deletions src/www/ui_components/app-root.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
</app-header>

<iron-pages id="pages" selected="[[page]]" attr-for-selected="name">
<servers-view name="servers" id="serversView" servers="[[servers]]" localize="[[localize]]"></servers-view>
<servers-view name="servers" id="serversView" servers="[[servers]]" localize="[[localize]]" use-alt-access-message="[[useAltAccessMessage]]""></servers-view>
<feedback-view name="feedback" id="feedbackView" localize="[[localize]]"></feedback-view>
<about-view
name="about"
Expand Down Expand Up @@ -389,7 +389,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
<a hidden="" id="toastUrl" href="[[toastUrl]]"></a>
</paper-toast>

<add-server-view id="addServerView" localize="[[localize]]"></add-server-view>
<add-server-view id="addServerView" localize="[[localize]]" use-alt-access-message="[[useAltAccessMessage]]"></add-server-view>

<!-- Modal dialogs must be placed outside of app-header-layout, see
/~https://github.com/PolymerElements/paper-dialog/issues/152 and
Expand Down Expand Up @@ -540,6 +540,10 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
toastUrl: {
type: String,
},
useAltAccessMessage: {
type: Boolean,
computed: '_computeUseAltAccessMessage(language)',
},
};
}

Expand Down Expand Up @@ -766,5 +770,10 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
return a.name > b.name ? 1 : -1;
});
}

_computeUseAltAccessMessage(language) {
// Hack to show an alternative message
return language === 'fa' && this.platform !== 'ios' && this.platform !== 'osx';
}
}
customElements.define(AppRoot.is, AppRoot);
50 changes: 29 additions & 21 deletions src/www/views/servers_view/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,6 @@ Polymer({
color: var(--medium-green);
text-decoration: none;
}
/* Do not remove, this allows the hidden attribute to work with flex displays. */
[hidden] {
display: none !important;
}
.server-list-container {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -98,39 +94,51 @@ Polymer({
}
</style>
<div class="server-list-container">
<div class="flex-column-container" hidden$="[[!shouldShowZeroState]]">
<template is="dom-if" if="[[shouldShowZeroState]]">
<div class="flex-column-container">
<paper-button noink="" on-tap="_requestPromptAddServer">
<server-connection-indicator connection-state="disconnected"></server-connection-indicator>
<div class="header">[[localize('server-add')]]</div>
<div class="subtle">[[localize('server-add-zero-state-instructions')]]</div>
</paper-button>
<div class="flex-column-container">
<paper-button noink="" on-tap="_requestPromptAddServer">
<server-connection-indicator connection-state="disconnected"></server-connection-indicator>
<div class="header">[[localize('server-add')]]</div>
<div class="subtle">[[localize('server-add-zero-state-instructions')]]</div>
</paper-button>
</div>
<template is="dom-if" if="[[!useAltAccessMessage]]">
<div
class="footer subtle"
inner-h-t-m-l="[[localize('server-create-your-own-zero-state', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html>', 'closeLink', '</a>')]]"
></div>
</template>
<template is="dom-if" if="[[useAltAccessMessage]]">
<div
class="footer subtle"
inner-h-t-m-l="[[localize('server-create-your-own-zero-state-access', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html>', 'openLink2', '<a href=https://www.reddit.com/r/outlinevpn/wiki/index/outline_vpn_access_keys/>', 'closeLink', '</a>')]]"
></div>
</template>
</div>
<div
class="footer subtle"
inner-h-t-m-l="[[localize('server-create-your-own-zero-state', 'breakLine', '<br/>', 'openLink', '<a href=https://s3.amazonaws.com/outline-vpn/index.html>', 'closeLink', '</a>')]]"
></div>
</div>
</template>
<user-comms-dialog
id="autoConnectDialog"
localize="[[localize]]"
title-localization-key="auto-connect-dialog-title"
detail-localization-key="auto-connect-dialog-detail"
fire-event-on-hide="AutoConnectDialogDismissed"
></user-comms-dialog>
<server-list
id="serverList"
hidden$="[[shouldShowZeroState]]"
servers="[[servers]]"
localize="[[localize]]"
></server-list>
<template is="dom-if" if="[[!shouldShowZeroState]]">
<server-list
id="serverList"
servers="[[servers]]"
localize="[[localize]]"
></server-list>
</template>
</div>
`,

is: 'servers-view',

properties: {
localize: Function,
useAltAccessMessage: Boolean,
servers: Array,
shouldShowZeroState: {
type: Boolean,
Expand Down