Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sign in with Apple (#11793)

Browse Source 
* add date check

* achievements modal polishing

* refresh private-messages page when you are already on it

* add countbadge knob to change the example

* fix lint

* typos

* typos

* typos

* add toggle for achievements categories

* typo

* fix test

* fix edit avatar modal cannot be closed

* WIP(settings): subscriber page improvements

* WIP(subscriptions): more design build-out

* fix(css): disabled button styles

* fix(css): better Amazon targeting

* fix hide tooltip + align header correctly

* disable perfect scroll

* load messages on refresh event

* fix header label + conversation actions not breaking layout on hover

* WIP(g1g1): notif

* WIP(g1g1): notif cont'd

* fix(test): snowball change

* fix(event): feature NYE card

* chore(sprites): compile

* fix(bgs): include TT required field

* add gifting banner to the max height calculation

* chore(event): enable winter customizations

* WIP(gifting): partial modal implementation

* feat(gifting): select giftee modal

* fix(gifting): notification order, modal dismiss

* Begin implementing sign in with apple

# Conflicts:
#	package-lock.json
#	website/common/script/constants.js
#	website/server/libs/auth/social.js
#	website/server/models/user/schema.js

* Add apple sign in button to website

* fix lint errors

* fix config json

* fix(modals): correct some repops

* fix(gifting): style updates

* fix(buy): modal style changes

* fix(modals): also clean out "prev"

* Attempt workaround for sign in with apple on android

* temporarily log everything as error

* refactor(modals): hide in dismiss event

* fix temporary test failure

* changes to sign in with apple

* fix: first batch of layout issues for private messages + auto sizing textarea

* fix(modals): new dismiss logic

* fix(modals): new dismiss no go??

* Only use email scope

* print debugging

* .

* ..

* ...

* username second line - open profile on face-avatar/conversation name - fix textarea height

* temporarily disable apple auth and just return data for debugging

* Hopefully this works

* .....

* WIP(subscription): unsubscribed state

* .

* ..

* MAYBE THIS ACTUALLY WORKS???

* Implement apple sign in

* fix some urls

* fix urls

* fix redirect and auth

* attempt to also request name

* fix lint error

* WIP(subscription): partial subscribed

* chore(sprites): compile

* Change approach so that it actually works

* fix config error

* fix lint errors

* Fix

* fix lint error

* lint error

* WIP(subscription): finish subscribed

* refresh on sync

* new "you dont have any messages" style + changed min textarea height

* new conversationItem style / layout

* reset message unread on reload

* chore(npm): update package-locks

* fix styles / textarea height

* feat(subscription): revised sub page RC

* list optOut / chatRevoked informations for each conversation + show why its disabled

* Improve apple redirect view

* Fix apple icon on group task registration page

* WIP(adventure): prereqs

* Block / Unblock - correct disabled states - $gray-200 instead of 300/400

* canReceive not checking chatRevoked

* fix: faceAvatar / userLink open the selected conversation user

* check if the target user is blocking the logged-in user

* fix(subs): style tweaks

* fix(profiles): short circuit contributor
Attempted fix for #11830

* chore(sprites): compile

* fix(content): missing potion data

* fix(content): missing string

* WIP(drops): new modal

* fix(subs): moar style tweaks

* check if blocks is undefined

* max-height instead of height

* fix "no messages" state + canReceive on a new conversation

* WIP(adventure): analytics fixes etc

* Improve apple signin handling

* fixed conversations width (280px on max 768 width page)

* feat(adventure): random egg+potion on 2nd task

* fix(lint): noworkies

* fix(modal): correctly construct classes

* fix(tests): expectations and escape

* Fix typo

* use base url from env variables

* fix lint

* call autosize after message is sent

* fix urls

* always verify token

* throw error when social auth could not retrieve id

* Store emails correctly for apple auth

* Retrieve name when authenticating through apple

* Fix lint errors

* fix all lint errors

* fix(content): missing strings

* Revert "always verify token"

This reverts commit 8ac40c76bf.

# Conflicts:
#	website/server/libs/auth/social.js

* Correctly load name

* remove extra changes

* remove extra logger call

* reset package and package-lock

* add back missing packages

* use name from apple

* add support for multiple apple public keys

* add some unit and integration tests

* add apple auth integration test

* tweak social signup buttons

* pixel pushing

Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>
Co-authored-by: Sabe Jones <sabrecat@gmail.com>
Co-authored-by: negue <eugen.bolz@gmail.com>
Co-authored-by: Phillip Thelen <phillip@habitica.com>
This commit is contained in:
Phillip Thelen
2020-04-08 18:44:30 +02:00
committed by GitHub
parent 1d98929453
commit 9d16ab7dba
29 changed files with 1129 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/components/auth/authForm.vue
+50 -22
View File
@@ -1,7 +1,7 @@
<template>
<div class="form">
<div class="form-group row text-center">
<div class="col-12 col-md-6">
<div class="col-12">
<div
class="btn btn-secondary social-button"
@click="socialAuth('facebook')"
@@ -15,7 +15,9 @@
: $t('loginWithSocial', {social: 'Facebook'}) }}</span>
</div>
</div>
<div class="col-12 col-md-6">
</div>
<div class="form-group row text-center">
<div class="col-12">
<div
class="btn btn-secondary social-button"
@click="socialAuth('google')"
@@ -30,6 +32,22 @@
</div>
</div>
</div>
<div class="form-group row text-center">
<div class="col-12">
<div
class="btn btn-secondary social-button"
@click="socialAuth('apple')"
>
<div
class="svg-icon social-icon apple-icon"
v-html="icons.appleIcon"
></div>
<span>{{ registering
? $t('signUpWithSocial', {social: 'Apple'})
: $t('loginWithSocial', {social: 'Apple'}) }}</span>
</div>
</div>
</div>
<div
v-if="registering"
class="form-group"
@@ -199,7 +217,11 @@
height: 18px;
display: inline-block;
vertical-align: top;
margin-top: .2em;
margin-top: .1em;
}
.apple-icon {
margin-top: -1px;
}
small.form-text {
@@ -219,10 +241,11 @@
import hello from 'hellojs';
import debounce from 'lodash/debounce';
import isEmail from 'validator/lib/isEmail';
import { setUpAxios } from '@/libs/auth';
import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
import facebookSquareIcon from '@/assets/svg/facebook-square.svg';
import googleIcon from '@/assets/svg/google.svg';
import appleIcon from '@/assets/svg/apple_black.svg';
export default {
name: 'AuthForm',
@@ -239,6 +262,7 @@ export default {
data.icons = Object.freeze({
facebookIcon: facebookSquareIcon,
googleIcon,
appleIcon,
});
return data;
@@ -307,27 +331,31 @@ export default {
}, 500),
// @TODO: Abstract hello in to action or lib
async socialAuth (network) {
try {
await hello(network).logout();
} catch (e) {} // eslint-disable-line
if (network === 'apple') {
window.location.href = buildAppleAuthUrl();
} else {
try {
await hello(network).logout();
} catch (e) {} // eslint-disable-line
try {
const redirectUrl = `${window.location.protocol}//${window.location.host}`;
const auth = await hello(network).login({
scope: 'email',
redirect_uri: redirectUrl, // eslint-disable-line camelcase
});
try {
const redirectUrl = `${window.location.protocol}//${window.location.host}`;
const auth = await hello(network).login({
scope: 'email',
redirect_uri: redirectUrl, // eslint-disable-line camelcase
});
await this.$store.dispatch('auth:socialAuth', {
auth,
});
await this.$store.dispatch('auth:socialAuth', {
auth,
});
await this.finishAuth();
} catch (err) {
console.error(err); // eslint-disable-line no-console
// logout the user
await hello(network).logout();
this.socialAuth(network); // login again
await this.finishAuth();
} catch (err) {
console.error(err); // eslint-disable-line no-console
// logout the user
await hello(network).logout();
this.socialAuth(network); // login again
}
}
},
async register () {
website/client/src/components/auth/registerLoginReset.vue
+99 -30
View File
@@ -36,7 +36,7 @@
</div>
</div>
<div class="form-group row text-center">
<div class="col-12 col-md-6">
<div class="col-12 col-md-12">
<div
class="btn btn-secondary social-button"
@click="socialAuth('facebook')"
@@ -54,7 +54,9 @@
</div>
</div>
</div>
<div class="col-12 col-md-6">
</div>
<div class="form-group row text-center">
<div class="col-12 col-md-12">
<div
class="btn btn-secondary social-button"
@click="socialAuth('google')"
@@ -73,6 +75,29 @@
</div>
</div>
</div>
<div class="form-group row text-center">
<div class="col-12 col-md-12">
<div
class="btn btn-secondary social-button"
@click="socialAuth('apple')"
>
<div
class="svg-icon social-icon"
v-html="icons.appleIcon"
></div>
<div
class="text"
>
{{ registering
? $t('signUpWithSocial', {social: 'Apple'})
: $t('loginWithSocial', {social: 'Apple'}) }}
</div>
</div>
</div>
</div>
<div class="strike">
<span>{{ $t('or') }}</span>
</div>
<div
v-if="registering"
class="form-group"
@@ -496,12 +521,13 @@
}
.social-icon {
margin-left: 1em;
margin-right: 1em;
width: 18px;
height: 18px;
display: inline-block;
vertical-align: top;
margin-top: .2em;
margin-top: .1em;
}
}
@@ -581,6 +607,42 @@
.exclamation {
width: 2px;
}
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.strike > span {
position: relative;
display: inline-block;
line-height: 1.14;
color: #fff;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: #fff;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 15px;
}
</style>
<script>
@@ -589,6 +651,7 @@ import hello from 'hellojs';
import moment from 'moment';
import debounce from 'lodash/debounce';
import isEmail from 'validator/lib/isEmail';
import { buildAppleAuthUrl } from '../../libs/auth';
import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
import exclamation from '@/assets/svg/exclamation.svg';
@@ -596,6 +659,7 @@ import gryphon from '@/assets/svg/gryphon.svg';
import habiticaIcon from '@/assets/svg/habitica-logo.svg';
import facebookSquareIcon from '@/assets/svg/facebook-square.svg';
import googleIcon from '@/assets/svg/google.svg';
import appleIcon from '@/assets/svg/apple_black.svg';
export default {
data () {
@@ -618,6 +682,7 @@ export default {
habiticaIcon,
facebookIcon: facebookSquareIcon,
googleIcon,
appleIcon,
});
return data;
@@ -799,35 +864,39 @@ export default {
},
// @TODO: Abstract hello in to action or lib
async socialAuth (network) {
try {
await hello(network).logout();
} catch (e) {} // eslint-disable-line
const redirectUrl = `${window.location.protocol}//${window.location.host}`;
const auth = await hello(network).login({
scope: 'email',
// explicitly pass the redirect url or it might redirect to /home
redirect_uri: redirectUrl, // eslint-disable-line camelcase
});
await this.$store.dispatch('auth:socialAuth', {
auth,
});
let redirectTo;
if (this.$route.query.redirectTo) {
redirectTo = this.$route.query.redirectTo;
if (network === 'apple') {
window.location.href = buildAppleAuthUrl();
} else {
redirectTo = '/';
}
try {
await hello(network).logout();
} catch (e) {} // eslint-disable-line
// @TODO do not reload entire page
// problem is that app.vue created hook should be called again
// after user is logged in / just signed up
// ALSO it's the only way to make sure language data
// is reloaded and correct for the logged in user
window.location.href = redirectTo;
const redirectUrl = `${window.location.protocol}//${window.location.host}`;
const auth = await hello(network).login({
scope: 'email',
// explicitly pass the redirect url or it might redirect to /home
redirect_uri: redirectUrl, // eslint-disable-line camelcase
});
await this.$store.dispatch('auth:socialAuth', {
auth,
});
let redirectTo;
if (this.$route.query.redirectTo) {
redirectTo = this.$route.query.redirectTo;
} else {
redirectTo = '/';
}
// @TODO do not reload entire page
// problem is that app.vue created hook should be called again
// after user is logged in / just signed up
// ALSO it's the only way to make sure language data
// is reloaded and correct for the logged in user
window.location.href = redirectTo;
}
},
handleSubmit () {
if (this.registering) {