natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix comments

This commit is contained in:
Kainoa Kanter 2023-04-07 23:13:01 -07:00
parent 2e9ae4b695
commit 980bf31ce0
8 changed files with 282 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -28,7 +28,7 @@
"e2e": "start-server-and-test start:test http://localhost:61812 cy:run", "e2e": "start-server-and-test start:test http://localhost:61812 cy:run",
"mocha": "pnpm --filter backend run mocha", "mocha": "pnpm --filter backend run mocha",
"test": "pnpm run mocha", "test": "pnpm run mocha",
"format": "pnpm rome format packages/**/* --write && pnpm --filter client run format", "format": "pnpm rome format packages/**/* --write ; pnpm --filter client run format",
"clean": "pnpm node ./scripts/clean.js", "clean": "pnpm node ./scripts/clean.js",
"clean-all": "pnpm node ./scripts/clean-all.js", "clean-all": "pnpm node ./scripts/clean-all.js",
"cleanall": "pnpm run clean-all" "cleanall": "pnpm run clean-all"

62
packages/client/src/components/MkMention.vue
View File

@ -1,25 +1,45 @@
<template> <template>
<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }" @click.stop> <MkA
// #v-ifdef VITE_CAPACITOR v-if="url.startsWith('/')"
<img v-user-preview="canonical"
:class="$style.icon" class="akbvjaqn"
:src="`${$i.instanceUrl}/avatar/@${username}@${host}`" :class="{ isMe }"
alt="" :to="url"
/> :style="{ background: bgCss }"
// #v-else @click.stop
<img class="icon" :src="`/avatar/@${username}@${host}`" alt=""> >
// #v-endif <!-- #v-ifdef VITE_CAPACITOR -->
<span class="main"> <img
<span class="username">@{{ username }}</span> :class="$style.icon"
<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span> :src="`${$i.instanceUrl}/avatar/@${username}@${host}`"
</span> alt=""
</MkA> />
<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }" @click.stop> <!-- #v-else -->
<span class="main"> <img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
<span class="username">@{{ username }}</span> <!-- #v-endif -->
<span class="host">@{{ toUnicode(host) }}</span> <span class="main">
</span> <span class="username">@{{ username }}</span>
</a> <span
v-if="host != localHost || $store.state.showFullAcct"
class="host"
>@{{ toUnicode(host) }}</span
>
</span>
</MkA>
<a
v-else
class="akbvjaqn"
:href="url"
target="_blank"
rel="noopener"
:style="{ background: bgCss }"
@click.stop
>
<span class="main">
<span class="username">@{{ username }}</span>
<span class="host">@{{ toUnicode(host) }}</span>
</span>
</a>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

291
packages/client/src/components/MkSignin.vue
View File

@ -1,88 +1,91 @@
<template> <template>
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<form class="eppvobhk" :class="{ signing }" @submit.prevent="onSubmit"> <form class="eppvobhk" :class="{ signing }" @submit.prevent="onSubmit">
<div class="normal-signin"> <div class="normal-signin">
Instance Instance
<MkSelect v-model="instanceUrl" large :model-value="instances[0]?.url"> <MkSelect
<option value="other"> v-model="instanceUrl"
Select other instance large
</option> :model-value="instances[0]?.url"
<option >
v-for="(instance, i) in instances" <option value="other">Select other instance</option>
:key="instance.url" <option
:value="instance.url" v-for="(instance, i) in instances"
:selected="i === 0" :key="instance.url"
> :value="instance.url"
{{ instance.name }} :selected="i === 0"
</option> >
</MkSelect> {{ instance.name }}
<template v-if="instanceUrl === 'other'"> </option>
URL </MkSelect>
<MkInput <template v-if="instanceUrl === 'other'">
v-model="instanceUrlOther" URL
<MkInput
v-model="instanceUrlOther"
:spellcheck="false" :spellcheck="false"
autofocus autofocus
required required
/> />
</template> </template>
Access Token Access Token
<MkInput <MkInput
v-model="token" v-model="token"
:spellcheck="false" :spellcheck="false"
autofocus autofocus
required required
data-cy-signin-username data-cy-signin-username
></MkInput> ></MkInput>
<MkButton <MkButton
class="_formBlock" class="_formBlock"
type="submit" type="submit"
primary primary
:disabled="signing" :disabled="signing"
style="margin: 0 auto" style="margin: 0 auto"
> >
{{ signing ? "Logging in" : "Login" }} {{ signing ? "Logging in" : "Login" }}
</MkButton> </MkButton>
</div> </div>
<div style="display: flex; justify-content: center"></div> <div style="display: flex; justify-content: center"></div>
<a <a
href="https://misskey.io/notes/99l9jqqun2" href="https://misskey.io/notes/99l9jqqun2"
target="_blank" target="_blank"
style="color: var(--link); text-align: center" style="color: var(--link); text-align: center"
>How to create a access token</a> >How to create a access token</a
</form> >
// #v-else </form>
<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit"> <!-- #v-else -->
<div class="auth _section _formRoot"> <form
<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div> class="eppvobhk _monolithic_"
<MkInfo v-if="message"> :class="{ signing, totpLogin }"
{{ message }} @submit.prevent="onSubmit"
</MkInfo> >
<div v-if="!totpLogin" class="normal-signin"> <div class="auth _section _formRoot">
<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange"> <div
<template #prefix>@</template> v-show="withAvatar"
<template #suffix>@{{ host }}</template> class="avatar"
</MkInput> :style="{
<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password> backgroundImage: user ? `url('${user.avatarUrl}')` : null,
<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template> marginBottom: message ? '1.5em' : null,
<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template> }"
</MkInput> ></div>
<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 1rem auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton> <MkInfo v-if="message">
</div> {{ message }}
<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }"> </MkInfo>
<div v-if="user && user.securityKeys" class="twofa-group tap-group"> <div v-if="!totpLogin" class="normal-signin">
<p>{{ i18n.ts.tapSecurityKey }}</p> <MkInput
<MkButton v-if="!queryingKey" @click="queryKey"> v-model="username"
{{ i18n.ts.retry }} class="_formBlock"
</MkButton> :placeholder="i18n.ts.username"
</div> type="text"
<div v-if="user && user.securityKeys" class="or-hr"> pattern="^[a-zA-Z0-9_]+$"
<p class="or-msg">{{ i18n.ts.or }}</p> :spellcheck="false"
</div> autofocus
<div class="twofa-group totp-group"> required
<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p> data-cy-signin-username
<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required> @update:modelValue="onUsernameChange"
<template #label>{{ i18n.ts.password }}</template> >
<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template>
</MkInput> </MkInput>
<MkInput <MkInput
v-if="!user || (user && !user.usePasswordLessLogin)" v-if="!user || (user && !user.usePasswordLessLogin)"
@ -150,38 +153,132 @@
></template> ></template>
</MkInput> </MkInput>
<MkInput <MkInput
v-model="token" v-if="!user || (user && !user.usePasswordLessLogin)"
type="text" v-model="password"
pattern="^[0-9]{6}$" class="_formBlock"
autocomplete="off" :placeholder="i18n.ts.password"
:spellcheck="false" type="password"
:with-password-toggle="true"
required required
data-cy-signin-password
> >
<template #label>{{ i18n.ts.token }}</template>
<template #prefix <template #prefix
><i class="ph-poker-chip ph-bold ph-lg"></i ><i class="ph-lock ph-bold ph-lg"></i
></template> ></template>
<template #caption
><button
class="_textButton"
type="button"
@click="resetPassword"
>
{{ i18n.ts.forgotPassword }}
</button></template
>
</MkInput> </MkInput>
<MkButton <MkButton
class="_formBlock"
type="submit" type="submit"
:disabled="signing"
primary primary
style="margin: 0 auto" :disabled="signing"
style="margin: 1rem auto"
>{{ >{{
signing ? i18n.ts.loggingIn : i18n.ts.login signing ? i18n.ts.loggingIn : i18n.ts.login
}}</MkButton }}</MkButton
> >
</div> </div>
<div
v-if="totpLogin"
class="2fa-signin"
:class="{ securityKeys: user && user.securityKeys }"
>
<div
v-if="user && user.securityKeys"
class="twofa-group tap-group"
>
<p>{{ i18n.ts.tapSecurityKey }}</p>
<MkButton v-if="!queryingKey" @click="queryKey">
{{ i18n.ts.retry }}
</MkButton>
</div>
<div v-if="user && user.securityKeys" class="or-hr">
<p class="or-msg">{{ i18n.ts.or }}</p>
</div>
<div class="twofa-group totp-group">
<p style="margin-bottom: 0">
{{ i18n.ts.twoStepAuthentication }}
</p>
<MkInput
v-if="user && user.usePasswordLessLogin"
v-model="password"
type="password"
:with-password-toggle="true"
required
>
<template #label>{{ i18n.ts.password }}</template>
<template #prefix
><i class="ph-lock ph-bold ph-lg"></i
></template>
</MkInput>
<MkInput
v-model="token"
type="text"
pattern="^[0-9]{6}$"
autocomplete="off"
:spellcheck="false"
required
>
<template #label>{{ i18n.ts.token }}</template>
<template #prefix
><i class="ph-poker-chip ph-bold ph-lg"></i
></template>
</MkInput>
<MkButton
type="submit"
:disabled="signing"
primary
style="margin: 0 auto"
>{{
signing ? i18n.ts.loggingIn : i18n.ts.login
}}</MkButton
>
</div>
</div>
</div> </div>
</div> </div>
</div> <div class="social _section">
<div class="social _section"> <a
<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ph-twitter-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Twitter' }) }}</a> v-if="meta && meta.enableTwitterIntegration"
<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ph-github-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'GitHub' }) }}</a> class="_borderButton _gap"
<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ph-discord-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Discord' }) }}</a> :href="`${apiUrl}/signin/twitter`"
</div> ><i
</form> class="ph-twitter-logo ph-bold ph-lg"
// #v-endif style="margin-right: 4px"
></i
>{{ i18n.t("signinWith", { x: "Twitter" }) }}</a
>
<a
v-if="meta && meta.enableGithubIntegration"
class="_borderButton _gap"
:href="`${apiUrl}/signin/github`"
><i
class="ph-github-logo ph-bold ph-lg"
style="margin-right: 4px"
></i
>{{ i18n.t("signinWith", { x: "GitHub" }) }}</a
>
<a
v-if="meta && meta.enableDiscordIntegration"
class="_borderButton _gap"
:href="`${apiUrl}/signin/discord`"
><i
class="ph-discord-logo ph-bold ph-lg"
style="margin-right: 4px"
></i
>{{ i18n.t("signinWith", { x: "Discord" }) }}</a
>
</div>
</form>
<!-- #v-endif -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

