Merge pull request #2517 from jryans/auth-server-type-selector

Add server type selector and style login flow
pull/21833/head
J. Ryan Stinnett 2019-01-28 22:11:14 -06:00 committed by GitHub
commit 20bf683df8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 725 additions and 267 deletions

View File

@ -33,6 +33,7 @@
@import "./views/auth/_InteractiveAuthEntryComponents.scss";
@import "./views/auth/_LanguageSelector.scss";
@import "./views/auth/_ServerConfig.scss";
@import "./views/auth/_ServerTypeSelector.scss";
@import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/context_menus/_MessageContextMenu.scss";

View File

@ -23,7 +23,8 @@ limitations under the License.
}
.mx_Login_field {
width: 280px;
width: 100%;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
@ -32,10 +33,6 @@ limitations under the License.
margin-bottom: 14px;
}
.mx_Login_field_disabled {
opacity: 0.3;
}
.mx_Login_fieldLabel {
margin-top: -10px;
margin-left: 8px;
@ -49,6 +46,8 @@ limitations under the License.
width: 100%;
margin-top: 35px;
margin-bottom: 24px;
box-sizing: border-box;
text-align: center;
}
.mx_Login_submit:hover {
@ -69,10 +68,10 @@ limitations under the License.
margin-right: 10px;
}
.mx_Login_sso_link {
display: block;
text-align: center;
margin-bottom: 20px;
.mx_AuthBody a.mx_Login_sso_link:link,
.mx_AuthBody a.mx_Login_sso_link:hover,
.mx_AuthBody a.mx_Login_sso_link:visited {
color: $button-primary-fg-color;
}
.mx_Login_loader {
@ -105,6 +104,7 @@ limitations under the License.
.mx_Login_type_container {
display: flex;
margin-bottom: 14px;
color: $primary-fg-color;
}
.mx_Login_type_label {
@ -124,9 +124,9 @@ limitations under the License.
}
.mx_Login_field_prefix {
height: 34px;
height: 38px;
padding: 0px 5px;
line-height: 33px;
line-height: 38px;
background-color: #eee;
border: 1px solid #c7c7c7;
@ -136,40 +136,11 @@ limitations under the License.
text-align: center;
}
.mx_Login_field_suffix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-left: 0px;
border-radius: 0px 3px 3px 0px;
text-align: center;
flex-grow: 1;
}
.mx_Login_username {
height: 16px;
flex-shrink: 1;
min-width: 0px;
}
.mx_Login_phoneNumberField {
height: 16px;
}
.mx_Login_field_has_prefix {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.mx_Login_field_has_suffix {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.mx_Login_phoneSection {
display:flex;
}
@ -190,12 +161,9 @@ limitations under the License.
}
.mx_Login_phoneCountry .mx_Dropdown_option {
/*
To match height of mx_Login_field
33px + 2px border from mx_Dropdown_option = 35px
*/
height: 33px;
line-height: 33px;
/* To match height of mx_Login_field */
height: 38px;
line-height: 38px;
}
.mx_Login_phoneCountry .mx_Dropdown_option img {

View File

@ -24,6 +24,29 @@ limitations under the License.
color: $authpage-body-color;
}
.mx_AuthBody h2 {
font-size: 24px;
font-weight: 600;
margin-top: 8px;
}
.mx_AuthBody h3 {
font-size: 14px;
font-weight: 600;
color: $primary-fg-color;
}
.mx_Auth_editServerDetails {
padding-left: 1em;
font-size: 12px;
font-weight: normal;
}
.mx_AuthBody .mx_Field input {
width: 100%;
box-sizing: border-box;
}
.mx_AuthBody a:link,
.mx_AuthBody a:hover,
.mx_AuthBody a:visited {

View File

@ -23,12 +23,6 @@ limitations under the License.
background-color: $authpage-bg-color;
}
.mx_AuthPage h2 {
font-size: 24px;
font-weight: 600;
margin-top: 8px;
}
.mx_AuthPage_modal {
display: flex;
margin: 100px auto auto;

View File

@ -14,23 +14,24 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ServerConfig {
margin-top: 7px;
.mx_ServerConfig_fields {
display: flex;
margin: 1em 0;
}
.mx_ServerConfig .mx_Login_field {
margin-top: 4px;
margin-bottom: 5px;
.mx_ServerConfig_fields .mx_Field {
flex: 1;
margin: 0 5px;
}
.mx_ServerConfig_fields .mx_Field:first-child {
margin-left: 0;
}
.mx_ServerConfig_fields .mx_Field:last-child {
margin-right: 0;
}
.mx_ServerConfig_help:link {
opacity: 0.8;
font-size: 13px;
font-weight: 300;
color: $primary-fg-color;
}
.mx_ServerConfig_selector {
text-align: center;
width: 302px; // for fr i18n
}

View File

@ -0,0 +1,69 @@
/*
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ServerTypeSelector {
display: flex;
margin-bottom: 28px;
}
.mx_ServerTypeSelector_type {
margin: 0 5px;
}
.mx_ServerTypeSelector_type:first-child {
margin-left: 0;
}
.mx_ServerTypeSelector_type:last-child {
margin-right: 0;
}
.mx_ServerTypeSelector_label {
text-align: center;
font-weight: 600;
color: $primary-fg-color;
margin: 8px 0;
}
.mx_ServerTypeSelector_type .mx_AccessibleButton {
padding: 10px;
border: 1px solid $input-border-color;
border-radius: 4px;
}
.mx_ServerTypeSelector_type.mx_ServerTypeSelector_type_selected .mx_AccessibleButton {
border-color: $input-valid-border-color;
}
.mx_ServerTypeSelector_logo {
display: flex;
justify-content: center;
height: 18px;
margin-bottom: 12px;
font-weight: 600;
color: $primary-fg-color;
}
.mx_ServerTypeSelector_logo > div {
display: flex;
width: 70%;
align-items: center;
justify-content: space-evenly;
}
.mx_ServerTypeSelector_description {
font-size: 10px;
}

View File

@ -0,0 +1,7 @@
<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg">
<g style="stroke:#454545;stroke-width:.8;fill:none;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round" transform="translate(1 1)">
<circle cx="5" cy="5" r="5"/>
<path d="m0 5h10"/>
<path d="m5 0c1.25064019 1.36917645 1.96137638 3.14601693 2 5-.03862362 1.85398307-.74935981 3.63082355-2 5-1.25064019-1.36917645-1.96137638-3.14601693-2-5 .03862362-1.85398307.74935981-3.63082355 2-5z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 524 B

View File

@ -0,0 +1,13 @@
<svg height="18" viewBox="0 0 66 18" width="66" xmlns="http://www.w3.org/2000/svg">
<g fill="#454545" fill-rule="evenodd">
<path d="m.57375773.51260411v16.96465689h1.22032333v.4070323h-1.68861516v-17.77866867h1.68861516v.40697948z"/>
<path d="m5.27530002 5.89064516v.85851027h.02442757c.22886998-.32679766.50453749-.58053959.82747736-.76043402.32272883-.17957771.69267726-.26973607 1.10937046-.26973607.4003378 0 .76611825.07785923 1.09702477.23304985.33101205.15545455.5823575.42920235.75398361.82171848.18782322-.27791789.44317838-.52326687.76611825-.73583578.32272886-.21246334.70475916-.31893255 1.14614376-.31893255.3350745 0 .6454576.04096187.9317297.12272727.2858501.0817654.5310227.21256891.7353596.39241056.2041259.18.363459.41505572.4781051.70506158.1143294.29053373.1716261.63987097.1716261 1.04880352v4.24324923l-1.7407414-.0000527v-3.59334902c0-.21246335-.0081249-.41278593-.0245331-.60096774-.0165137-.18791789-.0612536-.35134311-.1348001-.49053959-.0735993-.13887977-.1820197-.24936071-.3248392-.33117889-.1430305-.08144868-.3371849-.12256891-.5823047-.12256891-.2451199 0-.4433367.04729618-.59454494.1409912-.15131376.09417009-.2697057.21689736-.35543961.36797067-.08578668.15144282-.14303055.32304986-.17157335.51529619-.02875383.19203519-.04294609.38628739-.04294609.58249267v3.53190612h-1.7405831v-3.55645158c0-.18802346-.00427351-.37409384-.01213465-.55794721-.00833598-.18406452-.0429461-.35366569-.10435796-.50912023-.06130634-.15519062-.16350117-.27997654-.30647895-.37414663-.14303055-.09369502-.35343476-.1409912-.6312654-.1409912-.08182973 0-.19009187.01842228-.32478645.05531964-.13485285.03679179-.26569599.10641643-.39226563.20845162-.12683343.10229912-.23499006.24946627-.32489196.44144868-.08995466.19224633-.13485285.44350733-.13485285.75415249v3.67923172l-1.74053034.0000527v-6.34059234z"/>
<path d="m14.4319985 6.82284457c.1796456-.26989442.4085683-.48642228.6865045-.65011143.2777251-.16347801.5901658-.27992376.937586-.3494956.347262-.06941349.696687-.10430499 1.0480641-.10430499.3187719 0 .641448.02259238.9683448.06740763.3268441.04513196.6251981.1331261.8949038.26377126.2696529.13075073.4902397.31280938.6619186.54570088.1716261.23299706.2574127.54168915.2574127.92602346v3.29880352c0 .286522.0163554.5601114.049119.8217185.032447.2617654.0897436.4579706.1715206.5887214h-1.7650635c-.0327635-.0981818-.059407-.1982112-.0797193-.3005103-.0205762-.1020352-.0348739-.2062874-.0428933-.312651-.2778834.2862053-.6048858.4865278-.9805322.6010205-.3760158.114176-.7601037.1716071-1.1523693.1716071-.3024693 0-.5844152-.0368446-.8458904-.1103226-.2615808-.0736364-.4902925-.1880235-.6863989-.3436364-.1961592-.155085-.3493723-.3513431-.4596921-.5884047-.1103197-.2370616-.1655587-.5194135-.1655587-.8463167 0-.3596305.0632584-.65612903.1901446-.88891495.1265696-.23315543.2899125-.41906745.490398-.55821115.2001161-.13893255.4288806-.24318475.6863989-.31265102.25736-.06941349.5167776-.12446921.7783056-.16558945.261528-.04075073.5188881-.07353079.7722911-.09802346.2532976-.02459824.4781051-.06144281.6742115-.11048094.1961592-.04903812.3512717-.12045747.4658122-.21457478.1142239-.09401173.1673526-.23093841.1593331-.41093841 0-.18791789-.0306004-.33724927-.0919067-.44757185-.0612536-.11032258-.1430306-.19631085-.2451199-.25759531-.1021948-.06128445-.2206922-.10219355-.3554396-.12272727-.1349056-.02016422-.2800993-.03061584-.4351589-.03061584-.3432523 0-.6129052.07363637-.8090644.22080352-.1960537.14716716-.3106997.39256892-.3432522.73583578h-1.7405831c.0243748-.40866862.1263586-.7481349.3063734-1.0177654zm3.4382729 2.45892669c-.110267.036739-.2288172.06730205-.3553869.09190029-.1267279.02454546-.2594703.0450264-.3983857.06128446-.1390208.016522-.2779361.03684458-.4167459.06139003-.1308432.02433431-.2595232.05732551-.3860401.09802346-.1268334.04112024-.2371531.09617595-.331012.16564223-.0941226.06951906-.169674.15756598-.2268651.26361287-.0572439.1063109-.0857867.2412845-.0857867.4047625 0 .1551906.0285428.2862053.0857867.3922522.0571911.1064692.1349583.1902405.2329852.2515249.0980268.0612845.2123563.104305.343305.1286921.1305793.0245982.2654321.0368446.4044002.0368446.3431995 0 .6086844-.0571144.7968242-.1717126.187876-.1143343.3266858-.2513666.416746-.4109384.0897963-.1593608.1450354-.3205162.165506-.4842581.0202596-.163478.0306004-.29433432.0306004-.39241057v-.65011144c-.073652.06561291-.1655588.1166569-.2759313.15350147z" fill-rule="nonzero"/>
<path d="m24.4710969 5.89064516v1.16509091h-1.2747182v3.13965393c0 .294176.0489606.4904868.147093.5885103.0979213.098129.294186.1471671.588372.1471671.0980796 0 .1919385-.0040117.2818931-.0122463.0898492-.0080234.1756886-.0204809.2573601-.036739v1.3490499c-.1470931.0245454-.3105942.0408035-.4902925.0491437-.179751.0078651-.3554396.0121407-.5270657.0121407-.269653 0-.5251136-.0184751-.7661183-.0553196-.2411629-.0366862-.4535719-.1080528-.6373855-.2144692-.183919-.1061525-.3290071-.2575953-.4351589-.4538006-.1063628-.1960469-.159386-.453695-.159386-.7727332v-3.74035773h-1.0541314v-1.16509091h1.0541314v-1.90092668h1.7406359v1.90092668z"/>
<path d="m26.9593852 5.89064516v1.17739003h.0245331c.0815659-.19636364.1918329-.37810557.3309065-.54585924.1389681-.16743695.2981958-.31064516.4779996-.42920234.1796455-.11834604.371795-.21035191.5762901-.27596481.2040731-.06529619.4166932-.09812903.6373855-.09812903.1143823 0 .2408991.02058651.3799727.06139002v1.61894429c-.0818297-.01646921-.1799093-.03082698-.294186-.04296775-.1144878-.01229912-.2247548-.01847507-.331012-.01847507-.3187192 0-.5883721.05331378-.8089061.15946628-.2206395.10631085-.398333.25131378-.5332386.43532551-.1348001.18406452-.2310331.39853372-.2881714.6438827-.0571384.24519061-.085734.51107331-.085734.79717302v2.85746043h-1.7405831v-6.34043404z"/>
<path d="m30.121885 4.90946041v-1.43487976h1.7407414v1.43487976zm1.7407414.98118475v6.34048684h-1.7407414v-6.34048684z" fill-rule="nonzero"/>
<path d="m32.7696121 5.89064516h1.9857029l1.1155433 1.6556305 1.1032504-1.6556305h1.9244494l-2.0837826 2.96794135 2.3413009 3.37259829h-1.9858612l-1.3238899-1.999003-1.3239427 1.999003h-1.9488242l2.279889-3.33570093z"/>
<path d="m65.2811695 17.477261v-16.96465689h-1.2203233v-.40697948h1.6887206v17.77866867h-1.6887206v-.4070323z"/>
<path d="m40.9083636 10.4624727h1.9011273v1.8648h-1.9011273zm4.8194182-1.25934543c0 .2502558.024218.49445336.0726546.7326.0484366.23814663.1311812.45207183.2482363.64178183.1170552.18971.2724536.3410722.4662.4540909.1937465.1130187.4359258.1695273.7265455.1695273.2906196 0 .5348172-.0565086.7326-.1695273s.3551994-.2643809.4722545-.4540909c.1170552-.18971.1997998-.4036352.2482364-.64178183.0484366-.23814664.0726545-.4823442.0726545-.7326 0-.25025579-.0242179-.49647151-.0726545-.73865454s-.1311812-.45610817-.2482364-.64178182c-.1170551-.18567366-.2744717-.33703578-.4722545-.45409091s-.4419804-.17558182-.7326-.17558182c-.2906197 0-.532799.05852669-.7265455.17558182-.1937464.11705513-.3491448.26841725-.4662.45409091-.1170551.18567365-.1997997.39959879-.2482363.64178182s-.0726546.48839875-.0726546.73865454zm-1.7194909 0c0-.50051159.0766902-.95459796.2300727-1.36227272.1533826-.40767477.3713441-.75479857.6538909-1.04138182.2825469-.28658325.6215981-.50858103 1.0171637-.666s.8395612-.23612728 1.332-.23612728.9384525.07870831 1.3380545.23612728.7406713.37941675 1.0232182.666.5005083.63370705.6538909 1.04138182c.1533826.40767476.2300727.86176113.2300727 1.36227272 0 .5005116-.0766901.95257983-.2300727 1.35621823-.1533826.4036383-.371344.748744-.6538909 1.0353272-.2825469.2865833-.6236162.5065629-1.0232182.6599455s-.8456157.2300727-1.3380545.2300727-.9364344-.0766901-1.332-.2300727-.7346168-.3733622-1.0171637-.6599455c-.2825468-.2865832-.5005083-.6316889-.6538909-1.0353272-.1533825-.4036384-.2300727-.85570663-.2300727-1.35621823zm7.5924-3.13625454h1.6347273v1.16247272h.0242182c.0807276-.19374642.1897084-.3733628.3269454-.53885454.1372371-.16549174.2946537-.30676305.4722546-.42381818s.367308-.20787241.5691272-.27245455.411708-.09687273.6296728-.09687273c.1130187 0 .2381447.02018162.3753818.06054546v1.5984c-.0807277-.01614554-.1775995-.03027267-.2906182-.04238182s-.2219995-.01816364-.3269455-.01816364c-.3148379 0-.5812352.05247221-.7992.15741819-.2179647.10494598-.3935447.24823545-.5267454.42987272-.1332007.18163728-.2280543.39354425-.2845636.63572728-.0565094.24218303-.0847637.50454404-.0847637.78709091v2.82141815h-1.7194909zm7.2896727 4.78309087c.2421831 0 .4561082-.0484358.6417819-.1453091.1856736-.0968732.3390539-.2260355.4601454-.3874909.1210915-.1614553.2119088-.34510803.2724546-.5509636.0605457-.20585557.0908181-.42179887.0908181-.64783636 0-.25832857-.0242179-.50252613-.0726545-.7326-.0484366-.23007388-.1291631-.43390821-.2421818-.61150909-.1130188-.17760089-.2623627-.31887221-.4480364-.42381819-.1856736-.10494598-.4197804-.15741818-.7023273-.15741818-.242183 0-.4500536.04843588-.6236181.14530909s-.3188722.22805372-.4359273.39354546c-.1170551.16549173-.2018179.35519893-.2542909.56912727s-.0787091.43794428-.0787091.67205455c0 .22603749.0221998.45005343.0666.67205454s.1210903.42179911.2300727.59940001.2522718.3229085.4298727.4359273c.1776009.1130187.3995987.1695272.666.1695272zm3.0999273 1.0777091c0 .2502558-.0343087.5368348-.1029273.8597455-.0686185.3229107-.2159443.6236168-.4419818.9021273-.2260375.2785104-.5529797.5146353-.9808363.7083818-.4278567.1937464-1.0010146.2906182-1.719491.2906182-.3067651 0-.6195802-.0383451-.9384545-.1150364s-.6094896-.1957628-.8718545-.3572182c-.262365-.1614553-.4803265-.369326-.653891-.6236182s-.2724544-.5590346-.2966727-.9142363h1.7073818c.0807277.3229107.2381443.5469266.4722546.6720545.2341102.1251279.5045439.1876909.8113091.1876909.484366 0 .8375443-.1453076 1.0595454-.4359273.2220011-.2906196.3289637-.657925.3208909-1.1019272v-.8234182h-.0242181c-.1856737.3309835-.4500529.575181-.7931455.7326s-.7043436.2361273-1.0837636.2361273c-.4682206 0-.8718529-.0827447-1.2109091-.2482364-.3390563-.1654917-.6175626-.3915258-.8355273-.6781091-.2179647-.2865832-.3773995-.6215981-.4783091-1.0050545-.1009096-.3834565-.1513636-.78910699-.1513636-1.21696367 0-.40363838.0585267-.79314358.1755818-1.16852728.1170551-.37538369.2885989-.7063622.5146364-.99294545.2260374-.28658325.5065619-.51463552.8415818-.68416364.3350198-.16952812.7204887-.25429091 1.1564182-.25429091.4117111 0 .772962.07669015 1.0837636.23007273.3108015.15338259.5711444.41170728.7810364.77498182h.0242181v-.83552727h1.6347273z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -0,0 +1,18 @@
<svg height="12" viewBox="0 0 71 12" width="71" xmlns="http://www.w3.org/2000/svg">
<g fill="#454545" fill-rule="evenodd">
<g transform="translate(18.551433 2)">
<path d="m.06753266 7.63333335v-5.66666669h1.65455009v.63333334c.30389695-.5 1.01298984-.83333333 1.65455008-.83333333.81039188 0 1.41818577.33333333 1.68831641.9.43896227-.63333333 1.01298982-.9 1.7896154-.9 1.08052251 0 2.1272787.63333333 2.1272787 2.16666667v3.66666666h-1.68831643v-3.26666666c0-.53333334-.30389694-.96666667-.91169086-.96666667-.60779387 0-.94545718.46666667-.94545718.96666667v3.26666666h-1.72208276v-3.26666666c0-.53333334-.30389696-.96666667-.91169086-.96666667-.60779391 0-.94545719.46666667-.94545719.96666667v3.26666666h-1.7896154z"/>
<path d="m16.9844631 4.8c0 1.76666665-1.3168868 3-3.0389695 3-1.6883165 0-3.0389695-1.26666665-3.0389695-3 0-1.76666666 1.350653-3 3.0389695-3 1.7220827 0 3.0389695 1.26666667 3.0389695 3m-1.755849 0c0-.96666666-.6077939-1.4-1.2831205-1.4-.6415602 0-1.2831205.43333334-1.2831205 1.4 0 .93333335.6415603 1.4 1.2831205 1.4.6753266.03333335 1.2831205-.43333335 1.2831205-1.4" fill-rule="nonzero"/>
<path d="m30.9974894 7.06666665c-.303897.5-.9454572.7-1.5194848.7-1.3844195 0-2.161045-1-2.161045-2.2v-3.56666665h1.7558491v3.2c0 .53333335.3038969.96666665.9116908.96666665.5740276 0 .9454572-.4.9454572-.96666665v-3.2h1.7558491v4.63333335c0 .5.0337663.9333333.0675327 1h-1.6883165c-.0337663-.1-.0675326-.4-.0675326-.5666667"/>
<path d="m43.2209002 6.9c-.2701306.53333335-.8441582.9-1.553251.9-1.6883165 0-2.8363717-1.26666665-2.8363717-3 0-1.66666666 1.0805225-2.96666666 2.8026053-2.96666666 1.0129899 0 1.4857184.56666666 1.5870174.83333333v-.66666667h1.6883166v4.63333335c0 .5333333.0337662.9.0337662 1h-1.6883165c-.0337663-.13333335-.0337663-.43333335-.0337663-.6666667zm-1.3168868-.6c.7090929 0 1.3168868-.53333335 1.3168868-1.5 0-.96666667-.5740275-1.5-1.3168868-1.5-.7428592 0-1.3168868.5-1.3168868 1.5 0 .93333335.6077939 1.5 1.3168868 1.5z" fill-rule="nonzero"/>
<path d="m50.8520906 1.9c.6415599 0 1.1480552.5 1.1480552 1.13333334 0 .63333333-.5064953 1.1-1.1480552 1.1-.6415602 0-1.1142889-.5-1.1142889-1.1 0-.66666667.4727287-1.13333334 1.1142889-1.13333334zm-1.7558494 5.73333335h-1.7558491v-5.66666669h1.7558491z" fill-rule="nonzero"/>
<path d="m35.083215.266667h1.755849v7.4h-1.755849z"/>
<path d="m24.9195503.26666667h-1.7220828v2.16666666c-.1350653-.2-.5740276-.56666667-1.5532511-.56666667-1.6207837 0-2.7688389 1.26666667-2.7688389 2.93333334 0 1.73333335 1.2155878 2.96666665 2.8363716 2.96666665.6753266 0 1.2831204-.3 1.5194848-.66666665 0 .23333335.0337663.46666665.0337663.53333335h1.6883164c0-.13333335-.0337663-.5-.0337663-1zm-3.0052032 5.96666668c-.6753266 0-1.2831205-.4666667-1.2831205-1.40000001 0-.93333334.6077939-1.4 1.2831205-1.4.6753265 0 1.2831204.46666666 1.2831204 1.4 0 .90000001-.6077939 1.40000001-1.2831204 1.40000001z" fill-rule="nonzero"/>
</g>
<g>
<path d="m14.0349329 1.05652174-1.7385268-.97826087-1.7385268.97826087-.0132712 9.88695656 1.751798.9913043 1.7385268-.9782608z"/>
<path d="m3.59050092 6-1.751798-.9782609-1.73852679.9782609v4.9434783l1.75179799.9913043 1.7385268-.9913043z"/>
<path d="m7.0675545 6.99130435 2.60115457-1.47391305v-1.98260869l-1.73852676-.97826087-.86262781.50869565-3.49032478-1.99565217-1.7385268-.99130435-1.73852679.99130435v1.96956521z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -66,7 +66,7 @@ const customVariables = {
},
'User Type': {
id: 3,
expl: _td('Whether or not you\'re logged in (we don\'t record your user name)'),
expl: _td('Whether or not you\'re logged in (we don\'t record your username)'),
example: 'Logged In',
},
'Chosen Language': {

View File

@ -211,7 +211,6 @@ module.exports = React.createClass({
if (!SdkConfig.get()['disable_custom_urls']) {
serverConfigSection = (
<ServerConfig ref="serverConfig"
withToggleButton={true}
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
customHsUrl={this.props.customHsUrl}

View File

@ -26,10 +26,20 @@ import Login from '../../../Login';
import SdkConfig from '../../../SdkConfig';
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
import { AutoDiscovery } from "matrix-js-sdk";
import * as ServerType from '../../views/auth/ServerTypeSelector';
// For validating phone numbers without country codes
const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
// Phases
// Show controls to configure server details
const PHASE_SERVER_DETAILS = 0;
// Show the appropriate login flow(s) for the server
const PHASE_LOGIN = 1;
// Disable phases for now, pending UX discussion on WK discovery
const PHASES_ENABLED = false;
// These are used in several places, and come from the js-sdk's autodiscovery
// stuff. We define them here so that they'll be picked up by i18n.
_td("Invalid homeserver discovery response");
@ -80,6 +90,8 @@ module.exports = React.createClass({
busy: false,
errorText: null,
loginIncorrect: false,
serverType: null,
enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl,
enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl,
@ -87,6 +99,10 @@ module.exports = React.createClass({
username: "",
phoneCountry: null,
phoneNumber: "",
// Phase of the overall login dialog.
phase: PHASE_SERVER_DETAILS,
// The current login flow, such as password, SSO, etc.
currentFlow: "m.login.password",
// .well-known discovery
@ -299,12 +315,60 @@ module.exports = React.createClass({
});
},
onServerTypeChange(type) {
this.setState({
serverType: type,
});
// When changing server types, set the HS / IS URLs to reasonable defaults for the
// the new type.
switch (type) {
case ServerType.FREE: {
const { hsUrl, isUrl } = ServerType.TYPES.FREE;
this.onServerConfigChange({
hsUrl,
isUrl,
});
// Move directly to the login phase since the server details are fixed.
this.setState({
phase: PHASE_LOGIN,
});
break;
}
case ServerType.PREMIUM:
case ServerType.ADVANCED:
this.onServerConfigChange({
hsUrl: this.props.defaultHsUrl,
isUrl: this.props.defaultIsUrl,
});
this.setState({
phase: PHASE_SERVER_DETAILS,
});
break;
}
},
onRegisterClick: function(ev) {
ev.preventDefault();
ev.stopPropagation();
this.props.onRegisterClick();
},
onServerDetailsNextPhaseClick(ev) {
ev.stopPropagation();
this.setState({
phase: PHASE_LOGIN,
});
},
onEditServerDetailsClick(ev) {
ev.preventDefault();
ev.stopPropagation();
this.setState({
phase: PHASE_SERVER_DETAILS,
});
},
_tryWellKnownDiscovery: async function(serverName) {
if (!serverName.trim()) {
// Nothing to discover
@ -475,7 +539,79 @@ module.exports = React.createClass({
return errorText;
},
componentForStep: function(step) {
serverComponentForStep() {
const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
const ServerConfig = sdk.getComponent("auth.ServerConfig");
const ModularServerConfig = sdk.getComponent("auth.ModularServerConfig");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
// TODO: May need to adjust the behavior of this config option
if (SdkConfig.get()['disable_custom_urls']) {
return null;
}
// If we're on a different phase, we only show the server type selector,
// which is always shown if we allow custom URLs at all.
if (PHASES_ENABLED && this.state.phase !== PHASE_SERVER_DETAILS) {
return <div>
<ServerTypeSelector
defaultHsUrl={this.props.defaultHsUrl}
onChange={this.onServerTypeChange}
/>
</div>;
}
let serverDetails = null;
switch (this.state.serverType) {
case ServerType.FREE:
break;
case ServerType.PREMIUM:
serverDetails = <ModularServerConfig
customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000}
/>;
break;
case ServerType.ADVANCED:
serverDetails = <ServerConfig
customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
customIsUrl={this.state.discoveredIsUrl || this.props.customIsUrl}
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000}
/>;
break;
}
let nextButton = null;
if (PHASES_ENABLED) {
nextButton = <AccessibleButton className="mx_Login_submit"
onClick={this.onServerDetailsNextPhaseClick}
>
{_t("Next")}
</AccessibleButton>;
}
return <div>
<ServerTypeSelector
defaultHsUrl={this.props.defaultHsUrl}
onChange={this.onServerTypeChange}
/>
{serverDetails}
{nextButton}
</div>;
},
loginComponentForStep() {
if (PHASES_ENABLED && this.state.phase !== PHASE_LOGIN) {
return null;
}
const step = this.state.currentFlow;
if (!step) {
return null;
}
@ -491,10 +627,21 @@ module.exports = React.createClass({
_renderPasswordStep: function() {
const PasswordLogin = sdk.getComponent('auth.PasswordLogin');
let onEditServerDetailsClick = null;
// If custom URLs are allowed and we haven't selected the Free server type, wire
// up the server details edit link.
if (
PHASES_ENABLED &&
!SdkConfig.get()['disable_custom_urls'] &&
this.state.serverType !== ServerType.FREE
) {
onEditServerDetailsClick = this.onEditServerDetailsClick;
}
return (
<PasswordLogin
onSubmit={this.onPasswordLogin}
onError={this.onPasswordLoginError}
onEditServerDetailsClick={onEditServerDetailsClick}
initialUsername={this.state.username}
initialPhoneCountry={this.state.phoneCountry}
initialPhoneNumber={this.state.phoneNumber}
@ -521,7 +668,7 @@ module.exports = React.createClass({
// user's browser, let them log into their SSO provider, then redirect their browser
// to vector://vector which, of course, will not work.
return (
<a href={url} className="mx_Login_sso_link">{ _t('Sign in with single sign-on') }</a>
<a href={url} className="mx_Login_sso_link mx_Login_submit">{ _t('Sign in with single sign-on') }</a>
);
},
@ -530,7 +677,6 @@ module.exports = React.createClass({
const AuthPage = sdk.getComponent("auth.AuthPage");
const AuthHeader = sdk.getComponent("auth.AuthHeader");
const AuthBody = sdk.getComponent("auth.AuthBody");
const ServerConfig = sdk.getComponent("auth.ServerConfig");
const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
const errorText = this.props.defaultServerDiscoveryError || this.state.discoveryError || this.state.errorText;
@ -543,19 +689,6 @@ module.exports = React.createClass({
</a>;
}
let serverConfig;
if (!SdkConfig.get()['disable_custom_urls']) {
serverConfig = <ServerConfig ref="serverConfig"
withToggleButton={true}
customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
customIsUrl={this.state.discoveredIsUrl || this.props.customIsUrl}
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000} />;
}
let errorTextSection;
if (errorText) {
errorTextSection = (
@ -574,8 +707,8 @@ module.exports = React.createClass({
{loader}
</h2>
{ errorTextSection }
{ this.componentForStep(this.state.currentFlow) }
{ serverConfig }
{ this.serverComponentForStep() }
{ this.loginComponentForStep() }
<a className="mx_Auth_changeFlow" onClick={this.onRegisterClick} href="#">
{ _t('Create account') }
</a>

View File

@ -255,7 +255,7 @@ module.exports = React.createClass({
errMsg = _t("Only use lower case letters, numbers and '=_-./'");
break;
case "RegistrationForm.ERR_USERNAME_BLANK":
errMsg = _t('You need to enter a user name.');
errMsg = _t('You need to enter a username.');
break;
default:
console.error("Unknown error code: %s", errCode);
@ -330,7 +330,6 @@ module.exports = React.createClass({
if (!SdkConfig.get()['disable_custom_urls']) {
serverConfigSection = (
<ServerConfig ref="serverConfig"
withToggleButton={true}
customHsUrl={this.props.customHsUrl}
customIsUrl={this.props.customIsUrl}
defaultHsUrl={this.props.defaultHsUrl}

View File

@ -27,17 +27,17 @@ module.exports = React.createClass({
{ _t("Custom Server Options") }
</div>
<div className="mx_Dialog_content">
<span>
{ _t("You can use the custom server options to sign into other Matrix " +
"servers by specifying a different Home server URL.") }
<br />
{ _t("This allows you to use this app with an existing Matrix account on " +
"a different home server.") }
<br />
<br />
{ _t("You can also set a custom identity server but this will typically prevent " +
"interaction with users based on email address.") }
</span>
<p>{_t(
"You can use the custom server options to sign into other " +
"Matrix servers by specifying a different homeserver URL. This " +
"allows you to use this app with an existing Matrix account on a " +
"different homeserver.",
)}</p>
<p>{_t(
"You can also set a custom identity server, but you won't be " +
"able to invite users by email address, or be invited by email " +
"address yourself.",
)}</p>
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.props.onFinished} autoFocus={true}>

View File

@ -0,0 +1,126 @@
/*
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import sdk from '../../../index';
import { _t } from '../../../languageHandler';
const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
/*
* Configure the Modular server name.
*
* This is a variant of ServerConfig with only the HS field and different body
* text that is specific to the Modular case.
*/
export default class ModularServerConfig extends React.PureComponent {
static propTypes = {
onServerConfigChange: PropTypes.func,
// default URLs are defined in config.json (or the hardcoded defaults)
// they are used if the user has not overridden them with a custom URL.
// In other words, if the custom URL is blank, the default is used.
defaultHsUrl: PropTypes.string, // e.g. https://matrix.org
// This component always uses the default IS URL and doesn't allow it
// to be changed. We still receive it as a prop here to simplify
// consumers by still passing the IS URL via onServerConfigChange.
defaultIsUrl: PropTypes.string, // e.g. https://vector.im
// custom URLs are explicitly provided by the user and override the
// default URLs. The user enters them via the component's input fields,
// which is reflected on these properties whenever on..UrlChanged fires.
// They are persisted in localStorage by MatrixClientPeg, and so can
// override the default URLs when the component initially loads.
customHsUrl: PropTypes.string,
delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
}
static defaultProps = {
onServerConfigChange: function() {},
customHsUrl: "",
delayTimeMs: 0,
}
constructor(props) {
super(props);
this.state = {
hsUrl: props.customHsUrl,
};
}
componentWillReceiveProps(newProps) {
if (newProps.customHsUrl === this.state.hsUrl) return;
this.setState({
hsUrl: newProps.customHsUrl,
});
this.props.onServerConfigChange({
hsUrl: newProps.customHsUrl,
isUrl: this.props.defaultIsUrl,
});
}
onHomeserverChanged = (ev) => {
this.setState({hsUrl: ev.target.value}, () => {
this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
let hsUrl = this.state.hsUrl.trim().replace(/\/$/, "");
if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
this.props.onServerConfigChange({
hsUrl: this.state.hsUrl,
isUrl: this.props.defaultIsUrl,
});
});
});
}
_waitThenInvoke(existingTimeoutId, fn) {
if (existingTimeoutId) {
clearTimeout(existingTimeoutId);
}
return setTimeout(fn.bind(this), this.props.delayTimeMs);
}
render() {
const Field = sdk.getComponent('elements.Field');
return (
<div className="mx_ServerConfig">
<h3>{_t("Your Modular server")}</h3>
{_t(
"Enter the location of your Modular homeserver. It may use your own " +
"domain name or be a subdomain of <a>modular.im</a>.",
{}, {
a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
{sub}
</a>,
},
)}
<div className="mx_ServerConfig_fields">
<Field id="mx_ServerConfig_hsUrl"
label={_t("Server Name")}
placeholder={this.props.defaultHsUrl}
value={this.state.hsUrl}
onChange={this.onHomeserverChanged}
/>
</div>
</div>
);
}
}

View File

@ -29,6 +29,7 @@ import SdkConfig from '../../../SdkConfig';
class PasswordLogin extends React.Component {
static defaultProps = {
onError: function() {},
onEditServerDetailsClick: null,
onUsernameChanged: function() {},
onUsernameBlur: function() {},
onPasswordChanged: function() {},
@ -93,7 +94,7 @@ class PasswordLogin extends React.Component {
case PasswordLogin.LOGIN_FIELD_MXID:
username = this.state.username;
if (!username) {
error = _t('The user name field must not be blank.');
error = _t('The username field must not be blank.');
}
break;
case PasswordLogin.LOGIN_FIELD_PHONE:
@ -158,18 +159,16 @@ class PasswordLogin extends React.Component {
this.props.onPasswordChanged(ev.target.value);
}
renderLoginField(loginType, disabled) {
renderLoginField(loginType) {
const classes = {
mx_Login_field: true,
mx_Login_field_disabled: disabled,
};
switch (loginType) {
case PasswordLogin.LOGIN_FIELD_EMAIL:
classes.mx_Login_email = true;
classes.error = this.props.loginIncorrect && !this.state.username;
return <input
className={classNames(classes)}
className="mx_Login_field"
ref={(e) => {this._loginField = e;}}
key="email_input"
type="text"
@ -179,10 +178,8 @@ class PasswordLogin extends React.Component {
placeholder="joe@example.com"
value={this.state.username}
autoFocus
disabled={disabled}
/>;
case PasswordLogin.LOGIN_FIELD_MXID:
classes.mx_Login_username = true;
classes.error = this.props.loginIncorrect && !this.state.username;
return <input
className={classNames(classes)}
@ -195,14 +192,12 @@ class PasswordLogin extends React.Component {
placeholder={SdkConfig.get().disable_custom_urls ?
_t("Username on %(hs)s", {
hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
}) : _t("User name")}
}) : _t("Username")}
value={this.state.username}
autoFocus
disabled={disabled}
/>;
case PasswordLogin.LOGIN_FIELD_PHONE: {
const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
classes.mx_Login_phoneNumberField = true;
classes.mx_Login_field_has_prefix = true;
classes.error = this.props.loginIncorrect && !this.state.phoneNumber;
return <div className="mx_Login_phoneSection">
@ -212,7 +207,6 @@ class PasswordLogin extends React.Component {
value={this.state.phoneCountry}
isSmall={true}
showPrefix={true}
disabled={disabled}
/>
<input
className={classNames(classes)}
@ -224,7 +218,6 @@ class PasswordLogin extends React.Component {
placeholder={_t("Mobile phone number")}
value={this.state.phoneNumber}
autoFocus
disabled={disabled}
/>
</div>;
}
@ -257,27 +250,35 @@ class PasswordLogin extends React.Component {
</span>;
}
let matrixIdText = _t('Matrix ID');
let yourMatrixAccountText = _t('Your account');
if (this.props.hsName) {
matrixIdText = _t('%(serverName)s Matrix ID', {serverName: this.props.hsName});
yourMatrixAccountText = _t('Your %(serverName)s account', {serverName: this.props.hsName});
} else {
try {
const parsedHsUrl = new URL(this.props.hsUrl);
matrixIdText = _t('%(serverName)s Matrix ID', {serverName: parsedHsUrl.hostname});
yourMatrixAccountText = _t('Your %(serverName)s account', {serverName: parsedHsUrl.hostname});
} catch (e) {
// ignore
}
}
let editLink = null;
if (this.props.onEditServerDetailsClick) {
editLink = <a className="mx_Auth_editServerDetails"
href="#" onClick={this.props.onEditServerDetailsClick}
>
{_t('Edit')}
</a>;
}
const pwFieldClass = classNames({
mx_Login_field: true,
mx_Login_field_disabled: matrixIdText === '',
error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
});
const Dropdown = sdk.getComponent('elements.Dropdown');
const loginField = this.renderLoginField(this.state.loginType, matrixIdText === '');
const loginField = this.renderLoginField(this.state.loginType);
let loginType;
if (!SdkConfig.get().disable_3pid_login) {
@ -287,9 +288,8 @@ class PasswordLogin extends React.Component {
<Dropdown
className="mx_Login_type_dropdown"
value={this.state.loginType}
disabled={matrixIdText === ''}
onOptionChange={this.onLoginTypeChange}>
<span key={PasswordLogin.LOGIN_FIELD_MXID}>{ matrixIdText }</span>
<span key={PasswordLogin.LOGIN_FIELD_MXID}>{ _t('Username') }</span>
<span key={PasswordLogin.LOGIN_FIELD_EMAIL}>{ _t('Email address') }</span>
<span key={PasswordLogin.LOGIN_FIELD_PHONE}>{ _t('Phone') }</span>
</Dropdown>
@ -297,22 +297,27 @@ class PasswordLogin extends React.Component {
);
}
const disableSubmit = this.props.disableSubmit || matrixIdText === '';
return (
<div>
<h3>
{yourMatrixAccountText}
{editLink}
</h3>
<form onSubmit={this.onSubmitForm}>
{ loginType }
{ loginField }
<input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
name="password"
value={this.state.password} onChange={this.onPasswordChanged}
placeholder={_t('Password')}
disabled={matrixIdText === ''}
/>
<br />
{ forgotPasswordJsx }
<input className="mx_Login_submit" type="submit" value={_t('Sign in')} disabled={disableSubmit} />
{ loginType }
{ loginField }
<input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
name="password"
value={this.state.password} onChange={this.onPasswordChanged}
placeholder={_t('Password')}
/>
<br />
{ forgotPasswordJsx }
<input className="mx_Login_submit"
type="submit"
value={_t('Sign in')}
disabled={this.props.disableSubmit}
/>
</form>
</div>
);

View File

@ -305,7 +305,7 @@ module.exports = React.createClass({
<input className="mx_Login_submit" type="submit" value={_t("Register")} />
);
const placeholderUserName = _t("User name");
const placeholderUsername = _t("Username");
return (
<div>
@ -313,7 +313,7 @@ module.exports = React.createClass({
{ emailSection }
{ phoneSection }
<input type="text" ref="username"
placeholder={placeholderUserName} defaultValue={this.props.defaultUsername}
placeholder={placeholderUsername} defaultValue={this.props.defaultUsername}
className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
onBlur={function() {self.validateField(FIELD_USERNAME);}} />
<br />

View File

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,21 +15,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
'use strict';
const React = require('react');
import React from 'react';
import PropTypes from 'prop-types';
const Modal = require('../../../Modal');
const sdk = require('../../../index');
import Modal from '../../../Modal';
import sdk from '../../../index';
import { _t } from '../../../languageHandler';
/**
/*
* A pure UI component which displays the HS and IS to use.
*/
module.exports = React.createClass({
displayName: 'ServerConfig',
propTypes: {
export default class ServerConfig extends React.PureComponent {
static propTypes = {
onServerConfigChange: PropTypes.func,
// default URLs are defined in config.json (or the hardcoded defaults)
@ -45,155 +43,103 @@ module.exports = React.createClass({
customHsUrl: PropTypes.string,
customIsUrl: PropTypes.string,
withToggleButton: PropTypes.bool,
delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
},
}
getDefaultProps: function() {
return {
onServerConfigChange: function() {},
customHsUrl: "",
customIsUrl: "",
withToggleButton: false,
delayTimeMs: 0,
static defaultProps = {
onServerConfigChange: function() {},
customHsUrl: "",
customIsUrl: "",
delayTimeMs: 0,
}
constructor(props) {
super(props);
this.state = {
hsUrl: props.customHsUrl,
isUrl: props.customIsUrl,
};
},
}
getInitialState: function() {
return {
hs_url: this.props.customHsUrl,
is_url: this.props.customIsUrl,
// if withToggleButton is false, then show the config all the time given we have no way otherwise of making it visible
configVisible: !this.props.withToggleButton ||
(this.props.customHsUrl !== this.props.defaultHsUrl) ||
(this.props.customIsUrl !== this.props.defaultIsUrl),
};
},
componentWillReceiveProps: function(newProps) {
if (newProps.customHsUrl === this.state.hs_url &&
newProps.customIsUrl === this.state.is_url) return;
componentWillReceiveProps(newProps) {
if (newProps.customHsUrl === this.state.hsUrl &&
newProps.customIsUrl === this.state.isUrl) return;
this.setState({
hs_url: newProps.customHsUrl,
is_url: newProps.customIsUrl,
configVisible: !newProps.withToggleButton ||
(newProps.customHsUrl !== newProps.defaultHsUrl) ||
(newProps.customIsUrl !== newProps.defaultIsUrl),
hsUrl: newProps.customHsUrl,
isUrl: newProps.customIsUrl,
});
this.props.onServerConfigChange({
hsUrl: newProps.customHsUrl,
isUrl: newProps.customIsUrl,
});
},
}
onHomeserverChanged: function(ev) {
this.setState({hs_url: ev.target.value}, () => {
onHomeserverChanged = (ev) => {
this.setState({hsUrl: ev.target.value}, () => {
this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
let hsUrl = this.state.hs_url.trim().replace(/\/$/, "");
let hsUrl = this.state.hsUrl.trim().replace(/\/$/, "");
if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
this.props.onServerConfigChange({
hsUrl: this.state.hs_url,
isUrl: this.state.is_url,
hsUrl: this.state.hsUrl,
isUrl: this.state.isUrl,
});
});
});
},
}
onIdentityServerChanged: function(ev) {
this.setState({is_url: ev.target.value}, () => {
onIdentityServerChanged = (ev) => {
this.setState({isUrl: ev.target.value}, () => {
this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, () => {
let isUrl = this.state.is_url.trim().replace(/\/$/, "");
let isUrl = this.state.isUrl.trim().replace(/\/$/, "");
if (isUrl === "") isUrl = this.props.defaultIsUrl;
this.props.onServerConfigChange({
hsUrl: this.state.hs_url,
isUrl: this.state.is_url,
hsUrl: this.state.hsUrl,
isUrl: this.state.isUrl,
});
});
});
},
}
_waitThenInvoke: function(existingTimeoutId, fn) {
_waitThenInvoke(existingTimeoutId, fn) {
if (existingTimeoutId) {
clearTimeout(existingTimeoutId);
}
return setTimeout(fn.bind(this), this.props.delayTimeMs);
},
}
onServerConfigVisibleChange: function(visible, ev) {
this.setState({
configVisible: visible,
});
if (!visible) {
this.props.onServerConfigChange({
hsUrl: this.props.defaultHsUrl,
isUrl: this.props.defaultIsUrl,
});
} else {
this.props.onServerConfigChange({
hsUrl: this.state.hs_url,
isUrl: this.state.is_url,
});
}
},
showHelpPopup: function() {
showHelpPopup = () => {
const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
},
}
render: function() {
const serverConfigStyle = {};
serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
let toggleButton;
if (this.props.withToggleButton) {
toggleButton = (
<div className="mx_ServerConfig_selector">
<input className="mx_Login_radio" id="basic" name="configVisible" type="radio"
checked={!this.state.configVisible}
onChange={this.onServerConfigVisibleChange.bind(this, false)} />
<label className="mx_Login_label" htmlFor="basic">
{ _t("Default server") }
</label>
&nbsp;&nbsp;
<input className="mx_Login_radio" id="advanced" name="configVisible" type="radio"
checked={this.state.configVisible}
onChange={this.onServerConfigVisibleChange.bind(this, true)} />
<label className="mx_Login_label" htmlFor="advanced">
{ _t("Custom server") }
</label>
</div>
);
}
render() {
const Field = sdk.getComponent('elements.Field');
return (
<div>
{ toggleButton }
<div style={serverConfigStyle}>
<div className="mx_ServerConfig">
<label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">
{ _t("Home server URL") }
</label>
<input className="mx_Login_field" id="hsurl" type="text"
<div className="mx_ServerConfig">
<h3>{_t("Other servers")}</h3>
{_t("Enter custom server URLs <a>What does this mean?</a>", {}, {
a: sub => <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
{ sub }
</a>,
})}
<div className="mx_ServerConfig_fields">
<Field id="mx_ServerConfig_hsUrl"
label={_t("Homeserver URL")}
placeholder={this.props.defaultHsUrl}
disabled={!this.props.withToggleButton}
value={this.state.hs_url}
onChange={this.onHomeserverChanged} />
<label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">
{ _t("Identity server URL") }
</label>
<input className="mx_Login_field" id="isurl" type="text"
value={this.state.hsUrl}
onChange={this.onHomeserverChanged}
/>
<Field id="mx_ServerConfig_isUrl"
label={_t("Identity Server URL")}
placeholder={this.props.defaultIsUrl}
disabled={!this.props.withToggleButton}
value={this.state.is_url}
onChange={this.onIdentityServerChanged} />
<a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
{ _t("What does this mean?") }
</a>
value={this.state.isUrl}
onChange={this.onIdentityServerChanged}
/>
</div>
</div>
</div>
);
},
});
}
}

View File

@ -0,0 +1,148 @@
/*
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler';
import sdk from '../../../index';
import classnames from 'classnames';
const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
export const FREE = 'Free';
export const PREMIUM = 'Premium';
export const ADVANCED = 'Advanced';
export const TYPES = {
FREE: {
id: FREE,
label: () => _t('Free'),
logo: () => <img src={require('../../../../res/img/feather-icons/matrix-org-bw-logo.svg')} />,
description: () => _t('Join millions for free on the largest public server'),
hsUrl: 'https://matrix.org',
isUrl: 'https://vector.im',
},
PREMIUM: {
id: PREMIUM,
label: () => _t('Premium'),
logo: () => <img src={require('../../../../res/img/feather-icons/modular-bw-logo.svg')} />,
description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
{sub}
</a>,
}),
},
ADVANCED: {
id: ADVANCED,
label: () => _t('Advanced'),
logo: () => <div>
<img src={require('../../../../res/img/feather-icons/globe.svg')} />
{_t('Other')}
</div>,
description: () => _t('Find other public servers or use a custom server'),
},
};
function getDefaultType(defaultHsUrl) {
if (!defaultHsUrl) {
return null;
} else if (defaultHsUrl === TYPES.FREE.hsUrl) {
return FREE;
} else if (new URL(defaultHsUrl).hostname.endsWith('.modular.im')) {
// TODO: Use a Riot config parameter to detect Modular-ness.
// https://github.com/vector-im/riot-web/issues/8253
return PREMIUM;
} else {
return ADVANCED;
}
}
export default class ServerTypeSelector extends React.PureComponent {
static propTypes = {
// The default HS URL as another way to set the initially selected type.
defaultHsUrl: PropTypes.string,
// Handler called when the selected type changes.
onChange: PropTypes.func.isRequired,
}
constructor(props) {
super(props);
const {
defaultHsUrl,
onChange,
} = props;
const type = getDefaultType(defaultHsUrl);
this.state = {
selected: type,
};
if (onChange) {
onChange(type);
}
}
updateSelectedType(type) {
if (this.state.selected === type) {
return;
}
this.setState({
selected: type,
});
if (this.props.onChange) {
this.props.onChange(type);
}
}
onClick = (e) => {
e.stopPropagation();
const type = e.currentTarget.dataset.id;
this.updateSelectedType(type);
}
render() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const serverTypes = [];
for (const type of Object.values(TYPES)) {
const { id, label, logo, description } = type;
const classes = classnames(
"mx_ServerTypeSelector_type",
`mx_ServerTypeSelector_type_${id}`,
{
"mx_ServerTypeSelector_type_selected": id === this.state.selected,
},
);
serverTypes.push(<div className={classes} key={id} >
<div className="mx_ServerTypeSelector_label">
{label()}
</div>
<AccessibleButton onClick={this.onClick} data-id={id}>
<div className="mx_ServerTypeSelector_logo">
{logo()}
</div>
<div className="mx_ServerTypeSelector_description">
{description()}
</div>
</AccessibleButton>
</div>);
}
return <div className="mx_ServerTypeSelector">
{serverTypes}
</div>;
}
}

View File

@ -4,7 +4,7 @@
"Failed to verify email address: make sure you clicked the link in the email": "Failed to verify email address: make sure you clicked the link in the email",
"The platform you're on": "The platform you're on",
"The version of Riot.im": "The version of Riot.im",
"Whether or not you're logged in (we don't record your user name)": "Whether or not you're logged in (we don't record your user name)",
"Whether or not you're logged in (we don't record your username)": "Whether or not you're logged in (we don't record your username)",
"Your language of choice": "Your language of choice",
"Which officially provided instance you are using, if any": "Which officially provided instance you are using, if any",
"Whether or not you're using the Richtext mode of the Rich Text Editor": "Whether or not you're using the Richtext mode of the Rich Text Editor",
@ -305,7 +305,7 @@
"Uploading report": "Uploading report",
"Waiting for response from server": "Waiting for response from server",
"Messages containing my display name": "Messages containing my display name",
"Messages containing my user name": "Messages containing my user name",
"Messages containing my username": "Messages containing my username",
"Messages containing @room": "Messages containing @room",
"Messages in one-to-one chats": "Messages in one-to-one chats",
"Encrypted messages in one-to-one chats": "Encrypted messages in one-to-one chats",
@ -1165,9 +1165,8 @@
"Robot check is currently unavailable on desktop - please use a <a>web browser</a>": "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
"This Home Server would like to make sure you are not a robot": "This Home Server would like to make sure you are not a robot",
"Custom Server Options": "Custom Server Options",
"You can use the custom server options to sign into other Matrix servers by specifying a different Home server URL.": "You can use the custom server options to sign into other Matrix servers by specifying a different Home server URL.",
"This allows you to use this app with an existing Matrix account on a different home server.": "This allows you to use this app with an existing Matrix account on a different home server.",
"You can also set a custom identity server but this will typically prevent interaction with users based on email address.": "You can also set a custom identity server but this will typically prevent interaction with users based on email address.",
"You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use this app with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use this app with an existing Matrix account on a different homeserver.",
"You can also set a custom identity server, but you won't be able to invite users by email address, or be invited by email address yourself.": "You can also set a custom identity server, but you won't be able to invite users by email address, or be invited by email address yourself.",
"To continue, please enter your password.": "To continue, please enter your password.",
"Password:": "Password:",
"Please review and accept all of the homeserver's policies": "Please review and accept all of the homeserver's policies",
@ -1179,25 +1178,34 @@
"Please enter the code it contains:": "Please enter the code it contains:",
"Code": "Code",
"Start authentication": "Start authentication",
"Your Modular server": "Your Modular server",
"Enter the location of your Modular homeserver. It may use your own domain name or be a subdomain of <a>modular.im</a>.": "Enter the location of your Modular homeserver. It may use your own domain name or be a subdomain of <a>modular.im</a>.",
"Server Name": "Server Name",
"The email field must not be blank.": "The email field must not be blank.",
"The user name field must not be blank.": "The user name field must not be blank.",
"The username field must not be blank.": "The username field must not be blank.",
"The phone number field must not be blank.": "The phone number field must not be blank.",
"The password field must not be blank.": "The password field must not be blank.",
"Username on %(hs)s": "Username on %(hs)s",
"User name": "User name",
"Username": "Username",
"Mobile phone number": "Mobile phone number",
"Not sure of your password? <a>Set a new one</a>": "Not sure of your password? <a>Set a new one</a>",
"%(serverName)s Matrix ID": "%(serverName)s Matrix ID",
"Your account": "Your account",
"Your %(serverName)s account": "Your %(serverName)s account",
"Sign in with": "Sign in with",
"Sign in": "Sign in",
"If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?",
"Email address (optional)": "Email address (optional)",
"Mobile phone number (optional)": "Mobile phone number (optional)",
"Default server": "Default server",
"Custom server": "Custom server",
"Home server URL": "Home server URL",
"Identity server URL": "Identity server URL",
"What does this mean?": "What does this mean?",
"Other servers": "Other servers",
"Enter custom server URLs <a>What does this mean?</a>": "Enter custom server URLs <a>What does this mean?</a>",
"Homeserver URL": "Homeserver URL",
"Identity Server URL": "Identity Server URL",
"Free": "Free",
"Join millions for free on the largest public server": "Join millions for free on the largest public server",
"Premium": "Premium",
"Premium hosting for organisations <a>Learn more</a>": "Premium hosting for organisations <a>Learn more</a>",
"Other": "Other",
"Find other public servers or use a custom server": "Find other public servers or use a custom server",
"Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
"Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",
"Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.",
@ -1400,7 +1408,7 @@
"This doesn't look like a valid phone number.": "This doesn't look like a valid phone number.",
"An email address is required to register on this homeserver.": "An email address is required to register on this homeserver.",
"A phone number is required to register on this homeserver.": "A phone number is required to register on this homeserver.",
"You need to enter a user name.": "You need to enter a user name.",
"You need to enter a username.": "You need to enter a username.",
"An unknown error occurred.": "An unknown error occurred.",
"Create your account": "Create your account",
"Commands": "Commands",

View File

@ -83,7 +83,7 @@ module.exports = {
// Messages containing user's username (localpart/MXID)
".m.rule.contains_user_name": new VectorPushRuleDefinition({
kind: "override",
description: _td("Messages containing my user name"), // passed through _t() translation in src/components/views/settings/Notifications.js
description: _td("Messages containing my username"), // passed through _t() translation in src/components/views/settings/Notifications.js
vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
on: StandardActions.ACTION_NOTIFY,
loud: StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND,