feat: add ui for phone authentication
This commit is contained in:
Torsten Dittmann
parent
a5e76d5c55
commit
1eb91bc91e
|
|
@ -7,7 +7,7 @@ return [
|
|||
'name' => 'Email/Password',
|
||||
'key' => 'emailPassword',
|
||||
'icon' => '/images/users/email.png',
|
||||
'docs' => 'https://appwrite.io/docs/client/account?sdk=web-default#accountCreateSession',
|
||||
'docs' => 'https://appwrite.io/docs/client/account?sdk=web-default#accountCreateEmailSession',
|
||||
'enabled' => true,
|
||||
],
|
||||
'magic-url' => [
|
||||
|
|
@ -42,7 +42,7 @@ return [
|
|||
'name' => 'Phone',
|
||||
'key' => 'phone',
|
||||
'icon' => '/images/users/phone.png',
|
||||
'docs' => '',
|
||||
'enabled' => false,
|
||||
'docs' => 'https://appwrite.io/docs/client/account?sdk=web-default#accountCreatePhoneSession',
|
||||
'enabled' => true,
|
||||
],
|
||||
];
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -407,7 +407,7 @@ App::patch('/v1/users/:userId/verification')
|
|||
->label('scope', 'users.write')
|
||||
->label('sdk.auth', [APP_AUTH_TYPE_KEY])
|
||||
->label('sdk.namespace', 'users')
|
||||
->label('sdk.method', 'updateVerification')
|
||||
->label('sdk.method', 'updateEmailVerification')
|
||||
->label('sdk.description', '/docs/references/users/update-user-verification.md')
|
||||
->label('sdk.response.code', Response::STATUS_CODE_OK)
|
||||
->label('sdk.response.type', Response::CONTENT_TYPE_JSON)
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<div data-ui-modal class="modal width-medium box close" data-button-hide="on" data-open-event="open-update-name">
|
||||
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
|
||||
|
||||
<h2>Update name</h2>
|
||||
<h2>Update Name</h2>
|
||||
|
||||
<form name="users.updateName"
|
||||
data-analytics
|
||||
|
|
@ -85,6 +85,41 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<div data-ui-modal class="modal width-medium box close" data-button-hide="on" data-open-event="open-update-phone">
|
||||
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
|
||||
|
||||
<h2>Update Phone</h2>
|
||||
|
||||
<form name="users.updatePhone"
|
||||
data-analytics
|
||||
data-analytics-activity
|
||||
data-analytics-event="submit"
|
||||
data-analytics-category="console"
|
||||
data-analytics-label="Update User Phone"
|
||||
data-service="users.updatePhone"
|
||||
data-scope="sdk"
|
||||
data-event="submit"
|
||||
data-success="trigger,alert"
|
||||
data-success-param-alert-text="User phone was updated successfully"
|
||||
data-success-param-trigger-events="users.update"
|
||||
data-failure="alert"
|
||||
data-failure-param-alert-text="Failed to update user email"
|
||||
data-failure-param-alert-classname="error">
|
||||
|
||||
<input type="hidden" disabled name="userId" data-ls-bind="{{user.$id}}">
|
||||
|
||||
<label for="number">Phone number</label>
|
||||
<input name="number" id="number" type="text" autocomplete="off" data-ls-bind="{{user.phone}}" pattern="^\+?[1-9]\d{1,14}$" required class="full-width" title="Phone number with a leading '+' and maximum of 15 digits (+123456789).">
|
||||
<div class="text-fade text-size-xs margin-top-negative-small margin-bottom">Phone number with a leading '+' and maximum of 15 digits (+123456789)</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<footer>
|
||||
<button type="submit" class="">Update</button> <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div data-ui-modal class="modal width-medium box close" data-button-hide="on" data-open-event="open-update-password">
|
||||
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
|
||||
|
||||
|
|
@ -149,7 +184,8 @@
|
|||
<img src="" data-ls-attrs="src={{user|avatar}}" data-size="200" alt="User Avatar" class="avatar huge margin-top-negative-xxl" />
|
||||
|
||||
<div class="margin-top-small" data-ls-bind="Member since {{user.registration|dateText}}"></div>
|
||||
<div class="margin-top-small">
|
||||
<div class="margin-top-small" data-ls-if="{{user.email}}">
|
||||
<span data-ls-bind="{{user.email}}"></span>
|
||||
<span data-ls-if="{{user.emailVerification}} === true">
|
||||
<span class="tag green">Verified</span>
|
||||
</span>
|
||||
|
|
@ -157,7 +193,15 @@
|
|||
<span class="tag">Unverified</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="margin-top-small" data-ls-bind="{{user.email}}"></div>
|
||||
<div class="margin-top-small" data-ls-if="{{user.phone}}">
|
||||
<span data-ls-bind="{{user.phone}}"></span>
|
||||
<span data-ls-if="{{user.phoneVerification}} === true">
|
||||
<span class="tag green">Verified</span>
|
||||
</span>
|
||||
<span data-ls-if="{{user.phoneVerification}} !== true">
|
||||
<span class="tag">Unverified</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -236,20 +280,21 @@
|
|||
</div>
|
||||
|
||||
<ul class="margin-bottom-large text-fade text-size-small">
|
||||
<li class="margin-bottom-small"><i class="icon-angle-circled-right margin-start-tiny margin-end-tiny"></i> <button data-ls-ui-trigger="open-update-name" class="link text-size-small">Update name</button></li>
|
||||
<li class="margin-bottom-small"><i class="icon-angle-circled-right margin-start-tiny margin-end-tiny"></i> <button data-ls-ui-trigger="open-update-name" class="link text-size-small">Update Name</button></li>
|
||||
<li class="margin-bottom-small"><i class="icon-angle-circled-right margin-start-tiny margin-end-tiny"></i> <button data-ls-ui-trigger="open-update-email" class="link text-size-small">Update Email</button></li>
|
||||
<li class="margin-bottom-small"><i class="icon-angle-circled-right margin-start-tiny margin-end-tiny"></i> <button data-ls-ui-trigger="open-update-phone" class="link text-size-small">Update Phone</button></li>
|
||||
<li class="margin-bottom-small"><i class="icon-angle-circled-right margin-start-tiny margin-end-tiny"></i> <button data-ls-ui-trigger="open-update-password" class="link text-size-small">Update Password</button></li>
|
||||
<li class="margin-bottom-small"><i class="icon-angle-circled-right margin-start-tiny margin-end-tiny"></i> <button data-ls-ui-trigger="open-json" class="link text-size-small">View as JSON</button></li>
|
||||
</ul>
|
||||
|
||||
<div data-ls-if="{{user.emailVerification}} === false" style="display: none">
|
||||
<div data-ls-if="{{user.email}} && {{user.emailVerification}} === false" style="display: none">
|
||||
<form name="users.updateVerification" class="margin-bottom"
|
||||
data-analytics
|
||||
data-analytics-activity
|
||||
data-analytics-event="submit"
|
||||
data-analytics-category="console"
|
||||
data-analytics-label="Update Verification Status"
|
||||
data-service="users.updateVerification"
|
||||
data-analytics-label="Update Email Verification Status"
|
||||
data-service="users.updateEmailVerification"
|
||||
data-scope="sdk"
|
||||
data-event="submit"
|
||||
data-success="trigger,alert"
|
||||
|
|
@ -261,18 +306,18 @@
|
|||
>
|
||||
<input type="hidden" disabled name="userId" data-ls-bind="{{user.$id}}">
|
||||
<input type="hidden" disabled name="emailVerification" value="true" data-cast-to="boolean">
|
||||
<button type="submit" class="dark fill">Verify Account</button>
|
||||
<button type="submit" class="dark fill">Verify Email</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div data-ls-if="{{user.emailVerification}} === true" style="display: none">
|
||||
<div data-ls-if="{{user.email}} && {{user.emailVerification}} === true" style="display: none">
|
||||
<form name="users.updateVerification" class="margin-bottom"
|
||||
data-analytics
|
||||
data-analytics-activity
|
||||
data-analytics-event="submit"
|
||||
data-analytics-category="console"
|
||||
data-analytics-label="Update Verification Status"
|
||||
data-service="users.updateVerification"
|
||||
data-analytics-label="Update Email Verification Status"
|
||||
data-service="users.updateEmailVerification"
|
||||
data-scope="sdk"
|
||||
data-event="submit"
|
||||
data-success="trigger,alert"
|
||||
|
|
@ -284,7 +329,53 @@
|
|||
>
|
||||
<input type="hidden" disabled name="userId" data-ls-bind="{{user.$id}}">
|
||||
<input type="hidden" disabled name="emailVerification" value="false" data-cast-to="boolean">
|
||||
<button type="submit" class="dark fill">Unverify Account</button>
|
||||
<button type="submit" class="dark fill">Unverify Email</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div data-ls-if="{{user.phone}} && {{user.phoneVerification}} === false" style="display: none">
|
||||
<form name="users.updateVerification" class="margin-bottom"
|
||||
data-analytics
|
||||
data-analytics-activity
|
||||
data-analytics-event="submit"
|
||||
data-analytics-category="console"
|
||||
data-analytics-label="Update Phone Verification Status"
|
||||
data-service="users.updatePhoneVerification"
|
||||
data-scope="sdk"
|
||||
data-event="submit"
|
||||
data-success="trigger,alert"
|
||||
data-success-param-alert-text="User verification status was updated successfully"
|
||||
data-success-param-trigger-events="users.update"
|
||||
data-failure="alert"
|
||||
data-failure-param-alert-text="Failed to update user verification status"
|
||||
data-failure-param-alert-classname="error"
|
||||
>
|
||||
<input type="hidden" disabled name="userId" data-ls-bind="{{user.$id}}">
|
||||
<input type="hidden" disabled name="phoneVerification" value="true" data-cast-to="boolean">
|
||||
<button type="submit" class="dark fill">Verify Phone</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div data-ls-if="{{user.phone}} && {{user.phoneVerification}} === true" style="display: none">
|
||||
<form name="users.updateVerification" class="margin-bottom"
|
||||
data-analytics
|
||||
data-analytics-activity
|
||||
data-analytics-event="submit"
|
||||
data-analytics-category="console"
|
||||
data-analytics-label="Update Phone Verification Status"
|
||||
data-service="users.updatePhoneVerification"
|
||||
data-scope="sdk"
|
||||
data-event="submit"
|
||||
data-success="trigger,alert"
|
||||
data-success-param-alert-text="User verification status was updated successfully"
|
||||
data-success-param-trigger-events="users.update"
|
||||
data-failure="alert"
|
||||
data-failure-param-alert-text="Failed to update user verification status"
|
||||
data-failure-param-alert-classname="error"
|
||||
>
|
||||
<input type="hidden" disabled name="userId" data-ls-bind="{{user.$id}}">
|
||||
<input type="hidden" disabled name="phoneVerification" value="false" data-cast-to="boolean">
|
||||
<button type="submit" class="dark fill">Unverify Phone</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
2
public/dist/scripts/app-all.js
vendored
2
public/dist/scripts/app-all.js
vendored
|
|
@ -645,7 +645,7 @@ if(typeof sessionId==='undefined'){throw new AppwriteException('Missing required
|
|||
let path='/users/{userId}/sessions/{sessionId}'.replace('{userId}',userId).replace('{sessionId}',sessionId);let payload={};const uri=new URL(this.config.endpoint+path);return yield this.call('delete',uri,{'content-type':'application/json',},payload);}),updateStatus:(userId,status)=>__awaiter(this,void 0,void 0,function*(){if(typeof userId==='undefined'){throw new AppwriteException('Missing required parameter: "userId"');}
|
||||
if(typeof status==='undefined'){throw new AppwriteException('Missing required parameter: "status"');}
|
||||
let path='/users/{userId}/status'.replace('{userId}',userId);let payload={};if(typeof status!=='undefined'){payload['status']=status;}
|
||||
const uri=new URL(this.config.endpoint+path);return yield this.call('patch',uri,{'content-type':'application/json',},payload);}),updateVerification:(userId,emailVerification)=>__awaiter(this,void 0,void 0,function*(){if(typeof userId==='undefined'){throw new AppwriteException('Missing required parameter: "userId"');}
|
||||
const uri=new URL(this.config.endpoint+path);return yield this.call('patch',uri,{'content-type':'application/json',},payload);}),updateEmailVerification:(userId,emailVerification)=>__awaiter(this,void 0,void 0,function*(){if(typeof userId==='undefined'){throw new AppwriteException('Missing required parameter: "userId"');}
|
||||
if(typeof emailVerification==='undefined'){throw new AppwriteException('Missing required parameter: "emailVerification"');}
|
||||
let path='/users/{userId}/verification'.replace('{userId}',userId);let payload={};if(typeof emailVerification!=='undefined'){payload['emailVerification']=emailVerification;}
|
||||
const uri=new URL(this.config.endpoint+path);return yield this.call('patch',uri,{'content-type':'application/json',},payload);}),updatePhoneVerification:(userId,phoneVerification)=>__awaiter(this,void 0,void 0,function*(){if(typeof userId==='undefined'){throw new AppwriteException('Missing required parameter: "userId"');}
|
||||
|
|
|
|||
2
public/dist/scripts/app-dep.js
vendored
2
public/dist/scripts/app-dep.js
vendored
|
|
@ -645,7 +645,7 @@ if(typeof sessionId==='undefined'){throw new AppwriteException('Missing required
|
|||
let path='/users/{userId}/sessions/{sessionId}'.replace('{userId}',userId).replace('{sessionId}',sessionId);let payload={};const uri=new URL(this.config.endpoint+path);return yield this.call('delete',uri,{'content-type':'application/json',},payload);}),updateStatus:(userId,status)=>__awaiter(this,void 0,void 0,function*(){if(typeof userId==='undefined'){throw new AppwriteException('Missing required parameter: "userId"');}
|
||||
if(typeof status==='undefined'){throw new AppwriteException('Missing required parameter: "status"');}
|
||||
let path='/users/{userId}/status'.replace('{userId}',userId);let payload={};if(typeof status!=='undefined'){payload['status']=status;}
|
||||
const uri=new URL(this.config.endpoint+path);return yield this.call('patch',uri,{'content-type':'application/json',},payload);}),updateVerification:(userId,emailVerification)=>__awaiter(this,void 0,void 0,function*(){if(typeof userId==='undefined'){throw new AppwriteException('Missing required parameter: "userId"');}
|
||||
const uri=new URL(this.config.endpoint+path);return yield this.call('patch',uri,{'content-type':'application/json',},payload);}),updateEmailVerification:(userId,emailVerification)=>__awaiter(this,void 0,void 0,function*(){if(typeof userId==='undefined'){throw new AppwriteException('Missing required parameter: "userId"');}
|
||||
if(typeof emailVerification==='undefined'){throw new AppwriteException('Missing required parameter: "emailVerification"');}
|
||||
let path='/users/{userId}/verification'.replace('{userId}',userId);let payload={};if(typeof emailVerification!=='undefined'){payload['emailVerification']=emailVerification;}
|
||||
const uri=new URL(this.config.endpoint+path);return yield this.call('patch',uri,{'content-type':'application/json',},payload);}),updatePhoneVerification:(userId,phoneVerification)=>__awaiter(this,void 0,void 0,function*(){if(typeof userId==='undefined'){throw new AppwriteException('Missing required parameter: "userId"');}
|
||||
|
|
|
|||
|
|
@ -5618,7 +5618,7 @@
|
|||
* @throws {AppwriteException}
|
||||
* @returns {Promise}
|
||||
*/
|
||||
updateVerification: (userId, emailVerification) => __awaiter(this, void 0, void 0, function* () {
|
||||
updateEmailVerification: (userId, emailVerification) => __awaiter(this, void 0, void 0, function* () {
|
||||
if (typeof userId === 'undefined') {
|
||||
throw new AppwriteException('Missing required parameter: "userId"');
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue