17 enhancement add the ability to sign in using an osm account

.env.development.local.sample

@@ -10,3 +10,5 @@ VITE_FIREBASE_APP_ID=
 VITE_FIREBASE_MEASUREMENT_ID=
 
 VITE_MAPILLARY_API_KEY=
+
+VITE_OSM_OAUTH_REDIRECT_URI=

.env.production.local.sample

@@ -10,3 +10,5 @@ VITE_FIREBASE_APP_ID=
 VITE_FIREBASE_MEASUREMENT_ID=
 
 VITE_MAPILLARY_API_KEY=
+
+VITE_OSM_OAUTH_REDIRECT_URI=

.github/workflows/deploy.yml

@@ -53,6 +53,7 @@ jobs:
           VITE_FIREBASE_MESSAGING_SENDER_ID: "${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}"
           VITE_FIREBASE_APP_ID: "${{ secrets.VITE_FIREBASE_APP_ID }}"
           VITE_MAPILLARY_API_KEY: "${{ secrets.VITE_MAPILLARY_API_KEY }}"
+          VITE_OSM_OAUTH_REDIRECT_URI: "${{ secrets.VITE_OSM_OAUTH_REDIRECT_URI }}"
         run: yarn build-ghpages-dev # or pnpm docs:build / yarn docs:build / bun run docs:build
       - name: Checkout latest release tag
         run: |
@@ -71,6 +72,7 @@ jobs:
             VITE_FIREBASE_MESSAGING_SENDER_ID: "${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID_PROD }}"
             VITE_FIREBASE_APP_ID: "${{ secrets.VITE_FIREBASE_APP_ID_PROD }}"
             VITE_MAPILLARY_API_KEY: "${{ secrets.VITE_MAPILLARY_API_KEY }}"
