|
11 | 11 | import {user} from "../stores/user"; |
12 | 12 | import Modal from "../components/Modal.svelte"; |
13 | 13 |
|
| 14 | + const RECOVERY_CODE = "recovery-code"; |
| 15 | + const REDIRECT = "redirect"; |
| 16 | +
|
14 | 17 | let showSpinner = true; |
15 | 18 | let initial = true; |
16 | 19 | let hash = null; |
17 | 20 | let phoneNumber = ""; |
18 | 21 | let rateLimited = false; |
19 | 22 | let showRateLimitedModal = false; |
20 | | -
|
| 23 | + let finalizedRegistration = false; |
| 24 | + let recoveryCode = sessionStorage.getItem(RECOVERY_CODE); |
| 25 | + let redirect = sessionStorage.getItem(REDIRECT); |
| 26 | + |
21 | 27 | onMount(() => { |
22 | 28 | $links.displayBackArrow = true; |
23 | 29 |
|
|
40 | 46 | $user.phoneNumber = phoneNumber; |
41 | 47 | navigate(`phone-confirmation?h=${hash}`); |
42 | 48 | }) |
43 | | - .catch(() => { |
44 | | - rateLimited = true; |
45 | | - showRateLimitedModal = true; |
| 49 | + .catch(e => { |
| 50 | + if (e.status === 406) { |
| 51 | + finalizedRegistration = true; |
| 52 | + } else { |
| 53 | + rateLimited = true; |
| 54 | + showRateLimitedModal = true; |
| 55 | + } |
46 | 56 | showSpinner = false; |
47 | 57 | }) |
48 | 58 | } |
|
94 | 104 | outline: none; |
95 | 105 | } |
96 | 106 |
|
| 107 | + span.backup-code { |
| 108 | + font-weight: 600; |
| 109 | + } |
97 | 110 |
|
98 | 111 | </style> |
99 | 112 | {#if showSpinner} |
100 | 113 | <Spinner/> |
101 | 114 | {/if} |
102 | | -<h2 class="header">{I18n.t("PhoneVerification.Header.COPY")}</h2> |
103 | | -<p class="explanation">{I18n.t("phoneVerification.info")}</p> |
104 | | -<p class="methods">{I18n.t("PhoneVerification.Text.COPY")}</p> |
105 | | - |
106 | | -<input class:error={phoneNumberIncorrect} |
107 | | - autocomplete="current-password" |
108 | | - id="password-field" |
109 | | - spellcheck="false" |
110 | | - on:keydown={handleEnter} |
111 | | - placeholder={I18n.t("PhoneVerification.PlaceHolder.COPY")} |
112 | | - use:init |
113 | | - bind:value={phoneNumber}> |
114 | | -{#if phoneNumberIncorrect} |
115 | | - <div class="error"> |
116 | | - <span class="svg">{@html critical}</span> |
117 | | - <span>{I18n.t("phoneVerification.phoneIncorrect")}</span> |
118 | | - </div> |
| 115 | +{#if finalizedRegistration} |
| 116 | + <h2 class="header">{I18n.t("recovery.finalizedRegistration")}</h2> |
| 117 | + <p class="explanation">{I18n.t("recovery.finalizedRegistrationExplanation")}</p> |
| 118 | + {#if recoveryCode} |
| 119 | + <p class="explanation">{I18n.t("recovery.finalizedRegistrationBackupCode")} |
| 120 | + <span class="backup-code">{recoveryCode}</span> |
| 121 | + </p> |
| 122 | + {/if} |
| 123 | + |
| 124 | + <Button onClick={() => navigate(`/congrats?h=${hash}&redirect=${encodeURIComponent(redirect)}`)} |
| 125 | + className="cancel full" |
| 126 | + href={"/next"} |
| 127 | + label={I18n.t("recovery.next")}/> |
| 128 | +{:else} |
| 129 | + <h2 class="header">{I18n.t("PhoneVerification.Header.COPY")}</h2> |
| 130 | + <p class="explanation">{I18n.t("phoneVerification.info")}</p> |
| 131 | + <p class="methods">{I18n.t("PhoneVerification.Text.COPY")}</p> |
| 132 | + |
| 133 | + <input class:error={phoneNumberIncorrect} |
| 134 | + autocomplete="current-password" |
| 135 | + id="password-field" |
| 136 | + spellcheck="false" |
| 137 | + on:keydown={handleEnter} |
| 138 | + placeholder={I18n.t("PhoneVerification.PlaceHolder.COPY")} |
| 139 | + use:init |
| 140 | + bind:value={phoneNumber}> |
| 141 | + {#if phoneNumberIncorrect} |
| 142 | + <div class="error"> |
| 143 | + <span class="svg">{@html critical}</span> |
| 144 | + <span>{I18n.t("phoneVerification.phoneIncorrect")}</span> |
| 145 | + </div> |
| 146 | + {/if} |
| 147 | + |
| 148 | + <Button href="/next" |
| 149 | + disabled={showSpinner || !allowedNext || rateLimited} |
| 150 | + label={I18n.t("PhoneVerification.Verify.COPY")} |
| 151 | + className="full" |
| 152 | + onClick={next}/> |
| 153 | + |
119 | 154 | {/if} |
120 | 155 |
|
121 | | -<Button href="/next" |
122 | | - disabled={showSpinner || !allowedNext || rateLimited} |
123 | | - label={I18n.t("PhoneVerification.Verify.COPY")} |
124 | | - className="full" |
125 | | - onClick={next}/> |
| 156 | + |
126 | 157 |
|
127 | 158 | {#if rateLimited && showRateLimitedModal} |
128 | 159 | <Modal submit={() => showRateLimitedModal = false} |
|
0 commit comments