14
packages/client/src/components/MkSigninDialog.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<XModalWindow <XModalWindow
ref="dialog" ref="dialog"
:width="400" :width="400"
@close="onClose" @close="onClose"
@closed="emit('closed')" @closed="emit('closed')"
> >
<template #header>Login</template> <template #header>Login</template>
<MkSignin :auto-set="autoSet" :message="message" @login="onLogin" /> <MkSignin :auto-set="autoSet" :message="message" @login="onLogin" />
</XModalWindow> </XModalWindow>

6
packages/client/src/components/global/MkEmoji.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/> <img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" <img v-else-if="char && !useOsNativeEmojis" class="mk-emoji"
// #v-ifdef VITE_CAPACITOR :src="char2filePath(char) || url"
:src="char2filePath(char)"
// #v-else
:src="url"
// #v-endif
:alt="alt" :title="alt" decoding="async"/> :alt="alt" :title="alt" decoding="async"/>
<span v-else-if="char && useOsNativeEmojis">{{ char }}</span> <span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
<span v-else>{{ emoji }}</span> <span v-else>{{ emoji }}</span>

35
packages/client/src/pages/timeline.vue
View File

@ -67,22 +67,22 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, watch, ref, onMounted } from 'vue'; import { computed, watch, ref, onMounted } from "vue";
import { Virtual } from 'swiper'; import { Virtual } from "swiper";
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from "swiper/vue";
import XTutorial from '@/components/MkTutorialDialog.vue'; import XTutorial from "@/components/MkTutorialDialog.vue";
import XTimeline from '@/components/MkTimeline.vue'; import XTimeline from "@/components/MkTimeline.vue";
import XPostForm from '@/components/MkPostForm.vue'; import XPostForm from "@/components/MkPostForm.vue";
import { scroll } from '@/scripts/scroll'; import { scroll } from "@/scripts/scroll";
import * as os from '@/os'; import * as os from "@/os";
import { defaultStore } from '@/store'; import { defaultStore } from "@/store";
import { i18n } from '@/i18n'; import { i18n } from "@/i18n";
import { instance } from '@/instance'; import { instance } from "@/instance";
import { $i } from '@/account'; import { $i } from "@/account";
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from "@/scripts/page-metadata";
import { deviceKind } from '@/scripts/device-kind'; import { deviceKind } from "@/scripts/device-kind";
import 'swiper/scss'; import "swiper/scss";
import 'swiper/scss/virtual'; import "swiper/scss/virtual";
// #v-ifdef VITE_CAPACITOR // #v-ifdef VITE_CAPACITOR
import { Camera } from "@capacitor/camera"; import { Camera } from "@capacitor/camera";
// #v-endif // #v-endif
@ -371,10 +371,9 @@ onMounted(() => {
// #v-ifdef VITE_CAPACITOR // #v-ifdef VITE_CAPACITOR
const permissionState = await Camera.checkPermissions(); const permissionState = await Camera.checkPermissions();
if (!permissionState.camera) { if (!permissionState.camera) {
Camera.requestPermissions({ permissions: ["photos", "camera"] }); Camera.requestPermissions({ permissions: ["photos", "camera"] });
} }
// #v-endif // #v-endif
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

36
packages/client/src/pages/welcome.entrance.a.vue
View File

@ -1,16 +1,16 @@
<template> <template>
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<div class="rsqzvsbo"> <div class="rsqzvsbo">
// #v-else <!-- #v-else -->
<div v-if="meta" class="rsqzvsbo"> <div v-if="meta" class="rsqzvsbo">
// #v-endif <!-- #v-endif -->
<div class="top"> <div class="top">
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<!-- aaa --> <!-- aaa -->
// #v-else <!-- #v-else -->
<MkFeaturedPhotos class="bg"/> <MkFeaturedPhotos class="bg"/>
<XTimeline class="tl"/> <XTimeline class="tl"/>
// #v-endif <!-- #v-endif -->
<div class="shape1"></div> <div class="shape1"></div>
<div class="shape2"></div> <div class="shape2"></div>
<img src="/client-assets/misskey.svg" class="misskey"/> <img src="/client-assets/misskey.svg" class="misskey"/>
@ -28,30 +28,30 @@
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/> <MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
</div> </div>
<div class="main"> <div class="main">
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<!-- aaa --> <!-- aaa -->
// #v-else <!-- #v-else -->
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/> <img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
// #v-endif <!-- #v-endif -->
<button class="_button _acrylic menu" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button> <button class="_button _acrylic menu" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
<div class="fg"> <div class="fg">
<h1> <h1>
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<span class="text">Calckey Mobile</span> <span class="text">Calckey Mobile</span>
// #v-else <!-- #v-else -->
<img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"> <img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl">
<span v-else class="text">{{ instanceName }}</span> <span v-else class="text">{{ instanceName }}</span>
// #v-endif <!-- #v-endif -->
</h1> </h1>
<div class="about"> <div class="about">
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<div class="desc">🌎 Calckey is an open source, decentralized social media platform that's free forever! 🚀</div> <div class="desc">🌎 Calckey is an open source, decentralized social media platform that's free forever! 🚀</div>
// #v-else <!-- #v-else -->
<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div> <div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
// #v-endif <!-- #v-endif -->
</div> </div>
<div class="action"> <div class="action">
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<MkButton inline rounded data-cy-signin @click="signin()">Login</MkButton> <MkButton inline rounded data-cy-signin @click="signin()">Login</MkButton>
<MkSelect v-model="lang"> <MkSelect v-model="lang">
<template #label>{{ i18n.ts.uiLanguage }}</template> <template #label>{{ i18n.ts.uiLanguage }}</template>
@ -66,11 +66,11 @@
{{ x[1] }} {{ x[1] }}
</option> </option>
</MkSelect> </MkSelect>
// #v-else <!-- #v-else -->
<MkButton inline rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.signup }}</MkButton> <MkButton inline rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.signup }}</MkButton>
<MkButton inline rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton> <MkButton inline rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
<MkButton inline rounded style="margin-left: 12px; margin-top: 12px;" onclick="window.location.href='/explore'">Explore</MkButton> <MkButton inline rounded style="margin-left: 12px; margin-top: 12px;" onclick="window.location.href='/explore'">Explore</MkButton>
// #v-endif <!-- #v-endif -->
</div> </div>
</div> </div>
<div v-if="instances" class="federation"> <div v-if="instances" class="federation">

6
packages/client/src/pages/welcome.vue
View File

@ -1,12 +1,12 @@
<template> <template>
// #v-ifdef VITE_CAPACITOR <!-- #v-ifdef VITE_CAPACITOR -->
<XEntrance /> <XEntrance />
// #v-else <!-- #v-else -->
<div v-if="meta"> <div v-if="meta">
<XSetup v-if="meta.requireSetup"/> <XSetup v-if="meta.requireSetup"/>
<XEntrance v-else/> <XEntrance v-else/>
</div> </div>
// #v-endif <!-- #v-endif -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>