aboutsummaryrefslogtreecommitdiffstats
path: root/src/browser
diff options
context:
space:
mode:
authorivarlovlie <git@ivarlovlie.no>2020-08-11 21:17:59 +0200
committerivarlovlie <git@ivarlovlie.no>2020-08-11 21:17:59 +0200
commit7b64c35e35840b946675f0f999c73c6045fd8ff3 (patch)
tree00ebc071a29c94ec6fb57c62b3426316a2867ac1 /src/browser
parenta5f1018fda5572912c126b1e8dd656209fca0e46 (diff)
downloaddough-7b64c35e35840b946675f0f999c73c6045fd8ff3.tar.xz
dough-7b64c35e35840b946675f0f999c73c6045fd8ff3.zip
meritless work
Diffstat (limited to 'src/browser')
-rw-r--r--src/browser/index.html3
-rw-r--r--src/browser/src/App.vue4
-rw-r--r--src/browser/src/api/account.js32
-rw-r--r--src/browser/src/components/Alert/Alert.vue17
-rw-r--r--src/browser/src/components/PasswordInput/PasswordInput.js44
-rw-r--r--src/browser/src/components/PasswordInput/PasswordInput.scss76
-rw-r--r--src/browser/src/components/PasswordInput/PasswordInput.vue56
-rw-r--r--src/browser/src/views/Forgot.vue9
-rw-r--r--src/browser/src/views/Login.vue7
-rw-r--r--src/browser/src/views/Signup.vue25
10 files changed, 227 insertions, 46 deletions
diff --git a/src/browser/index.html b/src/browser/index.html
index 142b590..b9ccb70 100644
--- a/src/browser/index.html
+++ b/src/browser/index.html
@@ -4,6 +4,9 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <script>
+ document.getElementsByTagName("html")[0].className += " js";
+ </script>
<title>Vite App</title>
</head>
<body>
diff --git a/src/browser/src/App.vue b/src/browser/src/App.vue
index e6a9694..c904ec6 100644
--- a/src/browser/src/App.vue
+++ b/src/browser/src/App.vue
@@ -15,7 +15,5 @@ export default {
};
</script>
<style lang="scss">
-#app {
- font-family: sans-serif;
-}
+@import "./styles/codyframe/base";
</style>
diff --git a/src/browser/src/api/account.js b/src/browser/src/api/account.js
index 88522d6..d0041f8 100644
--- a/src/browser/src/api/account.js
+++ b/src/browser/src/api/account.js
@@ -18,57 +18,59 @@ const userManager = new Oidc.UserManager({
Oidc.Log.logger = console;
Oidc.Log.level = Oidc.Log.INFO;
+const log = (...args) => console.log(...args);
+const error = (...args) => console.error(...args);
userManager.events.addUserLoaded(function (user) {
store.commit("setProfileData", user);
- console.log("New user：", arguments);
- console.log("Access_token: ", user.access_token);
+ log("New user：", arguments);
+ log("Access_token: ", user.access_token);
});
userManager.events.addAccessTokenExpiring(function () {
- console.log("AccessToken Expiring", arguments);
+ log("AccessToken Expiring", arguments);
});
userManager.events.addAccessTokenExpired(function () {
- console.log("AccessToken Expired", arguments);
+ log("AccessToken Expired", arguments);
userManager
.signoutRedirect()
.then(function (resp) {
- console.log("signed out", resp);
+ log("signed out", resp);
})
.catch(function (err) {
- console.log(err);
+ log(err);
});
});
userManager.events.addSilentRenewError(function () {
- console.error("Silent Renew Error：", arguments);
+ error("Silent Renew Error：", arguments);
});
userManager.events.addUserSignedOut(function () {
- console.log("UserSignedOut：", arguments);
+ log("UserSignedOut：", arguments);
userManager.removeUser();
userManager
.signoutRedirect()
.then(function (resp) {
- console.log("signed out", resp);
+ log("signed out", resp);
})
.catch(function (err) {
- console.log(err);
+ log(err);
});
});
export default {
signIn() {
userManager.signinRedirect().catch(function (err) {
- console.log(err);
+ log(err);
});
},
signinRedirectCallback() {
userManager.signinRedirectCallback().then(
- (res) => console.log(res),
- (error) => console.error(error)
+ (res) => log(res),
+ (error) => error(error)
);
},
@@ -79,7 +81,7 @@ export default {
return true;
})
.catch(function (err) {
- console.error(err);
+ error(err);
return false;
});
},
@@ -98,7 +100,7 @@ export default {
}
})
.catch(function (err) {
- console.error(err);
+ error(err);
return reject(err);
});
});
diff --git a/src/browser/src/components/Alert/Alert.vue b/src/browser/src/components/Alert/Alert.vue
index da7377d..73b26df 100644
--- a/src/browser/src/components/Alert/Alert.vue
+++ b/src/browser/src/components/Alert/Alert.vue
@@ -16,20 +16,7 @@
</div>
<button class="reset alert__close-btn js-alert__close-btn">
- <svg class="icon" viewBox="0 0 24 24">
- <title>Close alert</title>
- <g
- stroke-linecap="square"
- stroke-linejoin="miter"
- stroke-width="3"
- stroke="currentColor"
- fill="none"
- stroke-miterlimit="10"
- >
- <line x1="19" y1="5" x2="5" y2="19"></line>
- <line fill="none" x1="19" y1="19" x2="5" y2="5"></line>
- </g>
- </svg>
+ <CrossIcon class="icon" />
</button>
</div>
</div>
@@ -38,6 +25,8 @@
<script>
import { reactive, toRefs, onMounted } from "vue";
import initAlert from "./Alert";
+import { VueComponent as CrossIcon } from "../../assets/icons/cross.svg";
+
export default {
props: {
title: String,
diff --git a/src/browser/src/components/PasswordInput/PasswordInput.js b/src/browser/src/components/PasswordInput/PasswordInput.js
new file mode 100644
index 0000000..c146dfe
--- /dev/null
+++ b/src/browser/src/components/PasswordInput/PasswordInput.js
@@ -0,0 +1,44 @@
+// File#: _1_password
+// Usage: codyhouse.co/license
+function initPasswordInput() {
+ var Password = function (element) {
+ this.element = element;
+ this.password = this.element.getElementsByClassName("js-password__input")[0];
+ this.visibilityBtn = this.element.getElementsByClassName("js-password__btn")[0];
+ this.visibilityClass = "password--text-is-visible";
+ this.initPassword();
+ };
+
+ Password.prototype.initPassword = function () {
+ var self = this;
+ //listen to the click on the password btn
+ this.visibilityBtn.addEventListener("click", function (event) {
+ //if password is in focus -> do nothing if user presses Enter
+ if (document.activeElement === self.password) return;
+ event.preventDefault();
+ self.togglePasswordVisibility();
+ });
+ };
+
+ Password.prototype.togglePasswordVisibility = function () {
+ var makeVisible = !Util.hasClass(this.element, this.visibilityClass);
+ //change element class
+ Util.toggleClass(this.element, this.visibilityClass, makeVisible);
+ //change input type
+ makeVisible
+ ? this.password.setAttribute("type", "text")
+ : this.password.setAttribute("type", "password");
+ };
+
+ //initialize the Password objects
+ var passwords = document.getElementsByClassName("js-password");
+ if (passwords.length > 0) {
+ for (var i = 0; i < passwords.length; i++) {
+ (function (i) {
+ new Password(passwords[i]);
+ })(i);
+ }
+ }
+}
+
+export default initPasswordInput;
diff --git a/src/browser/src/components/PasswordInput/PasswordInput.scss b/src/browser/src/components/PasswordInput/PasswordInput.scss
new file mode 100644
index 0000000..32e5e64
--- /dev/null
+++ b/src/browser/src/components/PasswordInput/PasswordInput.scss
@@ -0,0 +1,76 @@
+/* --------------------------------
+
+File#: _1_password
+Title: Password Visibility Control
+Descr: Password input field with option to toggle password visibility
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+:root {
+ --password-btn-width: 3.5em;
+ --password-icon-size: 1.5em;
+}
+
+.password {
+ position: relative;
+}
+
+.password__input {
+ height: 100%;
+}
+
+.password__btn {
+ @include reset;
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: var(--password-btn-width);
+ background-color: rgba(#fff, 0); // fix issue on IE9/10 - button not clickable
+ justify-content: center;
+ align-items: center;
+
+ display: none; // hide button if js is not enabled
+
+ &:focus {
+ color: var(--color-primary);
+ }
+}
+
+.password__btn-label {
+ &:last-child {
+ display: none;
+ }
+
+ .icon {
+ width: var(--password-icon-size);
+ height: var(--password-icon-size);
+ }
+}
+
+.password--text-is-visible {
+ .password__btn-label:first-child {
+ display: none;
+ }
+
+ .password__btn-label:last-child {
+ display: inline-block;
+ }
+}
+
+.js {
+ .password__input {
+ padding-right: calc(var(--space-sm) + var(--password-btn-width));
+ }
+
+ .password__input::-ms-reveal {
+ display: none;
+ }
+
+ .password__btn {
+ // show button if js is enabled
+ display: flex;
+ }
+}
diff --git a/src/browser/src/components/PasswordInput/PasswordInput.vue b/src/browser/src/components/PasswordInput/PasswordInput.vue
new file mode 100644
index 0000000..435bd02
--- /dev/null
+++ b/src/browser/src/components/PasswordInput/PasswordInput.vue
@@ -0,0 +1,56 @@
+<template>
+ <div class="password js-password">
+ <input
+ class="password__input form-control width-100% js-password__input"
+ type="password"
+ :name="name"
+ :id="id"
+ v-on:input="updateValue($event.target.value)"
+ />
+
+ <button class="password__btn flex flex-center js-password__btn js-tab-focus">
+ <span class="password__btn-label" aria-label="Show password" title="Show password"
+ ><i class="text-sm">Show</i></span
+ >
+ <span class="password__btn-label" aria-label="Hide password" title="Hide password"
+ ><i class="text-sm">Hide</i></span
+ >
+ </button>
+ </div>
+</template>
+
+<script>
+import { onMounted, computed, toRefs } from "vue";
+import initPasswordInput from "../PasswordInput/PasswordInput";
+export default {
+ props: {
+ name: String,
+ id: String,
+ value: {
+ type: String,
+ },
+ },
+
+ setup(props, context) {
+ const model = computed({
+ name: props.name,
+ id: props.id,
+ });
+
+ function updateValue(value) {
+ context.emit("input", value);
+ }
+
+ onMounted(() => {
+ initPasswordInput();
+ });
+
+ return { ...toRefs(model), updateValue };
+ },
+};
+</script>
+
+<style lang="scss">
+@import "../../styles/codyframe/_base.scss";
+@import "./PasswordInput";
+</style>
diff --git a/src/browser/src/views/Forgot.vue b/src/browser/src/views/Forgot.vue
index efe367c..422c902 100644
--- a/src/browser/src/views/Forgot.vue
+++ b/src/browser/src/views/Forgot.vue
@@ -38,7 +38,7 @@
<div class="text-center">
<p class="text-sm">
- <a href="http://localhost:5001/login">&larr; Back to login</a>
+ <a href="#0" v-on:click="login()">&larr; Back to login</a>
</p>
</div>
</form>
@@ -52,6 +52,7 @@ import { VueComponent as LoadingIcon } from "../assets/icons/loading.svg";
import { VueComponent as ChevronLeftIcon } from "../assets/icons/chevron_left.svg";
import account from "../api/account";
import router from "../router";
+
export default {
components: {
LoadingIcon,
@@ -86,13 +87,15 @@ export default {
displayError(errorData.title, errorData.message);
}
} catch (error) {
- console.error(error);
+ error(error);
displayError();
}
}
}
- return { ...toRefs(model), submitForm };
+ const login = () => account.signIn();
+
+ return { ...toRefs(model), submitForm, login };
},
};
</script>
diff --git a/src/browser/src/views/Login.vue b/src/browser/src/views/Login.vue
index c021fca..3a5d966 100644
--- a/src/browser/src/views/Login.vue
+++ b/src/browser/src/views/Login.vue
@@ -13,11 +13,12 @@ import account from "../api/account";
export default {
mounted() {
- if (!store.state.profile.profile.sub) {
+ let user = account.getUser().then((res) => res);
+ if (user) {
account
.signIn()
- .then((user) => console.log(user))
- .catch((err) => console.error(err));
+ .then((user) => log(user))
+ .catch((err) => error(err));
} else {
account.getUser().then((res) => {
store.commit("checkForAuthState");
diff --git a/src/browser/src/views/Signup.vue b/src/browser/src/views/Signup.vue
index 2f5854f..ee07734 100644
--- a/src/browser/src/views/Signup.vue
+++ b/src/browser/src/views/Signup.vue
@@ -3,6 +3,7 @@
<form @submit.prevent="submitForm()">
<div class="text-component text-center margin-bottom-sm">
<h1>dough - signup</h1>
+ <p>Already have an account? <a href="#0" v-on:click="login()">Log in</a></p>
</div>
<Alert v-if="isError" :title="error.title" :message="error.message" type="error" />
<div class="margin-bottom-sm">
@@ -14,6 +15,7 @@
id="name"
:disabled="isLoading == true"
v-model.trim="input.name"
+ autofocus
/>
</div>
@@ -34,14 +36,11 @@
<label class="form-label" for="password">Password</label>
</div>
- <input
- type="password"
- class="form-control width-100%"
+ <PasswordInput
name="password"
id="password"
:disabled="isLoading == true"
- v-model.trim="input.password"
- autofocus
+ v-model="input.password"
/>
</div>
@@ -62,7 +61,10 @@
</div>
<div class="text-center">
- <p class="text-sm">Have an account? <a href="#0" v-on:click="login()">Log in</a></p>
+ <p class="text-xs">
+ By joining, you agree to our <a href="#0">Terms</a> and
+ <a href="#0">Privacy Policy</a>.
+ </p>
</div>
</form>
</div>
@@ -72,9 +74,15 @@
import { toRefs, reactive } from "vue";
import router from "../router";
import { VueComponent as LoadingIcon } from "../assets/icons/loading.svg";
+import account from "../api/account";
+import Alert from "../components/Alert/Alert.vue";
+import PasswordInput from "../components/PasswordInput/PasswordInput.vue";
+
export default {
components: {
LoadingIcon,
+ Alert,
+ PasswordInput,
},
setup() {
const model = reactive({
@@ -91,10 +99,11 @@ export default {
},
});
- const login = () => router.replace("/login");
+ const login = () => account.signIn();
async function submitForm() {
- return;
+ model.isLoading = !model.isLoading;
+ console.log(model.input);
}
return { ...toRefs(model), login, submitForm };
generated by cgit v1.3 (git 2.53.0) at 2026-03-07 09:53:24 +0100