+            VITE_OSM_OAUTH_REDIRECT_URI: "${{ secrets.VITE_OSM_OAUTH_REDIRECT_URI_PROD }}"
         run: yarn build-ghpages-prod 
       - name: Move the prod build to parent folder
         run: mv docs/dist/prod/* docs/dist/.

src/components/OauthReturn.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { i18nRoute } from '@/i18n/translation'
+import { signInWithCustomToken, getAuth } from 'firebase/auth'
+import { logAnalyticsEvent } from '@/firebase'
+
+export default defineComponent({
+  props: {
+    token: String,
+  },
+  inject: {
+    showSnackbar: 'showSnackbar',
+  },
+  methods: {
+    i18nRoute,
+    signin(token: String) {
+      const routerReplace = this.$router.replace
+      const auth = getAuth()
+      signInWithCustomToken(auth, token)
+        .then(() => {
+          this.showSnackbar(this.$t('authView.osmSignInSuccess'), 'success')
+          logAnalyticsEvent('account_login')
+          routerReplace(i18nRoute({ name: 'projects' }))
+        })
+        .catch(() => {
+          this.showSnackbar(this.$t('authView.osmSignInError'), 'error')
+          routerReplace(i18nRoute({ name: 'authentication', params: { authTab: 'sign-in' } }))
+        })
+    },
+  },
+  mounted() {
+    this.signin(this.token)
+  },
+})
+</script>
+
+<template>
+  <p></p>
+</template>

src/components/SignIn.vue

@@ -3,8 +3,12 @@ import { defineComponent } from 'vue'
 import { i18nRoute } from '@/i18n/translation'
 import { signInWithEmailAndPassword, getAuth } from 'firebase/auth'
 import { logAnalyticsEvent } from '@/firebase'
+import SignInOsm from '@/components/SignInOsm.vue'
 
 export default defineComponent({
+  components: {
+    signInOsm: SignInOsm,
+  },
   data() {
     return {
       isFormValid: false,
@@ -119,6 +123,7 @@ export default defineComponent({
           </router-link>
         </div>
       </v-col>
+      <sign-in-osm />
     </v-form>
   </v-container>
 </template>

src/components/SignInOsm.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return {
+      consent: false,
+    }
+  },
+  computed: {
+    osmOAuthRedirectUri() {
+      const uri = import.meta.env.VITE_OSM_OAUTH_REDIRECT_URI
+      return uri
+    },
+    privacyPolicyUrl() {
+      const url = import.meta.env.VITE_PRIVACY_POLICY_URL
+      const locale = this.$i18n.locale
+      return url.replace('{locale}', locale)
+    },
+  },
+  methods: {
+    signInOSM() {
+      window.location.href = this.osmOAuthRedirectUri
+    },
+  },
+})
+</script>
+
+<template>
+  <v-dialog max-width="800">
+    <template v-slot:activator="{ props: activatorProps }">
+      <v-col v-if="osmOAuthRedirectUri" class="text-center">
+        <v-divider />
+        <br />
+        {{ $t('authView.or') }}
+        <br /><br />
+        <v-btn color="primary" v-bind="activatorProps" depressed>
+          {{ $t('authView.signInOsm') }}
+        </v-btn>
+      </v-col>
+    </template>
+    <template v-slot:default>
+      <v-card>
+        <v-card-text>
+          {{ $t('authView.signInOsmText') }}
+          <v-switch v-model="consent" color="primary" inset>
+            <template v-slot:label>
+              <i18n-t v-if="privacyPolicyUrl" keypath="authView.consent" scope="global" tag="p">
+                <template v-slot:action>
+                  <a target="blank" :href="privacyPolicyUrl" @click.stop>
+                    {{ $t('authView.privacyPolicy') }}
+                  </a>
+                </template>
+                <template v-slot:newline><br /></template>
+              </i18n-t>
+            </template>
+          </v-switch>
+        </v-card-text>
+        <v-btn color="primary" @click="signInOSM" :disabled="!consent" depressed>
+          {{ $t('authView.signInOsm') }}
+        </v-btn>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<style scoped></style>

src/components/SignUp.vue

@@ -10,8 +10,12 @@ import {
 import { getDatabase, ref, set } from 'firebase/database'
 import { logAnalyticsEvent } from '@/firebase'
 import { i18nRoute } from '@/i18n/translation'
+import SignInOsm from '@/components/SignInOsm.vue'
 
 export default defineComponent({
+  components: {
+    signInOsm: SignInOsm,
+  },
   data() {
     return {
       isFormValid: false,
@@ -186,6 +190,7 @@ export default defineComponent({
           {{ $t('authView.signUp') }}
         </v-btn>
       </v-col>
+      <sign-in-osm />
     </v-form>
   </v-container>
 </template>

src/i18n/locales/de.json

@@ -41,13 +41,18 @@
     "noAccountYet": "Du hast noch kein Konto?",
     "noUppercase": "Dein Nutzername darf keine Großbuchstaben enthalten.",
     "noSpace": "Dein Nutzername darf keine Leerzeichen enthalten.",
+    "osmSignInSuccess": "Du bist mit OpenStreetMap angemeldet.",
+    "osmSignInError": "Leider konnten wir dich nicht mit OpenStreetMap anmelden.",
+    "or": "oder",
     "password": "Passwort",
     "passwordMatch": "Passwort stimmt nicht überein",
     "passwordResetEmailSent": "E-Mail zum Zurücksetzen des Passworts versandt",
     "privacyPolicy": "Datenschutzrichtlinie",
     "recoverAccount": "Konto wiederherstellen",
     "required": "Dies ist ein Pflichtfeld.",
     "signIn": "Anmelden",
+    "signInOsm": "Mit OpenStreetMap anmelden",
+    "signInOsmText": "Du kannst dich bei MapSwipe mit deinem OpenStreetMap-Konto anmelden. Wenn du bereits ein MapSwipe-Konto hast, werden die beiden Konten dadurch nicht miteinander verknüpft! (Diese Funktion wird in einer zukünftigen Version verfügbar sein.)",
     "signUp": "Registrieren",
     "signUpFailed": "Registrierung gescheitert"
   },

src/i18n/locales/en.json

@@ -41,13 +41,18 @@
     "noAccountYet": "Don't have an account yet?",
     "noUppercase": "Your username cannot contain uppercase letters.",
     "noSpace": "Your username cannot contain space.",
+    "osmSignInSuccess": "You are signed in with OpenStreetMap.",
+    "osmSignInError": "Sorry, we did not manage to sign you in with OpenStreetMap.",
+    "or": "or",
     "password": "Password",
     "passwordMatch": "Password does not match",
     "passwordResetEmailSent": "Password reset e-mail sent",
     "privacyPolicy": "Privacy Policy",
     "recoverAccount": "Recover account",
     "required": "This field is required.",
     "signIn": "Sign in",
+    "signInOsm": "Sign in with OpenStreetMap",
+    "signInOsmText": "You can sign in to MapSwipe using your OpenStreetMap account. If you already have a MapSwipe account, this will not link them together! (this will come soon in a future release)",
     "signUp": "Sign up",
     "signUpFailed": "Sign-up failed"
   },

src/i18n/locales/fr.json

@@ -30,7 +30,7 @@
       "auth/email-already-in-use": "E-mail déjà utilisé."
     },
     "confirmPassword": "Confirmer le mot de passe",
-    "consent": "Je suis d'accord avec {action}.",
+    "consent": "Je suis d'accord avec la {action}.",
     "consentSubtitle": "* Toutes vos contributions à MapSwipe sont en accès libres et disponibles pour tout le monde. Votre nom d'utilisateur est public mais votre e-mail et mot de passe ne seront jamais communiqués à des tiers.",
     "displayName": "Nom d'utilisateur",
     "email": "E-mail",
@@ -41,13 +41,18 @@
     "noAccountYet": "Pas encore de compte ?",
     "noUppercase": "Votre nom d'utilisateur ne peut pas contenir de lettres majuscules.",
     "noSpace": "Votre nom d'utilisateur ne peut pas contenir d'espaces.",
+    "osmSignInSuccess": "Vous êtes connecté avec OpenStreetMap.",
+    "osmSignInError": "Désolé, nous n'avons pas pu vous connecter avec OpenStreetMap.",
+    "or": "ou",
     "password": "Mot de passe",
     "passwordMatch": "Le mot de passe ne correspond pas",
     "passwordResetEmailSent": "E-mail de réinitialisation de mot de passe envoyé",
     "privacyPolicy": "Politique de confidentialité",
     "recoverAccount": "Récupérer votre compte",
     "required": "Ce champ est obligatoire.",
     "signIn": "Se connecter",
+    "signInOsm": "Se connecter avec OpenStreetMap",
+    "signInOsmText": "Vous pouvez vous connecter à MapSwipe en utilisant votre compte OpenStreetMap. Si vous avez déjà un compte MapSwipe, cela ne les liera pas ensemble ! (Cette fonctionnalité sera disponible dans une future version.)",
     "signUp": "S'inscrire",
     "signUpFailed": "L'inscription a échoué"
   },

src/router/index.ts

@@ -62,14 +62,26 @@ const router = createRouter({
             }
           },
         },
+        {
+          path: 'osm-callback',
+          name: 'osm-callback',
+          component: () => import('../components/OauthReturn.vue'),
+          props: (route) => ({ token: route.query.token }),
+        },
       ],
     },
   ],
 })
 
-router.beforeEach((to, from, next) => {
+router.beforeEach((to, _from, next) => {
   document.title = to.meta.title
-  next()
+  // route callback from OSM OAuth to persisted locale
+  if (to.path === '/osm-callback') {
+    const locale = Tr.guessDefaultLocale()
+    next(i18nRoute({ path: `/${locale}/osm-callback`, query: to.query }))
+  } else {
+    next()
+  }
 })
 
 export default router

src/views/ProfileView.vue

@@ -225,7 +225,7 @@ export default defineComponent({
           <v-icon>mdi-chart-bar</v-icon> {{ $t('profileView.userStats') }}
         </v-btn>
       </v-col>
-      <v-col>
+      <v-col v-if="!user?.uid?.startsWith('osm:')">
         <v-btn color="primary" @click="changeUsernameDialog = true" :disabled="!user">
           <v-icon>mdi-account-edit</v-icon> {{ $t('profileView.changeUsername') }}
         </v-btn>